Expose wrap option on Fieldset for use by OptionsGroup(s) (#1104)

* Expose `wrap` option on Fieldset for use by OptionsGroup(s)

* Tweak typing on Fieldset a smidge

Author: Luke Bowerman

CHANGELOG.md

@@ -35,6 +35,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - `SelectMulti` create option unnecessary left padding
 - `FieldSelect`/`FieldSelectMulti` missing `aria-labelledby` attribute on the input
 - Major CSS linting clean-up
+- `CheckboxGroup` & `RadioGroup` options now properly wrap when the exceed the container width
 
 ### Removed
 

packages/components/src/Form/Fieldset/Fieldset.tsx

@@ -33,7 +33,8 @@ import {
 } from '@looker/design-tokens'
 import omit from 'lodash/omit'
 import pick from 'lodash/pick'
-import { Space, SpaceHelperProps, SpaceVertical } from '../../Layout'
+import { Space, SpaceVertical } from '../../Layout'
+import { SimpleLayoutProps, simpleLayoutCSS } from '../../Layout/utils/simple'
 import { Legend } from '../Legend'
 import {
   Accordion,
@@ -45,19 +46,29 @@ import {
 } from '../../Accordion'
 
 export interface FieldsetProps
-  extends SpaceHelperProps,
-    CompatibleHTMLProps<HTMLDivElement>,
+  extends Omit<CompatibleHTMLProps<HTMLDivElement>, 'wrap'>,
+    SimpleLayoutProps,
     AccordionControlProps {
-  /** If true, the Fieldset will be wrapped by an Accordion structure (i.e. a collapsible section)
+  /**
+   * If true, the Fieldset will be wrapped by an Accordion structure (i.e. a collapsible section)
    * @default false
    */
   accordion?: boolean
   ariaLabeledby?: string
-  /** Determines where to place the label in relation to the input.
+  /**
+   * Determines where to place the label in relation to the input.
    * @default false
    */
   inline?: boolean
-  /** Displayed above the children of Fieldset
+
+  /**
+   * Allowed fields to wrap if they exceed the container width
+   * @default false
+   */
+  wrap?: boolean
+
+  /**
+   *  Displayed above the children of Fieldset
    */
   legend?: ReactNode
   /*
@@ -98,6 +109,7 @@ const FieldsetLayout = forwardRef(
       legend,
       fieldsHideLabel,
       children,
+      wrap,
       ...restProps
     } = omit(props, [...AccordionControlPropKeys])
 
@@ -123,6 +135,7 @@ const FieldsetLayout = forwardRef(
         ref={ref}
         role="group"
         align="start"
+        flexWrap={wrap ? 'wrap' : undefined}
       >
         {children}
       </LayoutComponent>
@@ -166,19 +179,18 @@ const FieldsetLayout = forwardRef(
 FieldsetLayout.displayName = 'FieldsetLayout'
 
 export const Fieldset = styled(FieldsetLayout)`
+  ${simpleLayoutCSS}
+
+  ${AccordionContent} {
+    padding-top: ${({ theme }) => theme.space.medium};
+  }
+
   ${AccordionDisclosure} {
     font-size: ${({ theme }) => theme.fontSizes.small};
     font-weight: ${({ theme }) => theme.fontWeights.semiBold};
     height: 24px;
     padding: ${({ theme: { space } }) => space.xxsmall} 0;
   }
-
-  ${AccordionContent} {
-    padding-top: ${({ theme }) => theme.space.medium};
-  }
 `
 
-Fieldset.defaultProps = {
-  padding: 'none',
-  width: '100%',
-}
+Fieldset.defaultProps = { width: '100%' }

packages/components/src/Form/Fieldset/__snapshots__/Fieldset.test.tsx.snap

@@ -110,17 +110,21 @@ exports[`Fieldset 1`] = `
   font-weight: 600;
 }
 
+.c0 {
+  width: 100%;
+}
+
+.c0 .c12 {
+  padding-top: 1rem;
+}
+
 .c0 .c11 {
   font-size: 0.875rem;
   font-weight: 600;
   height: 24px;
   padding: 0.25rem 0;
 }
 
-.c0 .c12 {
-  padding-top: 1rem;
-}
-
 .c6 {
   color: #343C42;
   font-size: 0.75rem;

packages/components/src/Form/Inputs/OptionsGroup/CheckboxGroup.tsx

@@ -102,7 +102,7 @@ const CheckboxGroupLayout = forwardRef(
       <Fieldset
         data-testid="checkbox-list"
         inline={inline}
-        flexWrap={inline ? 'wrap' : undefined}
+        wrap={inline}
         gap={!inline ? 'xxsmall' : undefined}
         width={inline ? 'auto' : undefined}
         ref={ref}

packages/components/src/Form/Inputs/OptionsGroup/RadioGroup.tsx

@@ -95,7 +95,7 @@ const RadioGroupLayout = forwardRef(
       <Fieldset
         data-testid="radio-list"
         inline={inline}
-        flexWrap={inline ? 'wrap' : undefined}
+        wrap={inline}
         gap={!inline ? 'xxsmall' : undefined}
         width={inline ? 'auto' : undefined}
         ref={ref}

storybook/src/Forms/CheckboxGroup.stories.tsx

@@ -61,6 +61,40 @@ const options = [
     label: 'Roquefort',
     value: 'roquefort',
   },
+  {
+    label: 'Cheddar',
+    value: 'cheddar',
+  },
+  {
+    label: 'Gouda',
+    value: 'gouda',
+  },
+  {
+    disabled: true,
+    label: 'Swiss',
+    value: 'swiss',
+  },
+  {
+    label: 'Roquefort',
+    value: 'roquefort',
+  },
+  {
+    label: 'Cheddar',
+    value: 'cheddar',
+  },
+  {
+    label: 'Gouda',
+    value: 'gouda',
+  },
+  {
+    disabled: true,
+    label: 'Swiss',
+    value: 'swiss',
+  },
+  {
+    label: 'Roquefort',
+    value: 'roquefort',
+  },
 ]
 
 const defaultValueCheckbox = ['swiss', 'cheddar']