From 1ccdf645048611342653b65a41ba045b2b584572 Mon Sep 17 00:00:00 2001 From: metonym Date: Sat, 18 Jun 2022 12:47:10 -0700 Subject: [PATCH] feat(slider): add `fullWidth` prop (#1354) 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. --- COMPONENT_INDEX.md | 39 ++++++++++++++-------------- docs/src/COMPONENT_API.json | 12 +++++++++ docs/src/pages/components/Slider.svx | 6 +++++ src/Slider/Slider.svelte | 12 ++++++++- tests/Slider.test.svelte | 1 + types/Slider/Slider.svelte.d.ts | 7 +++++ 6 files changed, 57 insertions(+), 20 deletions(-) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index c97cd2e6..d1e5dc83 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -3468,25 +3468,26 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :------------- | :------- | :--------------- | :------- | --------------------------------------- | ------------------------------------------------ | ------------------------------------------ | -| ref | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the HTML element | -| value | No | let | Yes | number | 0 | Specify the value of the slider | -| max | No | let | No | number | 100 | Set the maximum slider value | -| maxLabel | No | let | No | string | "" | Specify the label for the max value | -| min | No | let | No | number | 0 | Set the minimum slider value | -| minLabel | No | let | No | string | "" | Specify the label for the min value | -| step | No | let | No | number | 1 | Set the step value | -| stepMultiplier | No | let | No | number | 4 | Set the step multiplier value | -| required | No | let | No | boolean | false | Set to `true` to require a value | -| inputType | No | let | No | string | "number" | Specify the input type | -| disabled | No | let | No | boolean | false | Set to `true` to disable the slider | -| light | No | let | No | boolean | false | Set to `true` to enable the light variant | -| hideTextInput | No | let | No | boolean | false | Set to `true` to hide the text input | -| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the slider div element | -| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state | -| labelText | No | let | No | string | "" | Specify the label text | -| name | No | let | No | string | "" | Set a name for the slider element | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------- | :------- | :--------------- | :------- | --------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------- | +| ref | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the HTML element | +| value | No | let | Yes | number | 0 | Specify the value of the slider | +| max | No | let | No | number | 100 | Set the maximum slider value | +| maxLabel | No | let | No | string | "" | Specify the label for the max value | +| min | No | let | No | number | 0 | Set the minimum slider value | +| minLabel | No | let | No | string | "" | Specify the label for the min value | +| step | No | let | No | number | 1 | Set the step value | +| stepMultiplier | No | let | No | number | 4 | Set the step multiplier value | +| required | No | let | No | boolean | false | Set to `true` to require a value | +| inputType | No | let | No | string | "number" | Specify the input type | +| disabled | No | let | No | boolean | false | Set to `true` to disable the slider | +| light | No | let | No | boolean | false | Set to `true` to enable the light variant | +| hideTextInput | No | let | No | boolean | false | Set to `true` to hide the text input | +| fullWidth | No | let | No | boolean | false | Set to `true` for the slider to span
the full width of its containing element. | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the slider div element | +| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state | +| labelText | No | let | No | string | "" | Specify the label text | +| name | No | let | No | string | "" | Set a name for the slider element | ### Slots diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 4f566969..d6c77fe8 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -11074,6 +11074,18 @@ "constant": 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", "kind": "let", diff --git a/docs/src/pages/components/Slider.svx b/docs/src/pages/components/Slider.svx index 3c6d840a..75a282c3 100644 --- a/docs/src/pages/components/Slider.svx +++ b/docs/src/pages/components/Slider.svx @@ -11,6 +11,12 @@ components: ["Slider", "SliderSkeleton"] +### Full width + +Set `fullWidth` to `true` for the slider to span the full width of its containing element. + + + ### Hidden text input diff --git a/src/Slider/Slider.svelte b/src/Slider/Slider.svelte index 16687a4c..24211b38 100644 --- a/src/Slider/Slider.svelte +++ b/src/Slider/Slider.svelte @@ -35,6 +35,12 @@ /** Set to `true` to hide the text input */ 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 */ export let id = "ccs-" + Math.random().toString(36); @@ -143,7 +149,10 @@ {labelText} -
+
{minLabel || min}