mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-16 10:51:06 +00:00
chore: v11 Toggle
This removes legacy `ToggleSkeleton`.
This commit is contained in:
Gregor Wassmann
Enrico Sacchetti
parent
85bbaed3e2
commit
9a0a790e19
10 changed files with 60 additions and 199 deletions
|
|
@ -1,6 +1,6 @@
|
|||
# Component Index
|
||||
|
||||
> 165 components exported from carbon-components-svelte@0.82.7.
|
||||
> 164 components exported from carbon-components-svelte@0.82.7.
|
||||
|
||||
## Components
|
||||
|
||||
|
|
@ -155,7 +155,6 @@
|
|||
- [`TimePickerSelect`](#timepickerselect)
|
||||
- [`ToastNotification`](#toastnotification)
|
||||
- [`Toggle`](#toggle)
|
||||
- [`ToggleSkeleton`](#toggleskeleton)
|
||||
- [`Toolbar`](#toolbar)
|
||||
- [`ToolbarBatchActions`](#toolbarbatchactions)
|
||||
- [`ToolbarContent`](#toolbarcontent)
|
||||
|
|
@ -1224,6 +1223,8 @@ None.
|
|||
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
| tileCollapsedIconText | No | <code>let</code> | No | <code>string</code> | <code>"Interact to expand Tile"</code> | Specify the icon text of the collapsed tile |
|
||||
| tileExpandedIconText | No | <code>let</code> | No | <code>string</code> | <code>"Interact to collapse Tile"</code> | Specify the icon text of the expanded tile |
|
||||
| tileExpandedLabel | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the icon label of the expanded tile |
|
||||
| tileCollapsedLabel | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the icon label of the collapsed tile |
|
||||
| tabindex | No | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex |
|
||||
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level div element |
|
||||
|
||||
|
|
@ -4366,24 +4367,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" | "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" | "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
|
||||
|
|
@ -4400,31 +4399,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" | "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
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"total": 165,
|
||||
"total": 164,
|
||||
"components": [
|
||||
{
|
||||
"moduleName": "Accordion",
|
||||
|
|
@ -13619,8 +13619,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,
|
||||
|
|
@ -13725,18 +13725,6 @@
|
|||
],
|
||||
"moduleExports": [],
|
||||
"slots": [
|
||||
{
|
||||
"name": "labelA",
|
||||
"default": false,
|
||||
"fallback": "{labelA}",
|
||||
"slot_props": "{}"
|
||||
},
|
||||
{
|
||||
"name": "labelB",
|
||||
"default": false,
|
||||
"fallback": "{labelB}",
|
||||
"slot_props": "{}"
|
||||
},
|
||||
{
|
||||
"name": "labelText",
|
||||
"default": false,
|
||||
|
|
@ -13762,65 +13750,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",
|
||||
|
|
|
|||
|
|
@ -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,15 +33,6 @@ 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 />
|
||||
|
|
@ -49,11 +40,3 @@ An alternative to the "labelA" and "labelB" props is to use the corresponding na
|
|||
## Small size
|
||||
|
||||
<Toggle size="sm" labelText="Push notifications" />
|
||||
|
||||
## Skeleton
|
||||
|
||||
<ToggleSkeleton />
|
||||
|
||||
## Skeleton (small)
|
||||
|
||||
<ToggleSkeleton size="sm" />
|
||||
|
|
@ -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,6 +41,8 @@
|
|||
const dispatch = createEventDispatcher();
|
||||
|
||||
$: dispatch("toggle", { toggled });
|
||||
$: sideLabel = toggled ? labelB : labelA;
|
||||
$: isSm = size === "sm";
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
|
|
@ -48,6 +50,8 @@
|
|||
<div
|
||||
class:bx--form-item="{true}"
|
||||
style:user-select="none"
|
||||
class:bx--toggle="{true}"
|
||||
class:bx--toggle--disabled="{disabled}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
|
|
@ -58,8 +62,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;
|
||||
|
|
@ -81,27 +84,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}"
|
||||
style:margin-top="{hideLabel ? 0 : undefined}"
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,2 +1 @@
|
|||
export { default as Toggle } from "./Toggle.svelte";
|
||||
export { default as ToggleSkeleton } from "./ToggleSkeleton.svelte";
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
|
|
|
|||
6
types/Toggle/Toggle.svelte.d.ts
vendored
6
types/Toggle/Toggle.svelte.d.ts
vendored
|
|
@ -6,9 +6,9 @@ type RestProps = SvelteHTMLElements["div"];
|
|||
export interface ToggleProps extends RestProps {
|
||||
/**
|
||||
* Specify the toggle size
|
||||
* @default "default"
|
||||
* @default "md"
|
||||
*/
|
||||
size?: "default" | "sm";
|
||||
size?: "md" | "sm";
|
||||
|
||||
/**
|
||||
* Set to `true` to toggle the checkbox input
|
||||
|
|
@ -74,5 +74,5 @@ export default class Toggle extends SvelteComponentTyped<
|
|||
focus: WindowEventMap["focus"];
|
||||
blur: WindowEventMap["blur"];
|
||||
},
|
||||
{ labelA: {}; labelB: {}; labelText: {} }
|
||||
{ labelText: {} }
|
||||
> {}
|
||||
|
|
|
|||
37
types/Toggle/ToggleSkeleton.svelte.d.ts
vendored
37
types/Toggle/ToggleSkeleton.svelte.d.ts
vendored
|
|
@ -1,37 +0,0 @@
|
|||
import type { SvelteComponentTyped } from "svelte";
|
||||
import type { SvelteHTMLElements } from "svelte/elements";
|
||||
|
||||
type RestProps = SvelteHTMLElements["div"];
|
||||
|
||||
export interface ToggleSkeletonProps extends RestProps {
|
||||
/**
|
||||
* 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;
|
||||
|
||||
[key: `data-${string}`]: any;
|
||||
}
|
||||
|
||||
export default class ToggleSkeleton extends SvelteComponentTyped<
|
||||
ToggleSkeletonProps,
|
||||
{
|
||||
click: WindowEventMap["click"];
|
||||
mouseover: WindowEventMap["mouseover"];
|
||||
mouseenter: WindowEventMap["mouseenter"];
|
||||
mouseleave: WindowEventMap["mouseleave"];
|
||||
},
|
||||
{ labelText: {} }
|
||||
> {}
|
||||
1
types/index.d.ts
vendored
1
types/index.d.ts
vendored
|
|
@ -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";
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue