Merge pull request #401 from IBM/toggle-size

feat(toggle): support small size, deprecate ToggleSmall

COMPONENT_INDEX.md

@@ -3863,15 +3863,16 @@ None.
 
 ### Props
 
-| Prop name | Kind             | Reactive | Type                 | Default value                                    | Description                                     |
+| Prop name | Kind             | Reactive | Type                               | Default value                                    | Description                                     |
-| :-------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | ----------------------------------------------- |
+| :-------- | :--------------- | :------- | :--------------------------------- | ------------------------------------------------ | ----------------------------------------------- |
-| toggled   | <code>let</code> | Yes      | <code>boolean</code> | <code>false</code>                               | Set to `true` to toggle the checkbox input      |
+| toggled   | <code>let</code> | Yes      | <code>boolean</code>               | <code>false</code>                               | Set to `true` to toggle the checkbox input      |
-| disabled  | <code>let</code> | No       | <code>boolean</code> | <code>false</code>                               | Set to `true` to disable checkbox input         |
+| size      | <code>let</code> | No       | <code>"default" &#124; "sm"</code> | <code>"default"</code>                           | Specify the toggle size                         |
-| labelA    | <code>let</code> | No       | <code>string</code>  | <code>"Off"</code>                               | Specify the label for the untoggled state       |
+| disabled  | <code>let</code> | No       | <code>boolean</code>               | <code>false</code>                               | Set to `true` to disable checkbox input         |
-| labelB    | <code>let</code> | No       | <code>string</code>  | <code>"On"</code>                                | Specify the label for the toggled state         |
+| labelA    | <code>let</code> | No       | <code>string</code>                | <code>"Off"</code>                               | Specify the label for the untoggled state       |
-| labelText | <code>let</code> | No       | <code>string</code>  | <code>""</code>                                  | Specify the label text                          |
+| labelB    | <code>let</code> | No       | <code>string</code>                | <code>"On"</code>                                | Specify the label for the toggled state         |
-| id        | <code>let</code> | No       | <code>string</code>  | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element                 |
+| labelText | <code>let</code> | No       | <code>string</code>                | <code>""</code>                                  | Specify the label text                          |
-| name      | <code>let</code> | No       | <code>string</code>  | --                                               | Specify a name attribute for the checkbox input |
+| id        | <code>let</code> | No       | <code>string</code>                | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element                 |
+| name      | <code>let</code> | No       | <code>string</code>                | --                                               | Specify a name attribute for the checkbox input |
 
 ### Slots
 
@@ -3894,10 +3895,11 @@ None.
 
 ### Props
 
-| Prop name | Kind             | Reactive | Type                | Default value                                    | Description                     |
+| Prop name | Kind             | Reactive | Type                               | Default value                                    | Description                     |
-| :-------- | :--------------- | :------- | :------------------ | ------------------------------------------------ | ------------------------------- |
+| :-------- | :--------------- | :------- | :--------------------------------- | ------------------------------------------------ | ------------------------------- |
-| labelText | <code>let</code> | No       | <code>string</code> | <code>""</code>                                  | Specify the label text          |
+| size      | <code>let</code> | No       | <code>"default" &#124; "sm"</code> | <code>"default"</code>                           | Specify the toggle size         |
-| id        | <code>let</code> | No       | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
+| labelText | <code>let</code> | No       | <code>string</code>                | <code>""</code>                                  | Specify the label text          |
+| id        | <code>let</code> | No       | <code>string</code>                | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
 
 ### Slots
 

docs/src/COMPONENT_API.json

