From 1e3eef992c5942dcb7ff3a94511c3257b29bac31 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Thu, 19 Nov 2020 15:20:01 -0800 Subject: [PATCH] feat(toggle): support small size, deprecate ToggleSmall --- COMPONENT_INDEX.md | 28 ++++++++++++---------- docs/src/COMPONENT_API.json | 20 ++++++++++++++++ docs/src/pages/components/CodeSnippet.svx | 2 +- docs/src/pages/components/CopyButton.svx | 2 +- docs/src/pages/components/Toggle.svx | 10 +++++++- docs/src/pages/components/ToggleSmall.svx | 8 ++++++- src/Toggle/Toggle.svelte | 7 ++++++ src/Toggle/ToggleSkeleton.svelte | 7 ++++++ src/ToggleSmall/ToggleSmall.svelte | 6 +++++ src/ToggleSmall/ToggleSmallSkeleton.svelte | 6 +++++ types/Toggle/Toggle.d.ts | 6 +++++ types/Toggle/ToggleSkeleton.d.ts | 6 +++++ 12 files changed, 91 insertions(+), 17 deletions(-) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index d4f75909..4728e020 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -3863,15 +3863,16 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | ----------------------------------------------- | -| toggled | let | Yes | boolean | false | Set to `true` to toggle the checkbox input | -| disabled | let | No | boolean | false | Set to `true` to disable checkbox input | -| labelA | let | No | string | "Off" | Specify the label for the untoggled state | -| labelB | let | No | string | "On" | Specify the label for the toggled state | -| labelText | let | No | string | "" | Specify the label text | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | -| name | let | No | string | -- | Specify a name attribute for the checkbox input | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :--------------------------------- | ------------------------------------------------ | ----------------------------------------------- | +| toggled | let | Yes | boolean | false | Set to `true` to toggle the checkbox input | +| size | let | No | "default" | "sm" | "default" | Specify the toggle size | +| disabled | let | No | boolean | false | Set to `true` to disable checkbox input | +| labelA | let | No | string | "Off" | Specify the label for the untoggled state | +| labelB | let | No | string | "On" | Specify the label for the toggled state | +| labelText | let | No | string | "" | Specify the label text | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | +| name | let | No | string | -- | Specify a name attribute for the checkbox input | ### Slots @@ -3894,10 +3895,11 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------ | ------------------------------------------------ | ------------------------------- | -| labelText | let | No | string | "" | Specify the label text | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :--------------------------------- | ------------------------------------------------ | ------------------------------- | +| size | let | No | "default" | "sm" | "default" | Specify the toggle size | +| labelText | let | No | string | "" | Specify the label text | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | ### Slots diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 416f6d11..c5f8abd2 100644 --- a/docs/src/COMPONENT_API.json +++ b/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", diff --git a/docs/src/pages/components/CodeSnippet.svx b/docs/src/pages/components/CodeSnippet.svx index d86f3894..697931af 100644 --- a/docs/src/pages/components/CodeSnippet.svx +++ b/docs/src/pages/components/CodeSnippet.svx @@ -27,7 +27,7 @@ let comment = ` ` - + ### Default (single-line) diff --git a/docs/src/pages/components/CopyButton.svx b/docs/src/pages/components/CopyButton.svx index b48be93a..e9c983ce 100644 --- a/docs/src/pages/components/CopyButton.svx +++ b/docs/src/pages/components/CopyButton.svx @@ -3,7 +3,7 @@ import Preview from "../../components/Preview.svelte"; - + ### Default diff --git a/docs/src/pages/components/Toggle.svx b/docs/src/pages/components/Toggle.svx index 99103557..9a74efcd 100644 --- a/docs/src/pages/components/Toggle.svx +++ b/docs/src/pages/components/Toggle.svx @@ -23,6 +23,14 @@ components: ["Toggle", "ToggleSkeleton"] +### Small size + + + ### Skeleton - \ No newline at end of file + + +### Skeleton (small) + + \ No newline at end of file diff --git a/docs/src/pages/components/ToggleSmall.svx b/docs/src/pages/components/ToggleSmall.svx index c2e5c9c0..a1158fd1 100644 --- a/docs/src/pages/components/ToggleSmall.svx +++ b/docs/src/pages/components/ToggleSmall.svx @@ -3,10 +3,16 @@ components: ["ToggleSmall", "ToggleSmallSkeleton"] --- + +
+ This component will be removed in version 1.0.0. Use the Toggle small variant instead. +
+ + ### Default (untoggled) diff --git a/src/Toggle/Toggle.svelte b/src/Toggle/Toggle.svelte index 947554e6..7bd0a829 100644 --- a/src/Toggle/Toggle.svelte +++ b/src/Toggle/Toggle.svelte @@ -1,4 +1,10 @@