mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 03:26:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat: make labelText slottable

Browse source 
Related #563
This commit is contained in:
Eric Y Liu 2021-06-26 13:51:46 -07:00
commit 390df96228
30 changed files with 230 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

65
COMPONENT_INDEX.md
View file

@ -1058,7 +1058,9 @@ None.
### Slots
None.
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No | -- | <code>{labelText}</code> |
### Events
@ -1254,7 +1256,9 @@ None.
### Slots
None.
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No | -- | <code>{labelText}</code> |
### Events
@ -1283,7 +1287,9 @@ None.
### Slots
None.
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No | -- | <code>{labelText}</code> |
### Events
@ -2765,7 +2771,9 @@ None.
### Slots
None.
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No | -- | <code>{labelText}</code> |
### Events
@ -2906,7 +2914,9 @@ None.
### Slots
None.
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No | -- | <code>{labelText}</code> |
### Events
@ -3046,7 +3056,9 @@ None.
### Slots
None.
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No | -- | <code>{labelText}</code> |
### Events
@ -3113,9 +3125,10 @@ None.
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| -- | Yes | -- | -- |
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- |
| -- | Yes | -- | -- |
| labelText | No | -- | <code>{labelText}</code> |
### Events
@ -3429,7 +3442,9 @@ None.
### Slots
None.
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No | -- | <code>{labelText}</code> |
### Events
@ -3971,7 +3986,9 @@ None.
### Slots
None.
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No | -- | <code>{labelText}</code> |
### Events
@ -4036,7 +4053,9 @@ None.
### Slots
None.
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No | -- | <code>{labelText}</code> |
### Events
@ -4143,9 +4162,10 @@ None.
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| -- | Yes | -- | -- |
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- |
| -- | Yes | -- | -- |
| labelText | No | -- | <code>{labelText}</code> |
### Events
@ -4179,9 +4199,10 @@ None.
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| -- | Yes | -- | -- |
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- |
| -- | Yes | -- | -- |
| labelText | No | -- | <code>{labelText}</code> |
### Events
@ -4241,7 +4262,9 @@ None.
### Slots
None.
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No | -- | <code>{labelText}</code> |
### Events
@ -4269,7 +4292,9 @@ None.
### Slots
None.
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No | -- | <code>{labelText}</code> |
### Events

129
docs/src/COMPONENT_API.json
View file

