Skip to content

Commit

Permalink
feat(slider): add hideLabel prop (#1777)
Browse files Browse the repository at this point in the history 
Closes #1682

Co-authored-by: siaikin <[email protected]>
  • Loading branch information
@metonym @siaikin
metonym and siaikin authored Jul 23, 2023
1 parent ad711cd commit baff07e
Show file tree
Hide file tree
Showing 5 changed files with 54 additions and 23 deletions.
41 changes: 21 additions & 20 deletions COMPONENT_INDEX.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3485,26 +3485,27 @@ None.

### Props

| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :------------- | :------- | :--------------- | :------- | --------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the HTML element |
| value | No | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Specify the value of the slider |
| max | No | <code>let</code> | No | <code>number</code> | <code>100</code> | Set the maximum slider value |
| maxLabel | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label for the max value |
| min | No | <code>let</code> | No | <code>number</code> | <code>0</code> | Set the minimum slider value |
| minLabel | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label for the min value |
| step | No | <code>let</code> | No | <code>number</code> | <code>1</code> | Set the step value |
| stepMultiplier | No | <code>let</code> | No | <code>number</code> | <code>4</code> | Set the step multiplier value |
| required | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to require a value |
| inputType | No | <code>let</code> | No | <code>string</code> | <code>"number"</code> | Specify the input type |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the slider |
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| hideTextInput | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the text input |
| 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. |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the slider div element |
| invalid | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
| name | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Set a name for the slider element |
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :------------- | :------- | :--------------- | :------- | --------------------------------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the HTML element |
| value | No | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Specify the value of the slider |
| max | No | <code>let</code> | No | <code>number</code> | <code>100</code> | Set the maximum slider value |
| maxLabel | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label for the max value |
| min | No | <code>let</code> | No | <code>number</code> | <code>0</code> | Set the minimum slider value |
| minLabel | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label for the min value |
| step | No | <code>let</code> | No | <code>number</code> | <code>1</code> | Set the step value |
| stepMultiplier | No | <code>let</code> | No | <code>number</code> | <code>4</code> | Set the step multiplier value |
| required | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to require a value |
| inputType | No | <code>let</code> | No | <code>string</code> | <code>"number"</code> | Specify the input type |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the slider |
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| hideTextInput | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the text input |
| 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. |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the slider div element |
| invalid | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
| 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;) |
| hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
| name | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Set a name for the slider element |

### Slots

Expand Down
14 changes: 13 additions & 1 deletion docs/src/COMPONENT_API.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11215,7 +11215,7 @@
{
"name": "labelText",
"kind": "let",
"description": "Specify the label text",
"description": "Specify the label text.\nAlternatively, use the \"labelText\" slot (e.g., <span slot=\"labelText\">...</span>)",
"type": "string",
"value": "\"\"",
"isFunction": false,
Expand All @@ -11224,6 +11224,18 @@
"constant": false,
"reactive": false
},
{
"name": "hideLabel",
"kind": "let",
"description": "Set to `true` to visually hide the label text",
"type": "boolean",
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "name",
"kind": "let",
Expand Down
4 changes: 4 additions & 0 deletions docs/src/pages/components/Slider.svx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@ Set `fullWidth` to `true` for the slider to span the full width of its containin

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

## Hidden label

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

## Hidden text input

<Slider labelText="Instances" hideTextInput value={0} />
Expand Down
9 changes: 8 additions & 1 deletion src/Slider/Slider.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,15 @@
/** Set to `true` to indicate an invalid state */
export let invalid = false;
/** Specify the label text */
/**
* Specify the label text.
* Alternatively, use the "labelText" slot (e.g., <span slot="labelText">...</span>)
*/
export let labelText = "";
/** Set to `true` to visually hide the label text */
export let hideLabel = false;
/** Set a name for the slider element */
export let name = "";
Expand Down Expand Up @@ -145,6 +151,7 @@
id="{labelId}"
class:bx--label="{true}"
class:bx--label--disabled="{disabled}"
class:bx--visually-hidden="{hideLabel}"
>
<slot name="labelText">
{labelText}
Expand Down
9 changes: 8 additions & 1 deletion types/Slider/Slider.svelte.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,11 +96,18 @@ export interface SliderProps extends RestProps {
invalid?: boolean;

/**
* Specify the label text
* Specify the label text.
* Alternatively, use the "labelText" slot (e.g., <span slot="labelText">...</span>)
* @default ""
*/
labelText?: string;

/**
* Set to `true` to visually hide the label text
* @default false
*/
hideLabel?: boolean;

/**
* Set a name for the slider element
* @default ""
Expand Down

0 comments on commit baff07e

Please sign in to comment.