Labeled field updates

.storybook/styles/components/_forms.scss

@@ -1,7 +1,7 @@
 /*-----------------------
-Fieldset
+Fieldsets and Field Wrappers
 -----------------------*/
-.field-wrapper {
+fieldset, .field-wrapper {
   display: inline-block;
   @include rem(margin-top, 15px);
   position: relative;
@@ -149,7 +149,7 @@ Radio
 /*-----------------------
 Checkbox
 -----------------------*/
-div.checkbox {
+.checkbox {
   @include rem(margin-top, 15px);
   width: auto;
 

README.md

@@ -29,6 +29,7 @@ Documentation and usage info can be found in [docs.md](docs.md).
 - [v7.0.0](migration-guides/v7.0.0.md)
 - [v8.0.0](migration-guides/v8.0.0.md)
 - [v9.0.0](migration-guides/v9.0.0.md)
+- [v10.0.0](migration-guides/v10.0.0.md)
 
 ## Contribution
 

docs.md

@@ -368,7 +368,7 @@ Clicking an unselected checkbox adds its value to this array, and clicking a sel
 *   `meta` **[Object][145]** A `redux-form` [meta][147] object
 *   `options` **[Array][143]** An array of checkbox values (strings, numbers, or key-value pairs)
 *   `checkboxInputProps` **[Object][145]** An object of key-value pairs representing props to pass down to all checkbox inputs (optional, default `{}`)
-*   `useDropdown` **[Boolean][141]?** A boolean that determines whether the checkbox options are displayed in a dropdown container or not (optional, default `false`)
+*   `dropdown` **[Boolean][141]** A flag indicating whether the checkbox options are displayed in a dropdown container or not (optional, default `false`)
 
 ### Examples
 
@@ -1065,7 +1065,7 @@ function EmailInput ({
 
 ## LabeledField
 
-A container wrapper for redux-form controlled inputs. This wrapper adds a label component (defaults to [InputLabel][68])
+A container for redux-form controlled inputs. This wrapper adds a label component (defaults to [InputLabel][68])
 above the wrapped component and an error component below (defaults to [InputError][65]). Additionally, it adds the class `"error"`
 to the container if the input is touched and invalid.
 
@@ -1075,9 +1075,10 @@ use the [omitLabelProps][88] helper.
 
 ### Parameters
 
-*   `hideErrorLabel` **[Boolean][141]?** A boolean determining whether to hide the error label on input error (optional, default `false`)
+*   `hideErrorLabel` **[Boolean][141]** A boolean determining whether to hide the error label on input error (optional, default `false`)
 *   `labelComponent` **[Function][140]** A custom label component for the input (optional, default `InputLabel`)
 *   `errorComponent` **[Function][140]** A custom error component for the input (optional, default `InputError`)
+*   `as` **[String][139]** A string that determines the element type of the wrapper (optional, default `'div'`)
 
 ### Examples
 

migration-guides/v.10.0.0.md

@@ -0,0 +1,82 @@
+# v10.0.0 Migration Guide
+
+This version contains the following breaking changes:
+
+1. All inputs, except for `CheckboxGroup` and `RadioGroup`, are now wrapped in a `div`
+2. The `LabeledField` component is now rendered as a `div` by default and accepts an optional prop `as` that can overwrite the HTML element
+3. The `DropdownCheckboxGroup` component is now `CheckboxGroup` with prop `dropdown`=`true`
+4. The `CheckboxGroup` and `RadioGroup` legends now rely on `visually-hidden` class styles to hide the label from the view
+
+Further explanation of each item is detailed below.
+
+---
+## 1. All inputs, except for `CheckboxGroup` and `RadioGroup`, are now wrapped in a 'div'
+`fieldset` no longer wraps each input unless when grouping related form controls (i.e., `CheckboxGroup` and `RadioGroup`). This affects base styles in _forms.scss and any custom rules your code might have that rely on the outdated structure. 
+
+```html
+<!-- Input HTML Before -->
+<fieldset class="custom-class-name">
+    <span>
+        <label for="person.firstName" class="">First Name</label>
+    </span>
+    <div class="input-wrapper">
+        <input id="person.firstName" name="person.firstName" type="text" value="">
+    </div>
+</fieldset>
+
+<!-- Input HTML After -->
+<div class="field-wrapper custom-class-name">
+    <span>
+        <label for="person.firstName" class="">First Name</label>
+    </span>
+    <div class="input-wrapper">
+        <input id="person.firstName" name="person.firstName" type="text" value="">
+    </div>
+</div>
+```
+
+## 2. The `LabeledField` component is now rendered as a `div` by default and accepts an optional prop `as` that can overwrite the HTML element
+If you are using `LabeledField` with a non-grouping input, do not overwrite the wrapper's element, as it should not be `fieldset`. You may need to update your code that relies on the outdated structure. If you are using `LabeledField` with grouped related fields, pass in "fieldset" for the prop `as` and make sure the custom label component has `legend` as its first child ([source](https://www.w3.org/TR/WCAG20-TECHS/H71.html#:~:text=The%20first%20element%20inside%20the,related%20radio%20buttons%20and%20checkboxes))- you can reference the `CheckboxGroup` or `RadioGroup` component as an example.
+
+## 3. The `DropdownCheckboxGroup` component is now `CheckboxGroup` with prop `dropdown`=`true`
+Due to high functionality overlap between the two components, `DropdownCheckboxGroup` has been removed and instead `CheckboxGroup` now accepts the optional `dropdown` prop that defaults to `false`. When the prop's value is set to `true`, the checkbox options appear in a dropdown container, just like it did in `DropdownCheckboxGroup`.
+
+```jsx
+const inputProps = {
+  name: 'person.checkboxOptions',
+  value: '',
+  onChange: action('field changed'),
+}
+const options = [
+  { key: 'First Option', value: '1' },
+  { key: 'Second Option', value: '2' },
+  { key: 'Third Option', value: '3' },
+]
+
+// Before:
+import { DropdownCheckboxGroup } from 'lp-components'
+
+<DropdownCheckboxGroup input={inputProps} meta={{}} options={options} />
+
+// After:
+import { CheckboxGroup } from 'lp-components'
+
+<CheckboxGroup input={inputProps} meta={{}} options={options} dropdown={true} />
+```
+
+## 4. The `CheckboxGroup` and `RadioGroup` legends now rely on `visually-hidden` class styles to hide the label from the view
+To follow the accessibility guideline of `fieldset` having one `legend` as its direct child, changes have been made in `CheckboxGroup` and `RadioGroup` to always render the `legend` and if `label=false` is passed into the components, the class name "visually-hidden" is added to the legend in order to visually hide it. Please make sure the following class styles are included in your project's root stylesheet:
+
+```css
+.visually-hidden:not(:focus):not(:active) {
+  clip: rect(0 0 0 0) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  overflow: hidden !important;
+  position: absolute !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+  padding: 0 !important;
+}
+```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@launchpadlab/lp-components",
-  "version": "10.2.0",
+  "version": "10.0.0",
   "engines": {
     "node": "^18.12"
   },
@@ -104,4 +104,4 @@
     "src/**/*.{js,jsx}": "eslint --fix --max-warnings=0",
     "src/**/*.{js,jsx,json,scss}": "prettier --write"
   }
-}
+}

src/forms/helpers/dropdown-select.js

@@ -8,27 +8,38 @@ const propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   selectedValues: PropTypes.arrayOf(PropTypes.string),
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      key: PropTypes.string.isRequired,
+      value: PropTypes.string.isRequired,
+    })
+  ),
 }
 
 const defaultProps = {
   className: '',
   selectedValues: [],
+  options: [],
 }
 