@ -2530,7 +2530,14 @@
"reactive": true
}
],
"slots": [],
"slots": [
{
"name": "labelText",
"default": false,
"fallback": "{labelText}",
"slot_props": "{}"
}
],
"events": [
{ "type": "forwarded", "name": "input", "element": "input" },
{ "type": "forwarded", "name": "keydown", "element": "input" },
@ -3225,7 +3232,14 @@
"reactive": true
}
],
"slots": [],
"slots": [
{
"name": "labelText",
"default": false,
"fallback": "{labelText}",
"slot_props": "{}"
}
],
"events": [
{ "type": "forwarded", "name": "keydown", "element": "label" },
{ "type": "forwarded", "name": "change", "element": "input" },
@ -3339,7 +3353,14 @@
"reactive": true
}
],
"slots": [],
"slots": [
{
"name": "labelText",
"default": false,
"fallback": "{labelText}",
"slot_props": "{}"
}
],
"events": [
{ "type": "dispatched", "name": "add", "detail": "FileList" },
{ "type": "forwarded", "name": "dragover", "element": "div" },
@ -7176,7 +7197,14 @@
"reactive": true
}
],
"slots": [],
"slots": [
{
"name": "labelText",
"default": false,
"fallback": "{labelText}",
"slot_props": "{}"
}
],
"events": [
{ "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" },
@ -7561,7 +7589,14 @@
"reactive": true
}
],
"slots": [],
"slots": [
{
"name": "labelText",
"default": false,
"fallback": "{labelText}",
"slot_props": "{}"
}
],
"events": [{ "type": "forwarded", "name": "change", "element": "input" }],
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" }
@ -8028,7 +8063,14 @@
"reactive": true
}
],
"slots": [],
"slots": [
{
"name": "labelText",
"default": false,
"fallback": "{labelText}",
"slot_props": "{}"
}
],
"events": [
{ "type": "dispatched", "name": "expand", "detail": "any" },
{ "type": "dispatched", "name": "collapse", "detail": "any" },
@ -8255,7 +8297,15 @@
"reactive": true
}
],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"slots": [
{ "name": "__default__", "default": true, "slot_props": "{}" },
{
"name": "labelText",
"default": false,
"fallback": "{labelText}",
"slot_props": "{}"
}
],
"events": [
{ "type": "dispatched", "name": "change", "detail": "string" },
{ "type": "forwarded", "name": "blur", "element": "select" }
@ -8994,7 +9044,14 @@
"reactive": true
}
],
"slots": [],
"slots": [
{
"name": "labelText",
"default": false,
"fallback": "{labelText}",
"slot_props": "{}"
}
],
"events": [
{ "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" },
@ -10068,7 +10125,14 @@
"reactive": true
}
],
"slots": [],
"slots": [
{
"name": "labelText",
"default": false,
"fallback": "{labelText}",
"slot_props": "{}"
}
],
"events": [
{ "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" },
@ -10292,7 +10356,14 @@
"reactive": false
}
],
"slots": [],
"slots": [
{
"name": "labelText",
"default": false,
"fallback": "{labelText}",
"slot_props": "{}"
}
],
"events": [
{ "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" },
@ -10550,7 +10621,15 @@
"reactive": true
}
],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"slots": [
{ "name": "__default__", "default": true, "slot_props": "{}" },
{
"name": "labelText",
"default": false,
"fallback": "{labelText}",
"slot_props": "{}"
}
],
"events": [
{ "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" },
@ -10649,7 +10728,15 @@
"reactive": true
}
],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"slots": [
{ "name": "__default__", "default": true, "slot_props": "{}" },
{
"name": "labelText",
"default": false,
"fallback": "{labelText}",
"slot_props": "{}"
}
],
"events": [
{ "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" },
@ -10853,7 +10940,14 @@
"reactive": false
}
],
"slots": [],
"slots": [
{
"name": "labelText",
"default": false,
"fallback": "{labelText}",
"slot_props": "{}"
}
],
"events": [
{
"type": "dispatched",
@ -10907,7 +11001,14 @@
"reactive": false
}
],
"slots": [],
"slots": [
{
"name": "labelText",
"default": false,
"fallback": "{labelText}",
"slot_props": "{}"
}
],
"events": [
{ "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" },

4
src/DatePicker/DatePickerInput.svelte
View file

@ -85,7 +85,9 @@
class:bx--visually-hidden="{hideLabel}"
class:bx--label--disabled="{disabled}"
>
{labelText}
<slot name="labelText">
{labelText}
</slot>
</label>
{/if}
<div

6
src/FileUploader/FileUploaderButton.svelte
View file

@ -54,7 +54,11 @@
}
}}"
>
<span role="{role}">{labelText}</span>
<span role="{role}">
<slot name="labelText">
{labelText}
</slot>
</span>
</label>
<input
bind:this="{ref}"

4
src/FileUploader/FileUploaderDropContainer.svelte
View file

@ -89,7 +89,9 @@
class:bx--file__drop-container="{true}"
class:bx--file__drop-container--drag-over="{over}"
>
{labelText}
<slot name="labelText">
{labelText}
</slot>
<input
bind:this="{ref}"
type="file"

6
src/RadioButton/RadioButton.svelte
View file

