Skip to content

Commit 25fa84e

Browse files
LauraBeatrisLauraBeatris
committed
Move the description outside the label
1 parent 4e270d4 commit 25fa84e

File tree

1 file changed

+104
-134
lines changed
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt

1 file changed

+104
-134
lines changed

‎packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx‎

Lines changed: 104 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,7 @@ import type { SerializedStyles } from '@emotion/react';
66
import { css } from '@emotion/react';
77
import React, { forwardRef, useId, useLayoutEffect, useRef, useState } from 'react';
88

9-
import { ArrowRightIcon } from '@/icons';
109
import { useEnvironment } from '@/ui/contexts';
11-
import { Alert } from '@/ui/elements/Alert';
1210
import { Modal } from '@/ui/elements/Modal';
1311
import { InternalThemeProvider } from '@/ui/styledSystem';
1412

@@ -212,38 +210,6 @@ const EnableOrganizationsPromptInternal = ({
212210
description='Users can work outside of an organization with a personal account'
213211
/>
214212
</RadioGroup>
215-
216-
{!allowPersonalAccount && (
217-
<Alert
218-
variant='warning'
219-
sx={t => ({ marginTop: t.sizes.$3 })}
220-
>
221-
Existing users will be forced to join an organization, which may break your application. If you are
222-
unsure of the impact, please contact support before enabling.
223-
<a
224-
href='https://clerk.com/docs/authentication/configuration/session-tasks#available-tasks'
225-
target='_blank'
226-
rel='noopener noreferrer'
227-
css={css`
228-
display: flex;
229-
align-items: center;
230-
gap: 4px;
231-
font-weight: 600;
232-
margin-top: 4px;
233-
text-decoration: none;
234-
transition: all 120ms ease-in-out;
235-
`}
236-
>
237-
<span>Learn more</span>
238-
<ArrowRightIcon
239-
css={css`
240-
width: 16px;
241-
height: 16px;
242-
`}
243-
/>
244-
</a>
245-
</Alert>
246-
)}
247213
</Flex>
248214
)}
249215
</Flex>
@@ -422,7 +388,7 @@ const PromptBadge = ({ children }: PromptBadgeProps) => {
422388
border-radius: 0.25rem;
423389
font-size: 0.6875rem;
424390
font-weight: 500;
425-
line-height: 1.25;
391+
line-height: 1.23;
426392
background-color: #ebebeb;
427393
color: #2b2b34;
428394
`}
@@ -472,102 +438,104 @@ type RadioGroupItemProps = {
472438
description?: React.ReactNode;
473439
};
474440

441+
const RADIO_INDICATOR_SIZE = '1rem';
442+
const RADIO_GAP = '0.5rem';
443+
475444
const RadioGroupItem = ({ value, label, description }: RadioGroupItemProps) => {
476445
const { name, value: selectedValue, onChange } = useRadioGroup();
477446
const descriptionId = useId();
478447
const checked = value === selectedValue;
479448

480449
return (
481-
<label
482-
css={css`
483-
${basePromptElementStyles};
484-
display: flex;
485-
align-items: flex-start;
486-
gap: 0.5rem;
487-
cursor: pointer;
488-
user-select: none;
489-
490-
&:has(input:focus-visible) > span:first-of-type {
491-
outline: 2px solid white;
492-
outline-offset: 2px;
493-
}
494-
495-
&:hover:has(input:not(:checked)) > span:first-of-type {
496-
background-color: rgba(255, 255, 255, 0.08);
497-
}
498-
499-
&:hover:has(input:checked) > span:first-of-type {
500-
background-color: color-mix(in srgb, #6c47ff 80%, transparent);
501-
}
502-
`}
450+
<Flex
451+
direction='col'
452+
gap={1}
503453
>
504-
{/* Visually hidden input */}
505-
<input
506-
type='radio'
507-
name={name}
508-
value={value}
509-
checked={checked}
510-
onChange={() => onChange(value)}
511-
aria-describedby={description ? descriptionId : undefined}
454+
<label
512455
css={css`
513456
${basePromptElementStyles};
514-
position: absolute;
515-
width: 1px;
516-
height: 1px;
517-
padding: 0;
518-
margin: -1px;
519-
overflow: hidden;
520-
clip: rect(0, 0, 0, 0);
521-
white-space: nowrap;
522-
border-width: 0;
523-
`}
524-
/>
457+
display: flex;
458+
align-items: flex-start;
459+
gap: ${RADIO_GAP};
460+
cursor: pointer;
461+
user-select: none;
462+
463+
&:has(input:focus-visible) > span:first-of-type {
464+
outline: 2px solid white;
465+
outline-offset: 2px;
466+
}
525467
526-
<span
527-
aria-hidden='true'
528-
css={css`
529-
${basePromptElementStyles};
530-
position: relative;
531-
display: inline-flex;
532-
align-items: center;
533-
justify-content: center;
534-
width: 1rem;
535-
height: 1rem;
536-
margin-top: 0.125rem;
537-
flex-shrink: 0;
538-
border-radius: 50%;
539-
border: 1px solid rgba(255, 255, 255, 0.3);
540-
background-color: transparent;
541-
transition: 120ms ease-in-out;
542-
transition-property: border-color, background-color, box-shadow;
543-
544-
${checked &&
545-
css`
546-
border-width: 2px;
547-
border-color: #6c47ff;
548-
background-color: color-mix(in srgb, #6c47ff 100%, transparent);
549-
box-shadow: 0 0 0 2px rgba(108, 71, 255, 0.2);
550-
`}
468+
&:hover:has(input:not(:checked)) > span:first-of-type {
469+
background-color: rgba(255, 255, 255, 0.08);
470+
}
551471
552-
&::after {
553-
content: '';
472+
&:hover:has(input:checked) > span:first-of-type {
473+
background-color: color-mix(in srgb, #6c47ff 80%, transparent);
474+
}
475+
`}
476+
>
477+
<input
478+
type='radio'
479+
name={name}
480+
value={value}
481+
checked={checked}
482+
onChange={() => onChange(value)}
483+
aria-describedby={description ? descriptionId : undefined}
484+
css={css`
485+
${basePromptElementStyles};
554486
position: absolute;
555-
width: 0.375rem;
556-
height: 0.375rem;
487+
width: 1px;
488+
height: 1px;
489+
padding: 0;
490+
margin: -1px;
491+
overflow: hidden;
492+
clip: rect(0, 0, 0, 0);
493+
white-space: nowrap;
494+
border-width: 0;
495+
`}
496+
/>
497+
498+
<span
499+
aria-hidden='true'
500+
css={css`
501+
${basePromptElementStyles};
502+
position: relative;
503+
display: inline-flex;
504+
align-items: center;
505+
justify-content: center;
506+
width: ${RADIO_INDICATOR_SIZE};
507+
height: ${RADIO_INDICATOR_SIZE};
508+
margin-top: 0.125rem;
509+
flex-shrink: 0;
557510
border-radius: 50%;
558-
background-color: white;
559-
opacity: ${checked ? 1 : 0};
560-
transform: scale(${checked ? 1 : 0});
511+
border: 1px solid rgba(255, 255, 255, 0.3);
512+
background-color: transparent;
561513
transition: 120ms ease-in-out;
562-
transition-property: opacity, transform;
563-
}
564-
`}
565-
/>
514+
transition-property: border-color, background-color, box-shadow;
515+
516+
${checked &&
517+
css`
518+
border-width: 2px;
519+
border-color: #6c47ff;
520+
background-color: color-mix(in srgb, #6c47ff 100%, transparent);
521+
box-shadow: 0 0 0 2px rgba(108, 71, 255, 0.2);
522+
`}
523+
524+
&::after {
525+
content: '';
526+
position: absolute;
527+
width: 0.375rem;
528+
height: 0.375rem;
529+
border-radius: 50%;
530+
background-color: white;
531+
opacity: ${checked ? 1 : 0};
532+
transform: scale(${checked ? 1 : 0});
533+
transition: 120ms ease-in-out;
534+
transition-property: opacity, transform;
535+
}
536+
`}
537+
/>
566538

567-
<Flex
568-
direction='col'
569-
gap={1}
570-
>
571539
<span
572540
css={[
573541
basePromptElementStyles,
@@ -581,24 +549,26 @@ const RadioGroupItem = ({ value, label, description }: RadioGroupItemProps) => {
581549
>
582550
{label}
583551
</span>
584-
{description && (
585-
<span
586-
id={descriptionId}
587-
css={[
588-
basePromptElementStyles,
589-
css`
590-
font-size: 0.75rem;
591-
line-height: 1.33;
592-
color: #c3c3c6;
593-
text-wrap: pretty;
594-
`,
595-
]}
596-
>
597-
{description}
598-
</span>
599-
)}
600-
</Flex>
601-
</label>
552+
</label>
553+
554+
{description && (
555+
<span
556+
id={descriptionId}
557+
css={[
558+
basePromptElementStyles,
559+
css`
560+
padding-inline-start: calc(${RADIO_INDICATOR_SIZE} + ${RADIO_GAP});
561+
font-size: 0.75rem;
562+
line-height: 1.33;
563+
color: #c3c3c6;
564+
text-wrap: pretty;
565+
`,
566+
]}
567+
>
568+
{description}
569+
</span>
570+
)}
571+
</Flex>
602572
);
603573
};
604574

0 commit comments

Comments
 (0)