From 6ff8e1d3ccf769c387ccf8b4b4c3a7ce353bef2d Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Thu, 14 Oct 2021 15:36:26 -0700
Subject: [PATCH] feat(multi-select): add hideLabel prop

---
 COMPONENT_INDEX.md                        |  1 +
 docs/src/COMPONENT_API.json               | 11 +++++++++++
 docs/src/pages/components/MultiSelect.svx | 10 ++++++++--
 src/MultiSelect/MultiSelect.svelte        |  4 ++++
 tests/MultiSelect.test.svelte             |  1 +
 types/MultiSelect/MultiSelect.d.ts        |  6 ++++++
 6 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 22d8359e..5716d6ff 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -2435,6 +2435,7 @@ export interface MultiSelectItem {
 | warnText          | <code>let</code> | No       | <code>string</code>                                                                            | <code>""</code>                                                                     | Specify the warning state text                                                        |
 | helperText        | <code>let</code> | No       | <code>string</code>                                                                            | <code>""</code>                                                                     | Specify the helper text                                                               |
 | label             | <code>let</code> | No       | <code>string</code>                                                                            | <code>""</code>                                                                     | Specify the list box label                                                            |
+| hideLabel         | <code>let</code> | No       | <code>boolean</code>                                                                           | <code>false</code>                                                                  | Set to `true` to visually hide the label text                                         |
 | id                | <code>let</code> | No       | <code>string</code>                                                                            | <code>"ccs-" + Math.random().toString(36)</code>                                    | Set an id for the list box component                                                  |
 | name              | <code>let</code> | No       | <code>string</code>                                                                            | --                                                                                  | Specify a name attribute for the select                                               |
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 358f6fe5..4020cc4d 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -6579,6 +6579,17 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "hideLabel",
+          "kind": "let",
+          "description": "Set to `true` to visually hide the label text",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "id",
           "kind": "let",
diff --git a/docs/src/pages/components/MultiSelect.svx b/docs/src/pages/components/MultiSelect.svx
index 082f8586..6af4b4dd 100644
--- a/docs/src/pages/components/MultiSelect.svx
+++ b/docs/src/pages/components/MultiSelect.svx
@@ -71,6 +71,14 @@ Set `direction` to `"top"` for the dropdown menu to appear above the input.
     {id: "2", text: "Fax"}]}"
   />
 
+### Hidden label
+
+<MultiSelect titleText="Contact" label="Select contact methods..." hideLabel
+    items="{[{id: "0", text: "Slack"},
+    {id: "1", text: "Email"},
+    {id: "2", text: "Fax"}]}"
+  />
+
 ### Light variant
 
 <MultiSelect light titleText="Contact" label="Select contact methods..."
@@ -103,8 +111,6 @@ Set `direction` to `"top"` for the dropdown menu to appear above the input.
     {id: "2", text: "Fax"}]}"
   />
 
-
-
 ### Invalid state
 
 <MultiSelect invalid invalidText="A contact method is required" titleText="Contact" label="Select contact methods..."
diff --git a/src/MultiSelect/MultiSelect.svelte b/src/MultiSelect/MultiSelect.svelte
index 7d34cdd3..c2a1f37e 100644
--- a/src/MultiSelect/MultiSelect.svelte
+++ b/src/MultiSelect/MultiSelect.svelte
@@ -116,6 +116,9 @@
   /** Specify the list box label */
   export let label = "";
 
+  /** Set to `true` to visually hide the label text */
+  export let hideLabel = false;
+
   /** Set an id for the list box component */
   export let id = "ccs-" + Math.random().toString(36);
 
@@ -259,6 +262,7 @@
       for="{id}"
       class:bx--label="{true}"
       class:bx--label--disabled="{disabled}"
+      class:bx--visually-hidden="{hideLabel}"
     >
       {titleText}
     </label>
diff --git a/tests/MultiSelect.test.svelte b/tests/MultiSelect.test.svelte
index bb632fc5..2d9eb314 100644
--- a/tests/MultiSelect.test.svelte
+++ b/tests/MultiSelect.test.svelte
@@ -6,6 +6,7 @@
   direction="top"
   titleText="Contact"
   label="Select contact methods..."
+  hideLabel
   items="{[
     { id: '0', text: 'Slack' },
     { id: '1', text: 'Email' },
diff --git a/types/MultiSelect/MultiSelect.d.ts b/types/MultiSelect/MultiSelect.d.ts
index fd0a1abe..7ed384b8 100644
--- a/types/MultiSelect/MultiSelect.d.ts
+++ b/types/MultiSelect/MultiSelect.d.ts
@@ -164,6 +164,12 @@ export interface MultiSelectProps
    */
   label?: string;
 
+  /**
+   * Set to `true` to visually hide the label text
+   * @default false
+   */
+  hideLabel?: boolean;
+
   /**
    * Set an id for the list box component
    * @default "ccs-" + Math.random().toString(36)