@ -68,7 +68,11 @@
<label class:bx--radio-button__label="{true}" for="{id}">
<span class:bx--radio-button__appearance="{true}"></span>
{#if labelText}
<span class:bx--visually-hidden="{hideLabel}">{labelText}</span>
<span class:bx--visually-hidden="{hideLabel}">
<slot name="labelText">
{labelText}
</slot>
</span>
{/if}
</label>
</div>

8
src/Search/Search.svelte
View file

@ -117,9 +117,11 @@
>
<svelte:component this="{icon}" class="bx--search-magnifier-icon" />
</div>
<label id="{id}-search" for="{id}" class:bx--label="{true}"
>{labelText}</label
>
<label id="{id}-search" for="{id}" class:bx--label="{true}">
<slot name="labelText">
{labelText}
</slot>
</label>
<!-- svelte-ignore a11y-autofocus -->
<input
bind:this="{ref}"

4
src/Select/Select.svelte
View file

@ -96,7 +96,9 @@
class:bx--visually-hidden="{hideLabel}"
class:bx--label--disabled="{disabled}"
>
{labelText}
<slot name="labelText">
{labelText}
</slot>
</label>
{/if}
{#if inline}

4
src/Slider/Slider.svelte
View file

@ -137,7 +137,9 @@
class:bx--label="{true}"
class:bx--label--disabled="{disabled}"
>
{labelText}
<slot name="labelText">
{labelText}
</slot>
</label>
<div class:bx--slider-container="{true}">
<span class:bx--slider__range-label="{true}">{minLabel || min}</span>

4
src/TextArea/TextArea.svelte
View file

@ -63,7 +63,9 @@
class:bx--visually-hidden="{hideLabel}"
class:bx--label--disabled="{disabled}"
>
{labelText}
<slot name="labelText">
{labelText}
</slot>
</label>
{/if}
<div

8
src/TextInput/PasswordInput.svelte
View file

@ -114,7 +114,9 @@
class:bx--label--inline--sm="{inline && size === 'sm'}"
class:bx--label--inline--xl="{inline && size === 'xl'}"
>
{labelText}
<slot name="labelText">
{labelText}
</slot>
</label>
{#if !isFluid && helperText}
<div
@ -135,7 +137,9 @@
class:bx--label--inline--sm="{inline && size === 'sm'}"
class:bx--label--inline--xl="{inline && size === 'xl'}"
>
{labelText}
<slot name="labelText">
{labelText}
</slot>
</label>
{/if}
<div

8
src/TextInput/TextInput.svelte
View file

@ -93,7 +93,9 @@
class:bx--label--inline="{inline}"
class="{inline && !!size && `bx--label--inline--${size}`}"
>
{labelText}
<slot name="labelText">
{labelText}
</slot>
</label>
{/if}
{#if !isFluid && helperText}
@ -116,7 +118,9 @@
class:bx--label--inline="{inline}"
class="{inline && !!size && `bx--label--inline--${size}`}"
>
{labelText}
<slot name="labelText">
{labelText}
</slot>
</label>
{/if}
<div

4
src/TimePicker/TimePicker.svelte
View file

@ -80,7 +80,9 @@
class:bx--visually-hidden="{hideLabel}"
class:bx--label--disabled="{disabled}"
>
{labelText}
<slot name="labelText">
{labelText}
</slot>
</label>
{/if}
<input

4
src/TimePicker/TimePickerSelect.svelte
View file

@ -60,7 +60,9 @@
class:bx--visually-hidden="{hideLabel}"
>
<!-- TODO: set to always be `true` after `hideLabel` is deprecated -->
{labelText}
<slot name="labelText">
{labelText}
</slot>
</label>
{/if}
<!-- svelte-ignore a11y-no-onchange -->

4
src/Toggle/Toggle.svelte
View file

@ -75,7 +75,9 @@
for="{id}"
class:bx--toggle-input__label="{true}"
>
{labelText}
<slot name="labelText">
{labelText}
</slot>
<span class:bx--toggle__switch="{true}">
<span aria-hidden="true" class:bx--toggle__text--off="{true}">
{labelA}

6
src/Toggle/ToggleSkeleton.svelte
View file

@ -36,7 +36,11 @@
class:bx--skeleton="{true}"
>
{#if labelText}
<span class:bx--toggle__label-text="{true}">{labelText}</span>
<span class:bx--toggle__label-text="{true}">
<slot name="labelText">
{labelText}
</slot>
</span>
{/if}
<span class:bx--toggle__text--left="{true}"></span>
<span class:bx--toggle__appearance="{true}"></span>

2
types/DatePicker/DatePickerInput.d.ts vendored
View file

@ -100,5 +100,5 @@ export default class DatePickerInput extends SvelteComponentTyped<
keyup: WindowEventMap["keyup"];
blur: WindowEventMap["blur"];
},
{}
{ labelText: {} }
> {}

2
types/FileUploader/FileUploaderButton.d.ts vendored
View file

@ -77,5 +77,5 @@ export default class FileUploaderButton extends SvelteComponentTyped<
change: WindowEventMap["change"];
click: WindowEventMap["click"];
},
{}
{ labelText: {} }
> {}

2
types/FileUploader/FileUploaderDropContainer.d.ts vendored
View file

@ -76,5 +76,5 @@ export default class FileUploaderDropContainer extends SvelteComponentTyped<
change: WindowEventMap["change"];
click: WindowEventMap["click"];
},
{}
{ labelText: {} }
> {}

2
types/RadioButton/RadioButton.d.ts vendored
View file

@ -61,5 +61,5 @@ export interface RadioButtonProps
export default class RadioButton extends SvelteComponentTyped<
RadioButtonProps,
{ change: WindowEventMap["change"] },
{}
{ labelText: {} }
> {}

2
types/Search/Search.d.ts vendored
View file

@ -126,5 +126,5 @@ export default class Search extends SvelteComponentTyped<
keyup: WindowEventMap["keyup"];
clear: CustomEvent<any>;
},
{}
{ labelText: {} }
> {}

2
types/Select/Select.d.ts vendored
View file

@ -100,5 +100,5 @@ export interface SelectProps
export default class Select extends SvelteComponentTyped<
SelectProps,
{ change: CustomEvent<string>; blur: WindowEventMap["blur"] },
{ default: {} }
{ default: {}; labelText: {} }
> {}

2
types/Slider/Slider.d.ts vendored
View file

@ -115,5 +115,5 @@ export default class Slider extends SvelteComponentTyped<
mouseleave: WindowEventMap["mouseleave"];
change: CustomEvent<any>;
},
{}
{ labelText: {} }
> {}

