Skip to content

Commit ae5ac6d

Browse files
LekoArtsLekoArts
authored
Merge branch 'main' into brk.fix/sign-in-up-redirect-props
2 parents 90d214c + c07ed49 commit ae5ac6d

File tree

20 files changed

+350
-84
lines changed

20 files changed

+350
-84
lines changed

‎.changeset/brave-bees-kick.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
---
2+
---

‎.changeset/chilly-garlics-reply.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@clerk/clerk-js': patch
3+
---
4+
5+
In some instances your application logo (shown at the top of the sign-in/sign-up form of the prebuilt components) might have been distorted in browsers like Firefox. By applying `object-fit: contain` to the image's CSS the logo now fills its bounding box without being distorted.

‎.changeset/two-spiders-return.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
---
2+
---

‎.github/workflows/ci.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ jobs:
4343

4444
- name: Require Changeset
4545
if: ${{ !(github.event_name == 'merge_group') }}
46-
run: if [ "${{ github.event.pull_request.user.login }}" = "clerk-cookie" ]; then echo 'Skipping' && exit 0; else npx changeset status --since=origin/main; fi
46+
run: if [[ "${{ github.event.pull_request.user.login }}" = "clerk-cookie" || "${{ github.event.pull_request.user.login }}" = "renovate[bot]" ]]; then echo 'Skipping' && exit 0; else npx changeset status --since=origin/main; fi
4747

4848
- name: Lint GitHub Actions Workflows
4949
run: npx eslint .github

