Skip to content

Commit c69957f

Browse files
gregorwgregorw
committed
chore: v11 Toggle
This removes legacy `ToggleSkeleton`.
1 parent 6d72748 commit c69957f

11 files changed

+57
-246
lines changed

‎COMPONENT_INDEX.md

+12-40
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Component Index
22

3-
> 165 components exported from [email protected].
3+
> 164 components exported from [email protected].
44
55
## Components
66

@@ -155,7 +155,6 @@
155155
- [`TimePickerSelect`](#timepickerselect)
156156
- [`ToastNotification`](#toastnotification)
157157
- [`Toggle`](#toggle)
158-
- [`ToggleSkeleton`](#toggleskeleton)
159158
- [`Toolbar`](#toolbar)
160159
- [`ToolbarBatchActions`](#toolbarbatchactions)
161160
- [`ToolbarContent`](#toolbarcontent)
@@ -4345,24 +4344,22 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
43454344

43464345
### Props
43474346

4348-
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
4349-
| :-------- | :------- | :--------------- | :------- | ---------------------------------- | ------------------------------------------------ | ----------------------------------------------- |
4350-
| toggled | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to toggle the checkbox input |
4351-
| size | No | <code>let</code> | No | <code>"default" &#124; "sm"</code> | <code>"default"</code> | Specify the toggle size |
4352-
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable checkbox input |
4353-
| labelA | No | <code>let</code> | No | <code>string</code> | <code>"Off"</code> | Specify the label for the untoggled state |
4354-
| labelB | No | <code>let</code> | No | <code>string</code> | <code>"On"</code> | Specify the label for the toggled state |
4355-
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
4356-
| hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
4357-
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
4358-
| name | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the checkbox input |
4347+
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
4348+
| :-------- | :------- | :--------------- | :------- | ----------------------------- | ------------------------------------------------ | ----------------------------------------------- |
4349+
| toggled | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to toggle the checkbox input |
4350+
| size | No | <code>let</code> | No | <code>"md" &#124; "sm"</code> | <code>"md"</code> | Specify the toggle size |
4351+
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable checkbox input |
4352+
| labelA | No | <code>let</code> | No | <code>string</code> | <code>"Off"</code> | Specify the label for the untoggled state |
4353+
| labelB | No | <code>let</code> | No | <code>string</code> | <code>"On"</code> | Specify the label for the toggled state |
4354+
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
4355+
| hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
4356+
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
4357+
| name | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the checkbox input |
43594358

43604359
### Slots
43614360

43624361
| Slot name | Default | Props | Fallback |
43634362
| :-------- | :------ | :---- | :----------------------- |
4364-
| labelA | No | -- | <code>{labelA}</code> |
4365-
| labelB | No | -- | <code>{labelB}</code> |
43664363
| labelText | No | -- | <code>{labelText}</code> |
43674364

43684365
### Events
@@ -4379,31 +4376,6 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
43794376
| focus | forwarded | -- |
43804377
| blur | forwarded | -- |
43814378

4382-
## `ToggleSkeleton`
4383-
4384-
### Props
4385-
4386-
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
4387-
| :-------- | :------- | :--------------- | :------- | ---------------------------------- | ------------------------------------------------ | ------------------------------- |
4388-
| size | No | <code>let</code> | No | <code>"default" &#124; "sm"</code> | <code>"default"</code> | Specify the toggle size |
4389-
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
4390-
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
4391-
4392-
### Slots
4393-
4394-
| Slot name | Default | Props | Fallback |
4395-
| :-------- | :------ | :---- | :----------------------- |
4396-
| labelText | No | -- | <code>{labelText}</code> |
4397-
4398-
### Events
4399-
4400-
| Event name | Type | Detail |
4401-
| :--------- | :-------- | :----- |
4402-
| click | forwarded | -- |
4403-
| mouseover | forwarded | -- |
4404-
| mouseenter | forwarded | -- |
4405-
| mouseleave | forwarded | -- |
4406-
44074379
## `Toolbar`
44084380

44094381
### Props

‎docs/src/COMPONENT_API.json

+3-74
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"total": 165,
2+
"total": 164,
33
"components": [
44
{
55
"moduleName": "Accordion",
@@ -13455,8 +13455,8 @@
1345513455
"name": "size",
1345613456
"kind": "let",
1345713457
"description": "Specify the toggle size",
13458-
"type": "\"default\" | \"sm\"",
13459-
"value": "\"default\"",
13458+
"type": "\"md\" | \"sm\"",
13459+
"value": "\"md\"",
1346013460
"isFunction": false,
1346113461
"isFunctionDeclaration": false,
1346213462
"isRequired": false,
@@ -13561,18 +13561,6 @@
1356113561
],
1356213562
"moduleExports": [],
1356313563
"slots": [
13564-
{
13565-
"name": "labelA",
13566-
"default": false,
13567-
"fallback": "{labelA}",
13568-
"slot_props": "{}"
13569-
},
13570-
{
13571-
"name": "labelB",
13572-
"default": false,
13573-
"fallback": "{labelB}",
13574-
"slot_props": "{}"
13575-
},
1357613564
{
1357713565
"name": "labelText",
1357813566
"default": false,
@@ -13598,65 +13586,6 @@
1359813586
"typedefs": [],
1359913587
"rest_props": { "type": "Element", "name": "div" }
1360013588
},
13601-
{
13602-
"moduleName": "ToggleSkeleton",
13603-
"filePath": "src/Toggle/ToggleSkeleton.svelte",
13604-
"props": [
13605-
{
13606-
"name": "size",
13607-
"kind": "let",
13608-
"description": "Specify the toggle size",
13609-
"type": "\"default\" | \"sm\"",
13610-
"value": "\"default\"",
13611-
"isFunction": false,
13612-
"isFunctionDeclaration": false,
13613-
"isRequired": false,
13614-
"constant": false,
13615-
"reactive": false
13616-
},
13617-
{
13618-
"name": "labelText",
13619-
"kind": "let",
13620-
"description": "Specify the label text",
13621-
"type": "string",
13622-
"value": "\"\"",
13623-
"isFunction": false,
13624-
"isFunctionDeclaration": false,
13625-
"isRequired": false,
13626-
"constant": false,
13627-
"reactive": false
13628-
},
13629-
{
13630-
"name": "id",
13631-
"kind": "let",
13632-
"description": "Set an id for the input element",
13633-
"type": "string",
13634-
"value": "\"ccs-\" + Math.random().toString(36)",
13635-
"isFunction": false,
13636-
"isFunctionDeclaration": false,
13637-
"isRequired": false,
13638-
"constant": false,
13639-
"reactive": false
13640-
}
13641-
],
13642-
"moduleExports": [],
13643-
"slots": [
13644-
{
13645-
"name": "labelText",
13646-
"default": false,
13647-
"fallback": "{labelText}",
13648-
"slot_props": "{}"
13649-
}
13650-
],
13651-
"events": [
13652-
{ "type": "forwarded", "name": "click", "element": "div" },
13653-
{ "type": "forwarded", "name": "mouseover", "element": "div" },
13654-
{ "type": "forwarded", "name": "mouseenter", "element": "div" },
13655-
{ "type": "forwarded", "name": "mouseleave", "element": "div" }
13656-
],
13657-
"typedefs": [],
13658-
"rest_props": { "type": "Element", "name": "div" }
13659-
},
1366013589
{
1366113590
"moduleName": "Toolbar",
1366213591
"filePath": "src/DataTable/Toolbar.svelte",

‎docs/src/pages/components/Toggle.svx

+2-19
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
2-
components: ["Toggle", "ToggleSkeleton"]
2+
components: ["Toggle"]
33
---
44

55
<script>
6-
import { Toggle, ToggleSkeleton } from "carbon-components-svelte";
6+
import { Toggle } from "carbon-components-svelte";
77
import Preview from "../../components/Preview.svelte";
88
</script>
99

@@ -33,27 +33,10 @@ Set `hideLabel` to `true` to visually hide the label text. It's recommended to s
3333

3434
<Toggle labelText="Push notifications" labelA="No" labelB="Yes" />
3535

36-
## Slottable labels
37-
38-
An alternative to the "labelA" and "labelB" props is to use the corresponding named slots.
39-
40-
<Toggle labelText="Push notifications">
41-
<span slot="labelA" style="color: red">No</span>
42-
<span slot="labelB" style="color: green">Yes</span>
43-
</Toggle>
44-
4536
## Disabled
4637

4738
<Toggle labelText="Push notifications" disabled />
4839

4940
## Small size
5041

5142
<Toggle size="sm" labelText="Push notifications" />
52-
53-
## Skeleton
54-
55-
<ToggleSkeleton />
56-
57-
## Skeleton (small)
58-
59-
<ToggleSkeleton size="sm" />

‎src/Toggle/Toggle.svelte

+35-20
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55
66
/**
77
* Specify the toggle size
8-
* @type {"default" | "sm"}
8+
* @type {"md" | "sm"}
99
*/
10-
export let size = "default";
10+
export let size = "md";
1111
1212
/** Set to `true` to toggle the checkbox input */
1313
export let toggled = false;
@@ -41,11 +41,14 @@
4141
const dispatch = createEventDispatcher();
4242
4343
$: dispatch("toggle", { toggled });
44+
$: sideLabel = toggled ? labelB : labelA;
45+
$: isSm = size === "sm";
4446
</script>
4547

4648
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
4749
<div
48-
class:bx--form-item="{true}"
50+
class:bx--toggle="{true}"
51+
class:bx--toggle--disabled="{disabled}"
4952
{...$$restProps}
5053
style="{$$restProps['style']}; user-select: none"
5154
on:click
@@ -57,8 +60,7 @@
5760
<input
5861
role="switch"
5962
type="checkbox"
60-
class:bx--toggle-input="{true}"
61-
class:bx--toggle-input--small="{size === 'sm'}"
63+
class:bx--toggle__button="{true}"
6264
checked="{toggled}"
6365
on:change="{() => {
6466
toggled = !toggled;
@@ -80,27 +82,40 @@
8082
<label
8183
aria-label="{labelText ? undefined : $$props['aria-label'] || 'Toggle'}"
8284
for="{id}"
83-
class:bx--toggle-input__label="{true}"
85+
class:bx--toggle__label="{true}"
8486
>
85-
<span class:bx--visually-hidden="{hideLabel}">
87+
<span
88+
class:bx--toggle__label-text="{true}"
89+
class:bx--visually-hidden="{hideLabel}"
90+
>
8691
<slot name="labelText">
8792
{labelText}
8893
</slot>
8994
</span>
90-
<span
91-
class:bx--toggle__switch="{true}"
95+
<div
96+
class:bx--toggle__appearance="{true}"
97+
class:bx--toggle__appearance--sm="{isSm}"
9298
style="{hideLabel && 'margin-top: 0'}"
9399
>
94-
<span aria-hidden="true" class:bx--toggle__text--off="{true}">
95-
<slot name="labelA">
96-
{labelA}
97-
</slot>
98-
</span>
99-
<span aria-hidden="true" class:bx--toggle__text--on="{true}">
100-
<slot name="labelB">
101-
{labelB}
102-
</slot>
103-
</span>
104-
</span>
100+
<div
101+
aria-hidden="true"
102+
class:bx--toggle__switch="{true}"
103+
class:bx--toggle__switch--checked="{toggled}"
104+
>
105+
{#if isSm}
106+
<svg
107+
class:bx--toggle__check="{true}"
108+
width="6px"
109+
height="5px"
110+
viewBox="0 0 6 5"
111+
>
112+
<path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"></path>
113+
</svg>
114+
{/if}
115+
</div>
116+
<span class:bx--toggle__text="{true}" aria-hidden="{true}"
117+
>{sideLabel}</span
118+
>
119+
</div>
105120
</label>
106121
</div>

‎src/Toggle/ToggleSkeleton.svelte

-50
This file was deleted.

‎src/Toggle/index.js

-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
11
export { default as Toggle } from "./Toggle.svelte";
2-
export { default as ToggleSkeleton } from "./ToggleSkeleton.svelte";

‎src/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ export {
122122
TileGroup,
123123
} from "./Tile";
124124
export { TimePicker, TimePickerSelect } from "./TimePicker";
125-
export { Toggle, ToggleSkeleton } from "./Toggle";
125+
export { Toggle } from "./Toggle";
126126
export { Tooltip, TooltipFooter } from "./Tooltip";
127127
export { TooltipDefinition } from "./TooltipDefinition";
128128
export { TooltipIcon } from "./TooltipIcon";

‎tests/Toggle.test.svelte

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts">
2-
import { Toggle, ToggleSkeleton } from "../types";
2+
import { Toggle } from "../types";
33
</script>
44

55
<Toggle labelText="Push notifications" hideLabel />
@@ -15,5 +15,3 @@
1515
<Toggle labelText="Push notifications" labelA="No" labelB="Yes" />
1616

1717
<Toggle labelText="Push notifications" disabled />
18-
19-
<ToggleSkeleton />

0 commit comments

Comments
 (0)