2
types/TextArea/TextArea.d.ts vendored
View file

@ -101,5 +101,5 @@ export default class TextArea extends SvelteComponentTyped<
focus: WindowEventMap["focus"];
blur: WindowEventMap["blur"];
},
{}
{ labelText: {} }
> {}

2
types/TextInput/PasswordInput.d.ts vendored
View file

@ -142,5 +142,5 @@ export default class PasswordInput extends SvelteComponentTyped<
focus: WindowEventMap["focus"];
blur: WindowEventMap["blur"];
},
{}
{ labelText: {} }
> {}

2
types/TextInput/TextInput.d.ts vendored
View file

@ -124,5 +124,5 @@ export default class TextInput extends SvelteComponentTyped<
focus: WindowEventMap["focus"];
blur: WindowEventMap["blur"];
},
{}
{ labelText: {} }
> {}

2
types/TimePicker/TimePicker.d.ts vendored
View file

@ -106,5 +106,5 @@ export default class TimePicker extends SvelteComponentTyped<
focus: WindowEventMap["focus"];
blur: WindowEventMap["blur"];
},
{ default: {} }
{ default: {}; labelText: {} }
> {}

2
types/TimePicker/TimePickerSelect.d.ts vendored
View file

@ -58,5 +58,5 @@ export default class TimePickerSelect extends SvelteComponentTyped<
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
{ default: {} }
{ default: {}; labelText: {} }
> {}

2
types/Toggle/Toggle.d.ts vendored
View file

@ -64,5 +64,5 @@ export default class Toggle extends SvelteComponentTyped<
focus: WindowEventMap["focus"];
blur: WindowEventMap["blur"];
},
{}
{ labelText: {} }
> {}

2
types/Toggle/ToggleSkeleton.d.ts vendored
View file

@ -30,5 +30,5 @@ export default class ToggleSkeleton extends SvelteComponentTyped<
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
{}
{ labelText: {} }
> {}