From f4d12b805a849800fe557db49f3925eae6cb3849 Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Tue, 26 Jul 2022 07:12:57 -0700
Subject: [PATCH] fix(toggle): add missing `hideLabel` prop  (#1414)

* fix(toggle): add missing hideLabel prop

* Run "yarn build:docs"

* test(toggle): assert hideLabel prop

* docs(toggle): add "Hidden label text" example
---
 COMPONENT_INDEX.md                   |  1 +
 docs/src/COMPONENT_API.json          | 12 ++++++++++++
 docs/src/pages/components/Toggle.svx |  6 ++++++
 src/Toggle/Toggle.svelte             | 11 ++++++++---
 tests/Toggle.test.svelte             |  2 +-
 types/Toggle/Toggle.svelte.d.ts      |  6 ++++++
 6 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 671f75d5..6bef1bd4 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -4347,6 +4347,7 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
 | labelA    | No       | <code>let</code> | No       | <code>string</code>                | <code>"Off"</code>                               | Specify the label for the untoggled state       |
 | labelB    | No       | <code>let</code> | No       | <code>string</code>                | <code>"On"</code>                                | Specify the label for the toggled state         |
 | labelText | No       | <code>let</code> | No       | <code>string</code>                | <code>""</code>                                  | Specify the label text                          |
+| hideLabel | No       | <code>let</code> | No       | <code>boolean</code>               | <code>false</code>                               | Set to `true` to visually hide the label text   |
 | id        | No       | <code>let</code> | No       | <code>string</code>                | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element                 |
 | name      | No       | <code>let</code> | No       | <code>string</code>                | <code>undefined</code>                           | Specify a name attribute for the checkbox input |
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 88e67162..8786b33e 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -13494,6 +13494,18 @@
           "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,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "id",
           "kind": "let",
diff --git a/docs/src/pages/components/Toggle.svx b/docs/src/pages/components/Toggle.svx
index dbdca10c..0ace0682 100644
--- a/docs/src/pages/components/Toggle.svx
+++ b/docs/src/pages/components/Toggle.svx
@@ -23,6 +23,12 @@ components: ["Toggle", "ToggleSkeleton"]
 
 <Toggle labelText="Push notifications" on:toggle={e => console.log(e.detail)} />
 
+### Hidden label text
+
+Set `hideLabel` to `true` to visually hide the label text. It's recommended to still specify `labelText` for screen reader accessibility.
+
+<Toggle labelText="Push notifications" hideLabel />
+
 ### Custom labels
 
 <Toggle labelText="Push notifications" labelA="No" labelB="Yes" />
diff --git a/src/Toggle/Toggle.svelte b/src/Toggle/Toggle.svelte
index 2ef58b0e..786e755a 100644
--- a/src/Toggle/Toggle.svelte
+++ b/src/Toggle/Toggle.svelte
@@ -24,6 +24,9 @@
   /** Specify the label text */
   export let labelText = "";
 
+  /** Set to `true` to visually hide the label text */
+  export let hideLabel = false;
+
   /** Set an id for the input element */
   export let id = "ccs-" + Math.random().toString(36);
 
@@ -76,9 +79,11 @@
     for="{id}"
     class:bx--toggle-input__label="{true}"
   >
-    <slot name="labelText">
-      {labelText}
-    </slot>
+    <span class:bx--visually-hidden="{hideLabel}">
+      <slot name="labelText">
+        {labelText}
+      </slot>
+    </span>
     <span class:bx--toggle__switch="{true}">
       <span aria-hidden="true" class:bx--toggle__text--off="{true}">
         <slot name="labelA">
diff --git a/tests/Toggle.test.svelte b/tests/Toggle.test.svelte
index d5af2c9e..55bf0baf 100644
--- a/tests/Toggle.test.svelte
+++ b/tests/Toggle.test.svelte
@@ -2,7 +2,7 @@
   import { Toggle, ToggleSkeleton } from "../types";
 </script>
 
-<Toggle labelText="Push notifications" />
+<Toggle labelText="Push notifications" hideLabel />
 
 <Toggle
   labelText="Push notifications"
diff --git a/types/Toggle/Toggle.svelte.d.ts b/types/Toggle/Toggle.svelte.d.ts
index 4f7fef94..27abc2d0 100644
--- a/types/Toggle/Toggle.svelte.d.ts
+++ b/types/Toggle/Toggle.svelte.d.ts
@@ -39,6 +39,12 @@ export interface ToggleProps
    */
   labelText?: string;
 
+  /**
+   * Set to `true` to visually hide the label text
+   * @default false
+   */
+  hideLabel?: boolean;
+
   /**
    * Set an id for the input element
    * @default "ccs-" + Math.random().toString(36)