@@ -8956,6 +8956,16 @@
       "moduleName": "Toggle",
       "filePath": "/src/Toggle/Toggle.svelte",
       "props": [
+        {
+          "name": "size",
+          "kind": "let",
+          "description": "Specify the toggle size",
+          "type": "\"default\" | \"sm\"",
+          "value": "\"default\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "toggled",
           "kind": "let",
@@ -9044,6 +9054,16 @@
       "moduleName": "ToggleSkeleton",
       "filePath": "/src/Toggle/ToggleSkeleton.svelte",
       "props": [
+        {
+          "name": "size",
+          "kind": "let",
+          "description": "Specify the toggle size",
+          "type": "\"default\" | \"sm\"",
+          "value": "\"default\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "labelText",
           "kind": "let",

docs/src/pages/components/CodeSnippet.svx

@@ -27,7 +27,7 @@ let comment = `
 `
 </script>
 
-<InlineNotification svx-ignore lowContrast title="Note:" subtitle="By design, the copy button does not copy text to the clipboard. You will need to write your own logic." kind="info" hideCloseButton />
+<InlineNotification svx-ignore title="Note:" subtitle="By design, the copy button does not copy text to the clipboard. You will need to write your own logic." kind="info" hideCloseButton />
 
 ### Default (single-line)
 

docs/src/pages/components/CopyButton.svx

@@ -3,7 +3,7 @@
   import Preview from "../../components/Preview.svelte";
 </script>
 
-<InlineNotification svx-ignore lowContrast title="Note:" subtitle="By design, the copy button does not copy text to the clipboard. You will need to write your own logic." kind="info" hideCloseButton />
+<InlineNotification svx-ignore title="Note:" subtitle="By design, the copy button does not copy text to the clipboard. You will need to write your own logic." kind="info" hideCloseButton />
 
 ### Default
 

docs/src/pages/components/Toggle.svx

@@ -23,6 +23,14 @@ components: ["Toggle", "ToggleSkeleton"]
 
 <Toggle labelText="Push notifications" disabled />
 
+### Small size
+
+<Toggle size="sm" labelText="Push notifications" />
+
 ### Skeleton
 
 <ToggleSkeleton />
+
+### Skeleton (small)
+
+<ToggleSkeleton size="sm" />

docs/src/pages/components/ToggleSmall.svx

@@ -3,10 +3,16 @@ components: ["ToggleSmall", "ToggleSmallSkeleton"]
 ---
 
 <script>
-  import { ToggleSmall, ToggleSmallSkeleton } from "carbon-components-svelte";
+  import { ToggleSmall, ToggleSmallSkeleton, InlineNotification, Link } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
 </script>
 
+<InlineNotification svx-ignore title="Deprecation warning" kind="warning" hideCloseButton>
+  <div>
+    This component will be removed in version 1.0.0. Use the <Link href="/components/Toggle#small-size">Toggle small variant</Link> instead.
+  </div>
+</InlineNotification>
+
 ### Default (untoggled)
 
 <ToggleSmall labelText="Push notifications" />

src/Toggle/Toggle.svelte

@@ -1,4 +1,10 @@
 <script>
+  /**
+   * Specify the toggle size
+   * @type {"default" | "sm"}
+   */
+  export let size = "default";
+
   /** Set to `true` to toggle the checkbox input */
   export let toggled = false;
 
@@ -35,6 +41,7 @@
   <input
     type="checkbox"
     class:bx--toggle-input="{true}"
+    class:bx--toggle-input--small="{size === 'sm'}"
     checked="{toggled}"
     on:change
     on:change="{() => {

src/Toggle/ToggleSkeleton.svelte

@@ -1,4 +1,10 @@
 <script>
+  /**
+   * Specify the toggle size
+   * @type {"default" | "sm"}
+   */
+  export let size = "default";
+
   /** Specify the label text */
   export let labelText = "";
 
@@ -18,6 +24,7 @@
     type="checkbox"
     id="{id}"
     class:bx--toggle="{true}"
+    class:bx--toggle--small="{size === 'sm'}"
     class:bx--skeleton="{true}"
   />
   <label

src/ToggleSmall/ToggleSmall.svelte

@@ -1,4 +1,10 @@
 <script>
+  /**
+   * @deprecated
+   * This component will be removed in version 1.0.0.
+   * Use `<Toggle size="sm" />` instead
+   */
+
   /** Set to `true` to toggle the checkbox input */
   export let toggled = false;
 

src/ToggleSmall/ToggleSmallSkeleton.svelte

@@ -1,4 +1,10 @@
 <script>
+  /**
+   * @deprecated
+   * This component will be removed in version 1.0.0.
+   * Use `<ToggleSkeleton size="sm" />` instead
+   */
+
   /** Specify the label text */
   export let labelText = "";
 

types/Toggle/Toggle.d.ts

@@ -1,6 +1,12 @@
 /// <reference types="svelte" />
 
 export interface ToggleProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Specify the toggle size
+   * @default "default"
+   */
+  size?: "default" | "sm";
+
   /**
    * Set to `true` to toggle the checkbox input
    * @default false

types/Toggle/ToggleSkeleton.d.ts

@@ -1,6 +1,12 @@
 /// <reference types="svelte" />
 
 export interface ToggleSkeletonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Specify the toggle size
+   * @default "default"
+   */
+  size?: "default" | "sm";
+
   /**
    * Specify the label text
    * @default ""