From 2fe7fbe6de38c1df19836dc68e6e044282b7d085 Mon Sep 17 00:00:00 2001
From: Kin Ueng <github@kinueng.com>
Date: Thu, 14 Oct 2021 04:26:56 -0500
Subject: [PATCH] feat(MultiSelect): new hideLabel prop (#9840)

* 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 3e0231dd76b0b1f95082121f3072c82e9240ea99,
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>
---
 .../react/__tests__/__snapshots__/PublicAPI-test.js.snap | 9 +++++++++
 .../src/components/MultiSelect/FilterableMultiSelect.js  | 7 +++++++
 .../src/components/MultiSelect/MultiSelect-story.js      | 1 +
 packages/react/src/components/MultiSelect/MultiSelect.js | 7 +++++++
 4 files changed, 24 insertions(+)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index 05d39d9412c2..6ac36a38f0a8 100644
--- 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
index cb24c8682785..8e5b11491691 100644
--- 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
index b83299725350..7b6189191402 100644
--- 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
index aa148aa2cb46..1f38ef456a2c 100644
--- 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`
    */