From 512b700c297e799a5d80b0658e29c7c34e245b6c Mon Sep 17 00:00:00 2001 From: Marcel Cruz <12413903+marcelscruz@users.noreply.github.com> Date: Mon, 8 Jan 2024 14:01:14 -0300 Subject: [PATCH 01/11] fix(clerk-js): Divider text font-weight --- packages/clerk-js/src/ui/elements/Divider.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/clerk-js/src/ui/elements/Divider.tsx b/packages/clerk-js/src/ui/elements/Divider.tsx index 7f172970b8..ca83d62a91 100644 --- a/packages/clerk-js/src/ui/elements/Divider.tsx +++ b/packages/clerk-js/src/ui/elements/Divider.tsx @@ -18,7 +18,7 @@ export const Divider = (props: DividerProps) => { ({ margin: `0 ${t.space.$4}` })} /> From a6ca75b6a4daa3cddb2f95265e82c442ed07b69d Mon Sep 17 00:00:00 2001 From: Marcel Cruz <12413903+marcelscruz@users.noreply.github.com> Date: Mon, 8 Jan 2024 14:01:38 -0300 Subject: [PATCH 02/11] fix(clerk-js): Input box-shadow --- packages/clerk-js/src/ui/primitives/Input.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/clerk-js/src/ui/primitives/Input.tsx b/packages/clerk-js/src/ui/primitives/Input.tsx index 05ce9256f9..3d69f604fe 100644 --- a/packages/clerk-js/src/ui/primitives/Input.tsx +++ b/packages/clerk-js/src/ui/primitives/Input.tsx @@ -21,6 +21,10 @@ const { applyVariants, filterProps } = createVariants((theme, props) => ({ accentColor: theme.colors.$primary500, ...common.textVariants(theme).body, ...common.borderVariants(theme, props).normal, + boxShadow: common + .shadows(theme) + .input.replace('{{color1}}', theme.colors.$blackAlpha100) + .replace('{{color2}}', theme.colors.$blackAlpha150), ...common.disabled(theme), [mqu.ios]: { fontSize: theme.fontSizes.$lg, From 6a95c13b150b42335764298c43a6d379f63abf53 Mon Sep 17 00:00:00 2001 From: Marcel Cruz <12413903+marcelscruz@users.noreply.github.com> Date: Mon, 8 Jan 2024 14:13:21 -0300 Subject: [PATCH 03/11] fix(clerk-js): Primary button background and box-shadow --- packages/clerk-js/src/ui/primitives/Button.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/clerk-js/src/ui/primitives/Button.tsx b/packages/clerk-js/src/ui/primitives/Button.tsx index 912b701aa6..2767e29c93 100644 --- a/packages/clerk-js/src/ui/primitives/Button.tsx +++ b/packages/clerk-js/src/ui/primitives/Button.tsx @@ -54,7 +54,7 @@ const { applyVariants, filterProps } = createVariants((theme, props: OwnProps) = borderRadius: 'inherit', zIndex: -1, inset: 0, - background: `linear-gradient(180deg, ${theme.colors.$whiteAlpha300} 0%, ${theme.colors.$transparent} 100%)`, + background: `linear-gradient(180deg, ${theme.colors.$whiteAlpha150} 0%, ${theme.colors.$transparent} 100%)`, }, ':after': { position: 'absolute', @@ -65,7 +65,7 @@ const { applyVariants, filterProps } = createVariants((theme, props: OwnProps) = opacity: 0, transitionProperty: theme.transitionProperty.$common, transitionDuration: theme.transitionDuration.$controls, - background: `linear-gradient(180deg, ${theme.colors.$whiteAlpha200} 0%, ${theme.colors.$transparent} 100%)`, + background: `linear-gradient(180deg, ${theme.colors.$whiteAlpha100} 0%, ${theme.colors.$transparent} 100%)`, }, ':hover::after': { opacity: 1, From 5cf70298fedef0fc4a1a6666e9f2a9d7aa754259 Mon Sep 17 00:00:00 2001 From: Marcel Cruz <12413903+marcelscruz@users.noreply.github.com> Date: Mon, 8 Jan 2024 14:25:44 -0300 Subject: [PATCH 04/11] fix(clerk-js): Form secondary action text size and weight --- packages/clerk-js/src/ui/elements/FieldControl.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/clerk-js/src/ui/elements/FieldControl.tsx b/packages/clerk-js/src/ui/elements/FieldControl.tsx index 39cbebd6c6..9328dda2ce 100644 --- a/packages/clerk-js/src/ui/elements/FieldControl.tsx +++ b/packages/clerk-js/src/ui/elements/FieldControl.tsx @@ -59,6 +59,7 @@ const FieldAction = ( elementId={descriptors.formFieldLabel.setId(fieldId)} isDisabled={isDisabled} colorScheme='primary' + variant='buttonSmall' onClick={e => { e.preventDefault(); props.onClick?.(e); From 9de04f6fb2d6a3521af111571aa87997d407a79b Mon Sep 17 00:00:00 2001 From: Marcel Cruz <12413903+marcelscruz@users.noreply.github.com> Date: Mon, 8 Jan 2024 14:50:00 -0300 Subject: [PATCH 05/11] fix(clerk-js): Font sizes for xs and sm and "optional" label color --- packages/clerk-js/src/ui/elements/FieldControl.tsx | 2 +- packages/clerk-js/src/ui/foundations/typography.ts | 4 ++-- packages/clerk-js/src/ui/primitives/Text.tsx | 1 + 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/clerk-js/src/ui/elements/FieldControl.tsx b/packages/clerk-js/src/ui/elements/FieldControl.tsx index 9328dda2ce..a03d646ac6 100644 --- a/packages/clerk-js/src/ui/elements/FieldControl.tsx +++ b/packages/clerk-js/src/ui/elements/FieldControl.tsx @@ -79,7 +79,7 @@ const FieldOptionalLabel = () => { elementId={descriptors.formFieldHintText.setId(fieldId)} as='span' variant='caption' - colorScheme='neutral' + colorScheme='tertiary' isDisabled={isDisabled} /> ); diff --git a/packages/clerk-js/src/ui/foundations/typography.ts b/packages/clerk-js/src/ui/foundations/typography.ts index 229f0b8fb8..305182c14d 100644 --- a/packages/clerk-js/src/ui/foundations/typography.ts +++ b/packages/clerk-js/src/ui/foundations/typography.ts @@ -20,8 +20,8 @@ const letterSpacings = Object.freeze({ // This is directly related to the createFontSizeScale function in the theme // ref: src/ui/customizables/parseVariables.ts const fontSizes = Object.freeze({ - xs: '0.65rem', - sm: '0.73125rem', + xs: '0.6875rem', + sm: '0.75rem', md: '0.8125rem', lg: '1.05625rem', xl: '1.503125rem', diff --git a/packages/clerk-js/src/ui/primitives/Text.tsx b/packages/clerk-js/src/ui/primitives/Text.tsx index a098b6470e..bd3e5869af 100644 --- a/packages/clerk-js/src/ui/primitives/Text.tsx +++ b/packages/clerk-js/src/ui/primitives/Text.tsx @@ -23,6 +23,7 @@ const { applyVariants, filterProps } = createVariants(theme => { danger: { color: theme.colors.$danger500 }, success: { color: theme.colors.$success500 }, neutral: { color: theme.colors.$colorTextSecondary }, + tertiary: { color: theme.colors.$colorTextTertiary }, inherit: { color: 'inherit' }, }, truncate: { From 9032a3dbd3985e7d9f1d866fe816988185b12c95 Mon Sep 17 00:00:00 2001 From: Marcel Cruz <12413903+marcelscruz@users.noreply.github.com> Date: Mon, 8 Jan 2024 14:54:07 -0300 Subject: [PATCH 06/11] fix(clerk-js): Phone input box-shadow --- packages/clerk-js/src/ui/elements/PhoneInput/PhoneInput.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/clerk-js/src/ui/elements/PhoneInput/PhoneInput.tsx b/packages/clerk-js/src/ui/elements/PhoneInput/PhoneInput.tsx index 8e322adce2..570b000feb 100644 --- a/packages/clerk-js/src/ui/elements/PhoneInput/PhoneInput.tsx +++ b/packages/clerk-js/src/ui/elements/PhoneInput/PhoneInput.tsx @@ -70,6 +70,10 @@ const PhoneInputBase = forwardRef((props, ref hasError={rest.hasError} sx={theme => ({ ...common.borderVariants(theme).normal, + boxShadow: common + .shadows(theme) + .input.replace('{{color1}}', theme.colors.$blackAlpha100) + .replace('{{color2}}', theme.colors.$blackAlpha150), position: 'relative', borderRadius: theme.radii.$md, zIndex: 1, From 7bc31ede1c4735b5a11c08f7af58aba1adc9d21c Mon Sep 17 00:00:00 2001 From: Marcel Cruz <12413903+marcelscruz@users.noreply.github.com> Date: Mon, 8 Jan 2024 15:13:53 -0300 Subject: [PATCH 07/11] fix(clerk-js): Alternative methods back button text --- .changeset/soft-rats-grab.md | 2 ++ packages/clerk-js/src/ui/elements/BackLink.tsx | 2 +- packages/localizations/src/en-US.ts | 1 + packages/types/src/localization.ts | 1 + 4 files changed, 5 insertions(+), 1 deletion(-) create mode 100644 .changeset/soft-rats-grab.md diff --git a/.changeset/soft-rats-grab.md b/.changeset/soft-rats-grab.md new file mode 100644 index 0000000000..a845151cc8 --- /dev/null +++ b/.changeset/soft-rats-grab.md @@ -0,0 +1,2 @@ +--- +--- diff --git a/packages/clerk-js/src/ui/elements/BackLink.tsx b/packages/clerk-js/src/ui/elements/BackLink.tsx index 06c2b39931..43605b8e6f 100644 --- a/packages/clerk-js/src/ui/elements/BackLink.tsx +++ b/packages/clerk-js/src/ui/elements/BackLink.tsx @@ -17,7 +17,7 @@ export const BackLink = (props: BackLinkProps) => { > diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts index fe3e73836b..031df83cf6 100644 --- a/packages/localizations/src/en-US.ts +++ b/packages/localizations/src/en-US.ts @@ -247,6 +247,7 @@ export const enUS: LocalizationResource = { subtitle: 'Facing issues? You can use any of these methods to sign in.', actionLink: 'Get help', actionText: 'Don’t have any of these?', + backLink: 'Back to previous method', blockButton__emailLink: 'Email link to {{identifier}}', blockButton__emailCode: 'Email code to {{identifier}}', blockButton__phoneCode: 'Send SMS code to {{identifier}}', diff --git a/packages/types/src/localization.ts b/packages/types/src/localization.ts index 29b13a4680..1abd1c2977 100644 --- a/packages/types/src/localization.ts +++ b/packages/types/src/localization.ts @@ -262,6 +262,7 @@ type _LocalizationResource = { actionLink: LocalizationValue; actionText: LocalizationValue; subtitle: LocalizationValue; + backLink: LocalizationValue; blockButton__emailLink: LocalizationValue; blockButton__emailCode: LocalizationValue; blockButton__phoneCode: LocalizationValue; From ee9bc89b99c8b4d47925265832826b50b0a46c72 Mon Sep 17 00:00:00 2001 From: Marcel Cruz <12413903+marcelscruz@users.noreply.github.com> Date: Mon, 8 Jan 2024 16:07:59 -0300 Subject: [PATCH 08/11] fix(clerk-js): Update tests --- .changeset/yellow-frogs-teach.md | 2 ++ .../src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsx | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) create mode 100644 .changeset/yellow-frogs-teach.md diff --git a/.changeset/yellow-frogs-teach.md b/.changeset/yellow-frogs-teach.md new file mode 100644 index 0000000000..a845151cc8 --- /dev/null +++ b/.changeset/yellow-frogs-teach.md @@ -0,0 +1,2 @@ +--- +--- diff --git a/packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsx b/packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsx index da604fbc4e..8c8ed2e661 100644 --- a/packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsx +++ b/packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsx @@ -624,7 +624,7 @@ describe('SignInFactorOne', () => { const { userEvent } = render(, { wrapper }); await userEvent.click(screen.getByText('Use another method')); - await userEvent.click(screen.getByText('Back')); + await userEvent.click(screen.getByText('Back to previous method')); screen.getByText('Enter your password'); }); From f524eb9460351fecb2165642c0a871e1e8f0fb84 Mon Sep 17 00:00:00 2001 From: Marcel Cruz <12413903+marcelscruz@users.noreply.github.com> Date: Tue, 9 Jan 2024 10:31:53 -0300 Subject: [PATCH 09/11] fix(clerk-js): Revert font-size change for xs and sm --- .changeset/light-apples-joke.md | 2 ++ packages/clerk-js/src/ui/foundations/typography.ts | 4 ++-- 2 files changed, 4 insertions(+), 2 deletions(-) create mode 100644 .changeset/light-apples-joke.md diff --git a/.changeset/light-apples-joke.md b/.changeset/light-apples-joke.md new file mode 100644 index 0000000000..a845151cc8 --- /dev/null +++ b/.changeset/light-apples-joke.md @@ -0,0 +1,2 @@ +--- +--- diff --git a/packages/clerk-js/src/ui/foundations/typography.ts b/packages/clerk-js/src/ui/foundations/typography.ts index 305182c14d..229f0b8fb8 100644 --- a/packages/clerk-js/src/ui/foundations/typography.ts +++ b/packages/clerk-js/src/ui/foundations/typography.ts @@ -20,8 +20,8 @@ const letterSpacings = Object.freeze({ // This is directly related to the createFontSizeScale function in the theme // ref: src/ui/customizables/parseVariables.ts const fontSizes = Object.freeze({ - xs: '0.6875rem', - sm: '0.75rem', + xs: '0.65rem', + sm: '0.73125rem', md: '0.8125rem', lg: '1.05625rem', xl: '1.503125rem', From b12201f2fdbb17e96fb6773309a78d1249502010 Mon Sep 17 00:00:00 2001 From: Vaggelis Yfantis Date: Thu, 11 Jan 2024 18:30:22 +0200 Subject: [PATCH 10/11] fix(clerk-js): Reduce breaking changes in localization --- .../ui/components/SignIn/__tests__/SignInFactorOne.test.tsx | 2 +- packages/clerk-js/src/ui/elements/BackLink.tsx | 2 +- packages/clerk-js/src/ui/elements/PhoneInput/PhoneInput.tsx | 4 ---- packages/clerk-js/src/ui/primitives/Input.tsx | 5 ----- packages/localizations/src/en-US.ts | 1 - packages/types/src/localization.ts | 1 - 6 files changed, 2 insertions(+), 13 deletions(-) diff --git a/packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsx b/packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsx index 8c8ed2e661..da604fbc4e 100644 --- a/packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsx +++ b/packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsx @@ -624,7 +624,7 @@ describe('SignInFactorOne', () => { const { userEvent } = render(, { wrapper }); await userEvent.click(screen.getByText('Use another method')); - await userEvent.click(screen.getByText('Back to previous method')); + await userEvent.click(screen.getByText('Back')); screen.getByText('Enter your password'); }); diff --git a/packages/clerk-js/src/ui/elements/BackLink.tsx b/packages/clerk-js/src/ui/elements/BackLink.tsx index 43605b8e6f..06c2b39931 100644 --- a/packages/clerk-js/src/ui/elements/BackLink.tsx +++ b/packages/clerk-js/src/ui/elements/BackLink.tsx @@ -17,7 +17,7 @@ export const BackLink = (props: BackLinkProps) => { > diff --git a/packages/clerk-js/src/ui/elements/PhoneInput/PhoneInput.tsx b/packages/clerk-js/src/ui/elements/PhoneInput/PhoneInput.tsx index 570b000feb..8e322adce2 100644 --- a/packages/clerk-js/src/ui/elements/PhoneInput/PhoneInput.tsx +++ b/packages/clerk-js/src/ui/elements/PhoneInput/PhoneInput.tsx @@ -70,10 +70,6 @@ const PhoneInputBase = forwardRef((props, ref hasError={rest.hasError} sx={theme => ({ ...common.borderVariants(theme).normal, - boxShadow: common - .shadows(theme) - .input.replace('{{color1}}', theme.colors.$blackAlpha100) - .replace('{{color2}}', theme.colors.$blackAlpha150), position: 'relative', borderRadius: theme.radii.$md, zIndex: 1, diff --git a/packages/clerk-js/src/ui/primitives/Input.tsx b/packages/clerk-js/src/ui/primitives/Input.tsx index 3d69f604fe..fa7b98b8eb 100644 --- a/packages/clerk-js/src/ui/primitives/Input.tsx +++ b/packages/clerk-js/src/ui/primitives/Input.tsx @@ -21,11 +21,6 @@ const { applyVariants, filterProps } = createVariants((theme, props) => ({ accentColor: theme.colors.$primary500, ...common.textVariants(theme).body, ...common.borderVariants(theme, props).normal, - boxShadow: common - .shadows(theme) - .input.replace('{{color1}}', theme.colors.$blackAlpha100) - .replace('{{color2}}', theme.colors.$blackAlpha150), - ...common.disabled(theme), [mqu.ios]: { fontSize: theme.fontSizes.$lg, }, diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts index 031df83cf6..fe3e73836b 100644 --- a/packages/localizations/src/en-US.ts +++ b/packages/localizations/src/en-US.ts @@ -247,7 +247,6 @@ export const enUS: LocalizationResource = { subtitle: 'Facing issues? You can use any of these methods to sign in.', actionLink: 'Get help', actionText: 'Don’t have any of these?', - backLink: 'Back to previous method', blockButton__emailLink: 'Email link to {{identifier}}', blockButton__emailCode: 'Email code to {{identifier}}', blockButton__phoneCode: 'Send SMS code to {{identifier}}', diff --git a/packages/types/src/localization.ts b/packages/types/src/localization.ts index 1abd1c2977..29b13a4680 100644 --- a/packages/types/src/localization.ts +++ b/packages/types/src/localization.ts @@ -262,7 +262,6 @@ type _LocalizationResource = { actionLink: LocalizationValue; actionText: LocalizationValue; subtitle: LocalizationValue; - backLink: LocalizationValue; blockButton__emailLink: LocalizationValue; blockButton__emailCode: LocalizationValue; blockButton__phoneCode: LocalizationValue; From 9603b6076d8043508711a2b27b3f697fce0d2f2a Mon Sep 17 00:00:00 2001 From: Vaggelis Yfantis Date: Thu, 11 Jan 2024 18:33:17 +0200 Subject: [PATCH 11/11] fix(clerk-js): Revert wrongly removed disabled styles from Input component --- packages/clerk-js/src/ui/primitives/Input.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/clerk-js/src/ui/primitives/Input.tsx b/packages/clerk-js/src/ui/primitives/Input.tsx index fa7b98b8eb..05ce9256f9 100644 --- a/packages/clerk-js/src/ui/primitives/Input.tsx +++ b/packages/clerk-js/src/ui/primitives/Input.tsx @@ -21,6 +21,7 @@ const { applyVariants, filterProps } = createVariants((theme, props) => ({ accentColor: theme.colors.$primary500, ...common.textVariants(theme).body, ...common.borderVariants(theme, props).normal, + ...common.disabled(theme), [mqu.ios]: { fontSize: theme.fontSizes.$lg, },