-// Wraps the `CheckboxGroup` component
+// Wraps the `CheckboxGroup` component when dropdown is set to true.
 
-function DropdownSelect({ children, className, selectedValues }) {
+function DropdownSelect({ children, className, selectedValues, options }) {
   const [expanded, toggleExpanded] = useToggle()
 
   return (
     <OutsideClickHandler onOutsideClick={() => toggleExpanded(false)}>
-      <div className="dropdown-select">
+      <div
+        className={classnames('dropdown-select', {
+          'is-active': expanded,
+        })}
+      >
         <button
           type="button"
           className="select-input"
           onClick={() => toggleExpanded()}
         >
-          <p>{getLabel(selectedValues)}</p>
+          <p>{getLabel(selectedValues, options)}</p>
         </button>
         <div
           className={classnames(className, 'options', {
@@ -46,8 +57,9 @@ DropdownSelect.propTypes = propTypes
 
 DropdownSelect.defaultProps = defaultProps
 
-function getLabel(values) {
-  return values.length ? values.join(', ') : 'None'
+function getLabel(values, options) {
+  const labels = values.map((v) => options.find((o) => o.value === v).key)
+  return values.length ? labels.join(', ') : 'None'
 }
 
 export default DropdownSelect

src/forms/inputs/checkbox-group.js

@@ -36,7 +36,7 @@ import classnames from 'classnames'
  * @param {Object} meta - A `redux-form` [meta](http://redux-form.com/6.5.0/docs/api/Field.md/#meta-props) object
  * @param {Array} options - An array of checkbox values (strings, numbers, or key-value pairs)
  * @param {Object} [checkboxInputProps={}] - An object of key-value pairs representing props to pass down to all checkbox inputs
- * @param {Boolean} [useDropdown] - A boolean that determines whether the checkbox options are displayed in a dropdown container or not (optional, default `false`)
+ * @param {Boolean} [dropdown=false] - A flag indicating whether the checkbox options are displayed in a dropdown container or not
  * @example
  *
  * function TodoForm ({ handleSubmit, pristine, invalid, submitting }) {
@@ -91,14 +91,14 @@ const propTypes = {
   className: PropTypes.string,
   checkboxInputProps: PropTypes.object,
   options: fieldOptionsType,
-  useDropdown: PropTypes.bool,
+  dropdown: PropTypes.bool,
 }
 
 const defaultProps = {
   className: 'CheckboxGroup',
   checkboxInputProps: {},
   options: [],
-  useDropdown: false,
+  dropdown: false,
 }
 
 function CheckboxGroupLegend({
@@ -121,10 +121,10 @@ function CheckboxGroupLegend({
   )
 }
 
-function CheckboxOptionContainer({ children, useDropdown, value }) {
-  if (useDropdown)
+function CheckboxOptionsContainer({ children, dropdown, ...rest }) {
+  if (dropdown)
     return (
-      <DropdownSelect selectedValues={value} className="checkboxes">
+      <DropdownSelect className="checkboxes" {...rest}>
         {children}
       </DropdownSelect>
     )
@@ -139,7 +139,7 @@ function CheckboxGroup(props) {
     options,
     className,
     checkboxInputProps,
-    useDropdown,
+    dropdown,
     ...rest
   } = props
   const inputProps = omitLabelProps(rest)
@@ -150,7 +150,7 @@ function CheckboxGroup(props) {
     return function (checked) {
       // Add or remove option value from array of values, depending on whether it's checked
       const newValueArray = checked
-        ? addToArray([option.value], value)
+        ? addToArray(value, [option.value])
         : removeFromArray([option.value], value)
       return onChange(newValueArray)
     }
@@ -163,11 +163,15 @@ function CheckboxGroup(props) {
       as="fieldset"
       {...props}
     >
-      <CheckboxOptionContainer useDropdown={useDropdown} value={value}>
+      <CheckboxOptionsContainer
+        dropdown={dropdown}
+        selectedValues={value}
+        options={optionObjects}
+      >
         {optionObjects.map((option) => (
-          <Checkbox // eslint-disable-line react/jsx-key
+          <Checkbox
+            key={option.value}
             {...{
-              key: option.value,
               input: {
                 name: `${name}.${option.value}`,
                 value: value.includes(option.value),
@@ -180,7 +184,7 @@ function CheckboxGroup(props) {
             }}
           />
         ))}
-      </CheckboxOptionContainer>
+      </CheckboxOptionsContainer>
     </LabeledField>
   )
 }

src/forms/inputs/radio-group.js

@@ -150,11 +150,11 @@ function RadioGroup(props) {
       as="fieldset"
       {...props}
     >
-      {optionObjects.map((option, i) => {
+      {optionObjects.map((option) => {
         return (
-          <RadioButton // eslint-disable-line react/jsx-key
+          <RadioButton
+            key={option.value}
             {...{
-              key: i,
               type: 'radio',
               input: {
                 name, // all radio inputs must share the same name

src/forms/labels/labeled-field.js

@@ -7,7 +7,7 @@ import { hasInputError } from '../helpers'
 
 /**
  *
- * A container wrapper for redux-form controlled inputs. This wrapper adds a label component (defaults to {@link InputLabel})
+ * A container for redux-form controlled inputs. This wrapper adds a label component (defaults to {@link InputLabel})
  * above the wrapped component and an error component below (defaults to {@link InputError}). Additionally, it adds the class `"error"`
  * to the container if the input is touched and invalid.
  *
@@ -17,10 +17,10 @@ import { hasInputError } from '../helpers'
  *
  * @name LabeledField
  * @type Function
- * @param {Boolean} [hideErrorLabel] - A boolean determining whether to hide the error label on input error (optional, default `false`)
+ * @param {Boolean} [hideErrorLabel=false] - A boolean determining whether to hide the error label on input error
  * @param {Function} [labelComponent=InputLabel] - A custom label component for the input
  * @param {Function} [errorComponent=InputError] - A custom error component for the input
- * @param {Element Type} [as] - A string that determines the element type of the component (optional, default `div`)
+ * @param {String} [as='div'] - A string that determines the element type of the wrapper
  *
  * @example
  *
@@ -73,7 +73,7 @@ const propTypes = {
   ...InputError.propTypes,
   children: PropTypes.node,
   hideErrorLabel: PropTypes.bool,
-  as: PropTypes.elementType,
+  as: PropTypes.oneOf(['div', 'fieldset']),
 }
 
 const defaultProps = {
@@ -91,25 +91,25 @@ function LabeledField({
   children,
   hideErrorLabel,
   label,
-  as: Component,
+  as: Wrapper,
   ...rest
 }) {
   const { name } = input
   const { touched, invalid } = meta
   return (
-    <Component
-      className={classnames(className, 'field-wrapper', {
+    <Wrapper
+      className={classnames(className, {
         error: hasInputError({ touched, invalid }),
         disabled: rest.disabled,
+        'field-wrapper': Wrapper !== 'fieldset',
       })}
-      role="group"
     >
       <LabelComponent {...{ name, id, label, ...rest }} />
       {children}
       {!hideErrorLabel && (
         <ErrorComponent {...{ ...input, ...meta, ...rest }} />
       )}
-    </Component>
+    </Wrapper>
   )
 }
 

stories/forms/inputs/checkbox-group.story.js

@@ -75,6 +75,11 @@ storiesOf('CheckboxGroup', module)
       }}
     />
   ))
-  .add('with dropdown options', () => (
-    <CheckboxGroup input={inputProps} meta={{}} options={options} useDropdown />
-  )) 
+  .add('with dropdown', () => (
+    <CheckboxGroup
+      input={inputProps}
+      meta={{}}
+      options={options}
+      dropdown={true}
+    />
+  ))