mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
Merge pull request #401 from IBM/toggle-size
feat(toggle): support small size, deprecate ToggleSmall
This commit is contained in:
Eric Liu
GitHub
commit
80d56f9f5f
12 changed files with 91 additions and 17 deletions
|
|
@ -3863,15 +3863,16 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| 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 |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable checkbox input |
|
||||
| labelA | <code>let</code> | No | <code>string</code> | <code>"Off"</code> | Specify the label for the untoggled state |
|
||||
| labelB | <code>let</code> | No | <code>string</code> | <code>"On"</code> | Specify the label for the toggled state |
|
||||
| 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 |
|
||||
| name | <code>let</code> | No | <code>string</code> | -- | Specify a name attribute for the checkbox input |
|
||||
| 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 |
|
||||
| size | <code>let</code> | No | <code>"default" | "sm"</code> | <code>"default"</code> | Specify the toggle size |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable checkbox input |
|
||||
| labelA | <code>let</code> | No | <code>string</code> | <code>"Off"</code> | Specify the label for the untoggled state |
|
||||
| labelB | <code>let</code> | No | <code>string</code> | <code>"On"</code> | Specify the label for the toggled state |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| :-------- | :--------------- | :------- | :------------------ | ------------------------------------------------ | ------------------------------- |
|
||||
| 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 |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :--------------- | :------- | :--------------------------------- | ------------------------------------------------ | ------------------------------- |
|
||||
| size | <code>let</code> | No | <code>"default" | "sm"</code> | <code>"default"</code> | Specify the toggle size |
|
||||
| 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
|
||||
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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="{() => {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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 = "";
|
||||
|
||||
|
|
|
|||
6
types/Toggle/Toggle.d.ts
vendored
6
types/Toggle/Toggle.d.ts
vendored
|
|
@ -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
|
||||
|
|
|
|||
6
types/Toggle/ToggleSkeleton.d.ts
vendored
6
types/Toggle/ToggleSkeleton.d.ts
vendored
|
|
@ -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 ""
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue