feat(settings): create ButtonPasskeySignin component#19986
feat(settings): create ButtonPasskeySignin component#19986MagentaManifold merged 1 commit intomainfrom
Conversation
|
The loading icon is a bit off-center, so I'm waiting on UX for a centered asset. Otherwise ready for review |
packages/fxa-settings/src/components/ButtonPasskeySignin/en.ftl
Outdated
Show resolved
Hide resolved
packages/fxa-settings/src/components/ButtonPasskeySignin/index.tsx
Outdated
Show resolved
Hide resolved
packages/fxa-settings/src/components/ButtonPasskeySignin/index.tsx
Outdated
Show resolved
Hide resolved
packages/fxa-settings/src/components/ButtonPasskeySignin/index.tsx
Outdated
Show resolved
Hide resolved
packages/fxa-settings/src/components/ButtonPasskeySignin/index.tsx
Outdated
Show resolved
Hide resolved
packages/fxa-settings/src/components/ButtonPasskeySignin/index.tsx
Outdated
Show resolved
Hide resolved
packages/fxa-settings/src/components/ButtonPasskeySignin/index.tsx
Outdated
Show resolved
Hide resolved
packages/fxa-settings/src/components/ButtonPasskeySignin/index.tsx
Outdated
Show resolved
Hide resolved
packages/fxa-settings/src/components/ButtonPasskeySignin/index.stories.tsx
Outdated
Show resolved
Hide resolved
MagentaManifold
force-pushed
the
FXA-12906
branch
from
686d6d4 to
2d71510
Compare
| @@ -0,0 +1,6 @@ | |||
| ## ButtonPasskeySignin | |||
|
|
|||
| button-passkey-signin = Sign in with Passkey | |||
There was a problem hiding this comment.
lowercase passkey :)
Also, I'm not sure if passkey/passkeys may be tricky to localize. Maybe this resource is helpful for at least a few locales? @bcolsson
There was a problem hiding this comment.
Agree with lower casing passkey.
Passkey has come up in Firefox already, so I assume locales will make them consistent there.
| }: ButtonPasskeySigninProps) => { | ||
| const buttonText = loading ? ( | ||
| <> | ||
| <LoadingArrowIcon className="h-5 w-5 me-4 animate-spin" ariaHidden /> |
There was a problem hiding this comment.
I agree with using ariaHidden for these icons 👍
I'm finding the spinning a bit fast, which might be because we have it set to spin: 'rotate 0.8s linear infinite' in our tailwind config. This works alright for larger animations, but maybe not for such a small icon. We may want to add an additional spin-slow option with something closer to 1.2s, maybe with ease-in-out?
Good news is that svgs in fxa-settings are already set, via tailwind config, to respect prefers-reduced-motion
MagentaManifold
force-pushed
the
FXA-12906
branch
2 times, most recently
from
05dfd62 to
5325cff
Compare
vpomerleau
left a comment
vpomerleau
left a comment
There was a problem hiding this comment.
Now that I'm seeing the animation with ease-in-out, I think linear might actually look better. Other than that this looks great to me! Thanks for the updates 👍
MagentaManifold
force-pushed
the
FXA-12906
branch
from
5325cff to
15507ba
Compare
Because: * we need a new button component for passkey sign in This commit: * creates ButtonPasskeySignin Closes FXA-12906
MagentaManifold
force-pushed
the
FXA-12906
branch
from
15507ba to
0250eee
Compare
3 participants
Because
This pull request
Issue that this pull request solves
Closes: FXA-12906
Checklist
Put an
xin the boxes that applyScreenshots (Optional)
Default:
Loading:
Other information (Optional)
Any other information that is important to this pull request.