chore: v11 Toggle

This removes legacy `ToggleSkeleton`.
carbon-design-system · Mar 27, 2023 · c69957f · c69957f
1 parent 6d72748
commit c69957f
Show file tree

Hide file tree

Showing 11 changed files with 57 additions and 246 deletions.
diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
@@ -1,6 +1,6 @@
 # Component Index
 
-> 165 components exported from carbon-components-svelte@0.73.5.
+> 164 components exported from carbon-components-svelte@0.73.5.
 
 ## Components
 
@@ -155,7 +155,6 @@
 - [`TimePickerSelect`](#timepickerselect)
 - [`ToastNotification`](#toastnotification)
 - [`Toggle`](#toggle)
-- [`ToggleSkeleton`](#toggleskeleton)
 - [`Toolbar`](#toolbar)
 - [`ToolbarBatchActions`](#toolbarbatchactions)
 - [`ToolbarContent`](#toolbarcontent)
@@ -4345,24 +4344,22 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
 
 ### Props
 
-| Prop name | Required | Kind             | Reactive | Type                               | Default value                                    | Description                                     |
-| :-------- | :------- | :--------------- | :------- | ---------------------------------- | ------------------------------------------------ | ----------------------------------------------- |
-| toggled   | No       | <code>let</code> | Yes      | <code>boolean</code>               | <code>false</code>                               | Set to `true` to toggle the checkbox input      |
-| size      | No       | <code>let</code> | No       | <code>"default" &#124; "sm"</code> | <code>"default"</code>                           | Specify the toggle size                         |
-| disabled  | No       | <code>let</code> | No       | <code>boolean</code>               | <code>false</code>                               | Set to `true` to disable checkbox input         |
-| 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 |
+| Prop name | Required | Kind             | Reactive | Type                          | Default value                                    | Description                                     |
+| :-------- | :------- | :--------------- | :------- | ----------------------------- | ------------------------------------------------ | ----------------------------------------------- |
+| toggled   | No       | <code>let</code> | Yes      | <code>boolean</code>          | <code>false</code>                               | Set to `true` to toggle the checkbox input      |
+| size      | No       | <code>let</code> | No       | <code>"md" &#124; "sm"</code> | <code>"md"</code>                                | Specify the toggle size                         |
+| disabled  | No       | <code>let</code> | No       | <code>boolean</code>          | <code>false</code>                               | Set to `true` to disable checkbox input         |
+| 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 |
 
 ### Slots
 
 | Slot name | Default | Props | Fallback                 |
 | :-------- | :------ | :---- | :----------------------- |
-| labelA    | No      | --    | <code>{labelA}</code>    |
-| labelB    | No      | --    | <code>{labelB}</code>    |
 | labelText | No      | --    | <code>{labelText}</code> |
 
 ### Events
@@ -4379,31 +4376,6 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
 | focus      | forwarded  | --                                 |
 | blur       | forwarded  | --                                 |
 
-## `ToggleSkeleton`
-
-### Props
-
-| Prop name | Required | Kind             | Reactive | Type                               | Default value                                    | Description                     |
-| :-------- | :------- | :--------------- | :------- | ---------------------------------- | ------------------------------------------------ | ------------------------------- |
-| size      | No       | <code>let</code> | No       | <code>"default" &#124; "sm"</code> | <code>"default"</code>                           | Specify the toggle size         |
-| labelText | No       | <code>let</code> | No       | <code>string</code>                | <code>""</code>                                  | Specify 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 |
-
-### Slots
-
-| Slot name | Default | Props | Fallback                 |
-| :-------- | :------ | :---- | :----------------------- |
-| labelText | No      | --    | <code>{labelText}</code> |
-
-### Events
-
-| Event name | Type      | Detail |
-| :--------- | :-------- | :----- |
-| click      | forwarded | --     |
-| mouseover  | forwarded | --     |
-| mouseenter | forwarded | --     |
-| mouseleave | forwarded | --     |
-
 ## `Toolbar`
 
 ### Props

diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
@@ -1,5 +1,5 @@
 {
-  "total": 165,
+  "total": 164,
   "components": [
     {
       "moduleName": "Accordion",
@@ -13455,8 +13455,8 @@
           "name": "size",
           "kind": "let",
           "description": "Specify the toggle size",
-          "type": "\"default\" | \"sm\"",
-          "value": "\"default\"",
+          "type": "\"md\" | \"sm\"",
+          "value": "\"md\"",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -13561,18 +13561,6 @@
       ],
       "moduleExports": [],
       "slots": [
-        {
-          "name": "labelA",
-          "default": false,
-          "fallback": "{labelA}",
-          "slot_props": "{}"
-        },
-        {
-          "name": "labelB",
-          "default": false,
-          "fallback": "{labelB}",
-          "slot_props": "{}"
-        },
         {
           "name": "labelText",
           "default": false,
@@ -13598,65 +13586,6 @@
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "div" }
     },
-    {
-      "moduleName": "ToggleSkeleton",
-      "filePath": "src/Toggle/ToggleSkeleton.svelte",
-      "props": [
-        {
-          "name": "size",
-          "kind": "let",
-          "description": "Specify the toggle size",
-          "type": "\"default\" | \"sm\"",
-          "value": "\"default\"",
-          "isFunction": false,
-          "isFunctionDeclaration": false,
-          "isRequired": false,
-          "constant": false,
-          "reactive": false
-        },
-        {
-          "name": "labelText",
-          "kind": "let",
-          "description": "Specify the label text",
-          "type": "string",
-          "value": "\"\"",
-          "isFunction": false,
-          "isFunctionDeclaration": false,
-          "isRequired": false,
-          "constant": false,
-          "reactive": false
-        },
-        {
-          "name": "id",
-          "kind": "let",
-          "description": "Set an id for the input element",
-          "type": "string",
-          "value": "\"ccs-\" + Math.random().toString(36)",
-          "isFunction": false,
-          "isFunctionDeclaration": false,
-          "isRequired": false,
-          "constant": false,
-          "reactive": false
-        }
-      ],
-      "moduleExports": [],
-      "slots": [
-        {
-          "name": "labelText",
-          "default": false,
-          "fallback": "{labelText}",
-          "slot_props": "{}"
-        }
-      ],
-      "events": [
-        { "type": "forwarded", "name": "click", "element": "div" },
-        { "type": "forwarded", "name": "mouseover", "element": "div" },
-        { "type": "forwarded", "name": "mouseenter", "element": "div" },
-        { "type": "forwarded", "name": "mouseleave", "element": "div" }
-      ],
-      "typedefs": [],
-      "rest_props": { "type": "Element", "name": "div" }
-    },
     {
       "moduleName": "Toolbar",
       "filePath": "src/DataTable/Toolbar.svelte",

diff --git a/docs/src/pages/components/Toggle.svx b/docs/src/pages/components/Toggle.svx
@@ -1,9 +1,9 @@
 ---
-components: ["Toggle", "ToggleSkeleton"]
+components: ["Toggle"]
 ---
 
 <script>
-  import { Toggle, ToggleSkeleton } from "carbon-components-svelte";
+  import { Toggle } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
 </script>
 
@@ -33,27 +33,10 @@ Set `hideLabel` to `true` to visually hide the label text. It's recommended to s
 
 <Toggle labelText="Push notifications" labelA="No" labelB="Yes" />
 
-## Slottable labels
-
-An alternative to the "labelA" and "labelB" props is to use the corresponding named slots.
-
-<Toggle labelText="Push notifications">
-  <span slot="labelA" style="color: red">No</span>
-  <span slot="labelB" style="color: green">Yes</span>
-</Toggle>
-
 ## Disabled
 
 <Toggle labelText="Push notifications" disabled />
 
 ## Small size
 
 <Toggle size="sm" labelText="Push notifications" />
-
-## Skeleton
-
-<ToggleSkeleton />
-
-## Skeleton (small)
-
-<ToggleSkeleton size="sm" />
diff --git a/src/Toggle/Toggle.svelte b/src/Toggle/Toggle.svelte
@@ -5,9 +5,9 @@
 
   /**
    * Specify the toggle size
-   * @type {"default" | "sm"}
+   * @type {"md" | "sm"}
    */
-  export let size = "default";
+  export let size = "md";
 
   /** Set to `true` to toggle the checkbox input */
   export let toggled = false;
@@ -41,11 +41,14 @@
   const dispatch = createEventDispatcher();
 
   $: dispatch("toggle", { toggled });
+  $: sideLabel = toggled ? labelB : labelA;
+  $: isSm = size === "sm";
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
-  class:bx--form-item="{true}"
+  class:bx--toggle="{true}"
+  class:bx--toggle--disabled="{disabled}"
   {...$$restProps}
   style="{$$restProps['style']}; user-select: none"
   on:click
@@ -57,8 +60,7 @@
   <input
     role="switch"
     type="checkbox"
-    class:bx--toggle-input="{true}"
-    class:bx--toggle-input--small="{size === 'sm'}"
+    class:bx--toggle__button="{true}"
     checked="{toggled}"
     on:change="{() => {
       toggled = !toggled;
@@ -80,27 +82,40 @@
   <label
     aria-label="{labelText ? undefined : $$props['aria-label'] || 'Toggle'}"
     for="{id}"
-    class:bx--toggle-input__label="{true}"
+    class:bx--toggle__label="{true}"
   >
-    <span class:bx--visually-hidden="{hideLabel}">
+    <span
+      class:bx--toggle__label-text="{true}"
+      class:bx--visually-hidden="{hideLabel}"
+    >
       <slot name="labelText">
         {labelText}
       </slot>
     </span>
-    <span
-      class:bx--toggle__switch="{true}"
+    <div
+      class:bx--toggle__appearance="{true}"
+      class:bx--toggle__appearance--sm="{isSm}"
       style="{hideLabel && 'margin-top: 0'}"
     >
-      <span aria-hidden="true" class:bx--toggle__text--off="{true}">
-        <slot name="labelA">
-          {labelA}
-        </slot>
-      </span>
-      <span aria-hidden="true" class:bx--toggle__text--on="{true}">
-        <slot name="labelB">
-          {labelB}
-        </slot>
-      </span>
-    </span>
+      <div
+        aria-hidden="true"
+        class:bx--toggle__switch="{true}"
+        class:bx--toggle__switch--checked="{toggled}"
+      >
+        {#if isSm}
+          <svg
+            class:bx--toggle__check="{true}"
+            width="6px"
+            height="5px"
+            viewBox="0 0 6 5"
+          >
+            <path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"></path>
+          </svg>
+        {/if}
+      </div>
+      <span class:bx--toggle__text="{true}" aria-hidden="{true}"
+        >{sideLabel}</span
+      >
+    </div>
   </label>
 </div>
diff --git a/src/Toggle/ToggleSkeleton.svelte b/src/Toggle/ToggleSkeleton.svelte
diff --git a/src/Toggle/index.js b/src/Toggle/index.js
@@ -1,2 +1 @@
 export { default as Toggle } from "./Toggle.svelte";
-export { default as ToggleSkeleton } from "./ToggleSkeleton.svelte";
diff --git a/src/index.js b/src/index.js
@@ -122,7 +122,7 @@ export {
   TileGroup,
 } from "./Tile";
 export { TimePicker, TimePickerSelect } from "./TimePicker";
-export { Toggle, ToggleSkeleton } from "./Toggle";
+export { Toggle } from "./Toggle";
 export { Tooltip, TooltipFooter } from "./Tooltip";
 export { TooltipDefinition } from "./TooltipDefinition";
 export { TooltipIcon } from "./TooltipIcon";

diff --git a/tests/Toggle.test.svelte b/tests/Toggle.test.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Toggle, ToggleSkeleton } from "../types";
+  import { Toggle } from "../types";
 </script>
 
 <Toggle labelText="Push notifications" hideLabel />
@@ -15,5 +15,3 @@
 <Toggle labelText="Push notifications" labelA="No" labelB="Yes" />
 
 <Toggle labelText="Push notifications" disabled />
-
-<ToggleSkeleton />
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1 @@
		export { default as Toggle } from "./Toggle.svelte";
		export { default as ToggleSkeleton } from "./ToggleSkeleton.svelte";