‎.github/workflows/pr-title-linter.yml‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,15 @@ jobs:
1616
steps:
1717
- name: Checkout Repo
1818
uses: actions/checkout@v4
19-
20-
- name: Setup
21-
id: config
22-
uses: ./.github/actions/init
2319
with:
24-
turbo-signature: ${{ secrets.TURBO_REMOTE_CACHE_SIGNATURE_KEY }}
25-
turbo-team: ${{ vars.TURBO_TEAM }}
26-
turbo-token: ${{ secrets.TURBO_TOKEN }}
27-
playwright-enabled: true # Must be present to enable caching on branched workflows
20+
show-progress: false
21+
sparse-checkout: |
22+
commitlint.config.ts
23+
packages/*/package.json
24+
sparse-checkout-cone-mode: false
2825

2926
- name: Lint Pull Request Title
30-
run: echo "${{ github.event.pull_request.title }}" | npx commitlint
27+
run: |
28+
npm init --scope=clerk --yes
29+
npm i --save-dev @commitlint/config-conventional @commitlint/cli globby --audit=false --fund=false
30+
echo "${{ github.event.pull_request.title }}" | npm exec @commitlint/cli -- --config commitlint.config.ts

‎commitlint.config.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
// All imports must be accounted for per `npm i` in .github/workflows/pr-title-linter.yml
12
import { globbySync } from 'globby';
23
import { readFileSync } from 'node:fs';
34

‎package-lock.json‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/clerk-js/src/ui/elements/ApplicationLogo.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,8 @@ export const ApplicationLogo = (props: ApplicationLogoProps) => {
4949
sx={{
5050
display: loaded ? 'inline-block' : 'none',
5151
height: '100%',
52-
width: 'auto',
52+
width: '100%',
53+
objectFit: 'contain',
5354
}}
5455
/>
5556
);
@@ -61,7 +62,6 @@ export const ApplicationLogo = (props: ApplicationLogoProps) => {
6162
sx={[
6263
theme => ({
6364
height: getContainerHeightForImageRatio(imageRef, theme.sizes.$4),
64-
objectFit: 'cover',
6565
justifyContent: 'center',
6666
}),
6767
props.sx,

‎packages/ui/src/components/sign-in/sign-in.tsx‎

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import * as Common from '@clerk/elements/common';
22
import * as SignIn from '@clerk/elements/sign-in';
3+
import * as React from 'react';
34

45
import { PROVIDERS } from '~/constants';
56
import { Button } from '~/primitives/button';
@@ -9,7 +10,14 @@ import * as Field from '~/primitives/field';
910
import * as Icon from '~/primitives/icon';
1011
import { Seperator } from '~/primitives/seperator';
1112

13+
type ConnectionName = (typeof PROVIDERS)[number]['name'];
14+
1215
export function SignInComponent() {
16+
const [busyConnectionName, setBusyConnectionName] = React.useState<ConnectionName | null>(null);
17+
const [isContinuing, setIsContinuing] = React.useState(false);
18+
19+
const hasBusyConnection = busyConnectionName !== null;
20+
1321
return (
1422
<SignIn.Root exampleMode>
1523
<SignIn.Step name='start'>
@@ -29,8 +37,13 @@ export function SignInComponent() {
2937
name={provider.id}
3038
asChild
3139
>
32-
<Connection.Button>
33-
<ConnectionIcon className='text-base' />
40+
<Connection.Button
41+
busy={busyConnectionName === provider.name}
42+
disabled={isContinuing || (hasBusyConnection && busyConnectionName !== provider.name)}
43+
icon={<ConnectionIcon className='text-base' />}
44+
onClick={() => setBusyConnectionName(provider.name)}
45+
key={provider.name}
46+
>
3447
{provider.name}
3548
</Connection.Button>
3649
</Common.Connection>
@@ -47,7 +60,7 @@ export function SignInComponent() {
4760
<Field.Label>Email address</Field.Label>
4861
</Common.Label>
4962
<Common.Input asChild>
50-
<Field.Input />
63+
<Field.Input disabled={isContinuing || hasBusyConnection} />
5164
</Common.Input>
5265
<Common.FieldError>
5366
{({ message }) => {
@@ -61,7 +74,14 @@ export function SignInComponent() {
6174
submit
6275
asChild
6376
>
64-
<Button>Continue</Button>
77+
<Button
78+
icon={<Icon.CaretRight />}
79+
busy={isContinuing}
80+
disabled={hasBusyConnection}
81+
onClick={() => setIsContinuing(true)}
82+
>
83+
Continue
84+
</Button>
6585
</SignIn.Action>
6686
</Card.Body>
6787
</Card.Content>

‎packages/ui/src/components/sign-up/sign-up.tsx‎

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import * as Common from '@clerk/elements/common';
22
import * as SignUp from '@clerk/elements/sign-up';
3+
import * as React from 'react';
34

45
import { PROVIDERS } from '~/constants';
56
import { Button } from '~/primitives/button';
@@ -9,7 +10,14 @@ import * as Field from '~/primitives/field';
910
import * as Icon from '~/primitives/icon';
1011
import { Seperator } from '~/primitives/seperator';
1112

13+
type ConnectionName = (typeof PROVIDERS)[number]['name'];
14+
1215
export function SignUpComponent() {
16+
const [busyConnectionName, setBusyConnectionName] = React.useState<ConnectionName | null>(null);
17+
const [isContinuing, setIsContinuing] = React.useState(false);
18+
19+
const hasBusyConnection = busyConnectionName !== null;
20+
1321
return (
1422
<SignUp.Root exampleMode>
1523
<SignUp.Step name='start'>
@@ -28,8 +36,13 @@ export function SignUpComponent() {
2836
key={provider.id}
2937
name={provider.id}
3038
>
31-
<Connection.Button>
32-
<ConnectionIcon className='text-base' />
39+
<Connection.Button
40+
busy={busyConnectionName === provider.name}
41+
disabled={isContinuing || (hasBusyConnection && busyConnectionName !== provider.name)}
42+
icon={<ConnectionIcon className='text-base' />}
43+
onClick={() => setBusyConnectionName(provider.name)}
44+
key={provider.name}
45+
>
3346
{provider.name}
3447
</Connection.Button>
3548
</Common.Connection>
@@ -46,7 +59,7 @@ export function SignUpComponent() {
4659
<Field.Label>Email address</Field.Label>
4760
</Common.Label>
4861
<Common.Input asChild>
49-
<Field.Input />
62+
<Field.Input disabled={isContinuing || hasBusyConnection} />
5063
</Common.Input>
5164
<Common.FieldError>
5265
{({ message }) => {
@@ -60,7 +73,14 @@ export function SignUpComponent() {
6073
submit
6174
asChild
6275
>
63-
<Button>Continue</Button>
76+
<Button
77+
icon={<Icon.CaretRight />}
78+
busy={isContinuing}
79+
disabled={hasBusyConnection}
80+
onClick={() => setIsContinuing(true)}
81+
>
82+
Continue
83+
</Button>
6484
</SignUp.Action>
6585
</Card.Body>
6686
</Card.Content>

0 commit comments

Comments
 (0)