@react-spectrum/s2 1.3.0 → 1.4.0

package/src/CheckboxGroup.tsx

@@ -17,7 +17,14 @@ import {
 import {CheckboxContext} from './Checkbox';
 import {ContextValue} from 'react-aria-components/slots';
 import {createContext, forwardRef, ReactNode, useContext} from 'react';
-import {DOMRef, DOMRefValue, GlobalDOMAttributes, HelpTextProps, Orientation, SpectrumLabelableProps} from '@react-types/shared';
+import {
+  DOMRef,
+  DOMRefValue,
+  GlobalDOMAttributes,
+  HelpTextProps,
+  Orientation,
+  SpectrumLabelableProps
+} from '@react-types/shared';
 import {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {FieldLabel, HelpText} from './Field';
 import {FormContext, useFormProps} from './Form';
@@ -25,36 +32,48 @@ import {style} from '../style' with {type: 'macro'};
 import {useDOMRef} from './useDOMRef';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface CheckboxGroupProps extends Omit<AriaCheckboxGroupProps, 'className' | 'style' | 'render' | 'children' | keyof GlobalDOMAttributes>, StyleProps, SpectrumLabelableProps, HelpTextProps {
+export interface CheckboxGroupProps
+  extends
+    Omit<
+      AriaCheckboxGroupProps,
+      'className' | 'style' | 'render' | 'children' | keyof GlobalDOMAttributes
+    >,
+    StyleProps,
+    SpectrumLabelableProps,
+    HelpTextProps {
   /**
    * The size of the Checkboxes in the CheckboxGroup.
    *
    * @default 'M'
    */
-  size?: 'S' | 'M' | 'L' | 'XL',
+  size?: 'S' | 'M' | 'L' | 'XL';
   /**
    * The axis the checkboxes should align with.
    *
    * @default 'vertical'
    */
-  orientation?: Orientation,
+  orientation?: Orientation;
   /**
    * The Checkboxes contained within the CheckboxGroup.
    */
-  children: ReactNode,
+  children: ReactNode;
   /**
    * By default, checkboxes are not emphasized (gray).
    * The emphasized (blue) version provides visual prominence.
    */
-  isEmphasized?: boolean
+  isEmphasized?: boolean;
 }
 
-export const CheckboxGroupContext = createContext<ContextValue<Partial<CheckboxGroupProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const CheckboxGroupContext =
+  createContext<ContextValue<Partial<CheckboxGroupProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 /**
  * A CheckboxGroup allows users to select one or more items from a list of choices.
  */
-export const CheckboxGroup = forwardRef(function CheckboxGroup(props: CheckboxGroupProps, ref: DOMRef<HTMLDivElement>) {
+export const CheckboxGroup = forwardRef(function CheckboxGroup(
+  props: CheckboxGroupProps,
+  ref: DOMRef<HTMLDivElement>
+) {
   [props, ref] = useSpectrumContextProps(props, ref, CheckboxGroupContext);
   let formContext = useContext(FormContext);
   props = useFormProps(props);
@@ -80,62 +99,76 @@ export const CheckboxGroup = forwardRef(function CheckboxGroup(props: CheckboxGr
       {...groupProps}
       ref={domRef}
       style={UNSAFE_style}
-      className={UNSAFE_className + style({
-        ...field(),
-        // Double the usual gap because of the internal padding within checkbox that spectrum has.
-        '--field-gap': {
-          type: 'rowGap',
-          value: 'calc(var(--field-height) - 1lh)'
-        }
-      }, getAllowedOverrides())({
-        size: props.size,
-        labelPosition,
-        isInForm: !!formContext
-      }, props.styles)}>
-      {({isDisabled, isInvalid}) => (<>
-        <FieldLabel
-          includeNecessityIndicatorInAccessibilityName
-          isDisabled={isDisabled}
-          isRequired={props.isRequired}
-          size={size}
-          labelPosition={labelPosition}
-          labelAlign={labelAlign}
-          necessityIndicator={necessityIndicator}
-          contextualHelp={props.contextualHelp}>
-          {label}
-        </FieldLabel>
-        <div
-          className={style({
-            gridArea: 'input',
-            display: 'flex',
-            flexDirection: {
-              orientation: {
-                vertical: 'column',
-                horizontal: 'row'
+      className={
+        UNSAFE_className +
+        style(
+          {
+            ...field(),
+            // Double the usual gap because of the internal padding within checkbox that spectrum has.
+            '--field-gap': {
+              type: 'rowGap',
+              value: 'calc(var(--field-height) - 1lh)'
+            }
+          },
+          getAllowedOverrides()
+        )(
+          {
+            size: props.size,
+            labelPosition,
+            isInForm: !!formContext
+          },
+          props.styles
+        )
+      }>
+      {({isDisabled, isInvalid}) => (
+        <>
+          <FieldLabel
+            includeNecessityIndicatorInAccessibilityName
+            isDisabled={isDisabled}
+            isRequired={props.isRequired}
+            size={size}
+            labelPosition={labelPosition}
+            labelAlign={labelAlign}
+            isQuiet // Make the label affect the width of the group
+            necessityIndicator={necessityIndicator}
+            contextualHelp={props.contextualHelp}>
+            {label}
+          </FieldLabel>
+          <div
+            className={style({
+              gridArea: 'input',
+              display: 'flex',
+              flexDirection: {
+                orientation: {
+                  vertical: 'column',
+                  horizontal: 'row'
+                }
+              },
+              lineHeight: 'ui',
+              rowGap: '--field-gap',
+              // Spectrum uses a fixed spacing value for horizontal,
+              // but the gap changes depending on t-shirt size in vertical.
+              columnGap: 16,
+              flexWrap: {
+                orientation: {
+                  horizontal: 'wrap'
+                }
               }
-            },
-            lineHeight: 'ui',
-            rowGap: '--field-gap',
-            // Spectrum uses a fixed spacing value for horizontal,
-            // but the gap changes depending on t-shirt size in vertical.
-            columnGap: 16,
-            flexWrap: 'wrap'
-          })({orientation})}>
-          <FormContext.Provider value={{...formContext, size, isRequired: undefined}}>
-            <CheckboxContext.Provider value={{isEmphasized}}>
-              {children}
-            </CheckboxContext.Provider>
-          </FormContext.Provider>
-        </div>
-        <HelpText
-          size={size}
-          isDisabled={isDisabled}
-          isInvalid={isInvalid}
-          description={description}
-          showErrorIcon>
-          {errorMessage}
-        </HelpText>
-      </>)}
+            })({orientation})}>
+            <FormContext.Provider value={{...formContext, size, isRequired: undefined}}>
+              <CheckboxContext.Provider value={{isEmphasized}}>{children}</CheckboxContext.Provider>
+            </FormContext.Provider>
+          </div>
+          <HelpText
+            size={size}
+            isDisabled={isDisabled}
+            isInvalid={isInvalid}
+            description={description}
+            showErrorIcon>
+            {errorMessage}
+          </HelpText>
+        </>
+      )}
     </AriaCheckboxGroup>
   );
 });

package/src/ClearButton.tsx

@@ -24,9 +24,9 @@ interface ClearButtonStyleProps {
    *
    * @default 'M'
    */
-  size?: 'S' | 'M' | 'L' | 'XL',
+  size?: 'S' | 'M' | 'L' | 'XL';
   /** Whether the ClearButton should be displayed with a static color. */
-  isStaticColor?: boolean
+  isStaticColor?: boolean;
 }
 
 interface ClearButtonRenderProps extends ButtonRenderProps, ClearButtonStyleProps {}
@@ -59,7 +59,10 @@ const visibleClearButton = style<ClearButtonRenderProps>({
   }
 });
 
-export const ClearButton = forwardRef(function ClearButton(props: ClearButtonProps, ref: FocusableRef<HTMLButtonElement>) {
+export const ClearButton = forwardRef(function ClearButton(
+  props: ClearButtonProps,
+  ref: FocusableRef<HTMLButtonElement>
+) {
   let {size = 'M', isStaticColor = false, ...rest} = props;
   let domRef = useFocusableRef(ref);
   return (

package/src/CloseButton.tsx

@@ -13,7 +13,12 @@
 import {baseColor, focusRing, style} from '../style' with {type: 'macro'};
 import {Button, ButtonProps} from 'react-aria-components/Button';
 import {ContextValue} from 'react-aria-components/slots';
-import {controlSize, getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};
+import {
+  controlSize,
+  getAllowedOverrides,
+  staticColor,
+  StyleProps
+} from './style-utils' with {type: 'macro'};
 import {createContext, forwardRef} from 'react';
 import CrossIcon from '../ui-icons/Cross';
 import {FocusableRef, FocusableRefValue} from '@react-types/shared';
@@ -30,9 +35,9 @@ export interface CloseButtonProps extends Pick<ButtonProps, 'isDisabled' | 'onPr
    *
    * @default 'M'
    */
-  size?: 'S' | 'M' | 'L' | 'XL',
+  size?: 'S' | 'M' | 'L' | 'XL';
   /** The static color style to apply. Useful when the Button appears over a color background. */
-  staticColor?: 'white' | 'black' | 'auto'
+  staticColor?: 'white' | 'black' | 'auto';
 }
 
 const hoverBackground = {
@@ -40,53 +45,69 @@ const hoverBackground = {
   isStaticColor: 'transparent-overlay-200'
 } as const;
 
-const styles = style<CloseButtonProps & {isHovered: boolean, isFocusVisible: boolean, isPressed: boolean, isStaticColor: boolean}>({
-  ...focusRing(),
-  ...staticColor(),
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  size: controlSize(),
-  flexShrink: 0,
-  borderRadius: 'full',
-  padding: 0,
-  borderStyle: 'none',
-  transition: 'default',
-  backgroundColor: {
-    default: 'transparent',
-    isHovered: hoverBackground,
-    isFocusVisible: hoverBackground,
-    isPressed: hoverBackground
-  },
-  '--iconPrimary': {
-    type: 'color',
-    value: {
-      default: baseColor('neutral'),
-      isDisabled: 'disabled',
-      isStaticColor: {
-        default: baseColor('transparent-overlay-800'),
-        isDisabled: 'transparent-overlay-400'
-      },
-      forcedColors: {
-        default: 'ButtonText',
-        isDisabled: 'GrayText'
+const styles = style<
+  CloseButtonProps & {
+    isHovered: boolean;
+    isFocusVisible: boolean;
+    isPressed: boolean;
+    isStaticColor: boolean;
+  }
+>(
+  {
+    ...focusRing(),
+    ...staticColor(),
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    size: controlSize(),
+    flexShrink: 0,
+    borderRadius: 'full',
+    padding: 0,
+    borderStyle: 'none',
+    transition: 'default',
+    backgroundColor: {
+      default: 'transparent',
+      isHovered: hoverBackground,
+      isFocusVisible: hoverBackground,
+      isPressed: hoverBackground
+    },
+    '--iconPrimary': {
+      type: 'color',
+      value: {
+        default: baseColor('neutral'),
+        isDisabled: 'disabled',
+        isStaticColor: {
+          default: 'white',
+          isDisabled: 'transparent-overlay-400'
+        },
+        forcedColors: {
+          default: 'ButtonText',
+          isDisabled: 'GrayText'
+        }
       }
-    }
-  },
-  outlineColor: {
-    default: 'focus-ring',
-    isStaticColor: 'transparent-overlay-1000',
-    forcedColors: 'Highlight'
+    },
+    outlineColor: {
+      default: 'focus-ring',
+      isStaticColor: 'transparent-overlay-1000',
+      forcedColors: 'Highlight'
+    },
+    disableTapHighlight: true
   },
-  disableTapHighlight: true
-}, getAllowedOverrides());
+  getAllowedOverrides()
+);
 
-export const CloseButtonContext = createContext<ContextValue<Partial<CloseButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);
+export const CloseButtonContext =
+  createContext<ContextValue<Partial<CloseButtonProps>, FocusableRefValue<HTMLButtonElement>>>(
+    null
+  );
 
 /**
  * A CloseButton allows a user to dismiss a dialog.
  */
-export const CloseButton = forwardRef(function CloseButton(props: CloseButtonProps, ref: FocusableRef<HTMLButtonElement>) {
+export const CloseButton = forwardRef(function CloseButton(
+  props: CloseButtonProps,
+  ref: FocusableRef<HTMLButtonElement>
+) {
   [props, ref] = useSpectrumContextProps(props, ref, CloseButtonContext);
   let {UNSAFE_style, UNSAFE_className = ''} = props;
   let domRef = useFocusableRef(ref);
@@ -98,7 +119,13 @@ export const CloseButton = forwardRef(function CloseButton(props: CloseButtonPro
       slot="close"
       aria-label={props['aria-label'] || stringFormatter.format('dialog.dismiss')}
       style={pressScale(domRef, UNSAFE_style)}
-      className={renderProps => UNSAFE_className + styles({...renderProps, staticColor: props.staticColor, isStaticColor: !!props.staticColor}, props.styles)}>
+      className={renderProps =>
+        UNSAFE_className +
+        styles(
+          {...renderProps, staticColor: props.staticColor, isStaticColor: !!props.staticColor},
+          props.styles
+        )
+      }>
       <CrossIcon size={({S: 'L', M: 'XL', L: 'XXL', XL: 'XXXL'} as const)[props.size || 'M']} />
     </Button>
   );