mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(slider): add fullWidth prop (#1354)

Browse source 
The `bx--slider` class in the `Slider` component has max-width of `40rem`. Because `$$restProps` is spread to the top-level `div` element in `Slider`, the only way to override the style is to do so globally:

```css
:global(.bx--slider-container) {
  width: 100%;
}

:global(.bx--slider) {
  max-width: none;
}
```

This adds a `fullWidth` prop that sets a full width style using inline style attributes.
This commit is contained in:
metonym 2022-06-18 12:47:10 -07:00 • committed by GitHub
commit 1ccdf64504
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 57 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

39
COMPONENT_INDEX.md
View file

@ -3468,25 +3468,26 @@ None.
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | hideTextInput | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the text input |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the slider div element | | 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. |
| invalid | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state | | id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the slider div element |
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text | | invalid | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
| name | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Set a name for the slider element | | 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 |
### Slots ### Slots

12
docs/src/COMPONENT_API.json
View file

@ -11074,6 +11074,18 @@
"constant": false, "constant": false,
"reactive": false "reactive": false
}, },
{
"name": "fullWidth",
"kind": "let",
"description": "Set to `true` for the slider to span\nthe full width of its containing element.",
"type": "boolean",
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{ {
"name": "id", "name": "id",
"kind": "let", "kind": "let",

6
docs/src/pages/components/Slider.svx
View file

@ -11,6 +11,12 @@ components: ["Slider", "SliderSkeleton"]
<Slider /> <Slider />
### Full width
Set `fullWidth` to `true` for the slider to span the full width of its containing element.
<Slider fullWidth />
### Hidden text input ### Hidden text input
<Slider hideTextInput /> <Slider hideTextInput />

12
src/Slider/Slider.svelte
View file

@ -35,6 +35,12 @@
/** Set to `true` to hide the text input */ /** Set to `true` to hide the text input */
export let hideTextInput = false; export let hideTextInput = false;
/**
* Set to `true` for the slider to span
* the full width of its containing element.
*/
export let fullWidth = false;
/** Set an id for the slider div element */ /** Set an id for the slider div element */
export let id = "ccs-" + Math.random().toString(36); export let id = "ccs-" + Math.random().toString(36);
@ -143,7 +149,10 @@
{labelText} {labelText}
</slot> </slot>
</label> </label>
<div class:bx--slider-container="{true}"> <div
class:bx--slider-container="{true}"
style="{fullWidth ? 'width: 100%' : undefined}"
>
<span class:bx--slider__range-label="{true}">{minLabel || min}</span> <span class:bx--slider__range-label="{true}">{minLabel || min}</span>
<div <div
bind:this="{ref}" bind:this="{ref}"
@ -151,6 +160,7 @@
tabindex="-1" tabindex="-1"
class:bx--slider="{true}" class:bx--slider="{true}"
class:bx--slider--disabled="{disabled}" class:bx--slider--disabled="{disabled}"
style="{fullWidth ? 'max-width: none' : undefined}"
on:mousedown="{startDragging}" on:mousedown="{startDragging}"
on:mousedown="{startHolding}" on:mousedown="{startHolding}"
on:touchstart="{startHolding}" on:touchstart="{startHolding}"

1
tests/Slider.test.svelte
View file

@ -10,6 +10,7 @@
max="{990}" max="{990}"
maxLabel="990 MB" maxLabel="990 MB"
value="{100}" value="{100}"
fullWidth
/> />
<Slider <Slider

7
types/Slider/Slider.svelte.d.ts vendored
View file

@ -75,6 +75,13 @@ export interface SliderProps
*/ */
hideTextInput?: boolean; hideTextInput?: boolean;
/**
* Set to `true` for the slider to span
* the full width of its containing element.
* @default false
*/
fullWidth?: boolean;
/** /**
* Set an id for the slider div element * Set an id for the slider div element
* @default "ccs-" + Math.random().toString(36) * @default "ccs-" + Math.random().toString(36)