From ef88185cd305e7898c2f45d7a0a97ccc86898867 Mon Sep 17 00:00:00 2001 From: Vaggelis Yfantis Date: Fri, 6 Oct 2023 17:59:01 +0300 Subject: [PATCH 1/5] fix(clerk-js): Removed loading spinner padding and constrained the social image to the parent width --- packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx | 5 ----- packages/clerk-js/src/ui/elements/SocialButtons.tsx | 2 +- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx b/packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx index 3a660ac2885..c43d4109594 100644 --- a/packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx +++ b/packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx @@ -80,11 +80,6 @@ export const ArrowBlockButton = (props: ArrowBlockButtonProps) => { elementDescriptor={spinnerElementDescriptor} elementId={spinnerElementId} size={'md'} - sx={theme => [ - { - padding: theme.space.$2, - }, - ]} /> ) : !isIconElement && leftIcon ? ( { isDisabled={card.isLoading} src={strategyToDisplayData[strategy].iconUrl} alt={`Sign in with ${strategyToDisplayData[strategy].name}`} - sx={theme => ({ width: theme.sizes.$5 })} + sx={theme => ({ width: theme.sizes.$5, height: 'auto', maxWidth: '100%' })} /> } /> From 999a7dbf18319929e6b0ff1148bec71c4a8796e2 Mon Sep 17 00:00:00 2001 From: Vaggelis Yfantis Date: Fri, 6 Oct 2023 22:47:30 +0300 Subject: [PATCH 2/5] chore(repo): Add changeset --- .changeset/honest-countries-repair.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/honest-countries-repair.md diff --git a/.changeset/honest-countries-repair.md b/.changeset/honest-countries-repair.md new file mode 100644 index 00000000000..45e57288d2c --- /dev/null +++ b/.changeset/honest-countries-repair.md @@ -0,0 +1,5 @@ +--- +'@clerk/clerk-js': patch +--- + +Updated the OAuth buttons in the SignIn and SignUp components to prevent layout shifts while loading. From 3f597a6dc8a283fad69984c6d00e6aeafb54f3ab Mon Sep 17 00:00:00 2001 From: Vaggelis Yfantis Date: Mon, 9 Oct 2023 17:10:47 +0300 Subject: [PATCH 3/5] feat(clerk-js): Added new size variant for Spinner --- packages/clerk-js/src/ui/common/InfiniteListSpinner.tsx | 2 +- .../clerk-js/src/ui/components/OrganizationList/shared.tsx | 2 +- .../src/ui/components/OrganizationProfile/DomainList.tsx | 2 +- packages/clerk-js/src/ui/primitives/Spinner.tsx | 7 ++++--- 4 files changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/clerk-js/src/ui/common/InfiniteListSpinner.tsx b/packages/clerk-js/src/ui/common/InfiniteListSpinner.tsx index 3c6ff742e5b..1a359c4ebe6 100644 --- a/packages/clerk-js/src/ui/common/InfiniteListSpinner.tsx +++ b/packages/clerk-js/src/ui/common/InfiniteListSpinner.tsx @@ -22,7 +22,7 @@ export const InfiniteListSpinner = forwardRef((_, ref) => { }} > diff --git a/packages/clerk-js/src/ui/components/OrganizationList/shared.tsx b/packages/clerk-js/src/ui/components/OrganizationList/shared.tsx index 6f94db10183..e3e0d7df8ec 100644 --- a/packages/clerk-js/src/ui/components/OrganizationList/shared.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationList/shared.tsx @@ -83,7 +83,7 @@ export const PreviewListSpinner = forwardRef((_, ref) => { }} > diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/DomainList.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/DomainList.tsx index e1fa90f9ef6..c4e78fe4399 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/DomainList.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationProfile/DomainList.tsx @@ -144,7 +144,7 @@ export const DomainList = (props: DomainListProps) => { }} > diff --git a/packages/clerk-js/src/ui/primitives/Spinner.tsx b/packages/clerk-js/src/ui/primitives/Spinner.tsx index 02c0d98c786..df9877056f7 100644 --- a/packages/clerk-js/src/ui/primitives/Spinner.tsx +++ b/packages/clerk-js/src/ui/primitives/Spinner.tsx @@ -37,8 +37,9 @@ const { applyVariants, filterProps } = createVariants(theme => { md: { [thickness]: theme.sizes.$1 }, }, size: { - sm: { [size]: theme.sizes.$3 }, - md: { [size]: theme.sizes.$4 }, + xs: { [size]: theme.sizes.$3 }, + sm: { [size]: theme.sizes.$4 }, + md: { [size]: theme.sizes.$5 }, lg: { [size]: theme.sizes.$6 }, xl: { [size]: theme.sizes.$8 }, }, @@ -50,7 +51,7 @@ const { applyVariants, filterProps } = createVariants(theme => { defaultVariants: { speed: 'normal', thickness: 'sm', - size: 'md', + size: 'sm', }, }; }); From 2394bf857573f42ec014c3ad53175095ff3b2961 Mon Sep 17 00:00:00 2001 From: Vaggelis Yfantis Date: Mon, 9 Oct 2023 17:12:43 +0300 Subject: [PATCH 4/5] feat(clerk-js): Increase icon and spinner size for ArrowBlockButton component --- packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx b/packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx index c43d4109594..696408c5ce7 100644 --- a/packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx +++ b/packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx @@ -73,7 +73,7 @@ export const ArrowBlockButton = (props: ArrowBlockButtonProps) => { ({ flex: `0 0 ${theme.space.$4}` })} + sx={theme => ({ flex: `0 0 ${theme.space.$5}` })} > {isLoading ? ( { sx={[ theme => ({ color: theme.colors.$blackAlpha600, - width: theme.sizes.$4, + width: theme.sizes.$5, position: 'absolute', }), leftIconSx, From 9efbefbd581376a787c6ce745bcf951ccdaee390 Mon Sep 17 00:00:00 2001 From: Vaggelis Yfantis Date: Tue, 10 Oct 2023 11:02:01 +0300 Subject: [PATCH 5/5] fix(clerk-js): Update Spinner size --- packages/clerk-js/src/ui/elements/Actions.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/clerk-js/src/ui/elements/Actions.tsx b/packages/clerk-js/src/ui/elements/Actions.tsx index 2fa1bc4313c..fcb2d339f61 100644 --- a/packages/clerk-js/src/ui/elements/Actions.tsx +++ b/packages/clerk-js/src/ui/elements/Actions.tsx @@ -95,7 +95,7 @@ export const Action = (props: ActionProps) => { sx={theme => ({ flex: `0 0 ${theme.sizes.$11}` })} > {status.isLoading ? ( - + ) : (