From 9a3464403eaaee959af7b685bc7abe5d59345568 Mon Sep 17 00:00:00 2001 From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com> Date: Fri, 12 Dec 2025 11:28:44 -0300 Subject: [PATCH 01/11] Add first draft for radio group --- .changeset/tasty-coats-tickle.md | 5 + .../EnableOrganizationsPrompt/index.tsx | 246 +++++++++--------- 2 files changed, 131 insertions(+), 120 deletions(-) create mode 100644 .changeset/tasty-coats-tickle.md diff --git a/.changeset/tasty-coats-tickle.md b/.changeset/tasty-coats-tickle.md new file mode 100644 index 00000000000..7abec1f6bac --- /dev/null +++ b/.changeset/tasty-coats-tickle.md @@ -0,0 +1,5 @@ +--- +'@clerk/ui': patch +--- + +Introduce radio group for `EnableOrganizationsPrompt` diff --git a/packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx b/packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx index 0be43788a0e..c6b86d3c5e2 100644 --- a/packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx +++ b/packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx @@ -1,16 +1,16 @@ -import { useClerk } from '@clerk/shared/react'; +import { createContextAndHook, useClerk } from '@clerk/shared/react'; import type { __internal_EnableOrganizationsPromptProps, EnableEnvironmentSettingParams } from '@clerk/shared/types'; // eslint-disable-next-line no-restricted-imports import type { SerializedStyles } from '@emotion/react'; // eslint-disable-next-line no-restricted-imports -import { css, type Theme } from '@emotion/react'; -import { forwardRef, useId, useLayoutEffect, useRef, useState } from 'react'; +import { css } from '@emotion/react'; +import React, { forwardRef, useId, useLayoutEffect, useRef, useState } from 'react'; import { useEnvironment } from '@/ui/contexts'; import { Modal } from '@/ui/elements/Modal'; -import { common, InternalThemeProvider } from '@/ui/styledSystem'; +import { InternalThemeProvider } from '@/ui/styledSystem'; -import { Box, Flex, Span } from '../../../customizables'; +import { Box, Flex } from '../../../customizables'; import { Portal } from '../../../elements/Portal'; import { basePromptElementStyles, ClerkLogoIcon, PromptContainer, PromptSuccessIcon } from '../shared'; @@ -197,12 +197,21 @@ const EnableOrganizationsPromptInternal = ({ })} > ({ marginTop: t.sizes.$2 })}> - setAllowPersonalAccount(prev => !prev)} - /> + setAllowPersonalAccount(value === 'allow')} + > + + + @@ -368,136 +377,133 @@ const PromptButton = forwardRef(({ variant ); }); -type SwitchProps = React.ComponentProps<'input'> & { +type RadioGroupContextValue = { + name: string; + value: string; + onChange: (value: string) => void; +}; + +const [RadioGroupContext, useRadioGroup] = createContextAndHook('RadioGroupContext'); + +type RadioGroupProps = { + value: string; + onChange: (value: string) => void; + children: React.ReactNode; +}; + +const RadioGroup = ({ value, onChange, children }: RadioGroupProps) => { + const name = useId(); + const contextValue = React.useMemo(() => ({ value: { name, value, onChange } }), [name, value, onChange]); + + return ( + + + {children} + + + ); +}; + +type RadioGroupItemProps = { + value: string; label: string; description?: string; }; -const TRACK_PADDING = '2px'; -const TRACK_INNER_WIDTH = (t: Theme) => t.sizes.$6; -const TRACK_HEIGHT = (t: Theme) => t.sizes.$4; -const THUMB_WIDTH = (t: Theme) => t.sizes.$3; - -const Switch = forwardRef( - ({ label, description, checked: controlledChecked, defaultChecked, onChange, ...props }, ref) => { - const descriptionId = useId(); +const RadioGroupItem = ({ value, label, description }: RadioGroupItemProps) => { + const { name, value: selectedValue, onChange } = useRadioGroup(); + const descriptionId = useId(); + const checked = value === selectedValue; - const isControlled = controlledChecked !== undefined; - const [internalChecked, setInternalChecked] = useState(!!defaultChecked); - const checked = isControlled ? controlledChecked : internalChecked; + return ( + + onChange(value)} + aria-describedby={description ? descriptionId : undefined} + css={css` + ${basePromptElementStyles}; + appearance: none; + width: 1rem; + height: 1rem; + margin: 0; + margin-top: 0.125rem; + border: 1px solid rgba(255, 255, 255, 0.3); + border-radius: 50%; + background-color: transparent; + cursor: pointer; + flex-shrink: 0; + transition: 120ms ease-in-out; + transition-property: border-color, background-color, box-shadow; + + &:checked { + border-color: #fff; + background-color: #fff; + box-shadow: inset 0 0 0 3px #1f1f1f; + } - const handleChange = (e: React.ChangeEvent) => { - if (!isControlled) { - setInternalChecked(e.target.checked); - } - onChange?.(e); - }; + &:focus-visible { + outline: 2px solid white; + outline-offset: 2px; + } - return ( + &:hover:not(:checked) { + border-color: rgba(255, 255, 255, 0.5); + } + `} + /> - input + span': { - outline: '2px solid white', - outlineOffset: '2px', - }, - '&:has(input:disabled) > input + span': { - opacity: 0.6, - cursor: 'not-allowed', - pointerEvents: 'none', - }, - }} + - - { - const trackWidth = `calc(${TRACK_INNER_WIDTH(t)} + ${TRACK_PADDING} + ${TRACK_PADDING})`; - const trackHeight = `calc(${TRACK_HEIGHT(t)} + ${TRACK_PADDING})`; - return { - display: 'flex', - alignItems: 'center', - paddingInline: TRACK_PADDING, - width: trackWidth, - height: trackHeight, - border: '1px solid rgba(255, 255, 255, 0.2)', - backgroundColor: checked ? '#6C47FF' : 'rgba(0, 0, 0, 0.2)', - borderRadius: 999, - transition: 'background-color 0.2s ease-in-out', - }; - }} - > - { - const size = THUMB_WIDTH(t); - const maxTranslateX = `calc(${TRACK_INNER_WIDTH(t)} - ${size} - ${TRACK_PADDING})`; - return { - width: size, - height: size, - borderRadius: 9999, - backgroundColor: 'white', - boxShadow: '0px 0px 0px 1px rgba(0, 0, 0, 0.1)', - transform: `translateX(${checked ? maxTranslateX : '0'})`, - transition: 'transform 0.2s ease-in-out', - '@media (prefers-reduced-motion: reduce)': { - transition: 'none', - }, - }; - }} - /> - + {label} + + {description && ( - {label} - - - {description ? ( - [ - basePromptElementStyles, - { - display: 'block', - paddingInlineStart: `calc(${TRACK_INNER_WIDTH(t)} + ${TRACK_PADDING} + ${TRACK_PADDING} + ${t.sizes.$2})`, - fontSize: '0.75rem', - lineHeight: '1.3333333333', - color: '#c3c3c6', - textWrap: 'pretty', - }, - ]} > {description} - - ) : null} + + )} - ); - }, -); + + ); +}; const Link = forwardRef & { css?: SerializedStyles }>( ({ children, css: cssProp, ...props }, ref) => { From 3df9cd8055f326e0932537a28bd2b040c107458e Mon Sep 17 00:00:00 2001 From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com> Date: Mon, 15 Dec 2025 12:40:21 -0300 Subject: [PATCH 02/11] Refactor radio item styles --- .../EnableOrganizationsPrompt/index.tsx | 95 ++++++++++++++----- 1 file changed, 69 insertions(+), 26 deletions(-) diff --git a/packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx b/packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx index c6b86d3c5e2..21aafdb127f 100644 --- a/packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx +++ b/packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx @@ -420,15 +420,33 @@ const RadioGroupItem = ({ value, label, description }: RadioGroupItemProps) => { const checked = value === selectedValue; return ( - span:first-of-type { + outline: 2px solid white; + outline-offset: 2px; + } + + /* Hover state for unchecked indicator */ + &:hover:has(input:not(:checked)) > span:first-of-type { + background-color: rgba(255, 255, 255, 0.08); + } + + /* Hover state for checked indicator */ + &:hover:has(input:checked) > span:first-of-type { + background-color: color-mix(in srgb, #6c47ff 80%, transparent); + } + `} > + {/* Visually hidden input */} { aria-describedby={description ? descriptionId : undefined} css={css` ${basePromptElementStyles}; - appearance: none; + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; + `} + /> + + )} - + ); }; From 5ef3bb545a75077dc62dd981997f5842fa9eb998 Mon Sep 17 00:00:00 2001 From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com> Date: Mon, 15 Dec 2025 12:43:38 -0300 Subject: [PATCH 03/11] Update label copy --- .../devPrompts/EnableOrganizationsPrompt/index.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx b/packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx index 21aafdb127f..0251bd2b815 100644 --- a/packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx +++ b/packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx @@ -204,12 +204,17 @@ const EnableOrganizationsPromptInternal = ({ + Users need to belong to at least one organization. + Common for most B2B SaaS applications + + } /> @@ -411,7 +416,7 @@ const RadioGroup = ({ value, onChange, children }: RadioGroupProps) => { type RadioGroupItemProps = { value: string; label: string; - description?: string; + description?: React.ReactNode; }; const RadioGroupItem = ({ value, label, description }: RadioGroupItemProps) => { From 6b3dd6fe556553597dc2088ccee09a1d060cc1a5 Mon Sep 17 00:00:00 2001 From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com> Date: Mon, 15 Dec 2025 12:56:41 -0300 Subject: [PATCH 04/11] Add most common badge --- .../EnableOrganizationsPrompt/index.tsx | 34 +++++++++++++++++-- 1 file changed, 32 insertions(+), 2 deletions(-) diff --git a/packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx b/packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx index 0251bd2b815..a4bb9b0df59 100644 --- a/packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx +++ b/packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx @@ -203,7 +203,12 @@ const EnableOrganizationsPromptInternal = ({ > + Require organization membership + Most common + + } description={ <> Users need to belong to at least one organization. @@ -382,6 +387,31 @@ const PromptButton = forwardRef(({ variant ); }); +type PromptBadgeProps = { + children: React.ReactNode; +}; + +const PromptBadge = ({ children }: PromptBadgeProps) => { + return ( + + {children} + + ); +}; + type RadioGroupContextValue = { name: string; value: string; @@ -415,7 +445,7 @@ const RadioGroup = ({ value, onChange, children }: RadioGroupProps) => { type RadioGroupItemProps = { value: string; - label: string; + label: React.ReactNode; description?: React.ReactNode; }; From ad86432e1c27ed418b8ac34431215b91bca2cd49 Mon Sep 17 00:00:00 2001 From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com> Date: Mon, 15 Dec 2025 13:50:11 -0300 Subject: [PATCH 05/11] Show alert once membership is required --- .../EnableOrganizationsPrompt/index.tsx | 109 ++++++++++-------- 1 file changed, 61 insertions(+), 48 deletions(-) diff --git a/packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx b/packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx index a4bb9b0df59..b21dd5cd7c3 100644 --- a/packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx +++ b/packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx @@ -6,11 +6,13 @@ import type { SerializedStyles } from '@emotion/react'; import { css } from '@emotion/react'; import React, { forwardRef, useId, useLayoutEffect, useRef, useState } from 'react'; +import { ArrowRightIcon } from '@/icons'; import { useEnvironment } from '@/ui/contexts'; +import { Alert } from '@/ui/elements/Alert'; import { Modal } from '@/ui/elements/Modal'; import { InternalThemeProvider } from '@/ui/styledSystem'; -import { Box, Flex } from '../../../customizables'; +import { Flex } from '../../../customizables'; import { Portal } from '../../../elements/Portal'; import { basePromptElementStyles, ClerkLogoIcon, PromptContainer, PromptSuccessIcon } from '../shared'; @@ -178,53 +180,68 @@ const EnableOrganizationsPromptInternal = ({ {hasPersonalAccountsEnabled && ( - ({ - display: 'grid', - gridTemplateRows: isEnabled ? '0fr' : '1fr', - transition: `grid-template-rows ${t.transitionDuration.$slower} ${t.transitionTiming.$slowBezier}`, - marginInline: '-0.5rem', - overflow: 'hidden', - })} - {...(isEnabled && { inert: '' })} + ({ marginTop: t.sizes.$2 })} + direction='col' > - ({ - minHeight: 0, - paddingInline: '0.5rem', - opacity: isEnabled ? 0 : 1, - transition: `opacity ${t.transitionDuration.$slower} ${t.transitionTiming.$slowBezier}`, - })} + setAllowPersonalAccount(value === 'allow')} > - ({ marginTop: t.sizes.$2 })}> - setAllowPersonalAccount(value === 'allow')} + + Require organization membership + Most common + + } + description={ + <> + Users need to belong to at least one organization. + Common for most B2B SaaS applications + + } + /> + + + + {!allowPersonalAccount && ( + ({ marginTop: t.sizes.$3 })} + > + Existing users will be forced to join an organization, which may break your application. If you are + unsure of the impact, please contact support before enabling. + - - Require organization membership - Most common - - } - description={ - <> - Users need to belong to at least one organization. - Common for most B2B SaaS applications - - } - /> - Learn more + - - - - + + + )} + )} @@ -464,18 +481,15 @@ const RadioGroupItem = ({ value, label, description }: RadioGroupItemProps) => { cursor: pointer; user-select: none; - /* Focus-visible state for indicator */ &:has(input:focus-visible) > span:first-of-type { outline: 2px solid white; outline-offset: 2px; } - /* Hover state for unchecked indicator */ &:hover:has(input:not(:checked)) > span:first-of-type { background-color: rgba(255, 255, 255, 0.08); } - /* Hover state for checked indicator */ &:hover:has(input:checked) > span:first-of-type { background-color: color-mix(in srgb, #6c47ff 80%, transparent); } @@ -529,7 +543,6 @@ const RadioGroupItem = ({ value, label, description }: RadioGroupItemProps) => { box-shadow: 0 0 0 2px rgba(108, 71, 255, 0.2); `} - /* Inner dot */ &::after { content: ''; position: absolute; From 5c895c2dc7bbdd7dc10c1cb02f3741ddecff7b41 Mon Sep 17 00:00:00 2001 From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com> Date: Mon, 15 Dec 2025 14:26:18 -0300 Subject: [PATCH 06/11] Apply `aria-labelledby` --- .../devPrompts/EnableOrganizationsPrompt/index.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx b/packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx index b21dd5cd7c3..0489a30e025 100644 --- a/packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx +++ b/packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx @@ -30,6 +30,7 @@ const EnableOrganizationsPromptInternal = ({ const initialFocusRef = useRef(null); const environment = useEnvironment(); + const radioGroupLabelId = useId(); const isComponent = !caller.startsWith('use'); @@ -142,6 +143,7 @@ const EnableOrganizationsPromptInternal = ({ ) : ( <>

