diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index d498d30279..d992c6035d 100644 --- 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 | let | Yes | boolean | false | Set to `true` to toggle the checkbox input | -| size | No | let | No | "default" | "sm" | "default" | Specify the toggle size | -| disabled | No | let | No | boolean | false | Set to `true` to disable checkbox input | -| labelA | No | let | No | string | "Off" | Specify the label for the untoggled state | -| labelB | No | let | No | string | "On" | Specify the label for the toggled state | -| labelText | No | let | No | string | "" | Specify the label text | -| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text | -| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | -| name | No | let | No | string | undefined | Specify a name attribute for the checkbox input | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | ----------------------------- | ------------------------------------------------ | ----------------------------------------------- | +| toggled | No | let | Yes | boolean | false | Set to `true` to toggle the checkbox input | +| size | No | let | No | "md" | "sm" | "md" | Specify the toggle size | +| disabled | No | let | No | boolean | false | Set to `true` to disable checkbox input | +| labelA | No | let | No | string | "Off" | Specify the label for the untoggled state | +| labelB | No | let | No | string | "On" | Specify the label for the toggled state | +| labelText | No | let | No | string | "" | Specify the label text | +| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | +| name | No | let | No | string | undefined | Specify a name attribute for the checkbox input | ### Slots | Slot name | Default | Props | Fallback | | :-------- | :------ | :---- | :----------------------- | -| labelA | No | -- | {labelA} | -| labelB | No | -- | {labelB} | | labelText | No | -- | {labelText} | ### 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 | let | No | "default" | "sm" | "default" | Specify the toggle size | -| labelText | No | let | No | string | "" | Specify the label text | -| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :----------------------- | -| labelText | No | -- | {labelText} | - -### 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 index e9c7e87e82..3ffb056d16 100644 --- 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 index 9c6112bc8a..c2b98eddfb 100644 --- a/docs/src/pages/components/Toggle.svx +++ b/docs/src/pages/components/Toggle.svx @@ -1,9 +1,9 @@ --- -components: ["Toggle", "ToggleSkeleton"] +components: ["Toggle"] --- @@ -33,15 +33,6 @@ Set `hideLabel` to `true` to visually hide the label text. It's recommended to s -## Slottable labels - -An alternative to the "labelA" and "labelB" props is to use the corresponding named slots. - - - No - Yes - - ## Disabled @@ -49,11 +40,3 @@ An alternative to the "labelA" and "labelB" props is to use the corresponding na ## Small size - -## Skeleton - - - -## Skeleton (small) - - \ No newline at end of file diff --git a/src/Toggle/Toggle.svelte b/src/Toggle/Toggle.svelte index 18fcc13497..00136c8c54 100644 --- 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";
- + {labelText} - - - - + + {sideLabel} +
diff --git a/src/Toggle/ToggleSkeleton.svelte b/src/Toggle/ToggleSkeleton.svelte deleted file mode 100644 index 2baf9bcf8c..0000000000 --- a/src/Toggle/ToggleSkeleton.svelte +++ /dev/null @@ -1,50 +0,0 @@ - - - -
- - -
diff --git a/src/Toggle/index.js b/src/Toggle/index.js index 44cffe37cd..70722c3bee 100644 --- 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 index ea1a84cf46..b5e5ae6e3b 100644 --- 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 index 55bf0bafc6..3abc319f30 100644 --- a/tests/Toggle.test.svelte +++ b/tests/Toggle.test.svelte @@ -1,5 +1,5 @@ @@ -15,5 +15,3 @@ - - diff --git a/types/Toggle/Toggle.svelte.d.ts b/types/Toggle/Toggle.svelte.d.ts index 27abc2d0ec..70109eb6e8 100644 --- a/types/Toggle/Toggle.svelte.d.ts +++ b/types/Toggle/Toggle.svelte.d.ts @@ -5,9 +5,9 @@ export interface ToggleProps extends svelte.JSX.HTMLAttributes { /** * Specify the toggle size - * @default "default" + * @default "md" */ - size?: "default" | "sm"; + size?: "md" | "sm"; /** * Set to `true` to toggle the checkbox input @@ -71,5 +71,5 @@ export default class Toggle extends SvelteComponentTyped< focus: WindowEventMap["focus"]; blur: WindowEventMap["blur"]; }, - { labelA: {}; labelB: {}; labelText: {} } + { labelText: {} } > {} diff --git a/types/Toggle/ToggleSkeleton.svelte.d.ts b/types/Toggle/ToggleSkeleton.svelte.d.ts deleted file mode 100644 index 13ba7b8e1a..0000000000 --- a/types/Toggle/ToggleSkeleton.svelte.d.ts +++ /dev/null @@ -1,34 +0,0 @@ -/// -import type { SvelteComponentTyped } from "svelte"; - -export interface ToggleSkeletonProps - extends svelte.JSX.HTMLAttributes { - /** - * Specify the toggle size - * @default "default" - */ - size?: "default" | "sm"; - - /** - * Specify the label text - * @default "" - */ - labelText?: string; - - /** - * Set an id for the input element - * @default "ccs-" + Math.random().toString(36) - */ - id?: string; -} - -export default class ToggleSkeleton extends SvelteComponentTyped< - ToggleSkeletonProps, - { - click: WindowEventMap["click"]; - mouseover: WindowEventMap["mouseover"]; - mouseenter: WindowEventMap["mouseenter"]; - mouseleave: WindowEventMap["mouseleave"]; - }, - { labelText: {} } -> {} diff --git a/types/index.d.ts b/types/index.d.ts index 1174ce26c1..267d453184 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -137,7 +137,6 @@ export { default as TileGroup } from "./Tile/TileGroup.svelte"; export { default as TimePicker } from "./TimePicker/TimePicker.svelte"; export { default as TimePickerSelect } from "./TimePicker/TimePickerSelect.svelte"; export { default as Toggle } from "./Toggle/Toggle.svelte"; -export { default as ToggleSkeleton } from "./Toggle/ToggleSkeleton.svelte"; export { default as Tooltip } from "./Tooltip/Tooltip.svelte"; export { default as TooltipFooter } from "./Tooltip/TooltipFooter.svelte"; export { default as TooltipDefinition } from "./TooltipDefinition/TooltipDefinition.svelte";