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 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>

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",

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,

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),

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`
    */