@react-spectrum/s2 1.3.1 → 1.5.0

package/src/Field.tsx

@@ -17,39 +17,53 @@ import {baseColor, focusRing, fontRelative, style} from '../style' with {type: '
 import {CenterBaseline, centerBaseline, centerBaselineBefore} from './CenterBaseline';
 import {composeRenderProps} from 'react-aria-components/composeRenderProps';
 import {ContextualHelpContext} from './ContextualHelp';
-import {control, controlFont, fieldInput, fieldLabel, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};
+import {
+  control,
+  controlFont,
+  fieldInput,
+  fieldLabel,
+  StyleProps,
+  UnsafeStyles
+} from './style-utils' with {type: 'macro'};
 import {FieldError, FieldErrorProps} from 'react-aria-components/FieldError';
-import {ForwardedRef, forwardRef, ReactNode} from 'react';
+import {ForwardedRef, forwardRef, ReactNode, useContext} from 'react';
 import {getEventTarget} from 'react-aria/private/utils/shadowdom/DOMFunctions';
 import {Group, GroupProps} from 'react-aria-components/Group';
 import {IconContext} from './Icon';
+import {
+  InputContext,
+  Input as RACInput,
+  InputProps as RACInputProps
+} from 'react-aria-components/Input';
 import intlMessages from '../intl/*.json';
 import {Label, LabelProps} from 'react-aria-components/Label';
 import {mergeStyles} from '../style/runtime';
 import {Provider} from 'react-aria-components/slots';
-import {Input as RACInput, InputProps as RACInputProps} from 'react-aria-components/Input';
-// @ts-ignore
 import {StyleString} from '../style/types';
 import {Text} from 'react-aria-components/Text';
 import {useDOMRef} from './useDOMRef';
 import {useId} from 'react-aria/useId';
 import {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';
 
-interface FieldLabelProps extends Omit<LabelProps, 'className' | 'style' | 'render' | 'children'>, StyleProps {
-  isDisabled?: boolean,
-  isRequired?: boolean,
-  size?: 'S' | 'M' | 'L' | 'XL',
-  necessityIndicator?: NecessityIndicator,
-  labelAlign?: Alignment,
-  labelPosition?: 'top' | 'side',
-  includeNecessityIndicatorInAccessibilityName?: boolean,
-  staticColor?: 'white' | 'black' | 'auto',
-  contextualHelp?: ReactNode,
-  isQuiet?: boolean,
-  children?: ReactNode
+interface FieldLabelProps
+  extends Omit<LabelProps, 'className' | 'style' | 'render' | 'children'>, StyleProps {
+  isDisabled?: boolean;
+  isRequired?: boolean;
+  size?: 'S' | 'M' | 'L' | 'XL';
+  necessityIndicator?: NecessityIndicator;
+  labelAlign?: Alignment;
+  labelPosition?: 'top' | 'side';
+  includeNecessityIndicatorInAccessibilityName?: boolean;
+  staticColor?: 'white' | 'black' | 'auto';
+  contextualHelp?: ReactNode;
+  isQuiet?: boolean;
+  children?: ReactNode;
 }
 
-export const FieldLabel = forwardRef(function FieldLabel(props: FieldLabelProps, ref: DOMRef<HTMLLabelElement>) {
+export const FieldLabel = forwardRef(function FieldLabel(
+  props: FieldLabelProps,
+  ref: DOMRef<HTMLLabelElement>
+) {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   let {
     isDisabled,
@@ -105,12 +119,18 @@ export const FieldLabel = forwardRef(function FieldLabel(props: FieldLabelProps,
         {...labelProps}
         ref={domRef}
         style={UNSAFE_style}
-        className={UNSAFE_className + mergeStyles(style(fieldLabel())({labelPosition, isDisabled, size, isStaticColor: !!staticColor}), props.styles)}>
+        className={
+          UNSAFE_className +
+          mergeStyles(
+            style(fieldLabel())({labelPosition, isDisabled, size, isStaticColor: !!staticColor}),
+            props.styles
+          )
+        }>
         {props.children}
         {(isRequired || necessityIndicator === 'label') && (
           <span className={style({whiteSpace: 'nowrap'})}>
             &nbsp;
-            {necessityIndicator === 'icon' &&
+            {necessityIndicator === 'icon' && (
               <AsteriskIcon
                 size={size === 'S' ? 'M' : size}
                 className={style({
@@ -119,18 +139,28 @@ export const FieldLabel = forwardRef(function FieldLabel(props: FieldLabelProps,
                     value: 'currentColor'
                   }
                 })}
-                aria-label={includeNecessityIndicatorInAccessibilityName ? stringFormatter.format('label.(required)') : undefined}
-                aria-hidden={!includeNecessityIndicatorInAccessibilityName} />
-            }
-            {necessityIndicator === 'label' &&
+                aria-label={
+                  includeNecessityIndicatorInAccessibilityName
+                    ? stringFormatter.format('label.(required)')
+                    : undefined
+                }
+                aria-hidden={!includeNecessityIndicatorInAccessibilityName}
+              />
+            )}
+            {necessityIndicator === 'label' && (
               /* The necessity label is hidden to screen readers if the field is required because
-              * aria-required is set on the field in that case. That will already be announced,
-              * so no need to duplicate it here. If optional, we do want it to be announced here.
-              */
-              <span aria-hidden={!includeNecessityIndicatorInAccessibilityName ? isRequired : undefined}>
-                {isRequired ? stringFormatter.format('label.(required)') : stringFormatter.format('label.(optional)')}
+               * aria-required is set on the field in that case. That will already be announced,
+               * so no need to duplicate it here. If optional, we do want it to be announced here.
+               */
+              <span
+                aria-hidden={
+                  !includeNecessityIndicatorInAccessibilityName ? isRequired : undefined
+                }>
+                {isRequired
+                  ? stringFormatter.format('label.(required)')
+                  : stringFormatter.format('label.(optional)')}
               </span>
-            }
+            )}
           </span>
         )}
       </Label>
@@ -145,8 +175,10 @@ export const FieldLabel = forwardRef(function FieldLabel(props: FieldLabelProps,
             <ContextualHelpContext.Provider
               value={{
                 id: contextualHelpId,
-                'aria-labelledby': labelProps?.id ? `${labelProps.id} ${contextualHelpId}` : undefined,
-                size: (size === 'L' || size === 'XL') ? 'S' : 'XS'
+                'aria-labelledby': labelProps?.id
+                  ? `${labelProps.id} ${contextualHelpId}`
+                  : undefined,
+                size: size === 'L' || size === 'XL' ? 'S' : 'XS'
               }}>
               {contextualHelp}
             </ContextualHelpContext.Provider>
@@ -157,11 +189,13 @@ export const FieldLabel = forwardRef(function FieldLabel(props: FieldLabelProps,
   );
 });
 
-interface FieldGroupProps extends Omit<GroupProps, 'className' | 'style' | 'render' | 'children'>, UnsafeStyles {
-  size?: 'S' | 'M' | 'L' | 'XL',
-  children: ReactNode,
-  styles?: StyleString,
-  shouldTurnOffFocusRing?: boolean
+interface FieldGroupProps
+  extends Omit<GroupProps, 'className' | 'style' | 'render' | 'children' | 'prefix'>, UnsafeStyles {
+  size?: 'S' | 'M' | 'L' | 'XL';
+  children: ReactNode;
+  styles?: StyleString;
+  shouldTurnOffFocusRing?: boolean;
+  prefix?: ReactNode;
 }
 
 const fieldGroupStyles = style({
@@ -206,15 +240,27 @@ const fieldGroupStyles = style({
   }
 });
 
-export const FieldGroup = forwardRef(function FieldGroup(props: FieldGroupProps, ref: ForwardedRef<HTMLDivElement>) {
-  let {shouldTurnOffFocusRing, ...otherProps} = props;
+export const FieldGroup = forwardRef(function FieldGroup(
+  props: FieldGroupProps,
+  ref: ForwardedRef<HTMLDivElement>
+) {
+  let {children, prefix, shouldTurnOffFocusRing, ...otherProps} = props;
+  let ctx = useContext(InputContext);
+  let prefixId = useId();
+  let newAriaLabelledby = ctx?.['aria-labelledby'];
+  if (prefix) {
+    newAriaLabelledby = newAriaLabelledby ? `${newAriaLabelledby} ${prefixId}` : prefixId;
+  }
   return (
     <Group
       ref={ref}
       {...otherProps}
-      onPointerDown={(e) => {
+      onPointerDown={e => {
         // Forward focus to input element when clicking on a non-interactive child (e.g. icon or padding)
-        if (e.pointerType === 'mouse' && !(getEventTarget(e) as Element).closest('button,input,textarea,[role="button"]')) {
+        if (
+          e.pointerType === 'mouse' &&
+          !(getEventTarget(e) as Element).closest('button,input,textarea,[role="button"]')
+        ) {
           e.preventDefault();
           (e.currentTarget.querySelector('input, textarea') as HTMLElement)?.focus();
         }
@@ -227,57 +273,106 @@ export const FieldGroup = forwardRef(function FieldGroup(props: FieldGroupProps,
         }
       }}
       style={props.UNSAFE_style}
-      className={renderProps => (props.UNSAFE_className || '') + ' ' + centerBaselineBefore + mergeStyles(
-        fieldGroupStyles({
-          ...renderProps,
-          isFocusWithin: shouldTurnOffFocusRing ? false : renderProps.isFocusWithin,
-          isFocusVisible: shouldTurnOffFocusRing ? false : renderProps.isFocusVisible,
-          size: props.size || 'M'
-        }),
-        props.styles
-      )} />
+      className={renderProps =>
+        (props.UNSAFE_className || '') +
+        ' ' +
+        centerBaselineBefore +
+        mergeStyles(
+          fieldGroupStyles({
+            ...renderProps,
+            isFocusWithin: shouldTurnOffFocusRing ? false : renderProps.isFocusWithin,
+            isFocusVisible: shouldTurnOffFocusRing ? false : renderProps.isFocusVisible,
+            size: props.size || 'M'
+          }),
+          props.styles
+        )
+      }>
+      {props.prefix ? (
+        <Provider
+          values={[
+            [
+              IconContext,
+              {
+                styles: style({
+                  size: fontRelative(20),
+                  '--iconPrimary': {type: 'fill', value: 'currentColor'}
+                })
+              }
+            ]
+          ]}>
+          <CenterBaseline
+            id={prefixId}
+            styles={style({
+              color: 'gray-600',
+              flexShrink: 0,
+              marginEnd: 'text-to-visual'
+            })}>
+            {props.prefix}
+          </CenterBaseline>
+        </Provider>
+      ) : null}
+      <InputContext.Consumer>
+        {ctx => (
+          <InputContext.Provider value={{...ctx, 'aria-labelledby': newAriaLabelledby}}>
+            {children}
+          </InputContext.Provider>
+        )}
+      </InputContext.Consumer>
+    </Group>
   );
 });
 
-export interface InputProps extends Omit<RACInputProps, 'className' | 'style' | 'render'>, StyleProps {}
+export interface InputProps
+  extends Omit<RACInputProps, 'className' | 'style' | 'render'>, StyleProps {}
 
-export const Input = forwardRef(function Input(props: InputProps, ref: ForwardedRef<HTMLInputElement>) {
+export const Input = forwardRef(function Input(
+  props: InputProps,
+  ref: ForwardedRef<HTMLInputElement>
+) {
   let {UNSAFE_className = '', UNSAFE_style, styles, ...otherProps} = props;
   return (
     <RACInput
       {...otherProps}
       ref={ref}
       style={UNSAFE_style}
-      className={UNSAFE_className + mergeStyles(style({
-        padding: 0,
-        backgroundColor: 'transparent',
-        color: {
-          default: 'inherit',
-          '::placeholder': {
-            default: 'gray-600',
-            forcedColors: 'GrayText'
-          }
-        },
-        fontFamily: 'inherit',
-        fontSize: 'inherit',
-        fontWeight: 'inherit',
-        flexGrow: 1,
-        flexShrink: 1,
-        minWidth: 0,
-        width: 'full',
-        outlineStyle: 'none',
-        borderStyle: 'none',
-        truncate: true
-      }), styles)} />
+      className={
+        UNSAFE_className +
+        mergeStyles(
+          style({
+            padding: 0,
+            backgroundColor: 'transparent',
+            color: {
+              default: 'inherit',
+              '::placeholder': {
+                default: 'gray-600',
+                forcedColors: 'GrayText'
+              }
+            },
+            fontFamily: 'inherit',
+            fontSize: 'inherit',
+            fontWeight: 'inherit',
+            flexGrow: 1,
+            flexShrink: 1,
+            minWidth: 0,
+            width: 'full',
+            outlineStyle: 'none',
+            borderStyle: 'none',
+            truncate: true
+          }),
+          styles
+        )
+      }
+    />
   );
 });
 
 interface HelpTextProps extends FieldErrorProps {
-  size?: 'S' | 'M' | 'L' | 'XL',
-  isDisabled?: boolean,
-  isInvalid?: boolean, // TODO: export FieldErrorContext from RAC to get this.
-  description?: ReactNode,
-  showErrorIcon?: boolean
+  size?: 'XS' | 'S' | 'M' | 'L' | 'XL';
+  isDisabled?: boolean;
+  isInvalid?: boolean; // TODO: export FieldErrorContext from RAC to get this.
+  description?: ReactNode;
+  showErrorIcon?: boolean;
+  styles?: StyleString;
 }
 
 export const helpTextStyles = style({
@@ -309,7 +404,12 @@ export const helpTextStyles = style({
   }
 });
 
-export function HelpText(props: HelpTextProps & {descriptionRef?: DOMRef<HTMLDivElement>, errorRef?: DOMRef<HTMLDivElement>}): ReactNode {
+export function HelpText(
+  props: HelpTextProps & {
+    descriptionRef?: DOMRef<HTMLDivElement>;
+    errorRef?: DOMRef<HTMLDivElement>;
+  }
+): ReactNode {
   let domDescriptionRef = useDOMRef(props.descriptionRef || null);
   let domErrorRef = useDOMRef(props.errorRef || null);
 
@@ -318,25 +418,52 @@ export function HelpText(props: HelpTextProps & {descriptionRef?: DOMRef<HTMLDiv
       <Text
         slot="description"
         ref={domDescriptionRef}
-        className={helpTextStyles({size: props.size || 'M', isDisabled: props.isDisabled})}>
+        className={mergeStyles(
+          helpTextStyles({size: props.size || 'M', isDisabled: props.isDisabled}),
+          props.styles
+        )}>
         {props.description}
       </Text>
     );
   }
 
+  if (!props.isInvalid) {
+    return null;
+  }
+
   return (
     <FieldError
       {...props}
       ref={domErrorRef}
-      className={renderProps => helpTextStyles({...renderProps, size: props.size || 'M', isDisabled: props.isDisabled})}>
-      {composeRenderProps(props.children, (children, {validationErrors}) => (<>
-        {props.showErrorIcon &&
-          <CenterBaseline>
-            <AlertIcon />
-          </CenterBaseline>
-        }
-        <span>{children || validationErrors.join(' ')}</span>
-      </>))}
+      className={renderProps =>
+        mergeStyles(
+          helpTextStyles({...renderProps, size: props.size || 'M', isDisabled: props.isDisabled}),
+          props.styles
+        )
+      }>
+      {composeRenderProps(props.children, (children, {validationErrors}) => (
+        <>
+          {props.showErrorIcon && (
+            <CenterBaseline>
+              <AlertIcon
+                // @ts-ignore - ts doesn't know that AlertIcon is an icon and not a raw SVG
+                styles={style({
+                  size: {
+                    size: {
+                      XS: 14,
+                      S: 16,
+                      M: 20,
+                      L: 22,
+                      XL: 26
+                    }
+                  }
+                })({size: props.size || 'M'})}
+              />
+            </CenterBaseline>
+          )}
+          <span>{children || validationErrors.join(' ')}</span>
+        </>
+      ))}
     </FieldError>
   );
 }
@@ -345,27 +472,31 @@ export function FieldErrorIcon(props: {isDisabled?: boolean}): ReactNode {
   return (
     <Provider
       values={[
-        [IconContext, {
-          render: centerBaseline({
-            slot: 'icon',
-            styles: style({
-              order: 0,
-              flexShrink: 0,
-              '--iconPrimary': {
-                type: 'fill',
-                value: {
-                  default: 'negative',
-                  forcedColors: 'Mark'
+        [
+          IconContext,
+          {
+            render: centerBaseline({
+              slot: 'icon',
+              styles: style({
+                order: 0,
+                flexShrink: 0,
+                '--iconPrimary': {
+                  type: 'fill',
+                  value: {
+                    default: 'negative',
+                    forcedColors: 'Mark'
+                  }
                 }
-              }
-            })}),
-          styles: style({
-            size: fontRelative(20),
-            marginStart: 'text-to-visual',
-            marginEnd: fontRelative(-2),
-            flexShrink: 0
-          })
-        }]
+              })
+            }),
+            styles: style({
+              size: fontRelative(20),
+              marginStart: 'text-to-visual',
+              marginEnd: fontRelative(-2),
+              flexShrink: 0
+            })
+          }
+        ]
       ]}>
       {!props.isDisabled && <AlertIcon />}
     </Provider>

package/src/Fonts.tsx

@@ -22,17 +22,17 @@ let preloads = {
   // Currently no preloads for arabic and hebrew, because we don't know which weights will be used ahead of time.
   // Browsers will emit warnings for unused preloads.
   // ar: [
-    // 'https://use.typekit.net/af/dfb464/00000000000000007735a2f9/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3',
-    // 'https://use.typekit.net/af/560a53/00000000000000007735a300/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3',
-    // 'https://use.typekit.net/af/0f9162/00000000000000007735a307/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n6&v=3',
-    // 'https://use.typekit.net/af/ab2792/00000000000000007735a309/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n9&v=3'
-    // 'https://use.typekit.net/af/560a53/00000000000000007735a300/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3'
+  // 'https://use.typekit.net/af/dfb464/00000000000000007735a2f9/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3',
+  // 'https://use.typekit.net/af/560a53/00000000000000007735a300/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3',
+  // 'https://use.typekit.net/af/0f9162/00000000000000007735a307/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n6&v=3',
+  // 'https://use.typekit.net/af/ab2792/00000000000000007735a309/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n9&v=3'
+  // 'https://use.typekit.net/af/560a53/00000000000000007735a300/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3'
   // ],
   // he: [
-    // 'https://use.typekit.net/af/ffca46/00000000000000007735a30a/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3',
-    // 'https://use.typekit.net/af/e90860/00000000000000007735a313/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3',
-    // 'https://use.typekit.net/af/619974/00000000000000007735a31f/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n6&v=3'
-    // 'https://use.typekit.net/af/e90860/00000000000000007735a313/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3'
+  // 'https://use.typekit.net/af/ffca46/00000000000000007735a30a/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3',
+  // 'https://use.typekit.net/af/e90860/00000000000000007735a313/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3',
+  // 'https://use.typekit.net/af/619974/00000000000000007735a31f/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n6&v=3'
+  // 'https://use.typekit.net/af/e90860/00000000000000007735a313/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3'
   // ],
   en: [
     // Preload Adobe Clean Spectrum VF.
@@ -47,7 +47,11 @@ export function Fonts(): ReactNode {
   let languageAndScript = locale.language + (locale.script ? '-' + locale.script : '');
 
   // Load script tag for CJK font
-  let typekitId = scripts[locale.baseName] || scripts[languageAndRegion] || scripts[languageAndScript] || scripts[locale.language];
+  let typekitId =
+    scripts[locale.baseName] ||
+    scripts[languageAndRegion] ||
+    scripts[languageAndScript] ||
+    scripts[locale.language];
   let script = typekitId ? `https://use.typekit.net/${typekitId}.js` : null;
 
   let scriptRef = useRef<HTMLScriptElement | null>(null);
@@ -68,7 +72,10 @@ export function Fonts(): ReactNode {
 
     if (scriptEl) {
       scriptEl.onload = () => {
-        if (typeof window['Typekit'] !== 'undefined' && typeof window['Typekit'].load === 'function') {
+        if (
+          typeof window['Typekit'] !== 'undefined' &&
+          typeof window['Typekit'].load === 'function'
+        ) {
           window['Typekit'].load();
         }
       };

package/src/Form.tsx

@@ -21,17 +21,22 @@ import {useIsSkeleton} from './Skeleton';
 interface FormStyleProps extends Omit<SpectrumLabelableProps, 'label' | 'contextualHelp'> {
   /**
    * Size of the Form elements.
+   *
    * @default 'M'
    */
-  size?: 'S' | 'M' | 'L' | 'XL',
+  size?: 'S' | 'M' | 'L' | 'XL';
   /** Whether the Form elements are disabled. */
-  isDisabled?: boolean,
+  isDisabled?: boolean;
   /** Whether the Form elements are rendered with their emphasized style. */
-  isEmphasized?: boolean
+  isEmphasized?: boolean;
 }
 
-export interface FormProps extends FormStyleProps, Omit<RACFormProps, 'className' | 'style' | 'render' | 'children' | keyof GlobalDOMAttributes>, StyleProps {
-  children: ReactNode
+export interface FormProps
+  extends
+    FormStyleProps,
+    Omit<RACFormProps, 'className' | 'style' | 'render' | 'children' | keyof GlobalDOMAttributes>,
+    StyleProps {
+  children: ReactNode;
 }
 
 export const FormContext = createContext<Partial<FormStyleProps | null>>(null);
@@ -63,9 +68,13 @@ export function useFormProps<T extends FormStyleProps>(props: T): T {
 }
 
 /**
- * Forms allow users to enter data that can be submitted while providing alignment and styling for form fields.
+ * Forms allow users to enter data that can be submitted while providing alignment and styling for
+ * form fields.
  */
-export const Form = /*#__PURE__*/ forwardRef(function Form(props: FormProps, ref: DOMRef<HTMLFormElement>) {
+export const Form = /*#__PURE__*/ forwardRef(function Form(
+  props: FormProps,
+  ref: DOMRef<HTMLFormElement>
+) {
   let {
     labelPosition = 'top',
     labelAlign,
@@ -85,26 +94,32 @@ export const Form = /*#__PURE__*/ forwardRef(function Form(props: FormProps, ref
       {...formProps}
       ref={domRef}
       style={UNSAFE_style}
-      className={UNSAFE_className + style({
-        display: 'grid',
-        gridTemplateColumns: {
-          labelPosition: {
-            top: ['[field] 1fr'],
-            side: ['[label] auto', '[field] 1fr']
-          }
-        },
-        // TODO: confirm when we have tokens
-        rowGap: {
-          size: {
-            XS: 16,
-            S: 20,
-            M: 24,
-            L: 32,
-            XL: 40
-          }
-        },
-        columnGap: 'text-to-control'
-      }, getAllowedOverrides())({labelPosition, size}, props.styles)}>
+      className={
+        UNSAFE_className +
+        style(
+          {
+            display: 'grid',
+            gridTemplateColumns: {
+              labelPosition: {
+                top: ['[field] 1fr'],
+                side: ['[label] auto', '[field] 1fr']
+              }
+            },
+            // TODO: confirm when we have tokens
+            rowGap: {
+              size: {
+                XS: 16,
+                S: 20,
+                M: 24,
+                L: 32,
+                XL: 40
+              }
+            },
+            columnGap: 'text-to-control'
+          },
+          getAllowedOverrides()
+        )({labelPosition, size}, props.styles)
+      }>
       <FormContext.Provider
         value={{
           labelPosition,