feat(MultiSelect): new hideLabel prop (#9840)

kinueng · kodiakhq[bot] · web-flow · commit 2fe7fbe6de38 · 2021-10-14T09:26:56.000Z
* feat(MultiSelect): new hideLabel prop * feat(FilterableMultiSelect): new hideLabel prop - Add `hideLabel` prop to the filterable MultiSelect to make it consistant with the default MultiSelect. - Fix up `PublicAPI-test.js.snap` file using command `yarn test packages/react/__tests__/PublicAPI-test.js -u`. First the file was restored to commit 3e0231d, then the `yarn test` was used to make changes to `PublicAPI-test.js.snap`. - Fix format issue (spaces) in MultiSelect.js Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -3246,6 +3246,9 @@ Map {
         ],
         "type": "shape",
       },
+      "hideLabel": Object {
+        "type": "bool",
+      },
       "id": Object {
         "isRequired": true,
         "type": "string",
@@ -4209,6 +4212,9 @@ Map {
           ],
           "type": "shape",
         },
+        "hideLabel": Object {
+          "type": "bool",
+        },
         "id": Object {
           "isRequired": true,
           "type": "string",
@@ -4453,6 +4459,9 @@ Map {
         ],
         "type": "shape",
       },
+      "hideLabel": Object {
+        "type": "bool",
+      },
       "id": Object {
         "isRequired": true,
         "type": "string",
diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.js b/packages/react/src/components/MultiSelect/FilterableMultiSelect.js
@@ -51,6 +51,11 @@ export default class FilterableMultiSelect extends React.Component {
      */
     downshiftProps: PropTypes.shape(Downshift.propTypes),
 
+    /**
+     * Specify whether the title text should be hidden or not
+     */
+    hideLabel: PropTypes.bool,
+
     /**
      * Specify a custom `id`
      */
@@ -299,6 +304,7 @@ export default class FilterableMultiSelect extends React.Component {
       itemToElement,
       itemToString,
       titleText,
+      hideLabel,
       helperText,
       type,
       initialSelectedItems,
@@ -350,6 +356,7 @@ export default class FilterableMultiSelect extends React.Component {
     const titleClasses = cx({
       [`${prefix}--label`]: true,
       [`${prefix}--label--disabled`]: disabled,
+      [`${prefix}--visually-hidden`]: hideLabel,
     });
     const helperClasses = cx({
       [`${prefix}--form__helper-text`]: true,
diff --git a/packages/react/src/components/MultiSelect/MultiSelect-story.js b/packages/react/src/components/MultiSelect/MultiSelect-story.js
@@ -71,6 +71,7 @@ const directions = {
 const props = () => ({
   id: text('MultiSelect ID (id)', 'carbon-multiselect-example'),
   titleText: text('Title (titleText)', 'Multiselect title'),
+  hideLabel: boolean('No title text shown (hideLabel)', false),
   helperText: text('Helper text (helperText)', 'This is helper text'),
   disabled: boolean('Disabled (disabled)', false),
   light: boolean('Light variant (light)', false),
diff --git a/packages/react/src/components/MultiSelect/MultiSelect.js b/packages/react/src/components/MultiSelect/MultiSelect.js
@@ -44,6 +44,7 @@ const MultiSelect = React.forwardRef(function MultiSelect(
     itemToElement,
     itemToString,
     titleText,
+    hideLabel,
     helperText,
     label,
     type,
@@ -142,6 +143,7 @@ const MultiSelect = React.forwardRef(function MultiSelect(
   );
   const titleClasses = cx(`${prefix}--label`, {
     [`${prefix}--label--disabled`]: disabled,
+    [`${prefix}--visually-hidden`]: hideLabel,
   });
   const helperId = !helperText
     ? undefined
@@ -349,6 +351,11 @@ MultiSelect.propTypes = {
    */
   downshiftProps: PropTypes.shape(Downshift.propTypes),
 
+  /**
+   * Specify whether the title text should be hidden or not
+   */
+  hideLabel: PropTypes.bool,
+
   /**
    * Specify a custom `id`
    */
