Add first draft for radio group

Author: LauraBeatris

.changeset/tasty-coats-tickle.md

@@ -0,0 +1,5 @@
+---
+'@clerk/ui': patch
+---
+
+Introduce radio group for `EnableOrganizationsPrompt`

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

@@ -3,14 +3,14 @@ import type { __internal_EnableOrganizationsPromptProps, EnableEnvironmentSettin
 // 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 = ({
                   })}
                 >
                   <Flex sx={t => ({ marginTop: t.sizes.$2 })}>
-                    <Switch
-                      label='Allow personal account'
-                      description='Allow users to work outside of an organization by providing a personal account. We do not recommend for B2B SaaS apps.'
-                      checked={allowPersonalAccount}
-                      onChange={() => setAllowPersonalAccount(prev => !prev)}
-                    />
+                    <RadioGroup
+                      value={allowPersonalAccount ? 'allow' : 'require'}
+                      onChange={value => setAllowPersonalAccount(value === 'allow')}
+                    >
+                      <RadioGroupItem
+                        value='require'
+                        label='Require organization membership'
+                        description='Users will be required to create or join an organization to access the application. Common for most B2B SaaS applications.'
+                      />
+                      <RadioGroupItem
+                        value='allow'
+                        label='Allow personal accounts'
+                        description='Users will be able to work outside of an organization by providing a personal account.'
+                      />
+                    </RadioGroup>
                   </Flex>
                 </Flex>
               </Box>
@@ -368,100 +377,103 @@ const PromptButton = forwardRef<HTMLButtonElement, PromptButtonProps>(({ variant
   );
 });
 
-type SwitchProps = React.ComponentProps<'input'> & {
-  label: string;
-  description?: string;
+type RadioGroupProps = {
+  value: string;
+  onChange: (value: string) => void;
+  children: React.ReactNode;
 };
 
-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 RadioGroup = ({ value, onChange, children }: RadioGroupProps) => {
+  const name = useId();
 
-const Switch = forwardRef<HTMLInputElement, SwitchProps>(
-  ({ label, description, checked: controlledChecked, defaultChecked, onChange, ...props }, ref) => {
-    const descriptionId = useId();
+  return (
+    <Flex
+      role='radiogroup'
+      direction='col'
+      gap={3}
+    >
+      {React.Children.map(children, child => {
+        if (React.isValidElement<RadioGroupItemProps>(child)) {
+          return React.cloneElement(child, {
+            name,
+            checked: child.props.value === value,
+            onChange: () => onChange(child.props.value),
+          });
+        }
+        return child;
+      })}
+    </Flex>
+  );
+};
 
-    const isControlled = controlledChecked !== undefined;
-    const [internalChecked, setInternalChecked] = useState(!!defaultChecked);
-    const checked = isControlled ? controlledChecked : internalChecked;
+type RadioGroupItemProps = {
+  value: string;
+  label: string;
+  description?: string;
+  name?: string;
+  checked?: boolean;
+  onChange?: () => void;
+};
 
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      if (!isControlled) {
-        setInternalChecked(e.target.checked);
-      }
-      onChange?.(e);
-    };
+const RadioGroupItem = forwardRef<HTMLInputElement, RadioGroupItemProps>(
+  ({ value, label, description, name, checked, onChange }, ref) => {
+    const id = useId();
+    const descriptionId = useId();
 
     return (
       <Flex
-        direction='col'
-        gap={1}
+        as='label'
+        gap={2}
+        align='start'
+        sx={{
+          cursor: 'pointer',
+          userSelect: 'none',
+        }}
       >
+        <input
+          ref={ref}
+          type='radio'
+          id={id}
+          name={name}
+          value={value}
+          checked={checked}
+          onChange={onChange}
+          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;
+            }
+
+            &:focus-visible {
+              outline: 2px solid white;
+              outline-offset: 2px;
+            }
+
+            &:hover:not(:checked) {
+              border-color: rgba(255, 255, 255, 0.5);
+            }
+          `}
+        />
         <Flex
-          as='label'
-          gap={2}
-          align='center'
-          sx={{
-            isolation: 'isolate',
-            userSelect: 'none',
-            '&:has(input:focus-visible) > input + span': {
-              outline: '2px solid white',
-              outlineOffset: '2px',
-            },
-            '&:has(input:disabled) > input + span': {
-              opacity: 0.6,
-              cursor: 'not-allowed',
-              pointerEvents: 'none',
-            },
-          }}
+          direction='col'
+          gap={1}
         >
-          <input
-            type='checkbox'
-            {...props}
-            ref={ref}
-            role='switch'
-            {...(isControlled ? { checked } : { defaultChecked })}
-            onChange={handleChange}
-            css={{ ...common.visuallyHidden() }}
-            aria-describedby={description ? descriptionId : undefined}
-          />
-          <Span
-            sx={t => {
-              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',
-              };
-            }}
-          >
-            <Span
-              sx={t => {
-                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',
-                  },
-                };
-              }}
-            />
-          </Span>
           <span
             css={[
               basePromptElementStyles,
@@ -475,25 +487,23 @@ const Switch = forwardRef<HTMLInputElement, SwitchProps>(
           >
             {label}
           </span>
+          {description && (
+            <span
+              id={descriptionId}
+              css={[
+                basePromptElementStyles,
+                css`
+                  font-size: 0.75rem;
+                  line-height: 1.3333333333;
+                  color: #c3c3c6;
+                  text-wrap: pretty;
+                `,
+              ]}
+            >
+              {description}
+            </span>
+          )}
         </Flex>
-        {description ? (
-          <Span
-            id={descriptionId}
-            sx={t => [
-              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}
-          </Span>
-        ) : null}
       </Flex>
     );
   },