Skip to content

Commit baff07e

Browse files
metonymsiaikin
metonym
and
siaikin
authored
feat(slider): add hideLabel prop (#1777)
Closes #1682 Co-authored-by: siaikin <[email protected]>
1 parent ad711cd commit baff07e

File tree

5 files changed

+54
-23
lines changed

5 files changed

+54
-23
lines changed

‎COMPONENT_INDEX.md

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3485,26 +3485,27 @@ None.
34853485

34863486
### Props
34873487

3488-
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
3489-
| :------------- | :------- | :--------------- | :------- | --------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------- |
3490-
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the HTML element |
3491-
| value | No | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Specify the value of the slider |
3492-
| max | No | <code>let</code> | No | <code>number</code> | <code>100</code> | Set the maximum slider value |
3493-
| maxLabel | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label for the max value |
3494-
| min | No | <code>let</code> | No | <code>number</code> | <code>0</code> | Set the minimum slider value |
3495-
| minLabel | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label for the min value |
3496-
| step | No | <code>let</code> | No | <code>number</code> | <code>1</code> | Set the step value |
3497-
| stepMultiplier | No | <code>let</code> | No | <code>number</code> | <code>4</code> | Set the step multiplier value |
3498-
| required | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to require a value |
3499-
| inputType | No | <code>let</code> | No | <code>string</code> | <code>"number"</code> | Specify the input type |
3500-
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the slider |
3501-
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
3502-
| hideTextInput | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the text input |
3503-
| fullWidth | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the slider to span<br />the full width of its containing element. |
3504-
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the slider div element |
3505-
| invalid | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
3506-
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
3507-
| name | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Set a name for the slider element |
3488+
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
3489+
| :------------- | :------- | :--------------- | :------- | --------------------------------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------- |
3490+
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the HTML element |
3491+
| value | No | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Specify the value of the slider |
3492+
| max | No | <code>let</code> | No | <code>number</code> | <code>100</code> | Set the maximum slider value |
3493+
| maxLabel | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label for the max value |
3494+
| min | No | <code>let</code> | No | <code>number</code> | <code>0</code> | Set the minimum slider value |
3495+
| minLabel | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label for the min value |
3496+
| step | No | <code>let</code> | No | <code>number</code> | <code>1</code> | Set the step value |
3497+
| stepMultiplier | No | <code>let</code> | No | <code>number</code> | <code>4</code> | Set the step multiplier value |
3498+
| required | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to require a value |
3499+
| inputType | No | <code>let</code> | No | <code>string</code> | <code>"number"</code> | Specify the input type |
3500+
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the slider |
3501+
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
3502+
| hideTextInput | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the text input |
3503+
| fullWidth | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the slider to span<br />the full width of its containing element. |
3504+
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the slider div element |
3505+
| invalid | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
3506+
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text.<br />Alternatively, use the "labelText" slot (e.g., &lt;span slot="labelText"&gt;...&lt;/span&gt;) |
3507+
| hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
3508+
| name | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Set a name for the slider element |
35083509

35093510
### Slots
35103511

‎docs/src/COMPONENT_API.json

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11215,7 +11215,7 @@
1121511215
{
1121611216
"name": "labelText",
1121711217
"kind": "let",
11218-
"description": "Specify the label text",
11218+
"description": "Specify the label text.\nAlternatively, use the \"labelText\" slot (e.g., <span slot=\"labelText\">...</span>)",
1121911219
"type": "string",
1122011220
"value": "\"\"",
1122111221
"isFunction": false,
@@ -11224,6 +11224,18 @@
1122411224
"constant": false,
1122511225
"reactive": false
1122611226
},
11227+
{
11228+
"name": "hideLabel",
11229+
"kind": "let",
11230+
"description": "Set to `true` to visually hide the label text",
11231+
"type": "boolean",
11232+
"value": "false",
11233+
"isFunction": false,
11234+
"isFunctionDeclaration": false,
11235+
"isRequired": false,
11236+
"constant": false,
11237+
"reactive": false
11238+
},
1122711239
{
1122811240
"name": "name",
1122911241
"kind": "let",

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,10 @@ Set `fullWidth` to `true` for the slider to span the full width of its containin
1717

1818
<Slider labelText="Instances" fullWidth value={0} />
1919

20+
## Hidden label
21+
22+
<Slider labelText="Instances" hideLabel value={0} />
23+
2024
## Hidden text input
2125

2226
<Slider labelText="Instances" hideTextInput value={0} />

‎src/Slider/Slider.svelte

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,9 +47,15 @@
4747
/** Set to `true` to indicate an invalid state */
4848
export let invalid = false;
4949
50-
/** Specify the label text */
50+
/**
51+
* Specify the label text.
52+
* Alternatively, use the "labelText" slot (e.g., <span slot="labelText">...</span>)
53+
*/
5154
export let labelText = "";
5255
56+
/** Set to `true` to visually hide the label text */
57+
export let hideLabel = false;
58+
5359
/** Set a name for the slider element */
5460
export let name = "";
5561
@@ -145,6 +151,7 @@
145151
id="{labelId}"
146152
class:bx--label="{true}"
147153
class:bx--label--disabled="{disabled}"
154+
class:bx--visually-hidden="{hideLabel}"
148155
>
149156
<slot name="labelText">
150157
{labelText}

‎types/Slider/Slider.svelte.d.ts

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,11 +96,18 @@ export interface SliderProps extends RestProps {
9696
invalid?: boolean;
9797

9898
/**
99-
* Specify the label text
99+
* Specify the label text.
100+
* Alternatively, use the "labelText" slot (e.g., <span slot="labelText">...</span>)
100101
* @default ""
101102
*/
102103
labelText?: string;
103104

105+
/**
106+
* Set to `true` to visually hide the label text
107+
* @default false
108+
*/
109+
hideLabel?: boolean;
110+
104111
/**
105112
* Set a name for the slider element
106113
* @default ""

0 commit comments

Comments
 (0)