setAllowPersonalAccount(value === 'allow')} + labelledBy={radioGroupLabelId} > void; children: React.ReactNode; + labelledBy?: string; }; -const RadioGroup = ({ value, onChange, children }: RadioGroupProps) => { +const RadioGroup = ({ value, onChange, children, labelledBy }: RadioGroupProps) => { const name = useId(); const contextValue = React.useMemo(() => ({ value: { name, value, onChange } }), [name, value, onChange]); @@ -453,6 +457,8 @@ const RadioGroup = ({ value, onChange, children }: RadioGroupProps) => { role='radiogroup' direction='col' gap={3} + aria-orientation='vertical' + aria-labelledby={labelledBy} > {children} From c324d5d9555b6cfbadfa4f44d414f23dbc05a801 Mon Sep 17 00:00:00 2001 From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com> Date: Mon, 15 Dec 2025 14:34:41 -0300 Subject: [PATCH 07/11] Move the description outside the label --- .../EnableOrganizationsPrompt/index.tsx | 238 ++++++++---------- 1 file changed, 104 insertions(+), 134 deletions(-) diff --git a/packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx b/packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx index 0489a30e025..9418cd02b47 100644 --- a/packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx +++ b/packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx @@ -6,9 +6,7 @@ import type { SerializedStyles } from '@emotion/react'; import { css } from '@emotion/react'; import React, { forwardRef, useId, useLayoutEffect, useRef, useState } from 'react'; -import { ArrowRightIcon } from '@/icons'; import { useEnvironment } from '@/ui/contexts'; -import { Alert } from '@/ui/elements/Alert'; import { Modal } from '@/ui/elements/Modal'; import { InternalThemeProvider } from '@/ui/styledSystem'; @@ -212,38 +210,6 @@ const EnableOrganizationsPromptInternal = ({ description='Users can work outside of an organization with a personal account' /> - - {!allowPersonalAccount && ( - ({ marginTop: t.sizes.$3 })} - > - Existing users will be forced to join an organization, which may break your application. If you are - unsure of the impact, please contact support before enabling. - - Learn more - - - - )} )} @@ -422,7 +388,7 @@ const PromptBadge = ({ children }: PromptBadgeProps) => { border-radius: 0.25rem; font-size: 0.6875rem; font-weight: 500; - line-height: 1.25; + line-height: 1.23; background-color: #ebebeb; color: #2b2b34; `} @@ -472,102 +438,104 @@ type RadioGroupItemProps = { description?: React.ReactNode; }; +const RADIO_INDICATOR_SIZE = '1rem'; +const RADIO_GAP = '0.5rem'; + const RadioGroupItem = ({ value, label, description }: RadioGroupItemProps) => { const { name, value: selectedValue, onChange } = useRadioGroup(); const descriptionId = useId(); const checked = value === selectedValue; return ( - + + {description && ( + + {description} + + )} + ); }; From 3cb07e9ce5da47ab15e0aed383e38500e5beacaa Mon Sep 17 00:00:00 2001 From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com> Date: Mon, 15 Dec 2025 16:36:38 -0300 Subject: [PATCH 08/11] Add explicit return type for components --- .../EnableOrganizationsPrompt/index.tsx | 30 ++++++++++++++----- 1 file changed, 22 insertions(+), 8 deletions(-) diff --git a/packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx b/packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx index 9418cd02b47..2dd159bd995 100644 --- a/packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx +++ b/packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx @@ -20,7 +20,7 @@ const EnableOrganizationsPromptInternal = ({ caller, onSuccess, onClose, -}: __internal_EnableOrganizationsPromptProps) => { +}: __internal_EnableOrganizationsPromptProps): JSX.Element => { const clerk = useClerk(); const [isLoading, setIsLoading] = useState(false); const [isEnabled, setIsEnabled] = useState(false); @@ -199,8 +199,20 @@ const EnableOrganizationsPromptInternal = ({ } description={ <> - Users need to belong to at least one organization. - Common for most B2B SaaS applications + + Users need to belong to at least one organization. + + + Common for most B2B SaaS applications + {' '} } /> @@ -279,7 +291,7 @@ const EnableOrganizationsPromptInternal = ({ * A prompt that allows the user to enable the Organizations feature for their development instance * @internal */ -export const EnableOrganizationsPrompt = (props: __internal_EnableOrganizationsPromptProps) => { +export const EnableOrganizationsPrompt = (props: __internal_EnableOrganizationsPromptProps): JSX.Element => { return ( @@ -377,7 +389,7 @@ type PromptBadgeProps = { children: React.ReactNode; }; -const PromptBadge = ({ children }: PromptBadgeProps) => { +const PromptBadge = ({ children }: PromptBadgeProps): JSX.Element => { return ( { +const RadioGroup = ({ value, onChange, children, labelledBy }: RadioGroupProps): JSX.Element => { const name = useId(); const contextValue = React.useMemo(() => ({ value: { name, value, onChange } }), [name, value, onChange]); @@ -441,7 +453,7 @@ type RadioGroupItemProps = { const RADIO_INDICATOR_SIZE = '1rem'; const RADIO_GAP = '0.5rem'; -const RadioGroupItem = ({ value, label, description }: RadioGroupItemProps) => { +const RadioGroupItem = ({ value, label, description }: RadioGroupItemProps): JSX.Element => { const { name, value: selectedValue, onChange } = useRadioGroup(); const descriptionId = useId(); const checked = value === selectedValue; @@ -470,6 +482,7 @@ const RadioGroupItem = ({ value, label, description }: RadioGroupItemProps) => { } &:hover:has(input:checked) > span:first-of-type { + background-color: rgba(108, 71, 255, 0.8); background-color: color-mix(in srgb, #6c47ff 80%, transparent); } `} @@ -517,6 +530,7 @@ const RadioGroupItem = ({ value, label, description }: RadioGroupItemProps) => { css` border-width: 2px; border-color: #6c47ff; + background-color: #6c47ff; background-color: color-mix(in srgb, #6c47ff 100%, transparent); box-shadow: 0 0 0 2px rgba(108, 71, 255, 0.2); `} @@ -597,7 +611,7 @@ const Link = forwardRef & { css?: S }, ); -const CoinFlip = ({ isEnabled }: { isEnabled: boolean }) => { +const CoinFlip = ({ isEnabled }: { isEnabled: boolean }): JSX.Element => { const [rotation, setRotation] = useState(0); useLayoutEffect(() => { From 61680abefa650ad5b24ccd32c0bbbb772e8bf527 Mon Sep 17 00:00:00 2001 From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com> Date: Mon, 15 Dec 2025 17:44:58 -0300 Subject: [PATCH 09/11] Update copy --- .../EnableOrganizationsPrompt/index.tsx | 21 ++----------------- 1 file changed, 2 insertions(+), 19 deletions(-) diff --git a/packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx b/packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx index 2dd159bd995..91be476c648 100644 --- a/packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx +++ b/packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx @@ -194,27 +194,10 @@ const EnableOrganizationsPromptInternal = ({ label={ Require organization membership - Most common + Standard } - description={ - <> - - Users need to belong to at least one organization. - - - Common for most B2B SaaS applications - {' '} - - } + description='Users need to belong to at least one organization.' /> Date: Tue, 16 Dec 2025 12:43:32 -0500 Subject: [PATCH 10/11] allow wrapping --- .../devPrompts/EnableOrganizationsPrompt/index.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx b/packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx index 91be476c648..e6e2a1e0dbb 100644 --- a/packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx +++ b/packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx @@ -192,7 +192,10 @@ const EnableOrganizationsPromptInternal = ({ + ({ columnGap: t.sizes.$2, rowGap: t.sizes.$1 })} + > Require organization membership Standard @@ -386,6 +389,7 @@ const PromptBadge = ({ children }: PromptBadgeProps): JSX.Element => { line-height: 1.23; background-color: #ebebeb; color: #2b2b34; + white-space: nowrap; `} > {children} From 27c86eba5fc0a3adcb17cb937311054b1c7c1e04 Mon Sep 17 00:00:00 2001 From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com> Date: Tue, 16 Dec 2025 16:56:39 -0300 Subject: [PATCH 11/11] Update copy --- .../EnableOrganizationsPrompt/index.tsx | 21 ++++++++++++------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx b/packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx index e6e2a1e0dbb..5ca5a59a36a 100644 --- a/packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx +++ b/packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx @@ -179,32 +179,37 @@ const EnableOrganizationsPromptInternal = ({ )} - {hasPersonalAccountsEnabled && ( + {hasPersonalAccountsEnabled && !isEnabled && ( ({ marginTop: t.sizes.$2 })} direction='col' > setAllowPersonalAccount(value === 'allow')} + value={allowPersonalAccount ? 'optional' : 'required'} + onChange={value => setAllowPersonalAccount(value === 'optional')} labelledBy={radioGroupLabelId} > ({ columnGap: t.sizes.$2, rowGap: t.sizes.$1 })} > - Require organization membership + Membership required Standard } - description='Users need to belong to at least one organization.' + description={ + <> + Users need to belong to at least one organization. + Common for most B2B SaaS applications + + } />