Merge release/1.34.1 into main branch (#728)

github-actions[bot] · web-flow · commit 689ef1f01dce · 2022-08-31T09:48:10.000-07:00
* Add label for Pill close button (#722) * remove prop spread on Accordion and ToggleInput, expose additional props as needed (#724) * update custom select Option to allow for indeterminate state on CheckboxButton (#727) * Prepare release 1.34.1
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@user-interviews/ui-design-system",
-  "version": "1.34.0",
+  "version": "1.34.1",
   "dependencies": {
     "react-bootstrap": "^2.0.2",
     "react-router-dom": "^5.2.0",
diff --git a/spec/__snapshots__/Storyshots.test.js.snap b/spec/__snapshots__/Storyshots.test.js.snap
@@ -8025,6 +8025,7 @@ exports[`Storyshots Components/Pill With Close 1`] = `
   >
     Text
     <button
+      aria-label="Remove undefined"
       className="Pill__button--close"
       onClick={[Function]}
       type="button"
@@ -9030,6 +9031,99 @@ exports[`Storyshots Components/Selects/Single Custom Option With Checkbox 1`] =
 </div>
 `;
 
+exports[`Storyshots Components/Selects/Single Custom Option With Indeterminate Checkbox 1`] = `
+<div
+  style={
+    Object {
+      "padding": "1rem",
+    }
+  }
+>
+  <label
+    htmlFor="multi-select"
+    id="select-label-custom-option-indeterminate"
+  >
+    Custom option with indeterminate checkbox
+  </label>
+  <div
+    className="SingleSelect css-b62m3t-container"
+    id="multi-select"
+    onKeyDown={[Function]}
+  >
+    <span
+      className="css-1f43avz-a11yText-A11yText"
+      id="react-select-13-live-region"
+    />
+    <span
+      aria-atomic="false"
+      aria-live="polite"
+      aria-relevant="additions text"
+      className="css-1f43avz-a11yText-A11yText"
+    />
+    <div
+      className=" css-15ub2n0-control"
+      onMouseDown={[Function]}
+      onTouchEnd={[Function]}
+    >
+      <div
+        className=" css-319lph-ValueContainer"
+      >
+        <div
+          className=" css-858797-placeholder"
+          id="react-select-13-placeholder"
+        >
+          Select...
+        </div>
+        <input
+          aria-autocomplete="list"
+          aria-describedby="react-select-13-placeholder"
+          aria-expanded={false}
+          aria-haspopup={true}
+          aria-labelledby="select-label"
+          aria-readonly={true}
+          className="css-mohuvp-dummyInput-DummyInput"
+          disabled={false}
+          id="react-select-13-input"
+          inputMode="none"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          role="combobox"
+          tabIndex={0}
+          value=""
+        />
+      </div>
+      <div
+        className=" css-1hb7zxy-IndicatorsContainer"
+      >
+        <span
+          className=" css-43ykx9-indicatorSeparator"
+        />
+        <div
+          aria-hidden="true"
+          className=" css-7sl878-indicatorContainer"
+          onMouseDown={[Function]}
+          onTouchEnd={[Function]}
+        >
+          <svg
+            aria-hidden="true"
+            className="css-tj5bde-Svg"
+            focusable="false"
+            height={20}
+            viewBox="0 0 20 20"
+            width={20}
+          >
+            <path
+              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Storyshots Components/Selects/Single Custom Value Container 1`] = `
 <div
   style={
@@ -9051,7 +9145,7 @@ exports[`Storyshots Components/Selects/Single Custom Value Container 1`] = `
   >
     <span
       className="css-1f43avz-a11yText-A11yText"
-      id="react-select-13-live-region"
+      id="react-select-14-live-region"
     />
     <span
       aria-atomic="false"
@@ -9069,20 +9163,20 @@ exports[`Storyshots Components/Selects/Single Custom Value Container 1`] = `
       >
         <div
           className=" css-858797-placeholder"
-          id="react-select-13-placeholder"
+          id="react-select-14-placeholder"
         >
           Select...
         </div>
         <input
           aria-autocomplete="list"
-          aria-describedby="react-select-13-placeholder"
+          aria-describedby="react-select-14-placeholder"
           aria-expanded={false}
           aria-haspopup={true}
           aria-labelledby="select-label"
           aria-readonly={true}
           className="css-mohuvp-dummyInput-DummyInput"
           disabled={false}
-          id="react-select-13-input"
+          id="react-select-14-input"
           inputMode="none"
           onBlur={[Function]}
           onChange={[Function]}
diff --git a/src/Accordion/Accordion.jsx b/src/Accordion/Accordion.jsx
@@ -5,25 +5,65 @@ import PropTypes from 'prop-types';
 import RBAccordion from 'react-bootstrap/Accordion';
 
 const Accordion = ({
+  activeKey,
+  alwaysOpen,
+  as,
+  defaultActiveKey,
   children,
+  flush,
+  onSelect,
   // eslint-disable-next-line camelcase
   UNSAFE_className,
-  ...props
 }) => (
   <RBAccordion
+    activeKey={activeKey}
+    alwaysOpen={alwaysOpen}
+    as={as}
     className={classNames(UNSAFE_className, 'Accordion')}
-    {...props}
+    defaultActiveKey={defaultActiveKey}
+    flush={flush}
+    onSelect={onSelect}
   >
     { children }
   </RBAccordion>
   );
 
 Accordion.propTypes = {
+  /**
+    The current active key that corresponds to the currently expanded accordion
+  */
+  activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+  /**
+    Allow accordion items to stay open when another item is opened
+  */
+  alwaysOpen: PropTypes.bool,
+  /**
+    Sets a custom element for this component
+  */
+  as: PropTypes.elementType,
+  /**
+    The default active key that is expanded on start
+  */
+  defaultActiveKey: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+  /**
+    Renders accordion edge-to-edge with its parent container
+  */
+  flush: PropTypes.bool,
   UNSAFE_className: PropTypes.string,
+  /**
+    Callback fired when the active item changes
+  */
+  onSelect: PropTypes.func,
 };
 
 Accordion.defaultProps = {
+  activeKey: undefined,
+  alwaysOpen: undefined,
+  as: undefined,
+  defaultActiveKey: undefined,
+  flush: undefined,
   UNSAFE_className: undefined,
+  onSelect: undefined,
 };
 
 export default Accordion;
diff --git a/src/Accordion/AccordionItem.jsx b/src/Accordion/AccordionItem.jsx
@@ -7,30 +7,38 @@ import RBAccordionItem from 'react-bootstrap/AccordionItem';
 import './AccordionItem.scss';
 
 const AccordionItem = ({
+  as,
   borderless,
   children,
   // eslint-disable-next-line camelcase
   UNSAFE_className,
-  ...props
 }) => (
   <RBAccordionItem
+    as={as}
     className={classNames(
       UNSAFE_className,
       'AccordionItem',
       borderless && 'AccordionItem--borderless',
     )}
-    {...props}
   >
     { children }
   </RBAccordionItem>
 );
 
 AccordionItem.propTypes = {
+  /**
+    Sets a custom element for this component
+  */
+  as: PropTypes.elementType,
+  /**
+    Removes border from accordion item
+  */
   borderless: PropTypes.bool,
   UNSAFE_className: PropTypes.string,
 };
 
 AccordionItem.defaultProps = {
+  as: undefined,
   borderless: undefined,
   UNSAFE_className: undefined,
 };
diff --git a/src/Accordion/AccordionToggle.jsx b/src/Accordion/AccordionToggle.jsx
@@ -21,7 +21,6 @@ const AccordionToggle = ({
   title,
   // eslint-disable-next-line camelcase
   UNSAFE_className,
-  ...props
 }) => {
   const { activeEventKey } = React.useContext(AccordionContext);
 
@@ -61,7 +60,6 @@ const AccordionToggle = ({
       disabled={disabled}
       type="button"
       onClick={decoratedOnClick}
-      {...props}
     >
       <div className="AccordionToggle__container">
         <div className="AccordionToggle__container--content">
diff --git a/src/Pill/Pill.jsx b/src/Pill/Pill.jsx
@@ -37,7 +37,12 @@ const Pill = ({
     { children }
     { text }
     { onClose && (
-      <button className="Pill__button--close" type="button" onClick={() => onClose(id)}>
+      <button
+        aria-label={`Remove ${text}`}
+        className="Pill__button--close"
+        type="button"
+        onClick={() => onClose(id)}
+      >
         <FontAwesomeIcon icon={faTimes} />
       </button>
         )}
diff --git a/src/Select/Option.jsx b/src/Select/Option.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { components } from 'react-select';
 
 import CheckboxButton from 'src/CheckboxButton';
@@ -13,18 +13,20 @@ import './Option.scss';
 // See: https://react-select.com/components#replaceable-components
 
 /* eslint-disable react/prop-types */
-const Option = ({ ...props }) => (
+const Option = forwardRef(({ indeterminate, ...props }, ref) => (
   <components.Option {...props}>
     <div className="Option">
       <label>{props.label}</label>
       <CheckboxButton
         checked={props.isSelected}
         id={props.label}
+        indeterminate={indeterminate}
+        ref={ref}
         onChange={() => null}
       />
     </div>
   </components.Option>
-);
+  ));
 /* eslint-enable react/prop-types */
 
 export default Option;
diff --git a/src/Select/SingleSelect.mdx b/src/Select/SingleSelect.mdx
@@ -53,6 +53,12 @@ A base select input. Flexible and comes with multiselect, clearable, searchable,
   <Story id="components-selects-single--custom-option-with-checkbox" />
 </Preview>
 
+### Custom Option With Indeterminate Checkbox
+
+<Preview>
+  <Story id="components-selects-single--custom-option-with-indeterminate-checkbox" />
+</Preview>
+
 ### Custom Value Container
 
 <Preview>
diff --git a/src/Select/SingleSelect.stories.jsx b/src/Select/SingleSelect.stories.jsx
@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, useRef } from 'react';
 import { action } from '@storybook/addon-actions';
 
 import {
@@ -117,6 +117,48 @@ export const CustomOptionWithCheckbox = () => (
   </Fragment>
 );
 
+export const CustomOptionWithIndeterminateCheckbox = () => {
+  const optionsArr = [
+    { label: 'Riley Researcher', value: 1 },
+    { label: 'Patty Participant', value: 2 },
+    { label: 'Patrick Participant (indeterminate)', value: 3 },
+    { label: 'Polly Participant (indeterminate)', value: 4 },
+  ];
+
+  let inputRef;
+
+  const createInputRef = () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    inputRef = useRef();
+    return inputRef;
+  };
+
+  return (
+    <Fragment>
+      <label htmlFor="multi-select" id="select-label-custom-option-indeterminate">Custom option with indeterminate checkbox</label>
+      <SingleSelect
+        aria-labelledby="select-label"
+        closeMenuOnSelect={false}
+        components={{
+          Option: (props) => (
+            <Option
+              {...props}
+              // eslint-disable-next-line react/prop-types
+              indeterminate={props.value > 2}
+              ref={createInputRef()}
+            />
+          ),
+        }}
+        hideSelectedOptions={false}
+        id="multi-select"
+        isMulti
+        options={optionsArr}
+        onChange={onChange}
+      />
+    </Fragment>
+  );
+};
+
 export const CustomValueContainer = () => (
   <Fragment>
     <label htmlFor="custom-value-container-select" id="select-label-custom-value-container">
diff --git a/src/ToggleInput/ToggleInput.jsx b/src/ToggleInput/ToggleInput.jsx

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@user-interviews/ui-design-system",`
`3`		`- "version": "1.34.0",`
	`3`	`+ "version": "1.34.1",`
`4`	`4`	`"dependencies": {`
`5`	`5`	`"react-bootstrap": "^2.0.2",`
`6`	`6`	`"react-router-dom": "^5.2.0",`