From a3c388bb7f0e51e61b42e2d562e56892742ad7c0 Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Wed, 11 Jun 2025 10:07:27 -0400 Subject: [PATCH 01/21] feat(slider): wip track height and gap --- components/slider/dist/metadata.json | 16 ++++++++++++++-- components/slider/index.css | 20 ++++++++++++++++---- components/slider/stories/slider.stories.js | 16 ++++++++++++++-- components/slider/stories/template.js | 1 - 4 files changed, 44 insertions(+), 9 deletions(-) diff --git a/components/slider/dist/metadata.json b/components/slider/dist/metadata.json index a7a72c00314..a15b91d0ce6 100644 --- a/components/slider/dist/metadata.json +++ b/components/slider/dist/metadata.json @@ -114,8 +114,8 @@ "--mod-slider-handle-border-width-down", "--mod-slider-handle-disabled-background-color", "--mod-slider-handle-focus-ring-color-key-focus", - "--mod-slider-handle-gap", "--mod-slider-handle-size", + "--mod-slider-inline-size", "--mod-slider-input-left", "--mod-slider-input-top-size", "--mod-slider-label-margin-start", @@ -143,6 +143,7 @@ "--mod-slider-track-fill-color-disabled", "--mod-slider-track-fill-thickness", "--mod-slider-track-handleoffset", + "--mod-slider-track-height-medium", "--mod-slider-track-margin-offset", "--mod-slider-track-middle-handleoffset", "--mod-slider-track-thickness", @@ -158,6 +159,7 @@ "--spectrum-slider-control-to-field-label-medium", "--spectrum-slider-control-to-field-label-small", "--spectrum-slider-controls-margin", + "--spectrum-slider-downstate-perspective", "--spectrum-slider-font-size", "--spectrum-slider-handle-background-color", "--spectrum-slider-handle-background-color-disabled", @@ -182,6 +184,7 @@ "--spectrum-slider-handle-size-large", "--spectrum-slider-handle-size-medium", "--spectrum-slider-handle-size-small", + "--spectrum-slider-inline-size", "--spectrum-slider-input-left", "--spectrum-slider-input-top-size", "--spectrum-slider-label-margin-start", @@ -210,9 +213,9 @@ "--spectrum-slider-track-fill-color-disabled", "--spectrum-slider-track-fill-thickness", "--spectrum-slider-track-handleoffset", + "--spectrum-slider-track-height-medium", "--spectrum-slider-track-margin-offset", "--spectrum-slider-track-middle-handleoffset", - "--spectrum-slider-track-thickness", "--spectrum-slider-value-inline-size", "--spectrum-slider-value-side-padding-inline" ], @@ -224,6 +227,9 @@ "--spectrum-component-height-200", "--spectrum-component-height-300", "--spectrum-component-height-75", + "--spectrum-component-size-difference-down", + "--spectrum-component-size-minimum-perspective-down", + "--spectrum-component-size-width-ratio-down", "--spectrum-component-top-to-text-100", "--spectrum-component-top-to-text-200", "--spectrum-component-top-to-text-75", @@ -231,6 +237,12 @@ "--spectrum-disabled-background-color", "--spectrum-disabled-border-color", "--spectrum-disabled-content-color", + "--spectrum-downstate-height", + "--spectrum-downstate-width", + "--spectrum-field-default-width-extra-large", + "--spectrum-field-default-width-large", + "--spectrum-field-default-width-medium", + "--spectrum-field-default-width-small", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", "--spectrum-focus-indicator-thickness", diff --git a/components/slider/index.css b/components/slider/index.css index cfaf3582bdf..32ecedb3879 100644 --- a/components/slider/index.css +++ b/components/slider/index.css @@ -19,6 +19,7 @@ --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-75); --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-medium); --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200); + --spectrum-slider-inline-size: var(--spectrum-field-default-width-medium); /* TODO: placeholder value for sideLabel variant value width */ --spectrum-slider-value-inline-size: 18px; @@ -34,7 +35,7 @@ --spectrum-slider-track-margin-offset: calc(var(--spectrum-slider-controls-margin) * -1); --spectrum-slider-track-middle-handleoffset: calc(var(--spectrum-slider-handle-gap) + calc(var(--spectrum-slider-handle-size) / 2)); --spectrum-slider-input-top-size: calc(var(--spectrum-slider-handle-size) / -2 / 4); - --spectrum-slider-track-fill-thickness: var(--spectrum-slider-track-thickness); + --spectrum-slider-track-fill-thickness: var(--spectrum-slider-track-height-medium); --spectrum-slider-tick-mark-width: var(--spectrum-border-width-200); --spectrum-slider-tick-mark-border-radius: 2px; --spectrum-slider-tick-handle-background-color: var(--spectrum-gray-100); @@ -71,6 +72,9 @@ --spectrum-slider-range-track-reset: 0; --spectrum-slider-track-corner-radius: 2px; --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-500); + + /* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties -- used to assign downstate perspective */ + --spectrum-slider-downstate-perspective: max(var(--spectrum-downstate-height), var(--spectrum-downstate-width) * var(--spectrum-component-size-width-ratio-down)); } .spectrum-Slider--sizeS { @@ -82,6 +86,8 @@ --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-small); --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-100); --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-500); + --spectrum-slider-inline-size: var(--spectrum-field-default-width-small); + --spectrum-slider-downstate-perspective: var(--spectrum-component-size-minimum-perspective-down); } .spectrum-Slider--sizeL { @@ -93,6 +99,7 @@ --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-large); --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200); --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4); + --spectrum-slider-inline-size: var(--spectrum-field-default-width-large); /* TODO: placeholder value for sideLabel variant value width */ --spectrum-slider-value-inline-size: 18px; @@ -107,6 +114,7 @@ --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-extra-large); --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200); --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4); + --spectrum-slider-inline-size: var(--spectrum-field-default-width-extra-large); /* TODO: placeholder value for sideLabel variant value width */ --spectrum-slider-value-inline-size: 22px; @@ -119,6 +127,7 @@ z-index: 0; display: block; min-inline-size: var(--mod-slider-min-size, var(--spectrum-slider-min-size)); + inline-size: var(--mod-slider-inline-size, var(--spectrum-slider-inline-size)); user-select: none; @@ -204,7 +213,8 @@ padding-block: 0; padding-inline-start: 0; - padding-inline-end: var(--mod-slider-handle-gap, var(--spectrum-slider-handle-gap)); + + /* padding-inline-end: var(--mod-slider-handle-gap, var(--spectrum-slider-handle-gap)); */ margin-inline-start: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset)); touch-action: none; /* Disable touch scrolling on touch devices to allow dragging slider */ @@ -243,7 +253,8 @@ inset-inline-start: auto; inset-inline-end: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset)); padding-block: 0; - padding-inline-start: var(--mod-slider-track-handleoffset, var(--spectrum-slider-track-handleoffset)); + + /* padding-inline-start: var(--mod-slider-track-handleoffset, var(--spectrum-slider-track-handleoffset)); */ padding-inline-end: 0; margin-inline-start: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset)); margin-inline-end: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset)); @@ -348,6 +359,7 @@ &:active, &.is-dragged { border-width: var(--mod-slider-handle-border-width-down, var(--spectrum-slider-handle-border-width-down)); + transform: perspective(var(--spectrum-slider-downstate-perspective)) translateZ(var(--spectrum-component-size-difference-down)); } &:active, @@ -462,7 +474,7 @@ } .spectrum-Slider-controls { - margin-block-start: calc(var(--spectrum-text-to-visual-75) - var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) / 2 - var(--mod-slider-track-thickness, var(--spectrum-slider-track-thickness)) / 2); + margin-block-start: calc(var(--spectrum-text-to-visual-75) - var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) / 2 - var(--mod-slider-track-height-medium, var(--spectrum-slider-track-height-medium)) / 2); } .spectrum-Slider-tickLabel { diff --git a/components/slider/stories/slider.stories.js b/components/slider/stories/slider.stories.js index 1d6f5b9d479..9e79f561e3c 100644 --- a/components/slider/stories/slider.stories.js +++ b/components/slider/stories/slider.stories.js @@ -1,4 +1,4 @@ -import { Sizes } from "@spectrum-css/preview/decorators"; +import { Sizes, withDownStateDimensionCapture } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isFocused, size } from "@spectrum-css/preview/types"; import metadata from "../dist/metadata.json"; @@ -144,16 +144,28 @@ export default { type: "figma", url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=842-1056", }, + downState: { + selectors: [".spectrum-Slider-handle:not(:disabled)"], + }, packageJson, metadata, + status: { + type: "migrated", + }, }, + decorators: [ + withDownStateDimensionCapture, + ], + tags: ["migrated"], }; /** * Sliders should always have a label. In rare cases where context is sufficient and an accessibility expert has reviewed the design, the label could be undefined. Top labels are the default and are recommended because they work better with long copy, localization, and responsive layouts. */ export const Default = SliderGroup.bind({}); -Default.args = {}; +Default.args = { + variant: "filled", +}; // ********* DOCS ONLY ********* // /** diff --git a/components/slider/stories/template.js b/components/slider/stories/template.js index 905fe770b40..a9b6ad3a392 100644 --- a/components/slider/stories/template.js +++ b/components/slider/stories/template.js @@ -125,7 +125,6 @@ export const Template = ({ id=${ifDefined(id)} style=${styleMap({ "--spectrum-slider-track-color": fillColor ? fillColor : undefined, - "inline-size": "240px", ...customStyles, })} role=${ifDefined(values.length > 1 ? "group" : undefined)} From 5677eb24bfe24e2b7c950e9cd2651b976ffab97f Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Thu, 12 Jun 2025 10:41:16 -0400 Subject: [PATCH 02/21] feat(slider): adding precision variant --- components/slider/dist/metadata.json | 14 +++++- components/slider/index.css | 56 +++++++++++++++++---- components/slider/stories/slider.stories.js | 21 ++++++++ components/slider/stories/template.js | 4 ++ tokens/custom/large-vars.css | 9 ++++ tokens/custom/medium-vars.css | 9 ++++ 6 files changed, 102 insertions(+), 11 deletions(-) diff --git a/components/slider/dist/metadata.json b/components/slider/dist/metadata.json index a15b91d0ce6..7c666d6a512 100644 --- a/components/slider/dist/metadata.json +++ b/components/slider/dist/metadata.json @@ -2,8 +2,11 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-Slider", + ".spectrum-Slider .spectrum-Slider-handle", ".spectrum-Slider .spectrum-Slider-handle.is-focused:before", ".spectrum-Slider--filled .spectrum-Slider-track:first-child:before", + ".spectrum-Slider--precise .spectrum-Slider-handle", + ".spectrum-Slider--precise .spectrum-Slider-handle.is-focused:before", ".spectrum-Slider--ramp .spectrum-Slider-handle", ".spectrum-Slider--range .spectrum-Slider-track ~ .spectrum-Slider-track", ".spectrum-Slider--range .spectrum-Slider-track:first-of-type", @@ -25,6 +28,8 @@ ".spectrum-Slider--tick .spectrum-Slider-controls", ".spectrum-Slider--tick .spectrum-Slider-handle", ".spectrum-Slider--tick .spectrum-Slider-tickLabel", + ".spectrum-Slider--track-height-large .spectrum-Slider-fill", + ".spectrum-Slider--track-height-large .spectrum-Slider-track", ".spectrum-Slider-controls", ".spectrum-Slider-controls:not(:has(.spectrum-Slider-ticks))", ".spectrum-Slider-fill", @@ -111,7 +116,6 @@ "--mod-slider-handle-border-color-key-focus", "--mod-slider-handle-border-radius", "--mod-slider-handle-border-width", - "--mod-slider-handle-border-width-down", "--mod-slider-handle-disabled-background-color", "--mod-slider-handle-focus-ring-color-key-focus", "--mod-slider-handle-size", @@ -192,6 +196,12 @@ "--spectrum-slider-label-text-color-disabled", "--spectrum-slider-label-top-to-text", "--spectrum-slider-min-size", + "--spectrum-slider-precision-handle-height", + "--spectrum-slider-precision-handle-height-extra-large", + "--spectrum-slider-precision-handle-height-large", + "--spectrum-slider-precision-handle-height-medium", + "--spectrum-slider-precision-handle-height-small", + "--spectrum-slider-precision-handle-width", "--spectrum-slider-ramp-handle-background-color", "--spectrum-slider-ramp-handle-border-color-active", "--spectrum-slider-ramp-track-color", @@ -213,6 +223,7 @@ "--spectrum-slider-track-fill-color-disabled", "--spectrum-slider-track-fill-thickness", "--spectrum-slider-track-handleoffset", + "--spectrum-slider-track-height-large", "--spectrum-slider-track-height-medium", "--spectrum-slider-track-margin-offset", "--spectrum-slider-track-middle-handleoffset", @@ -251,6 +262,7 @@ "--spectrum-font-size-75", "--spectrum-gray-100", "--spectrum-gray-200", + "--spectrum-gray-25", "--spectrum-gray-400", "--spectrum-gray-700", "--spectrum-gray-75", diff --git a/components/slider/index.css b/components/slider/index.css index 32ecedb3879..3c02649a77a 100644 --- a/components/slider/index.css +++ b/components/slider/index.css @@ -53,7 +53,7 @@ --spectrum-slider-label-text-color-disabled: var(--spectrum-disabled-content-color); --spectrum-slider-tick-mark-color-disabled: var(--spectrum-disabled-background-color); --spectrum-slider-ramp-handle-border-color-active: var(--spectrum-gray-100); - --spectrum-slider-handle-background-color: transparent; + --spectrum-slider-handle-background-color: var(--spectrum-gray-25); --spectrum-slider-handle-background-color-disabled: transparent; --spectrum-slider-ramp-handle-background-color: var(--spectrum-gray-75); --spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-75); @@ -66,6 +66,9 @@ --spectrum-slider-handle-border-color-key-focus: var(--spectrum-gray-800); --spectrum-slider-handle-focus-ring-color-key-focus: var(--spectrum-focus-indicator-color); + --spectrum-slider-precision-handle-width: 6px; + --spectrum-slider-precision-handle-height: var(--spectrum-slider-precision-handle-height-medium); + /* values */ --spectrum-slider-input-left: calc(var(--spectrum-slider-handle-margin-left) / 4); --spectrum-slider-track-handleoffset: var(--spectrum-slider-handle-gap); @@ -73,8 +76,10 @@ --spectrum-slider-track-corner-radius: 2px; --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-500); - /* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties -- used to assign downstate perspective */ - --spectrum-slider-downstate-perspective: max(var(--spectrum-downstate-height), var(--spectrum-downstate-width) * var(--spectrum-component-size-width-ratio-down)); + .spectrum-Slider-handle { + /* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties -- used to assign downstate perspective */ + --spectrum-slider-downstate-perspective: max(var(--spectrum-downstate-height), var(--spectrum-downstate-width) * var(--spectrum-component-size-width-ratio-down)); + } } .spectrum-Slider--sizeS { @@ -88,6 +93,7 @@ --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-500); --spectrum-slider-inline-size: var(--spectrum-field-default-width-small); --spectrum-slider-downstate-perspective: var(--spectrum-component-size-minimum-perspective-down); + --spectrum-slider-precision-handle-height: var(--spectrum-slider-precision-handle-height-small); } .spectrum-Slider--sizeL { @@ -100,6 +106,7 @@ --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200); --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4); --spectrum-slider-inline-size: var(--spectrum-field-default-width-large); + --spectrum-slider-precision-handle-height: var(--spectrum-slider-precision-handle-height-large); /* TODO: placeholder value for sideLabel variant value width */ --spectrum-slider-value-inline-size: 18px; @@ -115,6 +122,7 @@ --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200); --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4); --spectrum-slider-inline-size: var(--spectrum-field-default-width-extra-large); + --spectrum-slider-precision-handle-height: var(--spectrum-slider-precision-handle-height-extra-large); /* TODO: placeholder value for sideLabel variant value width */ --spectrum-slider-value-inline-size: 22px; @@ -141,6 +149,31 @@ } } +.spectrum-Slider--track-height-large { + .spectrum-Slider-track, + .spectrum-Slider-fill { + --spectrum-slider-track-fill-thickness: var(--spectrum-slider-track-height-large); + } +} + +.spectrum-Slider--precise { + .spectrum-Slider-handle { + inline-size: var(--spectrum-slider-precision-handle-width); + block-size: var(--spectrum-slider-precision-handle-height); + margin-inline: 0; + inset-block-start: calc(var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / 2 - var(--spectrum-slider-precision-handle-height) / 2); + + &.is-focused { + &::before { + border-radius: var(--spectrum-slider-handle-border-radius); + block-size: calc(var(--spectrum-slider-precision-handle-height) + var(--spectrum-focus-indicator-gap) * 2); + inline-size: calc(var(--spectrum-slider-precision-handle-width) + var(--spectrum-focus-indicator-gap) * 2); + transition: none; + } + } + } +} + .spectrum-Slider--sideLabel { display: flex; align-items: center; @@ -174,6 +207,7 @@ cursor: pointer; position: relative; z-index: auto; + inline-size: 100%; &:not(:has(.spectrum-Slider-ticks)) { display: flex; @@ -181,8 +215,8 @@ } /* These calculations prevent the track from spilling outside of the control */ - inline-size: calc(100% - calc(var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin))) * 2); - margin-inline-start: var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin)); + /* inline-size: calc(100% - calc(var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin))) * 2); */ + /* margin-inline-start: var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin)); */ block-size: var(--mod-slider-control-height, var(--spectrum-slider-control-height)); vertical-align: top; @@ -215,7 +249,7 @@ padding-inline-start: 0; /* padding-inline-end: var(--mod-slider-handle-gap, var(--spectrum-slider-handle-gap)); */ - margin-inline-start: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset)); + /* margin-inline-start: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset)); */ touch-action: none; /* Disable touch scrolling on touch devices to allow dragging slider */ user-select: none; @@ -257,7 +291,8 @@ /* padding-inline-start: var(--mod-slider-track-handleoffset, var(--spectrum-slider-track-handleoffset)); */ padding-inline-end: 0; margin-inline-start: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset)); - margin-inline-end: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset)); + + /* margin-inline-end: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset)); */ user-select: none; touch-action: none; /* Disable touch scrolling on touch devices to allow dragging slider handle */ } @@ -322,8 +357,9 @@ block-size: var(--mod-slider-ramp-track-height, var(--spectrum-slider-ramp-track-height)); position: absolute; - inset-inline-start: var(--spectrum-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset)); - inset-inline-end: var(--spectrum-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset)); + + /* inset-inline-start: var(--spectrum-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset)); + inset-inline-end: var(--spectrum-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset)); */ svg { inline-size: 100%; @@ -358,7 +394,6 @@ &:active, &.is-dragged { - border-width: var(--mod-slider-handle-border-width-down, var(--spectrum-slider-handle-border-width-down)); transform: perspective(var(--spectrum-slider-downstate-perspective)) translateZ(var(--spectrum-component-size-difference-down)); } @@ -631,6 +666,7 @@ &:active, &.is-dragged { + transform: perspective(var(--spectrum-slider-downstate-perspective)) translateZ(var(--spectrum-component-size-difference-down)); border-color: var(--highcontrast-slider-handle-border-color-down, var(--mod-slider-handle-border-color-down, var(--spectrum-slider-handle-border-color-down))); } } diff --git a/components/slider/stories/slider.stories.js b/components/slider/stories/slider.stories.js index 9e79f561e3c..23271514b2f 100644 --- a/components/slider/stories/slider.stories.js +++ b/components/slider/stories/slider.stories.js @@ -71,6 +71,16 @@ export default { control: "select", options: ["ramp", "offset", "filled"], }, + trackHeight: { + name: "Track height", + type: { name: "string" }, + table: { + type: { summary: "string" }, + category: "Component", + }, + control: "select", + options: ["medium", "large"], + }, labelPosition: { name: "Label Position", type: { name: "string" }, @@ -112,6 +122,15 @@ export default { control: "boolean", if: { arg: "showTicks", truthy: true }, }, + isPrecise: { + name: "Precise", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "Component", + }, + control: "boolean", + }, isDisabled, isFocused: { ...isFocused, @@ -132,6 +151,8 @@ export default { max: 20, values: [14], step: 2, + trackHeight: "medium", + isPrecise: false, }, parameters: { actions: { diff --git a/components/slider/stories/template.js b/components/slider/stories/template.js index a9b6ad3a392..5d3c799c72f 100644 --- a/components/slider/stories/template.js +++ b/components/slider/stories/template.js @@ -17,12 +17,14 @@ export const Template = ({ step = 2, values = [], variant, + trackHeight, labelPosition, fillColor, showTicks = false, showTickLabels = false, isDisabled = false, isFocused = false, + isPrecise = false, customClasses = [], customStyles = {}, id = getRandomId("slider"), @@ -118,6 +120,8 @@ export const Template = ({ [`${rootClass}--range`]: values.length > 1, [`${rootClass}--filled`]: variant === "filled", [`${rootClass}--tick`]: showTicks, + [`${rootClass}--track-height-${trackHeight}`]: trackHeight, + [`${rootClass}--precise`]: isPrecise, "is-disabled": isDisabled, [`${rootClass}--sideLabel`]: labelPosition === "side", ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), diff --git a/tokens/custom/large-vars.css b/tokens/custom/large-vars.css index d202b80848c..4be8c2efbf9 100644 --- a/tokens/custom/large-vars.css +++ b/tokens/custom/large-vars.css @@ -99,6 +99,15 @@ --spectrum-slider-tick-mark-height: 13px; --spectrum-slider-ramp-track-height: 20px; + --spectrum-slider-handle-small: 18px; + --spectrum-slider-handle-medium: 20px; + --spectrum-slider-handle-large: 22px; + --spectrum-slider-handle-extra-large: 24px; + + --spectrum-slider-precision-handle-height-small: 20px; + --spectrum-slider-precision-handle-height-medium: 22px; + --spectrum-slider-precision-handle-height-large: 24px; + --spectrum-slider-precision-handle-height-extra-large: 26px; --spectrum-standard-dialog-spacing-edge-to-content: var(--spectrum-spacing-400); --spectrum-takeover-dialog-spacing-grid-padding: var(--spectrum-spacing-400); diff --git a/tokens/custom/medium-vars.css b/tokens/custom/medium-vars.css index c124152a5eb..d16922f2c79 100644 --- a/tokens/custom/medium-vars.css +++ b/tokens/custom/medium-vars.css @@ -97,6 +97,15 @@ --spectrum-slider-ramp-track-height: 16px; --spectrum-slider-tick-mark-height: 10px; + --spectrum-slider-handle-small: 22px; + --spectrum-slider-handle-medium: 24px; + --spectrum-slider-handle-large: 28px; + --spectrum-slider-handle-extra-large: 30px; + + --spectrum-slider-precision-handle-height-small: 24px; + --spectrum-slider-precision-handle-height-medium: 26px; + --spectrum-slider-precision-handle-height-large: 30px; + --spectrum-slider-precision-handle-height-extra-large: 32px; --spectrum-standard-dialog-spacing-edge-to-content: var(--spectrum-spacing-500); --spectrum-takeover-dialog-spacing-grid-padding: var(--spectrum-spacing-500); From 78b50a3a19da4a75ddda8e140dfddabe10cc33c5 Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Mon, 16 Jun 2025 23:52:28 -0400 Subject: [PATCH 03/21] feat(slider): added emphasized mode, updated ticks --- .changeset/shy-actors-behave.md | 5 + components/slider/dist/metadata.json | 79 ++-- components/slider/index.css | 163 +++++---- components/slider/stories/slider.stories.js | 41 ++- components/slider/stories/slider.test.js | 386 +++++++++++++++++--- components/slider/stories/template.js | 50 ++- tokens/custom/large-vars.css | 15 + tokens/custom/medium-vars.css | 15 + 8 files changed, 570 insertions(+), 184 deletions(-) create mode 100644 .changeset/shy-actors-behave.md diff --git a/.changeset/shy-actors-behave.md b/.changeset/shy-actors-behave.md new file mode 100644 index 00000000000..6b8140b1bd6 --- /dev/null +++ b/.changeset/shy-actors-behave.md @@ -0,0 +1,5 @@ +--- +"@spectrum-css/slider": major +--- + +### S2 Slider Migration diff --git a/components/slider/dist/metadata.json b/components/slider/dist/metadata.json index 7c666d6a512..603b16f9d7a 100644 --- a/components/slider/dist/metadata.json +++ b/components/slider/dist/metadata.json @@ -4,10 +4,13 @@ ".spectrum-Slider", ".spectrum-Slider .spectrum-Slider-handle", ".spectrum-Slider .spectrum-Slider-handle.is-focused:before", + ".spectrum-Slider--emphasized .spectrum-Slider-fill:before", + ".spectrum-Slider--emphasized .spectrum-Slider-ramp .spectrum-Slider-ramp-track-fill", + ".spectrum-Slider--emphasized .spectrum-Slider-track:first-child:before", + ".spectrum-Slider--emphasized.spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type, :last-of-type):before", ".spectrum-Slider--filled .spectrum-Slider-track:first-child:before", ".spectrum-Slider--precise .spectrum-Slider-handle", ".spectrum-Slider--precise .spectrum-Slider-handle.is-focused:before", - ".spectrum-Slider--ramp .spectrum-Slider-handle", ".spectrum-Slider--range .spectrum-Slider-track ~ .spectrum-Slider-track", ".spectrum-Slider--range .spectrum-Slider-track:first-of-type", ".spectrum-Slider--range .spectrum-Slider-track:first-of-type:before", @@ -16,9 +19,8 @@ ".spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type, :last-of-type):before", ".spectrum-Slider--range .spectrum-Slider-value", ".spectrum-Slider--sideLabel", - ".spectrum-Slider--sideLabel .spectrum-Slider-controls", ".spectrum-Slider--sideLabel .spectrum-Slider-labelContainer", - ".spectrum-Slider--sideLabel .spectrum-Slider-labelContainer + .spectrum-Slider-controls", + ".spectrum-Slider--sideLabel .spectrum-Slider-labelContainer + .spectrum-Slider-content", ".spectrum-Slider--sideLabel .spectrum-Slider-labelContainer .spectrum-Slider-label", ".spectrum-Slider--sideLabel .spectrum-Slider-value", ".spectrum-Slider--sizeL", @@ -26,10 +28,11 @@ ".spectrum-Slider--sizeXL", ".spectrum-Slider--tick", ".spectrum-Slider--tick .spectrum-Slider-controls", - ".spectrum-Slider--tick .spectrum-Slider-handle", ".spectrum-Slider--tick .spectrum-Slider-tickLabel", ".spectrum-Slider--track-height-large .spectrum-Slider-fill", ".spectrum-Slider--track-height-large .spectrum-Slider-track", + ".spectrum-Slider-content", + ".spectrum-Slider-content--offset", ".spectrum-Slider-controls", ".spectrum-Slider-controls:not(:has(.spectrum-Slider-ticks))", ".spectrum-Slider-fill", @@ -48,20 +51,25 @@ ".spectrum-Slider-input:focus", ".spectrum-Slider-label", ".spectrum-Slider-labelContainer", - ".spectrum-Slider-labelContainer + .spectrum-Slider-controls", + ".spectrum-Slider-labelContainer + .spectrum-Slider-content", + ".spectrum-Slider-labelContainer + .spectrum-Slider-content--offset", ".spectrum-Slider-labelContainer:lang(ja)", ".spectrum-Slider-labelContainer:lang(ko)", ".spectrum-Slider-labelContainer:lang(zh)", ".spectrum-Slider-ramp", - ".spectrum-Slider-ramp path", + ".spectrum-Slider-ramp .spectrum-Slider-ramp-track", + ".spectrum-Slider-ramp .spectrum-Slider-ramp-track-fill", ".spectrum-Slider-ramp svg", ".spectrum-Slider-tick", ".spectrum-Slider-tick .spectrum-Slider-tickLabel", + ".spectrum-Slider-tick.spectrum-Slider-tick--track-height-large:after", ".spectrum-Slider-tick:after", ".spectrum-Slider-tick:first-of-type", ".spectrum-Slider-tick:first-of-type .spectrum-Slider-tickLabel", + ".spectrum-Slider-tick:first-of-type:after", ".spectrum-Slider-tick:last-of-type", ".spectrum-Slider-tick:last-of-type .spectrum-Slider-tickLabel", + ".spectrum-Slider-tick:last-of-type:after", ".spectrum-Slider-ticks", ".spectrum-Slider-ticks ~ .spectrum-Slider-handleContainer .spectrum-Slider-handle", ".spectrum-Slider-track", @@ -98,14 +106,16 @@ ], "modifiers": [ "--mod-animation-duration-100", - "--mod-disabled-border-color", "--mod-focus-indicator-gap", "--mod-font-size-75", "--mod-line-height-100", - "--mod-sectrum-slider-ramp-handle-border-color-active", "--mod-slider-cjk-line-height", "--mod-slider-control-height", "--mod-slider-controls-margin", + "--mod-slider-disabled-border-color", + "--mod-slider-editable-control-to-text-field", + "--mod-slider-editable-field-inline-size", + "--mod-slider-emphasized-track-fill-color", "--mod-slider-font-size", "--mod-slider-handle-background-color", "--mod-slider-handle-background-color-disabled", @@ -127,12 +137,10 @@ "--mod-slider-label-text-color-disabled", "--mod-slider-label-top-to-text", "--mod-slider-min-size", - "--mod-slider-ramp-handle-background-color", "--mod-slider-ramp-track-color", "--mod-slider-ramp-track-color-disabled", "--mod-slider-ramp-track-height", "--mod-slider-range-track-reset", - "--mod-slider-tick-handle-background-color", "--mod-slider-tick-label-color", "--mod-slider-tick-mark-border-radius", "--mod-slider-tick-mark-color", @@ -146,10 +154,7 @@ "--mod-slider-track-fill-color", "--mod-slider-track-fill-color-disabled", "--mod-slider-track-fill-thickness", - "--mod-slider-track-handleoffset", "--mod-slider-track-height-medium", - "--mod-slider-track-margin-offset", - "--mod-slider-track-middle-handleoffset", "--mod-slider-track-thickness", "--mod-slider-value-inline-size", "--mod-slider-value-side-padding-inline" @@ -158,12 +163,31 @@ "--spectrum-slider-cjk-line-height", "--spectrum-slider-control-height", "--spectrum-slider-control-to-field-label", + "--spectrum-slider-control-to-field-label-editable-extra-large", + "--spectrum-slider-control-to-field-label-editable-large", + "--spectrum-slider-control-to-field-label-editable-medium", + "--spectrum-slider-control-to-field-label-editable-small", "--spectrum-slider-control-to-field-label-extra-large", "--spectrum-slider-control-to-field-label-large", "--spectrum-slider-control-to-field-label-medium", "--spectrum-slider-control-to-field-label-small", + "--spectrum-slider-control-to-side-field-label-extra-large", + "--spectrum-slider-control-to-side-field-label-large", + "--spectrum-slider-control-to-side-field-label-medium", + "--spectrum-slider-control-to-side-field-label-small", + "--spectrum-slider-control-to-text-field-extra-large", + "--spectrum-slider-control-to-text-field-large", + "--spectrum-slider-control-to-text-field-medium", + "--spectrum-slider-control-to-text-field-small", "--spectrum-slider-controls-margin", "--spectrum-slider-downstate-perspective", + "--spectrum-slider-editable-control-to-field-label", + "--spectrum-slider-editable-control-to-text-field", + "--spectrum-slider-editable-field-inline-size-extra-large", + "--spectrum-slider-editable-field-inline-size-large", + "--spectrum-slider-editable-field-inline-size-medium", + "--spectrum-slider-editable-field-inline-size-small", + "--spectrum-slider-emphasized-track-fill-color", "--spectrum-slider-font-size", "--spectrum-slider-handle-background-color", "--spectrum-slider-handle-background-color-disabled", @@ -174,20 +198,14 @@ "--spectrum-slider-handle-border-color-key-focus", "--spectrum-slider-handle-border-radius", "--spectrum-slider-handle-border-width", - "--spectrum-slider-handle-border-width-down", - "--spectrum-slider-handle-border-width-down-extra-large", - "--spectrum-slider-handle-border-width-down-large", - "--spectrum-slider-handle-border-width-down-medium", - "--spectrum-slider-handle-border-width-down-small", - "--spectrum-slider-handle-disabled-background-color", + "--spectrum-slider-handle-extra-large", "--spectrum-slider-handle-focus-ring-color-key-focus", "--spectrum-slider-handle-gap", + "--spectrum-slider-handle-large", "--spectrum-slider-handle-margin-left", + "--spectrum-slider-handle-medium", "--spectrum-slider-handle-size", - "--spectrum-slider-handle-size-extra-large", - "--spectrum-slider-handle-size-large", - "--spectrum-slider-handle-size-medium", - "--spectrum-slider-handle-size-small", + "--spectrum-slider-handle-small", "--spectrum-slider-inline-size", "--spectrum-slider-input-left", "--spectrum-slider-input-top-size", @@ -202,13 +220,9 @@ "--spectrum-slider-precision-handle-height-medium", "--spectrum-slider-precision-handle-height-small", "--spectrum-slider-precision-handle-width", - "--spectrum-slider-ramp-handle-background-color", - "--spectrum-slider-ramp-handle-border-color-active", - "--spectrum-slider-ramp-track-color", "--spectrum-slider-ramp-track-color-disabled", "--spectrum-slider-ramp-track-height", "--spectrum-slider-range-track-reset", - "--spectrum-slider-tick-handle-background-color", "--spectrum-slider-tick-label-color", "--spectrum-slider-tick-mark-border-radius", "--spectrum-slider-tick-mark-color", @@ -222,15 +236,13 @@ "--spectrum-slider-track-fill-color", "--spectrum-slider-track-fill-color-disabled", "--spectrum-slider-track-fill-thickness", - "--spectrum-slider-track-handleoffset", "--spectrum-slider-track-height-large", "--spectrum-slider-track-height-medium", - "--spectrum-slider-track-margin-offset", - "--spectrum-slider-track-middle-handleoffset", "--spectrum-slider-value-inline-size", "--spectrum-slider-value-side-padding-inline" ], "global": [ + "--spectrum-accent-content-color-default", "--spectrum-animation-duration-100", "--spectrum-border-width-200", "--spectrum-cjk-line-height-100", @@ -260,9 +272,8 @@ "--spectrum-font-size-100", "--spectrum-font-size-200", "--spectrum-font-size-75", - "--spectrum-gray-100", - "--spectrum-gray-200", "--spectrum-gray-25", + "--spectrum-gray-300", "--spectrum-gray-400", "--spectrum-gray-700", "--spectrum-gray-75", @@ -270,13 +281,11 @@ "--spectrum-line-height-100", "--spectrum-logical-rotation", "--spectrum-neutral-content-color-default", - "--spectrum-spacing-100", - "--spectrum-spacing-200", "--spectrum-spacing-300", "--spectrum-spacing-900", "--spectrum-text-to-visual-75" ], - "passthroughs": [], + "passthroughs": ["--mod-textfield-width"], "high-contrast": [ "--highcontrast-slider-filled-track-fill-color", "--highcontrast-slider-handle-background-color", diff --git a/components/slider/index.css b/components/slider/index.css index 3c02649a77a..cb62127cd90 100644 --- a/components/slider/index.css +++ b/components/slider/index.css @@ -13,12 +13,11 @@ .spectrum-Slider { --spectrum-slider-font-size: var(--spectrum-font-size-75); - --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-medium); + --spectrum-slider-handle-size: var(--spectrum-slider-handle-medium); --spectrum-slider-control-height: var(--spectrum-component-height-100); - --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-medium); --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-75); --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-medium); - --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200); + --spectrum-slider-value-side-padding-inline: var(--spectrum-slider-control-to-side-field-label-medium); --spectrum-slider-inline-size: var(--spectrum-field-default-width-medium); /* TODO: placeholder value for sideLabel variant value width */ @@ -32,34 +31,28 @@ --spectrum-slider-handle-border-width: var(--spectrum-border-width-200); --spectrum-slider-handle-margin-left: calc(var(--spectrum-slider-handle-size) / -2); --spectrum-slider-controls-margin: calc(var(--spectrum-slider-handle-size) / 2); - --spectrum-slider-track-margin-offset: calc(var(--spectrum-slider-controls-margin) * -1); - --spectrum-slider-track-middle-handleoffset: calc(var(--spectrum-slider-handle-gap) + calc(var(--spectrum-slider-handle-size) / 2)); --spectrum-slider-input-top-size: calc(var(--spectrum-slider-handle-size) / -2 / 4); --spectrum-slider-track-fill-thickness: var(--spectrum-slider-track-height-medium); --spectrum-slider-tick-mark-width: var(--spectrum-border-width-200); --spectrum-slider-tick-mark-border-radius: 2px; - --spectrum-slider-tick-handle-background-color: var(--spectrum-gray-100); /* colors */ - --spectrum-slider-track-color: var(--spectrum-gray-200); + --spectrum-slider-track-color: var(--spectrum-gray-300); --spectrum-slider-track-fill-color: var(--spectrum-gray-700); - --spectrum-slider-ramp-track-color: var(--spectrum-gray-400); - --spectrum-slider-ramp-track-color-disabled: var(--spectrum-gray-100); --spectrum-slider-track-color-disabled: var(--spectrum-disabled-background-color); + --spectrum-slider-ramp-track-color-disabled: var(--spectrum-slider-track-color-disabled); --spectrum-slider-track-fill-color-disabled: var(--spectrum-disabled-background-color); --spectrum-slider-handle-border-color-disabled: var(--spectrum-disabled-border-color); --spectrum-slider-label-text-color: var(--spectrum-neutral-content-color-default); --spectrum-slider-tick-label-color: var(--spectrum-neutral-content-color-default); --spectrum-slider-label-text-color-disabled: var(--spectrum-disabled-content-color); --spectrum-slider-tick-mark-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-slider-ramp-handle-border-color-active: var(--spectrum-gray-100); --spectrum-slider-handle-background-color: var(--spectrum-gray-25); - --spectrum-slider-handle-background-color-disabled: transparent; - --spectrum-slider-ramp-handle-background-color: var(--spectrum-gray-75); + --spectrum-slider-handle-background-color-disabled: var(--spectrum-slider-handle-background-color); --spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-75); --spectrum-slider-handle-border-color: var(--spectrum-gray-700); - --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-75); - --spectrum-slider-tick-mark-color: var(--spectrum-gray-200); + --spectrum-slider-tick-mark-color: var(--spectrum-gray-400); + --spectrum-slider-emphasized-track-fill-color: var(--spectrum-accent-content-color-default); --spectrum-slider-handle-border-color-hover: var(--spectrum-gray-800); --spectrum-slider-handle-border-color-down: var(--spectrum-gray-800); @@ -69,12 +62,17 @@ --spectrum-slider-precision-handle-width: 6px; --spectrum-slider-precision-handle-height: var(--spectrum-slider-precision-handle-height-medium); + --spectrum-slider-editable-control-to-text-field: var(--spectrum-slider-control-to-text-field-medium); + --spectrum-slider-editable-control-to-field-label: var(--spectrum-slider-control-to-field-label-editable-medium); + /* values */ --spectrum-slider-input-left: calc(var(--spectrum-slider-handle-margin-left) / 4); - --spectrum-slider-track-handleoffset: var(--spectrum-slider-handle-gap); --spectrum-slider-range-track-reset: 0; --spectrum-slider-track-corner-radius: 2px; - --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-500); + --spectrum-slider-handle-border-radius: var(--spectrum-slider-handle-size); + + /* Textfield passthrough */ + --mod-textfield-width: var(--mod-slider-editable-field-inline-size, var(--spectrum-slider-editable-field-inline-size-medium)); .spectrum-Slider-handle { /* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties -- used to assign downstate perspective */ @@ -84,29 +82,33 @@ .spectrum-Slider--sizeS { --spectrum-slider-font-size: var(--spectrum-font-size-75); - --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-small); + --spectrum-slider-handle-size: var(--spectrum-slider-handle-small); --spectrum-slider-control-height: var(--spectrum-component-height-75); - --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-small); --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-75); --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-small); - --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-100); + --spectrum-slider-value-side-padding-inline: var(--spectrum-slider-control-to-side-field-label-small); --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-500); --spectrum-slider-inline-size: var(--spectrum-field-default-width-small); --spectrum-slider-downstate-perspective: var(--spectrum-component-size-minimum-perspective-down); --spectrum-slider-precision-handle-height: var(--spectrum-slider-precision-handle-height-small); + --spectrum-slider-editable-control-to-text-field: var(--spectrum-slider-control-to-text-field-small); + --spectrum-slider-editable-control-to-field-label: var(--spectrum-slider-control-to-field-label-editable-small); + --mod-textfield-width: var(--spectrum-slider-editable-field-inline-size-small); } .spectrum-Slider--sizeL { --spectrum-slider-font-size: var(--spectrum-font-size-100); - --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-large); + --spectrum-slider-handle-size: var(--spectrum-slider-handle-large); --spectrum-slider-control-height: var(--spectrum-component-height-200); - --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-large); --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-100); --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-large); - --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200); + --spectrum-slider-value-side-padding-inline: var(--spectrum-slider-control-to-side-field-label-large); --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4); --spectrum-slider-inline-size: var(--spectrum-field-default-width-large); --spectrum-slider-precision-handle-height: var(--spectrum-slider-precision-handle-height-large); + --spectrum-slider-editable-control-to-text-field: var(--spectrum-slider-control-to-text-field-large); + --spectrum-slider-editable-control-to-field-label: var(--spectrum-slider-control-to-field-label-editable-large); + --mod-textfield-width: var(--spectrum-slider-editable-field-inline-size-large); /* TODO: placeholder value for sideLabel variant value width */ --spectrum-slider-value-inline-size: 18px; @@ -114,15 +116,18 @@ .spectrum-Slider--sizeXL { --spectrum-slider-font-size: var(--spectrum-font-size-200); - --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-extra-large); + --spectrum-slider-handle-size: var(--spectrum-slider-handle-extra-large); --spectrum-slider-control-height: var(--spectrum-component-height-300); - --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-extra-large); + --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-200); --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-extra-large); - --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200); + --spectrum-slider-value-side-padding-inline: var(--spectrum-slider-control-to-side-field-label-extra-large); --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4); --spectrum-slider-inline-size: var(--spectrum-field-default-width-extra-large); --spectrum-slider-precision-handle-height: var(--spectrum-slider-precision-handle-height-extra-large); + --spectrum-slider-editable-control-to-text-field: var(--spectrum-slider-control-to-text-field-extra-large); + --spectrum-slider-editable-control-to-field-label: var(--spectrum-slider-control-to-field-label-editable-extra-large); + --mod-textfield-width: var(--spectrum-slider-editable-field-inline-size-extra-large); /* TODO: placeholder value for sideLabel variant value width */ --spectrum-slider-value-inline-size: 22px; @@ -162,6 +167,7 @@ block-size: var(--spectrum-slider-precision-handle-height); margin-inline: 0; inset-block-start: calc(var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / 2 - var(--spectrum-slider-precision-handle-height) / 2); + margin-inline-start: calc((var(--spectrum-slider-precision-handle-width) + var(--spectrum-slider-handle-border-width)) * -0.5); &.is-focused { &::before { @@ -186,14 +192,10 @@ } } - .spectrum-Slider-labelContainer + .spectrum-Slider-controls { + .spectrum-Slider-labelContainer + .spectrum-Slider-content { margin-block-start: 0; } - .spectrum-Slider-controls { - margin-inline-end: var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin)); - } - .spectrum-Slider-value { margin-inline-start: var(--mod-slider-value-side-padding-inline, var(--spectrum-slider-value-side-padding-inline)); inline-size: var(--mod-slider-value-inline-size, var(--spectrum-slider-value-inline-size)); @@ -201,6 +203,16 @@ } } +.spectrum-Slider-content { + inline-size: 100%; +} + +.spectrum-Slider-content--offset { + display: flex; + align-items: center; + gap: var(--mod-slider-editable-control-to-text-field, var(--spectrum-slider-editable-control-to-text-field)); +} + .spectrum-Slider-controls { display: inline-block; box-sizing: border-box; @@ -214,16 +226,16 @@ align-items: center; } - /* These calculations prevent the track from spilling outside of the control */ - /* inline-size: calc(100% - calc(var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin))) * 2); */ - /* margin-inline-start: var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin)); */ - block-size: var(--mod-slider-control-height, var(--spectrum-slider-control-height)); vertical-align: top; } -.spectrum-Slider-labelContainer + .spectrum-Slider-controls { - margin-block-start: calc(-1 * var(--spectrum-slider-control-to-field-label)); +.spectrum-Slider-labelContainer + .spectrum-Slider-content { + margin-block-start: var(--spectrum-slider-control-to-field-label); +} + +.spectrum-Slider-labelContainer + .spectrum-Slider-content--offset { + margin-block-start: var(--spectrum-slider-editable-control-to-field-label); } /* TODO: Sliders with ticks + tick mark labels require more margin-block-end. @@ -248,9 +260,6 @@ padding-block: 0; padding-inline-start: 0; - /* padding-inline-end: var(--mod-slider-handle-gap, var(--spectrum-slider-handle-gap)); */ - /* margin-inline-start: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset)); */ - touch-action: none; /* Disable touch scrolling on touch devices to allow dragging slider */ user-select: none; @@ -287,12 +296,8 @@ inset-inline-start: auto; inset-inline-end: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset)); padding-block: 0; - - /* padding-inline-start: var(--mod-slider-track-handleoffset, var(--spectrum-slider-track-handleoffset)); */ padding-inline-end: 0; margin-inline-start: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset)); - - /* margin-inline-end: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset)); */ user-select: none; touch-action: none; /* Disable touch scrolling on touch devices to allow dragging slider handle */ } @@ -300,7 +305,6 @@ /* over-write for Range, without the LTR RTL post-css hack */ .spectrum-Slider--range { .spectrum-Slider-track ~ .spectrum-Slider-track { - padding-inline: var(--mod-slider-track-middle-handleoffset, var(--spectrum-slider-track-middle-handleoffset)) var(--mod-slider-track-middle-handleoffset, var(--spectrum-slider-track-middle-handleoffset)); inset-inline: auto; margin-inline: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset)); } @@ -309,7 +313,6 @@ .spectrum-Slider-fill { margin-inline-start: 0; padding-block: 0; - padding-inline-start: calc(var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin)) + var(--spectrum-slider-handle-gap, var(--spectrum-slider-handle-gap))); padding-inline-end: 0; } @@ -327,10 +330,8 @@ .spectrum-Slider-track { &:first-of-type { padding-inline-start: 0; - padding-inline-end: var(--mod-slider-track-handleoffset, var(--spectrum-slider-track-handleoffset)); inset-inline-start: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset)); inset-inline-end: auto; - margin-inline-start: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset)); } &:first-of-type::before { @@ -339,11 +340,9 @@ } &:last-of-type { - padding-inline-start: var(--spectrum-slider-track-handleoffset); padding-inline-end: 0; inset-inline-start: auto; inset-inline-end: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset)); - margin-inline-end: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset)); } &:last-of-type::before { @@ -355,12 +354,8 @@ .spectrum-Slider-ramp { block-size: var(--mod-slider-ramp-track-height, var(--spectrum-slider-ramp-track-height)); - position: absolute; - /* inset-inline-start: var(--spectrum-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset)); - inset-inline-end: var(--spectrum-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset)); */ - svg { inline-size: 100%; block-size: 100%; @@ -386,7 +381,7 @@ border-width: var(--mod-slider-handle-border-width, var(--spectrum-slider-handle-border-width)); border-style: solid; - border-radius: var(--mod-slider-handle-border-radius, var(--spectrum-slider-handle-border-radius)); + border-radius: var(--mod-slider-handle-border-radius, var(--spectrum-slider-handle-size)); transition: border-width var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out; @@ -504,10 +499,6 @@ /* setting tick marks in relation to label */ .spectrum-Slider--tick { - .spectrum-Slider-handle { - background-color: var(--mod-slider-tick-handle-background-color, var(--spectrum-slider-tick-handle-background-color)); - } - .spectrum-Slider-controls { margin-block-start: calc(var(--spectrum-text-to-visual-75) - var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) / 2 - var(--mod-slider-track-height-medium, var(--spectrum-slider-track-height-medium)) / 2); } @@ -521,8 +512,8 @@ .spectrum-Slider-ticks { display: flex; justify-content: space-between; - z-index: 0; - margin-inline: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset)); + z-index: 2; + position: relative; /* TODO: missing core-token for handle fill-color */ & ~ .spectrum-Slider-handleContainer { @@ -550,6 +541,13 @@ border-radius: var(--mod-slider-tick-mark-border-radius, var(--spectrum-slider-tick-mark-border-radius)); } + &.spectrum-Slider-tick--track-height-large { + &::after { + block-size: calc(var(--spectrum-slider-track-height-large) + 2px); + inset-block-start: -4px; + } + } + .spectrum-Slider-tickLabel { display: flex; align-items: center; @@ -568,6 +566,13 @@ } } + &:first-of-type, + &:last-of-type { + &::after { + opacity: 0; + } + } + &:first-of-type { /* fix off-by-one alignment */ inset-inline-start: calc(var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)) / -2); @@ -641,9 +646,27 @@ } } +.spectrum-Slider--emphasized { + .spectrum-Slider-track:first-child, + &.spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type, :last-of-type), + .spectrum-Slider-fill { + &::before { + background: var(--highcontrast-slider-filled-track-fill-color, var(--mod-slider-emphasized-track-fill-color, var(--spectrum-slider-emphasized-track-fill-color))); + } + } + + .spectrum-Slider-ramp .spectrum-Slider-ramp-track-fill { + fill: var(--spectrum-slider-emphasized-track-fill-color); + } +} + .spectrum-Slider-ramp { - path { - fill: var(--highcontrast-slider-ramp-track-color, var(--mod-slider-ramp-track-color, var(--spectrum-slider-ramp-track-color))); + .spectrum-Slider-ramp-track { + fill: var(--highcontrast-slider-ramp-track-color, var(--mod-slider-ramp-track-color, var(--spectrum-slider-track-color))); + } + + .spectrum-Slider-ramp-track-fill { + fill: var(--spectrum-slider-track-fill-color); } } @@ -671,13 +694,6 @@ } } -.spectrum-Slider--ramp { - .spectrum-Slider-handle { - box-shadow: 0 0 0 var(--spectrum-slider-handle-gap) var(--highcontrast-slider-ramp-handle-border-color-active, var(--mod-sectrum-slider-ramp-handle-border-color-active, var(--spectrum-slider-ramp-handle-border-color-active))); - background: var(--mod-slider-ramp-handle-background-color, var(--highcontrast-slider-ramp-handle-background-color, var(--spectrum-slider-ramp-handle-background-color))); - } -} - .spectrum-Slider-input { background: transparent; } @@ -702,6 +718,10 @@ border-start-end-radius: 0; border-end-end-radius: 0; } + + &:first-of-type::before { + background: var(--highcontrast-slider-filled-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-color))); + } } } @@ -722,14 +742,13 @@ .spectrum-Slider-handle { border-color: var(--highcontrast-slider-handle-border-color-disabled, var(--mod-slider-handle-border-color-disabled, var(--spectrum-slider-handle-border-color-disabled))); - background: var(--highcontrast-slider-handle-disabled-background-color, var(--mod-slider-handle-disabled-background-color, var(--spectrum-slider-handle-disabled-background-color))); + background: var(--highcontrast-slider-handle-disabled-background-color, var(--mod-slider-handle-disabled-background-color, var(--spectrum-slider-handle-background-color-disabled))); cursor: default; pointer-events: none; &:hover, &:active { - /* @todo need to update --mod with a component-specific prefix */ - border-color: var(--mod-disabled-border-color, var(--spectrum-disabled-border-color)); + border-color: var(--mod-slider-disabled-border-color, var(--spectrum-disabled-border-color)); background: var(--highcontrast-slider-handle-background-color-disabled, var(--mod-slider-handle-background-color-disabled, var(--spectrum-slider-handle-background-color-disabled))); } } diff --git a/components/slider/stories/slider.stories.js b/components/slider/stories/slider.stories.js index 23271514b2f..82c829de9eb 100644 --- a/components/slider/stories/slider.stories.js +++ b/components/slider/stories/slider.stories.js @@ -1,6 +1,6 @@ import { Sizes, withDownStateDimensionCapture } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { isDisabled, isFocused, size } from "@spectrum-css/preview/types"; +import { isActive, isDisabled, isEmphasized, isFocused, isHovered, size } from "@spectrum-css/preview/types"; import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; import { SliderGroup } from "./slider.test.js"; @@ -131,6 +131,18 @@ export default { }, control: "boolean", }, + isEditable: { + name: "Editable", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "Component", + }, + control: "boolean", + }, + isEmphasized, + isActive, + isHovered, isDisabled, isFocused: { ...isFocused, @@ -140,19 +152,23 @@ export default { }, args: { rootClass: "spectrum-Slider", + isEmphasized: false, + isActive: false, + isHovered: false, isDisabled: false, isFocused: false, showTicks: false, showTickLabels: false, labelPosition: "top", - label: "Slider label", + label: "Label", size: "m", - min: 10, - max: 20, - values: [14], - step: 2, + min: 0, + max: 30, + values: [15], + step: 5, trackHeight: "medium", isPrecise: false, + isEditable: false, }, parameters: { actions: { @@ -236,19 +252,20 @@ Filled.parameters = { /** * With fill and offset. If the value represents an offset, the fill start can be set to represent the point of origin. This allows the slider fill to start from inside the track. */ -export const FilledOffset = Template.bind({}); -FilledOffset.args = { +export const Offset = Template.bind({}); +Offset.args = { ...Default.args, - min: 0, variant: "offset", + values: [0], }; -FilledOffset.tags = ["!dev"]; -FilledOffset.parameters = { +Offset.tags = ["!dev"]; +Offset.parameters = { chromatic: { disableSnapshot: true, }, }; + export const Ramp = Template.bind({}); Ramp.args = { ...Default.args, @@ -267,7 +284,7 @@ Ramp.parameters = { export const Range = Template.bind({}); Range.args = { ...Default.args, - values: [14, 16], + values: [10, 20], }; Range.tags = ["!dev"]; Range.parameters = { diff --git a/components/slider/stories/slider.test.js b/components/slider/stories/slider.test.js index 22777744fd4..edc6a7712c4 100644 --- a/components/slider/stories/slider.test.js +++ b/components/slider/stories/slider.test.js @@ -1,69 +1,347 @@ import { Variants } from "@spectrum-css/preview/decorators"; import { Template } from "./template.js"; +const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1); + +export const testData = [ + ...["filled", "offset", "ramp"].map((variant) => ({ + testHeading: capitalize(variant), + variant, + values: variant === "offset" ? [0] : [15] + })), + { + testHeading: "Range", + variant: "filled", + values: [10, 20] + }, + { + testHeading: "With Ticks", + variant: "filled", + showTicks: true, + showTickLabels: true + }, + { + testHeading: "Focused", + variant: "filled", + isFocused: true + }, + { + testHeading: "Precise", + variant: "filled", + isPrecise: true + }, + { + testHeading: "Large Track", + variant: "filled", + trackHeight: "large" + }, + { + testHeading: "Precise Large Track", + variant: "filled", + isPrecise: true, + trackHeight: "large" + }, + // Ramp variants + { + testHeading: "Ramp Precise", + variant: "ramp", + isPrecise: true + }, + // Range variants + { + testHeading: "Range Precise", + variant: "filled", + values: [10, 20], + isPrecise: true + }, + { + testHeading: "Range Large Track", + variant: "filled", + values: [10, 20], + trackHeight: "large" + }, + { + testHeading: "Range Precise Large Track", + variant: "filled", + values: [10, 20], + isPrecise: true, + trackHeight: "large" + }, + // Offset variants + { + testHeading: "Offset Precise", + variant: "offset", + values: [0], + isPrecise: true + }, + { + testHeading: "Offset Large Track", + variant: "offset", + values: [0], + trackHeight: "large" + }, + { + testHeading: "Offset Precise Large Track", + variant: "offset", + values: [0], + isPrecise: true, + trackHeight: "large" + }, + // Ticks variants + { + testHeading: "Ticks Precise", + variant: "filled", + showTicks: true, + showTickLabels: true, + isPrecise: true + }, + { + testHeading: "Ticks Large Track", + variant: "filled", + showTicks: true, + showTickLabels: true, + trackHeight: "large" + }, + { + testHeading: "Ticks Precise Large Track", + variant: "filled", + showTicks: true, + showTickLabels: true, + isPrecise: true, + trackHeight: "large" + }, + { + testHeading: "Ticks Range Large Track", + variant: "filled", + showTicks: true, + showTickLabels: true, + values: [10, 20], + trackHeight: "large" + }, + { + testHeading: "Ticks Offset Large Track", + variant: "offset", + showTicks: true, + showTickLabels: true, + values: [0], + trackHeight: "large" + }, + // Side label variants + { + testHeading: "Side Label", + variant: "filled", + labelPosition: "side" + }, + { + testHeading: "Side Label Precise", + variant: "filled", + labelPosition: "side", + isPrecise: true + }, + { + testHeading: "Side Label Large Track", + variant: "filled", + labelPosition: "side", + trackHeight: "large" + }, + { + testHeading: "Side Label Range", + variant: "filled", + labelPosition: "side", + values: [10, 20] + }, + { + testHeading: "Side Label Offset", + variant: "offset", + labelPosition: "side", + values: [0] + }, + { + testHeading: "Side Label Ticks", + variant: "filled", + labelPosition: "side", + showTicks: true, + showTickLabels: true + }, + // Editable variants + { + testHeading: "Editable", + variant: "filled", + isEditable: true + }, + { + testHeading: "Editable Precise", + variant: "filled", + isEditable: true, + isPrecise: true + }, + { + testHeading: "Editable Large Track", + variant: "filled", + isEditable: true, + trackHeight: "large" + }, + { + testHeading: "Editable Offset", + variant: "offset", + isEditable: true, + values: [0] + }, + { + testHeading: "Editable Side Label", + variant: "filled", + isEditable: true, + labelPosition: "side" + }, + // No label variants + { + testHeading: "No Label", + variant: "filled", + label: "" + }, + { + testHeading: "No Label Precise", + variant: "filled", + label: "", + isPrecise: true + }, + { + testHeading: "No Label Large Track", + variant: "filled", + label: "", + trackHeight: "large" + }, + { + testHeading: "No Label Range", + variant: "filled", + label: "", + values: [10, 20] + }, + { + testHeading: "No Label Offset", + variant: "offset", + label: "", + values: [0] + }, + { + testHeading: "No Label Ticks", + variant: "filled", + label: "", + showTicks: true, + showTickLabels: true + }, + // No label editable variants + { + testHeading: "No Label Editable", + variant: "filled", + label: "", + isEditable: true + }, + { + testHeading: "No Label Editable Precise", + variant: "filled", + label: "", + isEditable: true, + isPrecise: true + }, + { + testHeading: "No Label Editable Large Track", + variant: "filled", + label: "", + isEditable: true, + trackHeight: "large" + }, + { + testHeading: "No Label Editable Offset", + variant: "offset", + label: "", + isEditable: true, + values: [0] + }, + // Disabled variants + { + testHeading: "Disabled", + variant: "filled", + isDisabled: true + }, + { + testHeading: "Disabled + precise", + variant: "filled", + isDisabled: true, + isPrecise: true + }, + { + testHeading: "Disabled + precise + large track", + variant: "filled", + isDisabled: true, + isPrecise: true, + trackHeight: "large" + }, + { + testHeading: "Emphasized", + variant: "filled", + isEmphasized: true + }, + { + testHeading: "Emphasized Precise", + variant: "filled", + isEmphasized: true, + isPrecise: true + }, + { + testHeading: "Emphasized Large Track", + variant: "filled", + isEmphasized: true, + trackHeight: "large" + }, + { + testHeading: "Emphasized Range", + variant: "filled", + isEmphasized: true, + values: [10, 20] + }, + { + testHeading: "Emphasized Offset", + variant: "offset", + isEmphasized: true, + values: [0] + }, + { + testHeading: "Emphasized Ticks", + variant: "filled", + isEmphasized: true, + showTicks: true, + showTickLabels: true + }, + { + testHeading: "Emphasized Ticks Large Track", + variant: "filled", + isEmphasized: true, + showTicks: true, + showTickLabels: true, + trackHeight: "large" + } +]; + export const SliderGroup = Variants({ Template, - testData: [ - { - testHeading: "Default", - }, - { - testHeading: "Without label", - label: undefined, - }, - { - testHeading: "Filled", - variant: "filled", - }, - { - testHeading: "Filled offset", - variant: "offset", - min: 0, - }, - { - testHeading: "Ramp", - variant: "ramp", - }, - { - testHeading: "Range", - values: [14, 16], - }, - { - testHeading: "Tick", - showTicks: true, - }, + testData, + stateData: [ { - testHeading: "Tick with labels", - showTicks: true, - showTickLabels: true, + testHeading: "Hovered", + isHovered: true }, { - testHeading: "Side label", - labelPosition: "side", + testHeading: "Active", + isActive: true }, { - testHeading: "Gradient", - customStyles: { - "--spectrum-slider-track-color": - "linear-gradient(to right, red, green 100%)", - "--spectrum-slider-track-color-rtl": - "linear-gradient(to left, red, green 100%)", - }, + testHeading: "Focused", + isFocused: true }, - { - testHeading: "Truncation", - withStates: false, - label: "Slider label that is long and wraps to the next line", - } - ], - stateData: [ { testHeading: "Disabled", - isDisabled: true, - }, - { - testHeading: "Focused", - isFocused: true, - }, + isDisabled: true + } ] }); diff --git a/components/slider/stories/template.js b/components/slider/stories/template.js index 5d3c799c72f..62e864261ab 100644 --- a/components/slider/stories/template.js +++ b/components/slider/stories/template.js @@ -1,5 +1,6 @@ import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/template.js"; import { getRandomId } from "@spectrum-css/preview/decorators"; +import { Template as TextField } from "@spectrum-css/textfield/stories/template.js"; import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; import { ifDefined } from "lit/directives/if-defined.js"; @@ -23,18 +24,23 @@ export const Template = ({ showTicks = false, showTickLabels = false, isDisabled = false, + isHovered = false, + isActive = false, isFocused = false, isPrecise = false, + isEditable = false, + isEmphasized = false, customClasses = [], customStyles = {}, id = getRandomId("slider"), } = {}, context = {}) => { const { globals = {}, updateArgs } = context; - + let fillPercentage = 50; const isRTL = globals.textDirection !== "rtl"; const rangeLength = max - min; const centerPoint = rangeLength / 2 + min; const isRamp = variant === "ramp"; + const maskWidth = (fillPercentage / 100) * 240; const rampSVG = html` `; const getPosition = (v) => ((v - min) / rangeLength) * 100; @@ -70,7 +82,10 @@ export const Template = ({ const ticks = []; for (let i = from; i <= to; i += step) { ticks.push(html` -
+
${when(showTickLabels, () => html`${i}`, undefined)}
@@ -86,7 +101,9 @@ export const Template = ({
({ ...a, [c]: true }), {}), @@ -154,7 +172,7 @@ export const Template = ({ forInput: id ? `${id}-1` : undefined, customClasses: [`${rootClass}-label`], }, context)} - ${when(values.length && labelPosition != "side", () => html` + ${when(values.length && labelPosition != "side" && !isEditable, () => html`
`)} +
centerPoint - ? getPosition(centerPoint) - : getPosition(value) - }%`, - width: `${getWidth(value, centerPoint)}%`, + [isRTL ? "right" : "left"]: `${getPosition(centerPoint)}%`, + width: `${getWidth(centerPoint, value)}%`, }) )} >
` @@ -223,7 +241,17 @@ export const Template = ({ ]; })}
- ${when(values.length && labelPosition === "side", () => html` + ${when(isEditable, () => html` + ${TextField({ + value: values[0], + id: id ? `${id}-offset` : undefined, + customClasses: [`${rootClass}-editable`], + isFocused, + isDisabled, + }, context)} + `)} +
+ ${when(values.length && labelPosition === "side" && !isEditable, () => html`
1 ? "presentation" : undefined)} diff --git a/tokens/custom/large-vars.css b/tokens/custom/large-vars.css index 4be8c2efbf9..b523f04be14 100644 --- a/tokens/custom/large-vars.css +++ b/tokens/custom/large-vars.css @@ -109,6 +109,21 @@ --spectrum-slider-precision-handle-height-large: 24px; --spectrum-slider-precision-handle-height-extra-large: 26px; + --spectrum-slider-control-to-field-label-editable-small: 0px; + --spectrum-slider-control-to-field-label-editable-medium: -4px; + --spectrum-slider-control-to-field-label-editable-large: -6px; + --spectrum-slider-control-to-field-label-editable-extra-large: -8px; + + --spectrum-slider-control-to-side-field-label-small: 16px; + --spectrum-slider-control-to-side-field-label-medium: 16px; + --spectrum-slider-control-to-side-field-label-large: 20px; + --spectrum-slider-control-to-side-field-label-extra-large: 24px; + + --spectrum-slider-editable-field-inline-size-small: 56px; + --spectrum-slider-editable-field-inline-size-medium: 70px; + --spectrum-slider-editable-field-inline-size-large: 82px; + --spectrum-slider-editable-field-inline-size-extra-large: 94px; + --spectrum-standard-dialog-spacing-edge-to-content: var(--spectrum-spacing-400); --spectrum-takeover-dialog-spacing-grid-padding: var(--spectrum-spacing-400); --spectrum-takeover-dialog-spacing-header-gap: var(--spectrum-spacing-300); diff --git a/tokens/custom/medium-vars.css b/tokens/custom/medium-vars.css index d16922f2c79..cd22b4c8017 100644 --- a/tokens/custom/medium-vars.css +++ b/tokens/custom/medium-vars.css @@ -107,6 +107,21 @@ --spectrum-slider-precision-handle-height-large: 30px; --spectrum-slider-precision-handle-height-extra-large: 32px; + --spectrum-slider-control-to-field-label-editable-small: 0px; + --spectrum-slider-control-to-field-label-editable-medium: -4px; + --spectrum-slider-control-to-field-label-editable-large: -6px; + --spectrum-slider-control-to-field-label-editable-extra-large: -8px; + + --spectrum-slider-control-to-side-field-label-small: 16px; + --spectrum-slider-control-to-side-field-label-medium: 16px; + --spectrum-slider-control-to-side-field-label-large: 20px; + --spectrum-slider-control-to-side-field-label-extra-large: 24px; + + --spectrum-slider-editable-field-inline-size-small: 56px; + --spectrum-slider-editable-field-inline-size-medium: 70px; + --spectrum-slider-editable-field-inline-size-large: 82px; + --spectrum-slider-editable-field-inline-size-extra-large: 94px; + --spectrum-standard-dialog-spacing-edge-to-content: var(--spectrum-spacing-500); --spectrum-takeover-dialog-spacing-grid-padding: var(--spectrum-spacing-500); --spectrum-takeover-dialog-spacing-header-gap: var(--spectrum-spacing-400); From 356dae6cf41145db2e92ed3c2b6fa665d7c78a31 Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Tue, 17 Jun 2025 09:30:06 -0400 Subject: [PATCH 04/21] feat(slider): adding changeset description --- .changeset/shy-actors-behave.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/.changeset/shy-actors-behave.md b/.changeset/shy-actors-behave.md index 6b8140b1bd6..aecaf4fbf7e 100644 --- a/.changeset/shy-actors-behave.md +++ b/.changeset/shy-actors-behave.md @@ -3,3 +3,15 @@ --- ### S2 Slider Migration + +New features: + +- Emphasized track fill color +- Precision control handle +- Large and thin track heights +- Embedded editable text field component + +Visual changes: + +- No longer a gap between slider handle and the track +- Update dimensions of slider handles for each size variant From 41c7895d204425b4d1c994f1e88c2c6fac0c1244 Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Wed, 18 Jun 2025 15:16:50 -0400 Subject: [PATCH 05/21] feat(slider): adjust WHCM and typography --- components/slider/dist/metadata.json | 18 ++++++- components/slider/index.css | 57 +++++++++++++++------ components/slider/stories/slider.stories.js | 1 + 3 files changed, 58 insertions(+), 18 deletions(-) diff --git a/components/slider/dist/metadata.json b/components/slider/dist/metadata.json index 603b16f9d7a..9546d7510c6 100644 --- a/components/slider/dist/metadata.json +++ b/components/slider/dist/metadata.json @@ -6,6 +6,7 @@ ".spectrum-Slider .spectrum-Slider-handle.is-focused:before", ".spectrum-Slider--emphasized .spectrum-Slider-fill:before", ".spectrum-Slider--emphasized .spectrum-Slider-ramp .spectrum-Slider-ramp-track-fill", + ".spectrum-Slider--emphasized .spectrum-Slider-tick:nth-child(-n + 4):after", ".spectrum-Slider--emphasized .spectrum-Slider-track:first-child:before", ".spectrum-Slider--emphasized.spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type, :last-of-type):before", ".spectrum-Slider--filled .spectrum-Slider-track:first-child:before", @@ -70,6 +71,7 @@ ".spectrum-Slider-tick:last-of-type", ".spectrum-Slider-tick:last-of-type .spectrum-Slider-tickLabel", ".spectrum-Slider-tick:last-of-type:after", + ".spectrum-Slider-tick:nth-child(-n + 4):after", ".spectrum-Slider-ticks", ".spectrum-Slider-ticks ~ .spectrum-Slider-handleContainer .spectrum-Slider-handle", ".spectrum-Slider-track", @@ -115,6 +117,7 @@ "--mod-slider-disabled-border-color", "--mod-slider-editable-control-to-text-field", "--mod-slider-editable-field-inline-size", + "--mod-slider-emphasized-tick-mark-color", "--mod-slider-emphasized-track-fill-color", "--mod-slider-font-size", "--mod-slider-handle-background-color", @@ -132,6 +135,8 @@ "--mod-slider-inline-size", "--mod-slider-input-left", "--mod-slider-input-top-size", + "--mod-slider-label-font-style", + "--mod-slider-label-font-weight", "--mod-slider-label-margin-start", "--mod-slider-label-text-color", "--mod-slider-label-text-color-disabled", @@ -139,12 +144,13 @@ "--mod-slider-min-size", "--mod-slider-ramp-track-color", "--mod-slider-ramp-track-color-disabled", + "--mod-slider-ramp-track-fill-color", "--mod-slider-ramp-track-height", "--mod-slider-range-track-reset", "--mod-slider-tick-label-color", "--mod-slider-tick-mark-border-radius", "--mod-slider-tick-mark-color", - "--mod-slider-tick-mark-color-disabled", + "--mod-slider-tick-mark-color-filled-track", "--mod-slider-tick-mark-height", "--mod-slider-tick-mark-width", "--mod-slider-ticks-handle-background-color", @@ -187,6 +193,7 @@ "--spectrum-slider-editable-field-inline-size-large", "--spectrum-slider-editable-field-inline-size-medium", "--spectrum-slider-editable-field-inline-size-small", + "--spectrum-slider-emphasized-tick-mark-color", "--spectrum-slider-emphasized-track-fill-color", "--spectrum-slider-font-size", "--spectrum-slider-handle-background-color", @@ -209,6 +216,8 @@ "--spectrum-slider-inline-size", "--spectrum-slider-input-left", "--spectrum-slider-input-top-size", + "--spectrum-slider-label-font-style", + "--spectrum-slider-label-font-weight", "--spectrum-slider-label-margin-start", "--spectrum-slider-label-text-color", "--spectrum-slider-label-text-color-disabled", @@ -226,7 +235,7 @@ "--spectrum-slider-tick-label-color", "--spectrum-slider-tick-mark-border-radius", "--spectrum-slider-tick-mark-color", - "--spectrum-slider-tick-mark-color-disabled", + "--spectrum-slider-tick-mark-color-filled-track", "--spectrum-slider-tick-mark-height", "--spectrum-slider-tick-mark-width", "--spectrum-slider-ticks-handle-background-color", @@ -242,6 +251,7 @@ "--spectrum-slider-value-side-padding-inline" ], "global": [ + "--spectrum-accent-color-1000", "--spectrum-accent-content-color-default", "--spectrum-animation-duration-100", "--spectrum-border-width-200", @@ -257,6 +267,7 @@ "--spectrum-component-top-to-text-200", "--spectrum-component-top-to-text-75", "--spectrum-corner-radius-500", + "--spectrum-default-font-style", "--spectrum-disabled-background-color", "--spectrum-disabled-border-color", "--spectrum-disabled-content-color", @@ -271,6 +282,7 @@ "--spectrum-focus-indicator-thickness", "--spectrum-font-size-100", "--spectrum-font-size-200", + "--spectrum-font-size-300", "--spectrum-font-size-75", "--spectrum-gray-25", "--spectrum-gray-300", @@ -281,6 +293,7 @@ "--spectrum-line-height-100", "--spectrum-logical-rotation", "--spectrum-neutral-content-color-default", + "--spectrum-regular-font-weight", "--spectrum-spacing-300", "--spectrum-spacing-900", "--spectrum-text-to-visual-75" @@ -305,6 +318,7 @@ "--highcontrast-slider-ramp-track-color-disabled", "--highcontrast-slider-tick-mark-color", "--highcontrast-slider-tick-mark-color-disabled", + "--highcontrast-slider-tick-mark-color-filled-track", "--highcontrast-slider-track-color", "--highcontrast-slider-track-color-disabled", "--highcontrast-slider-track-color-static", diff --git a/components/slider/index.css b/components/slider/index.css index cb62127cd90..4779c388f25 100644 --- a/components/slider/index.css +++ b/components/slider/index.css @@ -12,13 +12,15 @@ */ .spectrum-Slider { - --spectrum-slider-font-size: var(--spectrum-font-size-75); + --spectrum-slider-font-size: var(--spectrum-font-size-100); --spectrum-slider-handle-size: var(--spectrum-slider-handle-medium); --spectrum-slider-control-height: var(--spectrum-component-height-100); --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-75); --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-medium); --spectrum-slider-value-side-padding-inline: var(--spectrum-slider-control-to-side-field-label-medium); --spectrum-slider-inline-size: var(--spectrum-field-default-width-medium); + --spectrum-slider-label-font-weight: var(--spectrum-regular-font-weight); + --spectrum-slider-label-font-style: var(--spectrum-default-font-style); /* TODO: placeholder value for sideLabel variant value width */ --spectrum-slider-value-inline-size: 18px; @@ -46,12 +48,13 @@ --spectrum-slider-label-text-color: var(--spectrum-neutral-content-color-default); --spectrum-slider-tick-label-color: var(--spectrum-neutral-content-color-default); --spectrum-slider-label-text-color-disabled: var(--spectrum-disabled-content-color); - --spectrum-slider-tick-mark-color-disabled: var(--spectrum-disabled-background-color); --spectrum-slider-handle-background-color: var(--spectrum-gray-25); --spectrum-slider-handle-background-color-disabled: var(--spectrum-slider-handle-background-color); --spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-75); --spectrum-slider-handle-border-color: var(--spectrum-gray-700); --spectrum-slider-tick-mark-color: var(--spectrum-gray-400); + --spectrum-slider-tick-mark-color-filled-track: var(--spectrum-gray-800); + --spectrum-slider-emphasized-tick-mark-color: var(--spectrum-accent-color-1000); --spectrum-slider-emphasized-track-fill-color: var(--spectrum-accent-content-color-default); --spectrum-slider-handle-border-color-hover: var(--spectrum-gray-800); @@ -97,7 +100,7 @@ } .spectrum-Slider--sizeL { - --spectrum-slider-font-size: var(--spectrum-font-size-100); + --spectrum-slider-font-size: var(--spectrum-font-size-200); --spectrum-slider-handle-size: var(--spectrum-slider-handle-large); --spectrum-slider-control-height: var(--spectrum-component-height-200); --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-100); @@ -115,7 +118,7 @@ } .spectrum-Slider--sizeXL { - --spectrum-slider-font-size: var(--spectrum-font-size-200); + --spectrum-slider-font-size: var(--spectrum-font-size-300); --spectrum-slider-handle-size: var(--spectrum-slider-handle-extra-large); --spectrum-slider-control-height: var(--spectrum-component-height-300); @@ -469,6 +472,8 @@ font-size: var(--mod-slider-font-size, var(--spectrum-slider-font-size)); line-height: var(--mod-line-height-100, var(--spectrum-line-height-100)); + font-weight: var(--mod-slider-label-font-weight, var(--spectrum-slider-label-font-weight)); + font-style: var(--mod-slider-label-font-style, var(--spectrum-slider-label-font-style)); margin-block-start: var(--mod-slider-label-top-to-text, var(--spectrum-slider-label-top-to-text)); @@ -666,7 +671,7 @@ } .spectrum-Slider-ramp-track-fill { - fill: var(--spectrum-slider-track-fill-color); + fill: var(--highcontrast-slider-filled-track-fill-color, var(--mod-slider-ramp-track-fill-color, var(--spectrum-slider-track-fill-color))); } } @@ -698,12 +703,6 @@ background: transparent; } -.spectrum-Slider-tick { - &::after { - background-color: var(--highcontrast-slider-tick-mark-color, var(--mod-slider-tick-mark-color, var(--spectrum-slider-tick-mark-color))); - } -} - .spectrum-Slider-handle { &.is-dragged { border-color: var(--highcontrast-slider-handle-border-color-down, var(--mod-slider-handle-border-color-down, var(--spectrum-slider-handle-border-color-down))); @@ -720,8 +719,35 @@ } &:first-of-type::before { - background: var(--highcontrast-slider-filled-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-color))); + background: var(--highcontrast-slider-track-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-color))); + } + } + + /* .spectrum-Slider-tick:nth-child(n+3):nth-child(-n+5) { + &::after { + background-color: var(--highcontrast-slider-tick-mark-color-disabled, var(--mod-slider-tick-mark-color-filled-track, var(--spectrum-slider-tick-mark-color-filled-track))); } + } */ +} + +.spectrum-Slider--emphasized { + .spectrum-Slider-tick:nth-child(-n + 4) { + &::after { + background-color: var(--highcontrast-slider-tick-mark-color-disabled, var(--mod-slider-emphasized-tick-mark-color, var(--spectrum-slider-emphasized-tick-mark-color))); + } + } +} + +.spectrum-Slider-tick:nth-child(-n + 4) { + &::after { + background-color: var(--highcontrast-slider-tick-mark-color-filled-track, var(--mod-slider-tick-mark-color-filled-track, var(--spectrum-slider-tick-mark-color-filled-track))); + } +} + +.spectrum-Slider-tick, +.spectrum-Slider.is-disabled .spectrum-Slider-tick { + &::after { + background-color: var(--highcontrast-slider-tick-mark-color, var(--mod-slider-tick-mark-color, var(--spectrum-slider-tick-mark-color))); } } @@ -779,7 +805,7 @@ .spectrum-Slider-tick { &::after { - background-color: var(--highcontrast-slider-tick-mark-color-disabled, var(--mod-slider-tick-mark-color-disabled, var(--spectrum-slider-tick-mark-color-disabled))); + background-color: var(--highcontrast-slider-tick-mark-color-disabled); } } @@ -802,6 +828,7 @@ --highcontrast-slider-ramp-track-color-disabled: GrayText; --highcontrast-slider-tick-mark-color: ButtonText; --highcontrast-slider-tick-mark-color-disabled: GrayText; + --highcontrast-slider-tick-mark-color-filled-track: Highlight; --highcontrast-slider-handle-border-color: ButtonText; --highcontrast-slider-handle-border-color-hover: Highlight; @@ -811,7 +838,7 @@ --highcontrast-slider-handle-focus-ring-color-key-focus: CanvasText; --highcontrast-slider-handle-background-color: ButtonFace; --highcontrast-slider-handle-background-color-disabled: GrayText; - --highcontrast-slider-handle-disabled-background-color: GrayText; + --highcontrast-slider-handle-disabled-background-color: Canvas; --highcontrast-slider-ramp-handle-border-color-active: ButtonFace; --highcontrast-slider-ramp-handle-background-color: ButtonFace; @@ -837,8 +864,6 @@ .spectrum-Slider-controls.is-focused { --highcontrast-slider-track-color: Highlight; --highcontrast-slider-handle-border-color: Highlight; - --highcontrast-slider-ramp-track-color: Highlight; - --highcontrast-slider-tick-mark-color: Highlight; } } diff --git a/components/slider/stories/slider.stories.js b/components/slider/stories/slider.stories.js index 82c829de9eb..7337a580f7e 100644 --- a/components/slider/stories/slider.stories.js +++ b/components/slider/stories/slider.stories.js @@ -211,6 +211,7 @@ Default.args = { export const WithoutLabel = Template.bind({}); WithoutLabel.args = { label: "", + variant: "filled", }; WithoutLabel.tags = ["!dev"]; WithoutLabel.storyName = "Without label"; From 485c4ab15a13b38b6834a6c36f6ce13d050e2a27 Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Fri, 20 Jun 2025 17:11:52 -0400 Subject: [PATCH 06/21] feat(slider): adding more test cases for emphasized range --- components/slider/dist/metadata.json | 8 ++-- components/slider/index.css | 51 +++++++++++---------- components/slider/stories/slider.stories.js | 45 +++++------------- components/slider/stories/slider.test.js | 43 +++++++++++++++++ components/slider/stories/template.js | 1 + 5 files changed, 87 insertions(+), 61 deletions(-) diff --git a/components/slider/dist/metadata.json b/components/slider/dist/metadata.json index 9546d7510c6..5c94ef18b4b 100644 --- a/components/slider/dist/metadata.json +++ b/components/slider/dist/metadata.json @@ -10,8 +10,13 @@ ".spectrum-Slider--emphasized .spectrum-Slider-track:first-child:before", ".spectrum-Slider--emphasized.spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type, :last-of-type):before", ".spectrum-Slider--filled .spectrum-Slider-track:first-child:before", + ".spectrum-Slider--filled:not(.spectrum-Slider--range, .is-disabled, .spectrum-Slider--emphasized) .spectrum-Slider-tick:nth-child(-n + 4):after", + ".spectrum-Slider--offset:not(.spectrum-Slider--range, .is-disabled, .spectrum-Slider--emphasized) .spectrum-Slider-tick:nth-child(-n + 4):after", ".spectrum-Slider--precise .spectrum-Slider-handle", ".spectrum-Slider--precise .spectrum-Slider-handle.is-focused:before", + ".spectrum-Slider--range .spectrum-Slider-tick:nth-child(3):after", + ".spectrum-Slider--range .spectrum-Slider-tick:nth-child(4):after", + ".spectrum-Slider--range .spectrum-Slider-tick:nth-child(5):after", ".spectrum-Slider--range .spectrum-Slider-track ~ .spectrum-Slider-track", ".spectrum-Slider--range .spectrum-Slider-track:first-of-type", ".spectrum-Slider--range .spectrum-Slider-track:first-of-type:before", @@ -71,7 +76,6 @@ ".spectrum-Slider-tick:last-of-type", ".spectrum-Slider-tick:last-of-type .spectrum-Slider-tickLabel", ".spectrum-Slider-tick:last-of-type:after", - ".spectrum-Slider-tick:nth-child(-n + 4):after", ".spectrum-Slider-ticks", ".spectrum-Slider-ticks ~ .spectrum-Slider-handleContainer .spectrum-Slider-handle", ".spectrum-Slider-track", @@ -312,8 +316,6 @@ "--highcontrast-slider-handle-focus-ring-color-key-focus", "--highcontrast-slider-label-text-color", "--highcontrast-slider-label-text-color-disabled", - "--highcontrast-slider-ramp-handle-background-color", - "--highcontrast-slider-ramp-handle-border-color-active", "--highcontrast-slider-ramp-track-color", "--highcontrast-slider-ramp-track-color-disabled", "--highcontrast-slider-tick-mark-color", diff --git a/components/slider/index.css b/components/slider/index.css index 4779c388f25..a8cfcab13a8 100644 --- a/components/slider/index.css +++ b/components/slider/index.css @@ -710,37 +710,44 @@ } } -.spectrum-Slider--range { - .spectrum-Slider-track { - &:not(:first-of-type, :last-of-type)::before { - background: var(--highcontrast-slider-filled-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color))); - border-start-end-radius: 0; - border-end-end-radius: 0; - } - - &:first-of-type::before { - background: var(--highcontrast-slider-track-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-color))); +.spectrum-Slider--emphasized { + .spectrum-Slider-tick:nth-child(-n + 4) { + &::after { + background-color: var(--highcontrast-slider-tick-mark-color-disabled, var(--mod-slider-emphasized-tick-mark-color, var(--spectrum-slider-emphasized-tick-mark-color))); } } +} - /* .spectrum-Slider-tick:nth-child(n+3):nth-child(-n+5) { +.spectrum-Slider--filled, +.spectrum-Slider--offset { + &:not(.spectrum-Slider--range, .is-disabled, .spectrum-Slider--emphasized) .spectrum-Slider-tick:nth-child(-n + 4) { &::after { - background-color: var(--highcontrast-slider-tick-mark-color-disabled, var(--mod-slider-tick-mark-color-filled-track, var(--spectrum-slider-tick-mark-color-filled-track))); + background-color: var(--highcontrast-slider-tick-mark-color-filled-track, var(--mod-slider-tick-mark-color-filled-track, var(--spectrum-slider-tick-mark-color-filled-track))); } - } */ + } } -.spectrum-Slider--emphasized { - .spectrum-Slider-tick:nth-child(-n + 4) { +.spectrum-Slider--range { + .spectrum-Slider-tick:nth-child(3), + .spectrum-Slider-tick:nth-child(4), + .spectrum-Slider-tick:nth-child(5) { &::after { - background-color: var(--highcontrast-slider-tick-mark-color-disabled, var(--mod-slider-emphasized-tick-mark-color, var(--spectrum-slider-emphasized-tick-mark-color))); + background-color: var(--highcontrast-slider-tick-mark-color-disabled, var(--mod-slider-tick-mark-color-filled-track, var(--spectrum-slider-tick-mark-color-filled-track))); } } } -.spectrum-Slider-tick:nth-child(-n + 4) { - &::after { - background-color: var(--highcontrast-slider-tick-mark-color-filled-track, var(--mod-slider-tick-mark-color-filled-track, var(--spectrum-slider-tick-mark-color-filled-track))); +.spectrum-Slider--range { + .spectrum-Slider-track { + &:not(:first-of-type, :last-of-type)::before { + background: var(--highcontrast-slider-filled-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color))); + border-start-end-radius: 0; + border-end-end-radius: 0; + } + + &:first-of-type::before { + background: var(--highcontrast-slider-track-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-color))); + } } } @@ -805,7 +812,7 @@ .spectrum-Slider-tick { &::after { - background-color: var(--highcontrast-slider-tick-mark-color-disabled); + background-color: var(--highcontrast-slider-tick-mark-color-disabled, var(--mod-slider-tick-mark-color, var(--spectrum-slider-tick-mark-color))); } } @@ -839,10 +846,6 @@ --highcontrast-slider-handle-background-color: ButtonFace; --highcontrast-slider-handle-background-color-disabled: GrayText; --highcontrast-slider-handle-disabled-background-color: Canvas; - - --highcontrast-slider-ramp-handle-border-color-active: ButtonFace; - --highcontrast-slider-ramp-handle-background-color: ButtonFace; - --highcontrast-slider-label-text-color: CanvasText; --highcontrast-slider-label-text-color-disabled: GrayText; diff --git a/components/slider/stories/slider.stories.js b/components/slider/stories/slider.stories.js index 7337a580f7e..a1eabe79e7d 100644 --- a/components/slider/stories/slider.stories.js +++ b/components/slider/stories/slider.stories.js @@ -198,6 +198,7 @@ export default { /** * Sliders should always have a label. In rare cases where context is sufficient and an accessibility expert has reviewed the design, the label could be undefined. Top labels are the default and are recommended because they work better with long copy, localization, and responsive layouts. + * The track of the slider can have a fill. By default, the fill originates from the left side of the track. */ export const Default = SliderGroup.bind({}); Default.args = { @@ -235,21 +236,6 @@ Sizing.parameters = { }, }; -/** - * The track of the slider can have a fill. By default, the fill originates from the left side of the track. - */ -export const Filled = Template.bind({}); -Filled.args = { - ...Default.args, - variant: "filled", -}; -Filled.tags = ["!dev"]; -Filled.parameters = { - chromatic: { - disableSnapshot: true, - }, -}; - /** * With fill and offset. If the value represents an offset, the fill start can be set to represent the point of origin. This allows the slider fill to start from inside the track. */ @@ -338,34 +324,25 @@ Disabled.parameters = { }, }; -export const Focused = Template.bind({}); -Focused.args = { +export const Emphasized = Template.bind({}); +Emphasized.args = { ...Default.args, - isFocused: true, + isEmphasized: true, }; -Focused.tags = ["!dev"]; -Focused.parameters = { +Emphasized.tags = ["!dev"]; +Emphasized.parameters = { chromatic: { disableSnapshot: true, }, }; -/** - * A gradient can be added to the track of any slider to give more meaning to the range of values. Tracks with a gradient can also have a fill. A gradient track should not be used for choosing a precise color; use a [color slider](/docs/components-color-slider--docs), [color area](/docs/components-color-area--docs), or [color wheel](/docs/components-color-wheel--docs) instead. - */ -export const Gradient = Template.bind({}); -Gradient.args = { +export const Focused = Template.bind({}); +Focused.args = { ...Default.args, - customStyles: { - "--spectrum-slider-track-color": - "linear-gradient(to right, red, green 100%)", - "--spectrum-slider-track-color-rtl": - "linear-gradient(to left, red, green 100%)", - }, - label: "Slider label that is long and wraps to the next line", + isFocused: true, }; -Gradient.tags = ["!dev"]; -Gradient.parameters = { +Focused.tags = ["!dev"]; +Focused.parameters = { chromatic: { disableSnapshot: true, }, diff --git a/components/slider/stories/slider.test.js b/components/slider/stories/slider.test.js index edc6a7712c4..12539ae25fa 100644 --- a/components/slider/stories/slider.test.js +++ b/components/slider/stories/slider.test.js @@ -300,6 +300,49 @@ export const testData = [ isEmphasized: true, values: [10, 20] }, + { + testHeading: "Emphasized Range Precise", + variant: "filled", + isEmphasized: true, + values: [10, 20], + isPrecise: true + }, + { + testHeading: "Emphasized Range Large Track", + variant: "filled", + isEmphasized: true, + values: [10, 20], + trackHeight: "large" + }, + { + testHeading: "Emphasized Range Precise Large Track", + variant: "filled", + isEmphasized: true, + values: [10, 20], + isPrecise: true, + trackHeight: "large" + }, + { + testHeading: "Emphasized Range Side Label", + variant: "filled", + isEmphasized: true, + values: [10, 20], + labelPosition: "side" + }, + { + testHeading: "Emphasized Range Editable", + variant: "filled", + isEmphasized: true, + values: [10, 20], + isEditable: true + }, + { + testHeading: "Emphasized Range No Label", + variant: "filled", + isEmphasized: true, + values: [10, 20], + label: "" + }, { testHeading: "Emphasized Offset", variant: "offset", diff --git a/components/slider/stories/template.js b/components/slider/stories/template.js index 62e864261ab..1f2ebd6c454 100644 --- a/components/slider/stories/template.js +++ b/components/slider/stories/template.js @@ -134,6 +134,7 @@ export const Template = ({ [`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined", [`${rootClass}--ramp`]: variant === "ramp", + [`${rootClass}--offset`]: variant === "offset", [`${rootClass}--range`]: values.length > 1, [`${rootClass}--filled`]: variant === "filled", [`${rootClass}--tick`]: showTicks, From 80fd6ecdb9a071a1f2777a5ae17ec5d99f5f17e3 Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Mon, 7 Jul 2025 09:40:02 -0400 Subject: [PATCH 07/21] feat(slider): updating pr --- .changeset/shy-actors-behave.md | 39 ++++++++++++-- components/slider/dist/metadata.json | 4 +- components/slider/index.css | 5 +- components/slider/stories/slider.stories.js | 58 ++++++++++++++++++--- components/slider/stories/slider.test.js | 30 +++++------ components/slider/stories/template.js | 57 ++++++++++++-------- package.json | 2 +- tasks/component-reporter.js | 1 - tokens/custom/large-vars.css | 1 + tokens/custom/medium-vars.css | 1 + yarn.lock | 36 +------------ 11 files changed, 148 insertions(+), 86 deletions(-) diff --git a/.changeset/shy-actors-behave.md b/.changeset/shy-actors-behave.md index aecaf4fbf7e..4afc3ea0a8a 100644 --- a/.changeset/shy-actors-behave.md +++ b/.changeset/shy-actors-behave.md @@ -1,17 +1,50 @@ --- -"@spectrum-css/slider": major +@spectrum-css/slider: major --- ### S2 Slider Migration -New features: +#### New features: - Emphasized track fill color - Precision control handle - Large and thin track heights - Embedded editable text field component -Visual changes: +#### Visual changes: - No longer a gap between slider handle and the track - Update dimensions of slider handles for each size variant + + +#### New tokens: + +`--spectrum-slider-control-to-field-label-editable-extra-large` +`--spectrum-slider-control-to-field-label-editable-large` +`--spectrum-slider-control-to-field-label-editable-medium` +`--spectrum-slider-control-to-field-label-editable-small` +`--spectrum-slider-control-to-side-field-label-extra-large` +`--spectrum-slider-control-to-side-field-label-large` +`--spectrum-slider-control-to-side-field-label-medium` +`--spectrum-slider-control-to-side-field-label-small` +`--spectrum-slider-control-to-text-field-extra-large` +`--spectrum-slider-control-to-text-field-large` +`--spectrum-slider-control-to-text-field-medium` +`--spectrum-slider-control-to-text-field-small` +`--spectrum-slider-editable-control-to-field-label` +`--spectrum-slider-editable-control-to-text-field` +`--spectrum-slider-editable-field-inline-size-extra-large` +`--spectrum-slider-editable-field-inline-size-large` +`--spectrum-slider-editable-field-inline-size-medium` +`--spectrum-slider-editable-field-inline-size-small` +`--spectrum-slider-emphasized-track-fill-color` +`--spectrum-slider-precision-handle-height` +`--spectrum-slider-precision-handle-height-extra-large` +`--spectrum-slider-precision-handle-height-large` +`--spectrum-slider-precision-handle-height-medium` +`--spectrum-slider-precision-handle-height-small` +`--spectrum-slider-precision-handle-width` +`--spectrum-slider-handle-extra-large` +`--spectrum-slider-handle-large` +`--spectrum-slider-handle-medium` +`--spectrum-slider-handle-small` diff --git a/components/slider/dist/metadata.json b/components/slider/dist/metadata.json index 5c94ef18b4b..19f3d89fd21 100644 --- a/components/slider/dist/metadata.json +++ b/components/slider/dist/metadata.json @@ -38,7 +38,7 @@ ".spectrum-Slider--track-height-large .spectrum-Slider-fill", ".spectrum-Slider--track-height-large .spectrum-Slider-track", ".spectrum-Slider-content", - ".spectrum-Slider-content--offset", + ".spectrum-Slider-content--editable", ".spectrum-Slider-controls", ".spectrum-Slider-controls:not(:has(.spectrum-Slider-ticks))", ".spectrum-Slider-fill", @@ -58,7 +58,7 @@ ".spectrum-Slider-label", ".spectrum-Slider-labelContainer", ".spectrum-Slider-labelContainer + .spectrum-Slider-content", - ".spectrum-Slider-labelContainer + .spectrum-Slider-content--offset", + ".spectrum-Slider-labelContainer + .spectrum-Slider-content--editable", ".spectrum-Slider-labelContainer:lang(ja)", ".spectrum-Slider-labelContainer:lang(ko)", ".spectrum-Slider-labelContainer:lang(zh)", diff --git a/components/slider/index.css b/components/slider/index.css index a8cfcab13a8..fdf25b46a9f 100644 --- a/components/slider/index.css +++ b/components/slider/index.css @@ -62,7 +62,6 @@ --spectrum-slider-handle-border-color-key-focus: var(--spectrum-gray-800); --spectrum-slider-handle-focus-ring-color-key-focus: var(--spectrum-focus-indicator-color); - --spectrum-slider-precision-handle-width: 6px; --spectrum-slider-precision-handle-height: var(--spectrum-slider-precision-handle-height-medium); --spectrum-slider-editable-control-to-text-field: var(--spectrum-slider-control-to-text-field-medium); @@ -210,7 +209,7 @@ inline-size: 100%; } -.spectrum-Slider-content--offset { +.spectrum-Slider-content--editable { display: flex; align-items: center; gap: var(--mod-slider-editable-control-to-text-field, var(--spectrum-slider-editable-control-to-text-field)); @@ -237,7 +236,7 @@ margin-block-start: var(--spectrum-slider-control-to-field-label); } -.spectrum-Slider-labelContainer + .spectrum-Slider-content--offset { +.spectrum-Slider-labelContainer + .spectrum-Slider-content--editable { margin-block-start: var(--spectrum-slider-editable-control-to-field-label); } diff --git a/components/slider/stories/slider.stories.js b/components/slider/stories/slider.stories.js index a1eabe79e7d..66d00cdc040 100644 --- a/components/slider/stories/slider.stories.js +++ b/components/slider/stories/slider.stories.js @@ -123,7 +123,8 @@ export default { if: { arg: "showTicks", truthy: true }, }, isPrecise: { - name: "Precise", + name: "Precise handle control", + description: "Provides precise control for accurate values", type: { name: "boolean" }, table: { type: { summary: "boolean" }, @@ -132,7 +133,8 @@ export default { control: "boolean", }, isEditable: { - name: "Editable", + name: "Editable text input", + description: "Enables text input to also control the slider value", type: { name: "boolean" }, table: { type: { summary: "boolean" }, @@ -148,7 +150,9 @@ export default { ...isFocused, if: { arg: "isDisabled", truthy: false }, }, - values: { table: { disable: true } }, + values: { + table: { disable: true } + }, }, args: { rootClass: "spectrum-Slider", @@ -169,6 +173,7 @@ export default { trackHeight: "medium", isPrecise: false, isEditable: false, + variant: "filled", }, parameters: { actions: { @@ -207,7 +212,7 @@ Default.args = { // ********* DOCS ONLY ********* // /** - * If a slider's label is undefined, it should still include an aria-label in HTML (depending on the context, “aria-label” or “aria-labelledby”). + * If a slider's label is undefined, it should still include an aria-label in HTML (depending on the context, "aria-label" or "aria-labelledby"). */ export const WithoutLabel = Template.bind({}); WithoutLabel.args = { @@ -222,6 +227,18 @@ WithoutLabel.parameters = { }, }; +export const Editable = Template.bind({}); +Editable.args = { + ...Default.args, + isEditable: true, +}; +Editable.tags = ["!dev"]; +Editable.parameters = { + chromatic: { + disableSnapshot: true, + }, +}; + export const Sizing = (args, context) => Sizes({ Template, withBorder: false, @@ -237,13 +254,13 @@ Sizing.parameters = { }; /** - * With fill and offset. If the value represents an offset, the fill start can be set to represent the point of origin. This allows the slider fill to start from inside the track. + * If the value represents an offset, the fill start can be set to represent the point of origin. This allows the slider fill to start from inside the track. */ export const Offset = Template.bind({}); Offset.args = { ...Default.args, variant: "offset", - values: [0], + values: [-15], }; Offset.tags = ["!dev"]; Offset.parameters = { @@ -252,6 +269,17 @@ Offset.parameters = { }, }; +export const Precise = Template.bind({}); +Precise.args = { + ...Default.args, + isPrecise: true, +}; +Precise.tags = ["!dev"]; +Precise.parameters = { + chromatic: { + disableSnapshot: true, + }, +}; export const Ramp = Template.bind({}); Ramp.args = { @@ -312,6 +340,24 @@ TickWithLabels.parameters = { }; TickWithLabels.storyName = "Tick with labels"; +/** + * Large track height. + */ +export const TrackHeight = Template.bind({}); +TrackHeight.args = { + ...Default.args, + trackHeight: "large", +}; +TrackHeight.tags = ["!dev"]; +TrackHeight.parameters = { + chromatic: { + disableSnapshot: true, + }, +}; +TrackHeight.storyName = "Large track height"; + + + export const Disabled = Template.bind({}); Disabled.args = { ...Default.args, diff --git a/components/slider/stories/slider.test.js b/components/slider/stories/slider.test.js index 12539ae25fa..c7c81eecd28 100644 --- a/components/slider/stories/slider.test.js +++ b/components/slider/stories/slider.test.js @@ -7,7 +7,7 @@ export const testData = [ ...["filled", "offset", "ramp"].map((variant) => ({ testHeading: capitalize(variant), variant, - values: variant === "offset" ? [0] : [15] + values: variant === "offset" ? [-15] : [15] })), { testHeading: "Range", @@ -20,11 +20,6 @@ export const testData = [ showTicks: true, showTickLabels: true }, - { - testHeading: "Focused", - variant: "filled", - isFocused: true - }, { testHeading: "Precise", variant: "filled", @@ -71,19 +66,19 @@ export const testData = [ { testHeading: "Offset Precise", variant: "offset", - values: [0], + values: [-15], isPrecise: true }, { testHeading: "Offset Large Track", variant: "offset", - values: [0], + values: [-15], trackHeight: "large" }, { testHeading: "Offset Precise Large Track", variant: "offset", - values: [0], + values: [-15], isPrecise: true, trackHeight: "large" }, @@ -123,7 +118,7 @@ export const testData = [ variant: "offset", showTicks: true, showTickLabels: true, - values: [0], + values: [-15], trackHeight: "large" }, // Side label variants @@ -154,7 +149,7 @@ export const testData = [ testHeading: "Side Label Offset", variant: "offset", labelPosition: "side", - values: [0] + values: [-15] }, { testHeading: "Side Label Ticks", @@ -185,7 +180,7 @@ export const testData = [ testHeading: "Editable Offset", variant: "offset", isEditable: true, - values: [0] + values: [-15] }, { testHeading: "Editable Side Label", @@ -221,7 +216,7 @@ export const testData = [ testHeading: "No Label Offset", variant: "offset", label: "", - values: [0] + values: [-15] }, { testHeading: "No Label Ticks", @@ -256,7 +251,7 @@ export const testData = [ variant: "offset", label: "", isEditable: true, - values: [0] + values: [-15] }, // Disabled variants { @@ -347,7 +342,7 @@ export const testData = [ testHeading: "Emphasized Offset", variant: "offset", isEmphasized: true, - values: [0] + values: [-15] }, { testHeading: "Emphasized Ticks", @@ -382,6 +377,11 @@ export const SliderGroup = Variants({ testHeading: "Focused", isFocused: true }, + { + testHeading: "Focused + Hovered", + isFocused: true, + isHovered: true + }, { testHeading: "Disabled", isDisabled: true diff --git a/components/slider/stories/template.js b/components/slider/stories/template.js index 1f2ebd6c454..83846969d91 100644 --- a/components/slider/stories/template.js +++ b/components/slider/stories/template.js @@ -14,7 +14,7 @@ export const Template = ({ size, label, min = 0, - max = 10, + max = 15, step = 2, values = [], variant, @@ -34,11 +34,25 @@ export const Template = ({ customStyles = {}, id = getRandomId("slider"), } = {}, context = {}) => { + // Auto-set values and range for offset variant + let finalValues = values; + let finalMin = min; + let finalMax = max; + + if (variant === "offset") { + // Only set default value if no values are provided + if (values.length === 0) { + finalValues = [0]; // Default to center (0) + } + finalMin = -15; // Left edge = negative + finalMax = 15; // Right edge = positive + } + const { globals = {}, updateArgs } = context; let fillPercentage = 50; const isRTL = globals.textDirection !== "rtl"; - const rangeLength = max - min; - const centerPoint = rangeLength / 2 + min; + const rangeLength = finalMax - finalMin; + const centerPoint = rangeLength / 2 + finalMin; const isRamp = variant === "ramp"; const maskWidth = (fillPercentage / 100) * 240; const rampSVG = html` @@ -57,7 +71,7 @@ export const Template = ({ `; - const getPosition = (v) => ((v - min) / rangeLength) * 100; + const getPosition = (v) => ((v - finalMin) / rangeLength) * 100; const getWidth = (start, end) => { const distance = end > start ? end - start : start - end; @@ -117,8 +131,8 @@ export const Template = ({ class="${rootClass}-input" value=${ifDefined(value)} step=${ifDefined(step)} - min=${ifDefined(min)} - max=${ifDefined(max)} + min=${ifDefined(finalMin)} + max=${ifDefined(finalMax)} @change=${function(event) { if (isDisabled) return; updateArgs({ value: event.target.value }); @@ -135,7 +149,7 @@ export const Template = ({ typeof size !== "undefined", [`${rootClass}--ramp`]: variant === "ramp", [`${rootClass}--offset`]: variant === "offset", - [`${rootClass}--range`]: values.length > 1, + [`${rootClass}--range`]: finalValues.length > 1, [`${rootClass}--filled`]: variant === "filled", [`${rootClass}--tick`]: showTicks, [`${rootClass}--track-height-${trackHeight}`]: trackHeight, @@ -150,7 +164,7 @@ export const Template = ({ "--spectrum-slider-track-color": fillColor ? fillColor : undefined, ...customStyles, })} - role=${ifDefined(values.length > 1 ? "group" : undefined)} + role=${ifDefined(finalValues.length > 1 ? "group" : undefined)} aria-labelledby=${ifDefined(label && id ? `${id}-label` : undefined)} @focusin=${function() { updateArgs({ isFocused: true }); @@ -163,7 +177,7 @@ export const Template = ({ ${when(label, () => html`
1 ? "presentation" : undefined)} + role=${ifDefined(finalValues.length > 1 ? "presentation" : undefined)} > ${FieldLabel({ size, @@ -173,7 +187,7 @@ export const Template = ({ forInput: id ? `${id}-1` : undefined, customClasses: [`${rootClass}-label`], }, context)} - ${when(values.length && labelPosition != "side" && !isEditable, () => html` + ${when(finalValues.length && labelPosition != "side" && !isEditable, () => html`
- ${values[0]}${values.length > 1 ? ` - ${values[1]}` : ""} + ${finalValues[0]}${finalValues.length > 1 ? ` - ${finalValues[1]}` : ""}
`)}
`)}
- ${values.map((value, idx) => { - const prevPoint = idx === 0 ? min : values[idx - 1]; + ${finalValues.map((value, idx) => { + const prevPoint = idx === 0 ? finalMin : finalValues[idx - 1]; const isFirst = idx === 0; - const isLast = idx === values.length - 1; + const isLast = idx === finalValues.length - 1; return [ !isRamp ? renderTrack({ @@ -215,7 +229,7 @@ export const Template = ({ ? html`
${rampSVG}
` : "", isFirst && showTicks && !isRamp - ? renderTick({ from: min, to: max }) + ? renderTick({ from: finalMin, to: finalMax }) : "", renderHandle({ position: getPosition(value), @@ -223,7 +237,7 @@ export const Template = ({ idx, }), isLast && !isRamp - ? renderTrack({ width: getWidth(value, max) }) + ? renderTrack({ width: getWidth(value, finalMax) }) : "", isLast && variant === "offset" ? html`
${when(isEditable, () => html` ${TextField({ - value: values[0], + value: finalValues[0], id: id ? `${id}-offset` : undefined, customClasses: [`${rootClass}-editable`], isFocused, isDisabled, + size, }, context)} `)}
- ${when(values.length && labelPosition === "side" && !isEditable, () => html` + ${when(finalValues.length && labelPosition === "side" && !isEditable, () => html`
1 ? "presentation" : undefined)} + role=${ifDefined(finalValues.length > 1 ? "presentation" : undefined)} >
- ${values[0]}${values.length > 1 ? ` - ${values[1]}` : ""} + ${finalValues[0]}${finalValues.length > 1 ? ` - ${finalValues[1]}` : ""}
`)} diff --git a/package.json b/package.json index ccab68a3878..1b95423c3cc 100644 --- a/package.json +++ b/package.json @@ -121,7 +121,7 @@ "stylelint-selector-bem-pattern": "^4.0.1", "stylelint-use-logical": "^2.1.2", "tar": "^7.4.3", - "yargs": "^18.0.0", + "yargs": "^17.7.2", "zlib": "^1.0.5" }, "keywords": [ diff --git a/tasks/component-reporter.js b/tasks/component-reporter.js index b281de49bc9..6b72f9aa255 100644 --- a/tasks/component-reporter.js +++ b/tasks/component-reporter.js @@ -244,7 +244,6 @@ async function main({ exports.extractModifiers = extractModifiers; exports.default = main; - let { _: components, } = yargs(hideBin(process.argv)).argv; diff --git a/tokens/custom/large-vars.css b/tokens/custom/large-vars.css index b523f04be14..0beeefaf679 100644 --- a/tokens/custom/large-vars.css +++ b/tokens/custom/large-vars.css @@ -97,6 +97,7 @@ --spectrum-pagination-textfield-width: 60px; --spectrum-pagination-item-inline-spacing: 6px; + --spectrum-slider-precision-handle-width: 6px; --spectrum-slider-tick-mark-height: 13px; --spectrum-slider-ramp-track-height: 20px; --spectrum-slider-handle-small: 18px; diff --git a/tokens/custom/medium-vars.css b/tokens/custom/medium-vars.css index cd22b4c8017..59fd171537b 100644 --- a/tokens/custom/medium-vars.css +++ b/tokens/custom/medium-vars.css @@ -107,6 +107,7 @@ --spectrum-slider-precision-handle-height-large: 30px; --spectrum-slider-precision-handle-height-extra-large: 32px; + --spectrum-slider-precision-handle-width: 6px; --spectrum-slider-control-to-field-label-editable-small: 0px; --spectrum-slider-control-to-field-label-editable-medium: -4px; --spectrum-slider-control-to-field-label-editable-large: -6px; diff --git a/yarn.lock b/yarn.lock index 1f73384bb39..52937585bd8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -175,7 +175,7 @@ __metadata: stylelint-selector-bem-pattern: "npm:^4.0.1" stylelint-use-logical: "npm:^2.1.2" tar: "npm:^7.4.3" - yargs: "npm:^18.0.0" + yargs: "npm:^17.7.2" zlib: "npm:^1.0.5" languageName: unknown linkType: soft @@ -8788,17 +8788,6 @@ __metadata: languageName: node linkType: hard -"cliui@npm:^9.0.1": - version: 9.0.1 - resolution: "cliui@npm:9.0.1" - dependencies: - string-width: "npm:^7.2.0" - strip-ansi: "npm:^7.1.0" - wrap-ansi: "npm:^9.0.0" - checksum: 10c0/13441832e9efe7c7a76bd2b8e683555c478d461a9f249dc5db9b17fe8d4b47fa9277b503914b90bd00e4a151abb6b9b02b2288972ffe2e5e3ca40bcb1c2330d3 - languageName: node - linkType: hard - "clone@npm:^1.0.2": version: 1.0.4 resolution: "clone@npm:1.0.4" @@ -19509,7 +19498,7 @@ __metadata: languageName: node linkType: hard -"string-width@npm:^7.0.0, string-width@npm:^7.2.0": +"string-width@npm:^7.0.0": version: 7.2.0 resolution: "string-width@npm:7.2.0" dependencies: @@ -21388,13 +21377,6 @@ __metadata: languageName: node linkType: hard -"yargs-parser@npm:^22.0.0": - version: 22.0.0 - resolution: "yargs-parser@npm:22.0.0" - checksum: 10c0/cb7ef81759c4271cb1d96b9351dbbc9a9ce35d3e1122d2b739bf6c432603824fa02c67cc12dcef6ea80283379d63495686e8f41cc7b06c6576e792aba4d33e1c - languageName: node - linkType: hard - "yargs@npm:^15.0.2": version: 15.4.1 resolution: "yargs@npm:15.4.1" @@ -21429,20 +21411,6 @@ __metadata: languageName: node linkType: hard -"yargs@npm:^18.0.0": - version: 18.0.0 - resolution: "yargs@npm:18.0.0" - dependencies: - cliui: "npm:^9.0.1" - escalade: "npm:^3.1.1" - get-caller-file: "npm:^2.0.5" - string-width: "npm:^7.2.0" - y18n: "npm:^5.0.5" - yargs-parser: "npm:^22.0.0" - checksum: 10c0/bf290e4723876ea9c638c786a5c42ac28e03c9ca2325e1424bf43b94e5876456292d3ed905b853ebbba6daf43ed29e772ac2a6b3c5fb1b16533245d6211778f3 - languageName: node - linkType: hard - "yocto-queue@npm:^0.1.0": version: 0.1.0 resolution: "yocto-queue@npm:0.1.0" From a27b5e3b89f30818a42f6eacfca296b55fa6f4e0 Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Mon, 7 Jul 2025 13:41:00 -0400 Subject: [PATCH 08/21] feat(slider): cleaning custom tokens, textfield focus state --- components/slider/dist/metadata.json | 5 +++++ components/slider/index.css | 14 +++++++++----- components/slider/stories/template.js | 1 + tokens/custom/large-vars.css | 23 +++++++++-------------- tokens/custom/medium-vars.css | 21 ++++++++------------- 5 files changed, 32 insertions(+), 32 deletions(-) diff --git a/components/slider/dist/metadata.json b/components/slider/dist/metadata.json index 19f3d89fd21..859be594aa5 100644 --- a/components/slider/dist/metadata.json +++ b/components/slider/dist/metadata.json @@ -139,6 +139,7 @@ "--mod-slider-inline-size", "--mod-slider-input-left", "--mod-slider-input-top-size", + "--mod-slider-label-font-family", "--mod-slider-label-font-style", "--mod-slider-label-font-weight", "--mod-slider-label-margin-start", @@ -199,6 +200,7 @@ "--spectrum-slider-editable-field-inline-size-small", "--spectrum-slider-emphasized-tick-mark-color", "--spectrum-slider-emphasized-track-fill-color", + "--spectrum-slider-focus-indicator-gap", "--spectrum-slider-font-size", "--spectrum-slider-handle-background-color", "--spectrum-slider-handle-background-color-disabled", @@ -220,6 +222,7 @@ "--spectrum-slider-inline-size", "--spectrum-slider-input-left", "--spectrum-slider-input-top-size", + "--spectrum-slider-label-font-family", "--spectrum-slider-label-font-style", "--spectrum-slider-label-font-weight", "--spectrum-slider-label-margin-start", @@ -297,7 +300,9 @@ "--spectrum-line-height-100", "--spectrum-logical-rotation", "--spectrum-neutral-content-color-default", + "--spectrum-neutral-subdued-content-color-default", "--spectrum-regular-font-weight", + "--spectrum-sans-font-family-stack", "--spectrum-spacing-300", "--spectrum-spacing-900", "--spectrum-text-to-visual-75" diff --git a/components/slider/index.css b/components/slider/index.css index fdf25b46a9f..9c9cbf74397 100644 --- a/components/slider/index.css +++ b/components/slider/index.css @@ -21,6 +21,7 @@ --spectrum-slider-inline-size: var(--spectrum-field-default-width-medium); --spectrum-slider-label-font-weight: var(--spectrum-regular-font-weight); --spectrum-slider-label-font-style: var(--spectrum-default-font-style); + --spectrum-slider-label-font-family: var(--spectrum-sans-font-family-stack); /* TODO: placeholder value for sideLabel variant value width */ --spectrum-slider-value-inline-size: 18px; @@ -37,6 +38,7 @@ --spectrum-slider-track-fill-thickness: var(--spectrum-slider-track-height-medium); --spectrum-slider-tick-mark-width: var(--spectrum-border-width-200); --spectrum-slider-tick-mark-border-radius: 2px; + --spectrum-slider-focus-indicator-gap: var(--spectrum-focus-indicator-gap); /* colors */ --spectrum-slider-track-color: var(--spectrum-gray-300); @@ -45,7 +47,7 @@ --spectrum-slider-ramp-track-color-disabled: var(--spectrum-slider-track-color-disabled); --spectrum-slider-track-fill-color-disabled: var(--spectrum-disabled-background-color); --spectrum-slider-handle-border-color-disabled: var(--spectrum-disabled-border-color); - --spectrum-slider-label-text-color: var(--spectrum-neutral-content-color-default); + --spectrum-slider-label-text-color: var(--spectrum-neutral-subdued-content-color-default); --spectrum-slider-tick-label-color: var(--spectrum-neutral-content-color-default); --spectrum-slider-label-text-color-disabled: var(--spectrum-disabled-content-color); --spectrum-slider-handle-background-color: var(--spectrum-gray-25); @@ -174,8 +176,8 @@ &.is-focused { &::before { border-radius: var(--spectrum-slider-handle-border-radius); - block-size: calc(var(--spectrum-slider-precision-handle-height) + var(--spectrum-focus-indicator-gap) * 2); - inline-size: calc(var(--spectrum-slider-precision-handle-width) + var(--spectrum-focus-indicator-gap) * 2); + block-size: calc(var(--spectrum-slider-precision-handle-height) + var(--spectrum-slider-focus-indicator-gap) * 2); + inline-size: calc(var(--spectrum-slider-precision-handle-width) + var(--spectrum-slider-focus-indicator-gap) * 2); transition: none; } } @@ -357,6 +359,7 @@ .spectrum-Slider-ramp { block-size: var(--mod-slider-ramp-track-height, var(--spectrum-slider-ramp-track-height)); position: absolute; + inline-size: 100%; svg { inline-size: 100%; @@ -428,8 +431,8 @@ /* Keyboard focused */ &.is-focused { &::before { - inline-size: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * 2); - block-size: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * 2); + inline-size: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-slider-focus-indicator-gap)) * 2); + block-size: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-slider-focus-indicator-gap)) * 2); } } } @@ -473,6 +476,7 @@ line-height: var(--mod-line-height-100, var(--spectrum-line-height-100)); font-weight: var(--mod-slider-label-font-weight, var(--spectrum-slider-label-font-weight)); font-style: var(--mod-slider-label-font-style, var(--spectrum-slider-label-font-style)); + font-family: var(--mod-slider-label-font-family, var(--spectrum-slider-label-font-family)); margin-block-start: var(--mod-slider-label-top-to-text, var(--spectrum-slider-label-top-to-text)); diff --git a/components/slider/stories/template.js b/components/slider/stories/template.js index 83846969d91..51722dddc5e 100644 --- a/components/slider/stories/template.js +++ b/components/slider/stories/template.js @@ -262,6 +262,7 @@ export const Template = ({ id: id ? `${id}-offset` : undefined, customClasses: [`${rootClass}-editable`], isFocused, + isKeyboardFocused: isFocused, isDisabled, size, }, context)} diff --git a/tokens/custom/large-vars.css b/tokens/custom/large-vars.css index 0beeefaf679..1b07170ff6d 100644 --- a/tokens/custom/large-vars.css +++ b/tokens/custom/large-vars.css @@ -100,20 +100,15 @@ --spectrum-slider-precision-handle-width: 6px; --spectrum-slider-tick-mark-height: 13px; --spectrum-slider-ramp-track-height: 20px; - --spectrum-slider-handle-small: 18px; - --spectrum-slider-handle-medium: 20px; - --spectrum-slider-handle-large: 22px; - --spectrum-slider-handle-extra-large: 24px; - - --spectrum-slider-precision-handle-height-small: 20px; - --spectrum-slider-precision-handle-height-medium: 22px; - --spectrum-slider-precision-handle-height-large: 24px; - --spectrum-slider-precision-handle-height-extra-large: 26px; - - --spectrum-slider-control-to-field-label-editable-small: 0px; - --spectrum-slider-control-to-field-label-editable-medium: -4px; - --spectrum-slider-control-to-field-label-editable-large: -6px; - --spectrum-slider-control-to-field-label-editable-extra-large: -8px; + --spectrum-slider-handle-small: 22px; + --spectrum-slider-handle-medium: 24px; + --spectrum-slider-handle-large: 28px; + --spectrum-slider-handle-extra-large: 30px; + + --spectrum-slider-precision-handle-height-small: 24px; + --spectrum-slider-precision-handle-height-medium: 26px; + --spectrum-slider-precision-handle-height-large: 30px; + --spectrum-slider-precision-handle-height-extra-large: 32px; --spectrum-slider-control-to-side-field-label-small: 16px; --spectrum-slider-control-to-side-field-label-medium: 16px; diff --git a/tokens/custom/medium-vars.css b/tokens/custom/medium-vars.css index 59fd171537b..e5956b67c80 100644 --- a/tokens/custom/medium-vars.css +++ b/tokens/custom/medium-vars.css @@ -97,22 +97,17 @@ --spectrum-slider-ramp-track-height: 16px; --spectrum-slider-tick-mark-height: 10px; - --spectrum-slider-handle-small: 22px; - --spectrum-slider-handle-medium: 24px; - --spectrum-slider-handle-large: 28px; - --spectrum-slider-handle-extra-large: 30px; + --spectrum-slider-handle-small: 18px; + --spectrum-slider-handle-medium: 20px; + --spectrum-slider-handle-large: 22px; + --spectrum-slider-handle-extra-large: 24px; - --spectrum-slider-precision-handle-height-small: 24px; - --spectrum-slider-precision-handle-height-medium: 26px; - --spectrum-slider-precision-handle-height-large: 30px; - --spectrum-slider-precision-handle-height-extra-large: 32px; + --spectrum-slider-precision-handle-height-small: 20px; + --spectrum-slider-precision-handle-height-medium: 22px; + --spectrum-slider-precision-handle-height-large: 24px; + --spectrum-slider-precision-handle-height-extra-large: 26px; --spectrum-slider-precision-handle-width: 6px; - --spectrum-slider-control-to-field-label-editable-small: 0px; - --spectrum-slider-control-to-field-label-editable-medium: -4px; - --spectrum-slider-control-to-field-label-editable-large: -6px; - --spectrum-slider-control-to-field-label-editable-extra-large: -8px; - --spectrum-slider-control-to-side-field-label-small: 16px; --spectrum-slider-control-to-side-field-label-medium: 16px; --spectrum-slider-control-to-side-field-label-large: 20px; From eaf6090bc46a1f3c7e0d70afb53ff3f14e71ad59 Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Tue, 8 Jul 2025 08:51:59 -0400 Subject: [PATCH 09/21] feat(slider): update whcm, using dist tokens --- components/slider/dist/metadata.json | 24 ++++++--------- components/slider/index.css | 34 +++++++++------------ components/slider/stories/slider.stories.js | 2 +- tokens/custom/large-vars.css | 5 --- tokens/custom/medium-vars.css | 5 --- 5 files changed, 26 insertions(+), 44 deletions(-) diff --git a/components/slider/dist/metadata.json b/components/slider/dist/metadata.json index 859be594aa5..82858f9adde 100644 --- a/components/slider/dist/metadata.json +++ b/components/slider/dist/metadata.json @@ -117,9 +117,10 @@ "--mod-line-height-100", "--mod-slider-cjk-line-height", "--mod-slider-control-height", + "--mod-slider-control-to-side-field-label", + "--mod-slider-control-to-text-field", "--mod-slider-controls-margin", "--mod-slider-disabled-border-color", - "--mod-slider-editable-control-to-text-field", "--mod-slider-editable-field-inline-size", "--mod-slider-emphasized-tick-mark-color", "--mod-slider-emphasized-track-fill-color", @@ -146,7 +147,6 @@ "--mod-slider-label-text-color", "--mod-slider-label-text-color-disabled", "--mod-slider-label-top-to-text", - "--mod-slider-min-size", "--mod-slider-ramp-track-color", "--mod-slider-ramp-track-color-disabled", "--mod-slider-ramp-track-fill-color", @@ -167,8 +167,7 @@ "--mod-slider-track-fill-thickness", "--mod-slider-track-height-medium", "--mod-slider-track-thickness", - "--mod-slider-value-inline-size", - "--mod-slider-value-side-padding-inline" + "--mod-slider-value-inline-size" ], "component": [ "--spectrum-slider-cjk-line-height", @@ -181,11 +180,13 @@ "--spectrum-slider-control-to-field-label-extra-large", "--spectrum-slider-control-to-field-label-large", "--spectrum-slider-control-to-field-label-medium", + "--spectrum-slider-control-to-field-label-side-extra-large", + "--spectrum-slider-control-to-field-label-side-large", + "--spectrum-slider-control-to-field-label-side-medium", + "--spectrum-slider-control-to-field-label-side-small", "--spectrum-slider-control-to-field-label-small", - "--spectrum-slider-control-to-side-field-label-extra-large", - "--spectrum-slider-control-to-side-field-label-large", - "--spectrum-slider-control-to-side-field-label-medium", - "--spectrum-slider-control-to-side-field-label-small", + "--spectrum-slider-control-to-side-field-label", + "--spectrum-slider-control-to-text-field", "--spectrum-slider-control-to-text-field-extra-large", "--spectrum-slider-control-to-text-field-large", "--spectrum-slider-control-to-text-field-medium", @@ -193,7 +194,6 @@ "--spectrum-slider-controls-margin", "--spectrum-slider-downstate-perspective", "--spectrum-slider-editable-control-to-field-label", - "--spectrum-slider-editable-control-to-text-field", "--spectrum-slider-editable-field-inline-size-extra-large", "--spectrum-slider-editable-field-inline-size-large", "--spectrum-slider-editable-field-inline-size-medium", @@ -229,7 +229,6 @@ "--spectrum-slider-label-text-color", "--spectrum-slider-label-text-color-disabled", "--spectrum-slider-label-top-to-text", - "--spectrum-slider-min-size", "--spectrum-slider-precision-handle-height", "--spectrum-slider-precision-handle-height-extra-large", "--spectrum-slider-precision-handle-height-large", @@ -254,8 +253,7 @@ "--spectrum-slider-track-fill-thickness", "--spectrum-slider-track-height-large", "--spectrum-slider-track-height-medium", - "--spectrum-slider-value-inline-size", - "--spectrum-slider-value-side-padding-inline" + "--spectrum-slider-value-inline-size" ], "global": [ "--spectrum-accent-color-1000", @@ -304,14 +302,12 @@ "--spectrum-regular-font-weight", "--spectrum-sans-font-family-stack", "--spectrum-spacing-300", - "--spectrum-spacing-900", "--spectrum-text-to-visual-75" ], "passthroughs": ["--mod-textfield-width"], "high-contrast": [ "--highcontrast-slider-filled-track-fill-color", "--highcontrast-slider-handle-background-color", - "--highcontrast-slider-handle-background-color-disabled", "--highcontrast-slider-handle-border-color", "--highcontrast-slider-handle-border-color-disabled", "--highcontrast-slider-handle-border-color-down", diff --git a/components/slider/index.css b/components/slider/index.css index 9c9cbf74397..49eddb9cd2b 100644 --- a/components/slider/index.css +++ b/components/slider/index.css @@ -17,7 +17,7 @@ --spectrum-slider-control-height: var(--spectrum-component-height-100); --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-75); --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-medium); - --spectrum-slider-value-side-padding-inline: var(--spectrum-slider-control-to-side-field-label-medium); + --spectrum-slider-control-to-side-field-label: var(--spectrum-slider-control-to-field-label-side-medium); --spectrum-slider-inline-size: var(--spectrum-field-default-width-medium); --spectrum-slider-label-font-weight: var(--spectrum-regular-font-weight); --spectrum-slider-label-font-style: var(--spectrum-default-font-style); @@ -28,8 +28,6 @@ --spectrum-slider-cjk-line-height: var(--spectrum-cjk-line-height-100); - --spectrum-slider-min-size: var(--spectrum-spacing-900); - --spectrum-slider-label-margin-start: var(--spectrum-spacing-300); --spectrum-slider-handle-border-width: var(--spectrum-border-width-200); --spectrum-slider-handle-margin-left: calc(var(--spectrum-slider-handle-size) / -2); @@ -66,7 +64,7 @@ --spectrum-slider-precision-handle-height: var(--spectrum-slider-precision-handle-height-medium); - --spectrum-slider-editable-control-to-text-field: var(--spectrum-slider-control-to-text-field-medium); + --spectrum-slider-control-to-text-field: var(--spectrum-slider-control-to-text-field-medium); --spectrum-slider-editable-control-to-field-label: var(--spectrum-slider-control-to-field-label-editable-medium); /* values */ @@ -90,12 +88,12 @@ --spectrum-slider-control-height: var(--spectrum-component-height-75); --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-75); --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-small); - --spectrum-slider-value-side-padding-inline: var(--spectrum-slider-control-to-side-field-label-small); + --spectrum-slider-control-to-side-field-label: var(--spectrum-slider-control-to-field-label-side-small); --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-500); --spectrum-slider-inline-size: var(--spectrum-field-default-width-small); --spectrum-slider-downstate-perspective: var(--spectrum-component-size-minimum-perspective-down); --spectrum-slider-precision-handle-height: var(--spectrum-slider-precision-handle-height-small); - --spectrum-slider-editable-control-to-text-field: var(--spectrum-slider-control-to-text-field-small); + --spectrum-slider-control-to-text-field: var(--spectrum-slider-control-to-text-field-small); --spectrum-slider-editable-control-to-field-label: var(--spectrum-slider-control-to-field-label-editable-small); --mod-textfield-width: var(--spectrum-slider-editable-field-inline-size-small); } @@ -106,11 +104,11 @@ --spectrum-slider-control-height: var(--spectrum-component-height-200); --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-100); --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-large); - --spectrum-slider-value-side-padding-inline: var(--spectrum-slider-control-to-side-field-label-large); + --spectrum-slider-control-to-side-field-label: var(--spectrum-slider-control-to-field-label-side-large); --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4); --spectrum-slider-inline-size: var(--spectrum-field-default-width-large); --spectrum-slider-precision-handle-height: var(--spectrum-slider-precision-handle-height-large); - --spectrum-slider-editable-control-to-text-field: var(--spectrum-slider-control-to-text-field-large); + --spectrum-slider-control-to-text-field: var(--spectrum-slider-control-to-text-field-large); --spectrum-slider-editable-control-to-field-label: var(--spectrum-slider-control-to-field-label-editable-large); --mod-textfield-width: var(--spectrum-slider-editable-field-inline-size-large); @@ -125,11 +123,11 @@ --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-200); --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-extra-large); - --spectrum-slider-value-side-padding-inline: var(--spectrum-slider-control-to-side-field-label-extra-large); + --spectrum-slider-control-to-side-field-label: var(--spectrum-slider-control-to-field-label-side-extra-large); --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4); --spectrum-slider-inline-size: var(--spectrum-field-default-width-extra-large); --spectrum-slider-precision-handle-height: var(--spectrum-slider-precision-handle-height-extra-large); - --spectrum-slider-editable-control-to-text-field: var(--spectrum-slider-control-to-text-field-extra-large); + --spectrum-slider-control-to-text-field: var(--spectrum-slider-control-to-text-field-extra-large); --spectrum-slider-editable-control-to-field-label: var(--spectrum-slider-control-to-field-label-editable-extra-large); --mod-textfield-width: var(--spectrum-slider-editable-field-inline-size-extra-large); @@ -143,7 +141,6 @@ /* Don't let z-index'd child elements float above other things on the page */ z-index: 0; display: block; - min-inline-size: var(--mod-slider-min-size, var(--spectrum-slider-min-size)); inline-size: var(--mod-slider-inline-size, var(--spectrum-slider-inline-size)); user-select: none; @@ -192,7 +189,7 @@ margin-block-start: 0; .spectrum-Slider-label { - margin-inline-end: var(--mod-slider-value-side-padding-inline, var(--spectrum-slider-value-side-padding-inline)); + margin-inline-end: var(--mod-slider-control-to-side-field-label, var(--spectrum-slider-control-to-side-field-label)); } } @@ -201,7 +198,7 @@ } .spectrum-Slider-value { - margin-inline-start: var(--mod-slider-value-side-padding-inline, var(--spectrum-slider-value-side-padding-inline)); + margin-inline-start: var(--mod-slider-control-to-text-field, var(--spectrum-slider-control-to-text-field)); inline-size: var(--mod-slider-value-inline-size, var(--spectrum-slider-value-inline-size)); text-align: start; } @@ -214,7 +211,7 @@ .spectrum-Slider-content--editable { display: flex; align-items: center; - gap: var(--mod-slider-editable-control-to-text-field, var(--spectrum-slider-editable-control-to-text-field)); + gap: var(--mod-slider-control-to-text-field, var(--spectrum-slider-control-to-text-field)); } .spectrum-Slider-controls { @@ -716,7 +713,7 @@ .spectrum-Slider--emphasized { .spectrum-Slider-tick:nth-child(-n + 4) { &::after { - background-color: var(--highcontrast-slider-tick-mark-color-disabled, var(--mod-slider-emphasized-tick-mark-color, var(--spectrum-slider-emphasized-tick-mark-color))); + background-color: var(--highcontrast-slider-tick-mark-color-filled-track, var(--mod-slider-emphasized-tick-mark-color, var(--spectrum-slider-emphasized-tick-mark-color))); } } } @@ -735,7 +732,7 @@ .spectrum-Slider-tick:nth-child(4), .spectrum-Slider-tick:nth-child(5) { &::after { - background-color: var(--highcontrast-slider-tick-mark-color-disabled, var(--mod-slider-tick-mark-color-filled-track, var(--spectrum-slider-tick-mark-color-filled-track))); + background-color: var(--highcontrast-slider-tick-mark-color-filled-track, var(--mod-slider-tick-mark-color-filled-track, var(--spectrum-slider-tick-mark-color-filled-track))); } } } @@ -784,8 +781,8 @@ &:hover, &:active { - border-color: var(--mod-slider-disabled-border-color, var(--spectrum-disabled-border-color)); - background: var(--highcontrast-slider-handle-background-color-disabled, var(--mod-slider-handle-background-color-disabled, var(--spectrum-slider-handle-background-color-disabled))); + border-color: var(--highcontrast-slider-handle-border-color-disabled, var(--mod-slider-disabled-border-color, var(--spectrum-disabled-border-color))); + background: var(--highcontrast-slider-handle-disabled-background-color, var(--mod-slider-handle-background-color-disabled, var(--spectrum-slider-handle-background-color-disabled))); } } @@ -847,7 +844,6 @@ --highcontrast-slider-handle-border-color-disabled: GrayText; --highcontrast-slider-handle-focus-ring-color-key-focus: CanvasText; --highcontrast-slider-handle-background-color: ButtonFace; - --highcontrast-slider-handle-background-color-disabled: GrayText; --highcontrast-slider-handle-disabled-background-color: Canvas; --highcontrast-slider-label-text-color: CanvasText; --highcontrast-slider-label-text-color-disabled: GrayText; diff --git a/components/slider/stories/slider.stories.js b/components/slider/stories/slider.stories.js index 66d00cdc040..f2fca6396c5 100644 --- a/components/slider/stories/slider.stories.js +++ b/components/slider/stories/slider.stories.js @@ -254,7 +254,7 @@ Sizing.parameters = { }; /** - * If the value represents an offset, the fill start can be set to represent the point of origin. This allows the slider fill to start from inside the track. + * If the value represents an offset, the fill start can be set to represent the point of origin. The handle is positoned in the center of the track where the value is 0. */ export const Offset = Template.bind({}); Offset.args = { diff --git a/tokens/custom/large-vars.css b/tokens/custom/large-vars.css index 1b07170ff6d..64943103a1e 100644 --- a/tokens/custom/large-vars.css +++ b/tokens/custom/large-vars.css @@ -110,11 +110,6 @@ --spectrum-slider-precision-handle-height-large: 30px; --spectrum-slider-precision-handle-height-extra-large: 32px; - --spectrum-slider-control-to-side-field-label-small: 16px; - --spectrum-slider-control-to-side-field-label-medium: 16px; - --spectrum-slider-control-to-side-field-label-large: 20px; - --spectrum-slider-control-to-side-field-label-extra-large: 24px; - --spectrum-slider-editable-field-inline-size-small: 56px; --spectrum-slider-editable-field-inline-size-medium: 70px; --spectrum-slider-editable-field-inline-size-large: 82px; diff --git a/tokens/custom/medium-vars.css b/tokens/custom/medium-vars.css index e5956b67c80..b6e4964fd8a 100644 --- a/tokens/custom/medium-vars.css +++ b/tokens/custom/medium-vars.css @@ -108,11 +108,6 @@ --spectrum-slider-precision-handle-height-extra-large: 26px; --spectrum-slider-precision-handle-width: 6px; - --spectrum-slider-control-to-side-field-label-small: 16px; - --spectrum-slider-control-to-side-field-label-medium: 16px; - --spectrum-slider-control-to-side-field-label-large: 20px; - --spectrum-slider-control-to-side-field-label-extra-large: 24px; - --spectrum-slider-editable-field-inline-size-small: 56px; --spectrum-slider-editable-field-inline-size-medium: 70px; --spectrum-slider-editable-field-inline-size-large: 82px; From d783755834389d6c47e782a74442c08818135054 Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Tue, 8 Jul 2025 13:32:35 -0400 Subject: [PATCH 10/21] feat(slider): new reviews update focus states and tokens --- .changeset/shy-actors-behave.md | 36 ++++++++++++++++++--- components/slider/dist/metadata.json | 29 ++++++++--------- components/slider/index.css | 21 ++++++------ components/slider/stories/slider.stories.js | 6 ++-- components/slider/stories/template.js | 8 ++++- 5 files changed, 68 insertions(+), 32 deletions(-) diff --git a/.changeset/shy-actors-behave.md b/.changeset/shy-actors-behave.md index 4afc3ea0a8a..a93ea298e44 100644 --- a/.changeset/shy-actors-behave.md +++ b/.changeset/shy-actors-behave.md @@ -4,20 +4,21 @@ ### S2 Slider Migration -#### New features: +#### New features - Emphasized track fill color - Precision control handle - Large and thin track heights - Embedded editable text field component -#### Visual changes: +#### Visual changes - No longer a gap between slider handle and the track -- Update dimensions of slider handles for each size variant +- Updated dimensions of slider handles for each size variant +- Updated WHCM for all variants -#### New tokens: +#### New tokens `--spectrum-slider-control-to-field-label-editable-extra-large` `--spectrum-slider-control-to-field-label-editable-large` @@ -48,3 +49,30 @@ `--spectrum-slider-handle-large` `--spectrum-slider-handle-medium` `--spectrum-slider-handle-small` + +#### New mods + +`--mod-slider-editable-control-to-text-field` +`--mod-slider-editable-field-inline-size` +`--mod-slider-disabled-border-color` +`--mod-slider-emphasized-tick-mark-color` +`--mod-slider-emphasized-track-fill-color` +`--mod-slider-inline-size` +`--mod-slider-label-font-style` +`--mod-slider-label-font-weight` +`--mod-slider-ramp-track-fill-color` +`--mod-slider-tick-mark-color-filled-track` +`--mod-slider-track-height-medium` + +#### Removed mods + +`--mod-disabled-border-color` +`--mod-sectrum-slider-ramp-handle-border-color-active` +`--mod-slider-handle-border-width-down` +`--mod-slider-handle-gap` +`--mod-slider-ramp-handle-background-color` +`--mod-slider-tick-handle-background-color` +`--mod-slider-tick-mark-color-disabled` +`--mod-slider-track-handleoffset` +`--mod-slider-track-margin-offset` +`--mod-slider-track-middle-handleoffset` diff --git a/components/slider/dist/metadata.json b/components/slider/dist/metadata.json index 82858f9adde..19f3d89fd21 100644 --- a/components/slider/dist/metadata.json +++ b/components/slider/dist/metadata.json @@ -117,10 +117,9 @@ "--mod-line-height-100", "--mod-slider-cjk-line-height", "--mod-slider-control-height", - "--mod-slider-control-to-side-field-label", - "--mod-slider-control-to-text-field", "--mod-slider-controls-margin", "--mod-slider-disabled-border-color", + "--mod-slider-editable-control-to-text-field", "--mod-slider-editable-field-inline-size", "--mod-slider-emphasized-tick-mark-color", "--mod-slider-emphasized-track-fill-color", @@ -140,13 +139,13 @@ "--mod-slider-inline-size", "--mod-slider-input-left", "--mod-slider-input-top-size", - "--mod-slider-label-font-family", "--mod-slider-label-font-style", "--mod-slider-label-font-weight", "--mod-slider-label-margin-start", "--mod-slider-label-text-color", "--mod-slider-label-text-color-disabled", "--mod-slider-label-top-to-text", + "--mod-slider-min-size", "--mod-slider-ramp-track-color", "--mod-slider-ramp-track-color-disabled", "--mod-slider-ramp-track-fill-color", @@ -167,7 +166,8 @@ "--mod-slider-track-fill-thickness", "--mod-slider-track-height-medium", "--mod-slider-track-thickness", - "--mod-slider-value-inline-size" + "--mod-slider-value-inline-size", + "--mod-slider-value-side-padding-inline" ], "component": [ "--spectrum-slider-cjk-line-height", @@ -180,13 +180,11 @@ "--spectrum-slider-control-to-field-label-extra-large", "--spectrum-slider-control-to-field-label-large", "--spectrum-slider-control-to-field-label-medium", - "--spectrum-slider-control-to-field-label-side-extra-large", - "--spectrum-slider-control-to-field-label-side-large", - "--spectrum-slider-control-to-field-label-side-medium", - "--spectrum-slider-control-to-field-label-side-small", "--spectrum-slider-control-to-field-label-small", - "--spectrum-slider-control-to-side-field-label", - "--spectrum-slider-control-to-text-field", + "--spectrum-slider-control-to-side-field-label-extra-large", + "--spectrum-slider-control-to-side-field-label-large", + "--spectrum-slider-control-to-side-field-label-medium", + "--spectrum-slider-control-to-side-field-label-small", "--spectrum-slider-control-to-text-field-extra-large", "--spectrum-slider-control-to-text-field-large", "--spectrum-slider-control-to-text-field-medium", @@ -194,13 +192,13 @@ "--spectrum-slider-controls-margin", "--spectrum-slider-downstate-perspective", "--spectrum-slider-editable-control-to-field-label", + "--spectrum-slider-editable-control-to-text-field", "--spectrum-slider-editable-field-inline-size-extra-large", "--spectrum-slider-editable-field-inline-size-large", "--spectrum-slider-editable-field-inline-size-medium", "--spectrum-slider-editable-field-inline-size-small", "--spectrum-slider-emphasized-tick-mark-color", "--spectrum-slider-emphasized-track-fill-color", - "--spectrum-slider-focus-indicator-gap", "--spectrum-slider-font-size", "--spectrum-slider-handle-background-color", "--spectrum-slider-handle-background-color-disabled", @@ -222,13 +220,13 @@ "--spectrum-slider-inline-size", "--spectrum-slider-input-left", "--spectrum-slider-input-top-size", - "--spectrum-slider-label-font-family", "--spectrum-slider-label-font-style", "--spectrum-slider-label-font-weight", "--spectrum-slider-label-margin-start", "--spectrum-slider-label-text-color", "--spectrum-slider-label-text-color-disabled", "--spectrum-slider-label-top-to-text", + "--spectrum-slider-min-size", "--spectrum-slider-precision-handle-height", "--spectrum-slider-precision-handle-height-extra-large", "--spectrum-slider-precision-handle-height-large", @@ -253,7 +251,8 @@ "--spectrum-slider-track-fill-thickness", "--spectrum-slider-track-height-large", "--spectrum-slider-track-height-medium", - "--spectrum-slider-value-inline-size" + "--spectrum-slider-value-inline-size", + "--spectrum-slider-value-side-padding-inline" ], "global": [ "--spectrum-accent-color-1000", @@ -298,16 +297,16 @@ "--spectrum-line-height-100", "--spectrum-logical-rotation", "--spectrum-neutral-content-color-default", - "--spectrum-neutral-subdued-content-color-default", "--spectrum-regular-font-weight", - "--spectrum-sans-font-family-stack", "--spectrum-spacing-300", + "--spectrum-spacing-900", "--spectrum-text-to-visual-75" ], "passthroughs": ["--mod-textfield-width"], "high-contrast": [ "--highcontrast-slider-filled-track-fill-color", "--highcontrast-slider-handle-background-color", + "--highcontrast-slider-handle-background-color-disabled", "--highcontrast-slider-handle-border-color", "--highcontrast-slider-handle-border-color-disabled", "--highcontrast-slider-handle-border-color-down", diff --git a/components/slider/index.css b/components/slider/index.css index 49eddb9cd2b..202720a6295 100644 --- a/components/slider/index.css +++ b/components/slider/index.css @@ -39,7 +39,7 @@ --spectrum-slider-focus-indicator-gap: var(--spectrum-focus-indicator-gap); /* colors */ - --spectrum-slider-track-color: var(--spectrum-gray-300); + --spectrum-slider-track-color: var(--spectrum-track-color); --spectrum-slider-track-fill-color: var(--spectrum-gray-700); --spectrum-slider-track-color-disabled: var(--spectrum-disabled-background-color); --spectrum-slider-ramp-track-color-disabled: var(--spectrum-slider-track-color-disabled); @@ -51,15 +51,15 @@ --spectrum-slider-handle-background-color: var(--spectrum-gray-25); --spectrum-slider-handle-background-color-disabled: var(--spectrum-slider-handle-background-color); --spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-75); - --spectrum-slider-handle-border-color: var(--spectrum-gray-700); + --spectrum-slider-handle-border-color: var(--spectrum-gray-800); --spectrum-slider-tick-mark-color: var(--spectrum-gray-400); --spectrum-slider-tick-mark-color-filled-track: var(--spectrum-gray-800); --spectrum-slider-emphasized-tick-mark-color: var(--spectrum-accent-color-1000); --spectrum-slider-emphasized-track-fill-color: var(--spectrum-accent-content-color-default); - --spectrum-slider-handle-border-color-hover: var(--spectrum-gray-800); - --spectrum-slider-handle-border-color-down: var(--spectrum-gray-800); - --spectrum-slider-handle-border-color-key-focus: var(--spectrum-gray-800); + --spectrum-slider-handle-border-color-hover: var(--spectrum-gray-900); + --spectrum-slider-handle-border-color-down: var(--spectrum-gray-900); + --spectrum-slider-handle-border-color-key-focus: var(--spectrum-gray-900); --spectrum-slider-handle-focus-ring-color-key-focus: var(--spectrum-focus-indicator-color); --spectrum-slider-precision-handle-height: var(--spectrum-slider-precision-handle-height-medium); @@ -170,7 +170,7 @@ inset-block-start: calc(var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / 2 - var(--spectrum-slider-precision-handle-height) / 2); margin-inline-start: calc((var(--spectrum-slider-precision-handle-width) + var(--spectrum-slider-handle-border-width)) * -0.5); - &.is-focused { + &.is-focused, &:focus { &::before { border-radius: var(--spectrum-slider-handle-border-radius); block-size: calc(var(--spectrum-slider-precision-handle-height) + var(--spectrum-slider-focus-indicator-gap) * 2); @@ -426,7 +426,7 @@ } /* Keyboard focused */ - &.is-focused { + &.is-focused, &:focus { &::before { inline-size: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-slider-focus-indicator-gap)) * 2); block-size: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-slider-focus-indicator-gap)) * 2); @@ -648,6 +648,8 @@ .spectrum-Slider-fill { &::before { background: var(--highcontrast-slider-filled-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color))); + border-start-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); + border-end-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); } } @@ -684,8 +686,9 @@ } /* Keyboard focused with focus indicator. */ - &.is-focused { + &.is-focused, &:focus { border-color: var(--highcontrast-slider-handle-border-color-key-focus, var(--mod-slider-handle-border-color-key-focus, var(--spectrum-slider-handle-border-color-key-focus))); + outline: 0; &::before { box-shadow: 0 0 0 var(--spectrum-focus-indicator-thickness) var(--highcontrast-slider-handle-focus-ring-color-key-focus, var(--mod-slider-handle-focus-ring-color-key-focus, var(--spectrum-slider-handle-focus-ring-color-key-focus))); @@ -781,7 +784,7 @@ &:hover, &:active { - border-color: var(--highcontrast-slider-handle-border-color-disabled, var(--mod-slider-disabled-border-color, var(--spectrum-disabled-border-color))); + border-color: var(--highcontrast-slider-handle-border-color-disabled, var(--mod-slider-disabled-border-color, var(--spectrum-slider-handle-border-color-disabled))); background: var(--highcontrast-slider-handle-disabled-background-color, var(--mod-slider-handle-background-color-disabled, var(--spectrum-slider-handle-background-color-disabled))); } } diff --git a/components/slider/stories/slider.stories.js b/components/slider/stories/slider.stories.js index f2fca6396c5..16f8bec7b9a 100644 --- a/components/slider/stories/slider.stories.js +++ b/components/slider/stories/slider.stories.js @@ -124,7 +124,7 @@ export default { }, isPrecise: { name: "Precise handle control", - description: "Provides precise control for accurate values", + description: "Provides precise control for accurate values.", type: { name: "boolean" }, table: { type: { summary: "boolean" }, @@ -134,7 +134,7 @@ export default { }, isEditable: { name: "Editable text input", - description: "Enables text input to also control the slider value", + description: "Enables text input to also control the slider value.", type: { name: "boolean" }, table: { type: { summary: "boolean" }, @@ -203,7 +203,7 @@ export default { /** * Sliders should always have a label. In rare cases where context is sufficient and an accessibility expert has reviewed the design, the label could be undefined. Top labels are the default and are recommended because they work better with long copy, localization, and responsive layouts. - * The track of the slider can have a fill. By default, the fill originates from the left side of the track. + * The track of the slider can have a fill. By default, the fill originates from the left side of the track when the global direction is LTR and from the right side of the track when the global direction is RTL. */ export const Default = SliderGroup.bind({}); Default.args = { diff --git a/components/slider/stories/template.js b/components/slider/stories/template.js index 51722dddc5e..fd2cb78babd 100644 --- a/components/slider/stories/template.js +++ b/components/slider/stories/template.js @@ -119,11 +119,16 @@ export const Template = ({ "is-focused": isFocused, "is-active": isActive, "is-dragged": false, // note: this only applies z-index; no other styles - "is-tophandle": false, // todo: when is this supposed to be used })} style=${styleMap({ [direction]: position ? `${position}%` : undefined, })} + @focusin=${function() { + updateArgs({ isFocused: true }); + }} + @focusout=${function() { + updateArgs({ isFocused: false }); + }} > Date: Tue, 8 Jul 2025 13:34:54 -0400 Subject: [PATCH 11/21] feat(slider): update metadata --- components/slider/dist/metadata.json | 37 ++++++++++++++++------------ 1 file changed, 21 insertions(+), 16 deletions(-) diff --git a/components/slider/dist/metadata.json b/components/slider/dist/metadata.json index 19f3d89fd21..23bd905ac9b 100644 --- a/components/slider/dist/metadata.json +++ b/components/slider/dist/metadata.json @@ -14,6 +14,7 @@ ".spectrum-Slider--offset:not(.spectrum-Slider--range, .is-disabled, .spectrum-Slider--emphasized) .spectrum-Slider-tick:nth-child(-n + 4):after", ".spectrum-Slider--precise .spectrum-Slider-handle", ".spectrum-Slider--precise .spectrum-Slider-handle.is-focused:before", + ".spectrum-Slider--precise .spectrum-Slider-handle:focus:before", ".spectrum-Slider--range .spectrum-Slider-tick:nth-child(3):after", ".spectrum-Slider--range .spectrum-Slider-tick:nth-child(4):after", ".spectrum-Slider--range .spectrum-Slider-tick:nth-child(5):after", @@ -51,6 +52,8 @@ ".spectrum-Slider-handle.is-tophandle", ".spectrum-Slider-handle:active", ".spectrum-Slider-handle:before", + ".spectrum-Slider-handle:focus", + ".spectrum-Slider-handle:focus:before", ".spectrum-Slider-handle:hover", ".spectrum-Slider-handleContainer", ".spectrum-Slider-input", @@ -117,9 +120,10 @@ "--mod-line-height-100", "--mod-slider-cjk-line-height", "--mod-slider-control-height", + "--mod-slider-control-to-side-field-label", + "--mod-slider-control-to-text-field", "--mod-slider-controls-margin", "--mod-slider-disabled-border-color", - "--mod-slider-editable-control-to-text-field", "--mod-slider-editable-field-inline-size", "--mod-slider-emphasized-tick-mark-color", "--mod-slider-emphasized-track-fill-color", @@ -139,13 +143,13 @@ "--mod-slider-inline-size", "--mod-slider-input-left", "--mod-slider-input-top-size", + "--mod-slider-label-font-family", "--mod-slider-label-font-style", "--mod-slider-label-font-weight", "--mod-slider-label-margin-start", "--mod-slider-label-text-color", "--mod-slider-label-text-color-disabled", "--mod-slider-label-top-to-text", - "--mod-slider-min-size", "--mod-slider-ramp-track-color", "--mod-slider-ramp-track-color-disabled", "--mod-slider-ramp-track-fill-color", @@ -166,8 +170,7 @@ "--mod-slider-track-fill-thickness", "--mod-slider-track-height-medium", "--mod-slider-track-thickness", - "--mod-slider-value-inline-size", - "--mod-slider-value-side-padding-inline" + "--mod-slider-value-inline-size" ], "component": [ "--spectrum-slider-cjk-line-height", @@ -180,11 +183,13 @@ "--spectrum-slider-control-to-field-label-extra-large", "--spectrum-slider-control-to-field-label-large", "--spectrum-slider-control-to-field-label-medium", + "--spectrum-slider-control-to-field-label-side-extra-large", + "--spectrum-slider-control-to-field-label-side-large", + "--spectrum-slider-control-to-field-label-side-medium", + "--spectrum-slider-control-to-field-label-side-small", "--spectrum-slider-control-to-field-label-small", - "--spectrum-slider-control-to-side-field-label-extra-large", - "--spectrum-slider-control-to-side-field-label-large", - "--spectrum-slider-control-to-side-field-label-medium", - "--spectrum-slider-control-to-side-field-label-small", + "--spectrum-slider-control-to-side-field-label", + "--spectrum-slider-control-to-text-field", "--spectrum-slider-control-to-text-field-extra-large", "--spectrum-slider-control-to-text-field-large", "--spectrum-slider-control-to-text-field-medium", @@ -192,13 +197,13 @@ "--spectrum-slider-controls-margin", "--spectrum-slider-downstate-perspective", "--spectrum-slider-editable-control-to-field-label", - "--spectrum-slider-editable-control-to-text-field", "--spectrum-slider-editable-field-inline-size-extra-large", "--spectrum-slider-editable-field-inline-size-large", "--spectrum-slider-editable-field-inline-size-medium", "--spectrum-slider-editable-field-inline-size-small", "--spectrum-slider-emphasized-tick-mark-color", "--spectrum-slider-emphasized-track-fill-color", + "--spectrum-slider-focus-indicator-gap", "--spectrum-slider-font-size", "--spectrum-slider-handle-background-color", "--spectrum-slider-handle-background-color-disabled", @@ -220,13 +225,13 @@ "--spectrum-slider-inline-size", "--spectrum-slider-input-left", "--spectrum-slider-input-top-size", + "--spectrum-slider-label-font-family", "--spectrum-slider-label-font-style", "--spectrum-slider-label-font-weight", "--spectrum-slider-label-margin-start", "--spectrum-slider-label-text-color", "--spectrum-slider-label-text-color-disabled", "--spectrum-slider-label-top-to-text", - "--spectrum-slider-min-size", "--spectrum-slider-precision-handle-height", "--spectrum-slider-precision-handle-height-extra-large", "--spectrum-slider-precision-handle-height-large", @@ -251,8 +256,7 @@ "--spectrum-slider-track-fill-thickness", "--spectrum-slider-track-height-large", "--spectrum-slider-track-height-medium", - "--spectrum-slider-value-inline-size", - "--spectrum-slider-value-side-padding-inline" + "--spectrum-slider-value-inline-size" ], "global": [ "--spectrum-accent-color-1000", @@ -289,24 +293,25 @@ "--spectrum-font-size-300", "--spectrum-font-size-75", "--spectrum-gray-25", - "--spectrum-gray-300", "--spectrum-gray-400", "--spectrum-gray-700", "--spectrum-gray-75", "--spectrum-gray-800", + "--spectrum-gray-900", "--spectrum-line-height-100", "--spectrum-logical-rotation", "--spectrum-neutral-content-color-default", + "--spectrum-neutral-subdued-content-color-default", "--spectrum-regular-font-weight", + "--spectrum-sans-font-family-stack", "--spectrum-spacing-300", - "--spectrum-spacing-900", - "--spectrum-text-to-visual-75" + "--spectrum-text-to-visual-75", + "--spectrum-track-color" ], "passthroughs": ["--mod-textfield-width"], "high-contrast": [ "--highcontrast-slider-filled-track-fill-color", "--highcontrast-slider-handle-background-color", - "--highcontrast-slider-handle-background-color-disabled", "--highcontrast-slider-handle-border-color", "--highcontrast-slider-handle-border-color-disabled", "--highcontrast-slider-handle-border-color-down", From 40d561c61e00dcb1966c134cf2598b20373a8e97 Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Tue, 8 Jul 2025 13:52:00 -0400 Subject: [PATCH 12/21] feat(slider): restoring base project files --- package.json | 2 +- tasks/component-reporter.js | 1 + yarn.lock | 36 ++++++++++++++++++++++++++++++++++-- 3 files changed, 36 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 1b95423c3cc..ccab68a3878 100644 --- a/package.json +++ b/package.json @@ -121,7 +121,7 @@ "stylelint-selector-bem-pattern": "^4.0.1", "stylelint-use-logical": "^2.1.2", "tar": "^7.4.3", - "yargs": "^17.7.2", + "yargs": "^18.0.0", "zlib": "^1.0.5" }, "keywords": [ diff --git a/tasks/component-reporter.js b/tasks/component-reporter.js index 6b72f9aa255..b281de49bc9 100644 --- a/tasks/component-reporter.js +++ b/tasks/component-reporter.js @@ -244,6 +244,7 @@ async function main({ exports.extractModifiers = extractModifiers; exports.default = main; + let { _: components, } = yargs(hideBin(process.argv)).argv; diff --git a/yarn.lock b/yarn.lock index 52937585bd8..1f73384bb39 100644 --- a/yarn.lock +++ b/yarn.lock @@ -175,7 +175,7 @@ __metadata: stylelint-selector-bem-pattern: "npm:^4.0.1" stylelint-use-logical: "npm:^2.1.2" tar: "npm:^7.4.3" - yargs: "npm:^17.7.2" + yargs: "npm:^18.0.0" zlib: "npm:^1.0.5" languageName: unknown linkType: soft @@ -8788,6 +8788,17 @@ __metadata: languageName: node linkType: hard +"cliui@npm:^9.0.1": + version: 9.0.1 + resolution: "cliui@npm:9.0.1" + dependencies: + string-width: "npm:^7.2.0" + strip-ansi: "npm:^7.1.0" + wrap-ansi: "npm:^9.0.0" + checksum: 10c0/13441832e9efe7c7a76bd2b8e683555c478d461a9f249dc5db9b17fe8d4b47fa9277b503914b90bd00e4a151abb6b9b02b2288972ffe2e5e3ca40bcb1c2330d3 + languageName: node + linkType: hard + "clone@npm:^1.0.2": version: 1.0.4 resolution: "clone@npm:1.0.4" @@ -19498,7 +19509,7 @@ __metadata: languageName: node linkType: hard -"string-width@npm:^7.0.0": +"string-width@npm:^7.0.0, string-width@npm:^7.2.0": version: 7.2.0 resolution: "string-width@npm:7.2.0" dependencies: @@ -21377,6 +21388,13 @@ __metadata: languageName: node linkType: hard +"yargs-parser@npm:^22.0.0": + version: 22.0.0 + resolution: "yargs-parser@npm:22.0.0" + checksum: 10c0/cb7ef81759c4271cb1d96b9351dbbc9a9ce35d3e1122d2b739bf6c432603824fa02c67cc12dcef6ea80283379d63495686e8f41cc7b06c6576e792aba4d33e1c + languageName: node + linkType: hard + "yargs@npm:^15.0.2": version: 15.4.1 resolution: "yargs@npm:15.4.1" @@ -21411,6 +21429,20 @@ __metadata: languageName: node linkType: hard +"yargs@npm:^18.0.0": + version: 18.0.0 + resolution: "yargs@npm:18.0.0" + dependencies: + cliui: "npm:^9.0.1" + escalade: "npm:^3.1.1" + get-caller-file: "npm:^2.0.5" + string-width: "npm:^7.2.0" + y18n: "npm:^5.0.5" + yargs-parser: "npm:^22.0.0" + checksum: 10c0/bf290e4723876ea9c638c786a5c42ac28e03c9ca2325e1424bf43b94e5876456292d3ed905b853ebbba6daf43ed29e772ac2a6b3c5fb1b16533245d6211778f3 + languageName: node + linkType: hard + "yocto-queue@npm:^0.1.0": version: 0.1.0 resolution: "yocto-queue@npm:0.1.0" From 6fae3049d29955cbb414bef956fbca7d5ce2654a Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Thu, 10 Jul 2025 09:34:45 -0400 Subject: [PATCH 13/21] feat(slider): use field label passthrough for top padding --- components/slider/dist/metadata.json | 8 +++++--- components/slider/index.css | 20 ++++++++++---------- components/slider/stories/slider.stories.js | 2 +- 3 files changed, 16 insertions(+), 14 deletions(-) diff --git a/components/slider/dist/metadata.json b/components/slider/dist/metadata.json index 23bd905ac9b..70de54fbcd6 100644 --- a/components/slider/dist/metadata.json +++ b/components/slider/dist/metadata.json @@ -14,6 +14,7 @@ ".spectrum-Slider--offset:not(.spectrum-Slider--range, .is-disabled, .spectrum-Slider--emphasized) .spectrum-Slider-tick:nth-child(-n + 4):after", ".spectrum-Slider--precise .spectrum-Slider-handle", ".spectrum-Slider--precise .spectrum-Slider-handle.is-focused:before", + ".spectrum-Slider--precise .spectrum-Slider-handle:focus-visible:before", ".spectrum-Slider--precise .spectrum-Slider-handle:focus:before", ".spectrum-Slider--range .spectrum-Slider-tick:nth-child(3):after", ".spectrum-Slider--range .spectrum-Slider-tick:nth-child(4):after", @@ -53,6 +54,8 @@ ".spectrum-Slider-handle:active", ".spectrum-Slider-handle:before", ".spectrum-Slider-handle:focus", + ".spectrum-Slider-handle:focus-visible", + ".spectrum-Slider-handle:focus-visible:before", ".spectrum-Slider-handle:focus:before", ".spectrum-Slider-handle:hover", ".spectrum-Slider-handleContainer", @@ -149,7 +152,6 @@ "--mod-slider-label-margin-start", "--mod-slider-label-text-color", "--mod-slider-label-text-color-disabled", - "--mod-slider-label-top-to-text", "--mod-slider-ramp-track-color", "--mod-slider-ramp-track-color-disabled", "--mod-slider-ramp-track-fill-color", @@ -231,7 +233,6 @@ "--spectrum-slider-label-margin-start", "--spectrum-slider-label-text-color", "--spectrum-slider-label-text-color-disabled", - "--spectrum-slider-label-top-to-text", "--spectrum-slider-precision-handle-height", "--spectrum-slider-precision-handle-height-extra-large", "--spectrum-slider-precision-handle-height-large", @@ -273,6 +274,7 @@ "--spectrum-component-size-width-ratio-down", "--spectrum-component-top-to-text-100", "--spectrum-component-top-to-text-200", + "--spectrum-component-top-to-text-300", "--spectrum-component-top-to-text-75", "--spectrum-corner-radius-500", "--spectrum-default-font-style", @@ -308,7 +310,7 @@ "--spectrum-text-to-visual-75", "--spectrum-track-color" ], - "passthroughs": ["--mod-textfield-width"], + "passthroughs": ["--mod-fieldlabel-top-to-text", "--mod-textfield-width"], "high-contrast": [ "--highcontrast-slider-filled-track-fill-color", "--highcontrast-slider-handle-background-color", diff --git a/components/slider/index.css b/components/slider/index.css index 202720a6295..4c1e7e02b24 100644 --- a/components/slider/index.css +++ b/components/slider/index.css @@ -15,7 +15,6 @@ --spectrum-slider-font-size: var(--spectrum-font-size-100); --spectrum-slider-handle-size: var(--spectrum-slider-handle-medium); --spectrum-slider-control-height: var(--spectrum-component-height-100); - --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-75); --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-medium); --spectrum-slider-control-to-side-field-label: var(--spectrum-slider-control-to-field-label-side-medium); --spectrum-slider-inline-size: var(--spectrum-field-default-width-medium); @@ -76,6 +75,9 @@ /* Textfield passthrough */ --mod-textfield-width: var(--mod-slider-editable-field-inline-size, var(--spectrum-slider-editable-field-inline-size-medium)); + /* Field label passthrough */ + --mod-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-100); + .spectrum-Slider-handle { /* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties -- used to assign downstate perspective */ --spectrum-slider-downstate-perspective: max(var(--spectrum-downstate-height), var(--spectrum-downstate-width) * var(--spectrum-component-size-width-ratio-down)); @@ -86,7 +88,6 @@ --spectrum-slider-font-size: var(--spectrum-font-size-75); --spectrum-slider-handle-size: var(--spectrum-slider-handle-small); --spectrum-slider-control-height: var(--spectrum-component-height-75); - --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-75); --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-small); --spectrum-slider-control-to-side-field-label: var(--spectrum-slider-control-to-field-label-side-small); --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-500); @@ -96,13 +97,14 @@ --spectrum-slider-control-to-text-field: var(--spectrum-slider-control-to-text-field-small); --spectrum-slider-editable-control-to-field-label: var(--spectrum-slider-control-to-field-label-editable-small); --mod-textfield-width: var(--spectrum-slider-editable-field-inline-size-small); + --mod-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-75); } .spectrum-Slider--sizeL { --spectrum-slider-font-size: var(--spectrum-font-size-200); --spectrum-slider-handle-size: var(--spectrum-slider-handle-large); --spectrum-slider-control-height: var(--spectrum-component-height-200); - --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-100); + --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-large); --spectrum-slider-control-to-side-field-label: var(--spectrum-slider-control-to-field-label-side-large); --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4); @@ -111,6 +113,7 @@ --spectrum-slider-control-to-text-field: var(--spectrum-slider-control-to-text-field-large); --spectrum-slider-editable-control-to-field-label: var(--spectrum-slider-control-to-field-label-editable-large); --mod-textfield-width: var(--spectrum-slider-editable-field-inline-size-large); + --mod-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-200); /* TODO: placeholder value for sideLabel variant value width */ --spectrum-slider-value-inline-size: 18px; @@ -120,8 +123,6 @@ --spectrum-slider-font-size: var(--spectrum-font-size-300); --spectrum-slider-handle-size: var(--spectrum-slider-handle-extra-large); --spectrum-slider-control-height: var(--spectrum-component-height-300); - - --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-200); --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-extra-large); --spectrum-slider-control-to-side-field-label: var(--spectrum-slider-control-to-field-label-side-extra-large); --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4); @@ -130,6 +131,7 @@ --spectrum-slider-control-to-text-field: var(--spectrum-slider-control-to-text-field-extra-large); --spectrum-slider-editable-control-to-field-label: var(--spectrum-slider-control-to-field-label-editable-extra-large); --mod-textfield-width: var(--spectrum-slider-editable-field-inline-size-extra-large); + --mod-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-300); /* TODO: placeholder value for sideLabel variant value width */ --spectrum-slider-value-inline-size: 22px; @@ -170,7 +172,7 @@ inset-block-start: calc(var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / 2 - var(--spectrum-slider-precision-handle-height) / 2); margin-inline-start: calc((var(--spectrum-slider-precision-handle-width) + var(--spectrum-slider-handle-border-width)) * -0.5); - &.is-focused, &:focus { + &.is-focused, &:focus, &:focus-visible { &::before { border-radius: var(--spectrum-slider-handle-border-radius); block-size: calc(var(--spectrum-slider-precision-handle-height) + var(--spectrum-slider-focus-indicator-gap) * 2); @@ -426,7 +428,7 @@ } /* Keyboard focused */ - &.is-focused, &:focus { + &.is-focused, &:focus, &:focus-visible { &::before { inline-size: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-slider-focus-indicator-gap)) * 2); block-size: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-slider-focus-indicator-gap)) * 2); @@ -475,8 +477,6 @@ font-style: var(--mod-slider-label-font-style, var(--spectrum-slider-label-font-style)); font-family: var(--mod-slider-label-font-family, var(--spectrum-slider-label-font-family)); - margin-block-start: var(--mod-slider-label-top-to-text, var(--spectrum-slider-label-top-to-text)); - /* international support */ &:lang(ja), &:lang(zh), @@ -686,7 +686,7 @@ } /* Keyboard focused with focus indicator. */ - &.is-focused, &:focus { + &.is-focused, &:focus, &:focus-visible { border-color: var(--highcontrast-slider-handle-border-color-key-focus, var(--mod-slider-handle-border-color-key-focus, var(--spectrum-slider-handle-border-color-key-focus))); outline: 0; diff --git a/components/slider/stories/slider.stories.js b/components/slider/stories/slider.stories.js index 16f8bec7b9a..81850b609ab 100644 --- a/components/slider/stories/slider.stories.js +++ b/components/slider/stories/slider.stories.js @@ -82,7 +82,7 @@ export default { options: ["medium", "large"], }, labelPosition: { - name: "Label Position", + name: "Label position", type: { name: "string" }, table: { type: { summary: "string" }, From 21a01772143a75da14e93a3b771398c1a693e45f Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Fri, 11 Jul 2025 16:45:40 -0400 Subject: [PATCH 14/21] feat(slider): adding new changes and updates to story and css --- components/slider/dist/metadata.json | 1 + components/slider/index.css | 51 ++++++++------------- components/slider/stories/slider.stories.js | 1 + components/slider/stories/slider.test.js | 26 ++++++++++- 4 files changed, 45 insertions(+), 34 deletions(-) diff --git a/components/slider/dist/metadata.json b/components/slider/dist/metadata.json index 70de54fbcd6..38af268e9cb 100644 --- a/components/slider/dist/metadata.json +++ b/components/slider/dist/metadata.json @@ -41,6 +41,7 @@ ".spectrum-Slider--track-height-large .spectrum-Slider-track", ".spectrum-Slider-content", ".spectrum-Slider-content--editable", + ".spectrum-Slider-content--editable .spectrum-Slider-controls", ".spectrum-Slider-controls", ".spectrum-Slider-controls:not(:has(.spectrum-Slider-ticks))", ".spectrum-Slider-fill", diff --git a/components/slider/index.css b/components/slider/index.css index 4c1e7e02b24..62df7240e7c 100644 --- a/components/slider/index.css +++ b/components/slider/index.css @@ -190,6 +190,9 @@ .spectrum-Slider-labelContainer { margin-block-start: 0; + /* This helps prevent the slider from shrinking when the label is long */ + flex: 1; + .spectrum-Slider-label { margin-inline-end: var(--mod-slider-control-to-side-field-label, var(--spectrum-slider-control-to-side-field-label)); } @@ -214,6 +217,11 @@ display: flex; align-items: center; gap: var(--mod-slider-control-to-text-field, var(--spectrum-slider-control-to-text-field)); + + .spectrum-Slider-controls { + /* This allows the text field to grow to design spec inline size */ + flex: 1; + } } .spectrum-Slider-controls { @@ -370,6 +378,8 @@ } .spectrum-Slider-handle { + border-color: var(--highcontrast-slider-handle-border-color, var(--mod-slider-handle-border-color, var(--spectrum-slider-handle-border-color))); + background: var(--highcontrast-slider-handle-background-color, var(--mod-slider-handle-background-color, var(--spectrum-slider-handle-background-color))); position: absolute; inset-inline-start: 0; z-index: 2; @@ -391,8 +401,13 @@ outline: none; + &:hover { + border-color: var(--highcontrast-slider-handle-border-color-hover, var(--mod-slider-handle-border-color-hover, var(--spectrum-slider-handle-border-color-hover))); + } + &:active, &.is-dragged { + border-color: var(--highcontrast-slider-handle-border-color-down, var(--mod-slider-handle-border-color-down, var(--spectrum-slider-handle-border-color-down))); transform: perspective(var(--spectrum-slider-downstate-perspective)) translateZ(var(--spectrum-component-size-difference-down)); } @@ -429,7 +444,11 @@ /* Keyboard focused */ &.is-focused, &:focus, &:focus-visible { + border-color: var(--highcontrast-slider-handle-border-color-key-focus, var(--mod-slider-handle-border-color-key-focus, var(--spectrum-slider-handle-border-color-key-focus))); + outline: 0; + &::before { + box-shadow: 0 0 0 var(--spectrum-focus-indicator-thickness) var(--highcontrast-slider-handle-focus-ring-color-key-focus, var(--mod-slider-handle-focus-ring-color-key-focus, var(--spectrum-slider-handle-focus-ring-color-key-focus))); inline-size: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-slider-focus-indicator-gap)) * 2); block-size: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-slider-focus-indicator-gap)) * 2); } @@ -677,42 +696,10 @@ } } -.spectrum-Slider-handle { - border-color: var(--highcontrast-slider-handle-border-color, var(--mod-slider-handle-border-color, var(--spectrum-slider-handle-border-color))); - background: var(--highcontrast-slider-handle-background-color, var(--mod-slider-handle-background-color, var(--spectrum-slider-handle-background-color))); - - &:hover { - border-color: var(--highcontrast-slider-handle-border-color-hover, var(--mod-slider-handle-border-color-hover, var(--spectrum-slider-handle-border-color-hover))); - } - - /* Keyboard focused with focus indicator. */ - &.is-focused, &:focus, &:focus-visible { - border-color: var(--highcontrast-slider-handle-border-color-key-focus, var(--mod-slider-handle-border-color-key-focus, var(--spectrum-slider-handle-border-color-key-focus))); - outline: 0; - - &::before { - box-shadow: 0 0 0 var(--spectrum-focus-indicator-thickness) var(--highcontrast-slider-handle-focus-ring-color-key-focus, var(--mod-slider-handle-focus-ring-color-key-focus, var(--spectrum-slider-handle-focus-ring-color-key-focus))); - } - } - - &:active, - &.is-dragged { - transform: perspective(var(--spectrum-slider-downstate-perspective)) translateZ(var(--spectrum-component-size-difference-down)); - border-color: var(--highcontrast-slider-handle-border-color-down, var(--mod-slider-handle-border-color-down, var(--spectrum-slider-handle-border-color-down))); - } -} - .spectrum-Slider-input { background: transparent; } -.spectrum-Slider-handle { - &.is-dragged { - border-color: var(--highcontrast-slider-handle-border-color-down, var(--mod-slider-handle-border-color-down, var(--spectrum-slider-handle-border-color-down))); - background: var(--highcontrast-slider-handle-background-color, var(--mod-slider-handle-background-color, var(--spectrum-slider-handle-background-color))); - } -} - .spectrum-Slider--emphasized { .spectrum-Slider-tick:nth-child(-n + 4) { &::after { diff --git a/components/slider/stories/slider.stories.js b/components/slider/stories/slider.stories.js index 81850b609ab..998d1cb5c7d 100644 --- a/components/slider/stories/slider.stories.js +++ b/components/slider/stories/slider.stories.js @@ -80,6 +80,7 @@ export default { }, control: "select", options: ["medium", "large"], + if: { arg: "variant", neq: "ramp" }, }, labelPosition: { name: "Label position", diff --git a/components/slider/stories/slider.test.js b/components/slider/stories/slider.test.js index c7c81eecd28..71ccdd7d03f 100644 --- a/components/slider/stories/slider.test.js +++ b/components/slider/stories/slider.test.js @@ -1,4 +1,4 @@ -import { Variants } from "@spectrum-css/preview/decorators"; +import { Sizes, Variants } from "@spectrum-css/preview/decorators"; import { Template } from "./template.js"; const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1); @@ -358,7 +358,29 @@ export const testData = [ showTicks: true, showTickLabels: true, trackHeight: "large" - } + }, + { + testHeading: "Large Track Height Sizes", + variant: "filled", + Template: (args, context) => { return Sizes({Template: Template, ...args}, context); }, + trackHeight: "large", + withStates: false, + }, + { + testHeading: "Large Track Height Sizes + precise", + variant: "filled", + isPrecise: true, + Template: (args, context) => { return Sizes({Template: Template, ...args}, context); }, + trackHeight: "large", + withStates: false, + }, + { + testHeading: "Sizes + precise", + variant: "filled", + isPrecise: true, + Template: (args, context) => { return Sizes({Template: Template, ...args}, context); }, + withStates: false, + }, ]; export const SliderGroup = Variants({ From 5c52b84daf5eb4a9634b8ccd5954574713656b2c Mon Sep 17 00:00:00 2001 From: Rise Erpelding Date: Thu, 17 Jul 2025 09:13:16 -1000 Subject: [PATCH 15/21] fix(slider): pr fixes - rename fillColor to trackColor, add description for that control - update documentation for offset variant - set field label bottom-to-text passthroughs (should have no visual effect) - use the minimum perspective token for downstate on slider handle rather than calculated perspective - remove focus ring when slider is disabled - shift precise styles to ensure focus styles are applied --- components/slider/dist/metadata.json | 40 ++++++++++++++------- components/slider/index.css | 32 +++++++++-------- components/slider/stories/slider.stories.js | 15 +++----- components/slider/stories/template.js | 4 +-- 4 files changed, 51 insertions(+), 40 deletions(-) diff --git a/components/slider/dist/metadata.json b/components/slider/dist/metadata.json index 38af268e9cb..b6106112966 100644 --- a/components/slider/dist/metadata.json +++ b/components/slider/dist/metadata.json @@ -2,7 +2,6 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-Slider", - ".spectrum-Slider .spectrum-Slider-handle", ".spectrum-Slider .spectrum-Slider-handle.is-focused:before", ".spectrum-Slider--emphasized .spectrum-Slider-fill:before", ".spectrum-Slider--emphasized .spectrum-Slider-ramp .spectrum-Slider-ramp-track-fill", @@ -13,9 +12,6 @@ ".spectrum-Slider--filled:not(.spectrum-Slider--range, .is-disabled, .spectrum-Slider--emphasized) .spectrum-Slider-tick:nth-child(-n + 4):after", ".spectrum-Slider--offset:not(.spectrum-Slider--range, .is-disabled, .spectrum-Slider--emphasized) .spectrum-Slider-tick:nth-child(-n + 4):after", ".spectrum-Slider--precise .spectrum-Slider-handle", - ".spectrum-Slider--precise .spectrum-Slider-handle.is-focused:before", - ".spectrum-Slider--precise .spectrum-Slider-handle:focus-visible:before", - ".spectrum-Slider--precise .spectrum-Slider-handle:focus:before", ".spectrum-Slider--range .spectrum-Slider-tick:nth-child(3):after", ".spectrum-Slider--range .spectrum-Slider-tick:nth-child(4):after", ".spectrum-Slider--range .spectrum-Slider-tick:nth-child(5):after", @@ -50,14 +46,9 @@ ".spectrum-Slider-handle", ".spectrum-Slider-handle.is-dragged", ".spectrum-Slider-handle.is-focused", - ".spectrum-Slider-handle.is-focused:before", ".spectrum-Slider-handle.is-tophandle", ".spectrum-Slider-handle:active", ".spectrum-Slider-handle:before", - ".spectrum-Slider-handle:focus", - ".spectrum-Slider-handle:focus-visible", - ".spectrum-Slider-handle:focus-visible:before", - ".spectrum-Slider-handle:focus:before", ".spectrum-Slider-handle:hover", ".spectrum-Slider-handleContainer", ".spectrum-Slider-input", @@ -95,10 +86,16 @@ ".spectrum-Slider-trackContainer", ".spectrum-Slider-value", ".spectrum-Slider.is-disabled", + ".spectrum-Slider.is-disabled .spectrum-Slider--precise .spectrum-Slider-handle.is-focused:before", + ".spectrum-Slider.is-disabled .spectrum-Slider--precise .spectrum-Slider-handle:focus-visible:before", + ".spectrum-Slider.is-disabled .spectrum-Slider--precise .spectrum-Slider-handle:focus:before", ".spectrum-Slider.is-disabled .spectrum-Slider-controls", ".spectrum-Slider.is-disabled .spectrum-Slider-fill:before", ".spectrum-Slider.is-disabled .spectrum-Slider-handle", + ".spectrum-Slider.is-disabled .spectrum-Slider-handle.is-focused:before", ".spectrum-Slider.is-disabled .spectrum-Slider-handle:active", + ".spectrum-Slider.is-disabled .spectrum-Slider-handle:focus-visible:before", + ".spectrum-Slider.is-disabled .spectrum-Slider-handle:focus:before", ".spectrum-Slider.is-disabled .spectrum-Slider-handle:hover", ".spectrum-Slider.is-disabled .spectrum-Slider-labelContainer", ".spectrum-Slider.is-disabled .spectrum-Slider-ramp + .spectrum-Slider-handle", @@ -108,9 +105,21 @@ ".spectrum-Slider.is-disabled .spectrum-Slider-track:before", ".spectrum-Slider.is-disabled.spectrum-Slider--filled .spectrum-Slider-track:first-child:before", ".spectrum-Slider.is-disabled.spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type, :last-of-type):before", + ".spectrum-Slider.spectrum-Slider--precise:not(.is-disabled) .spectrum-Slider-handle.is-focused:before", + ".spectrum-Slider.spectrum-Slider--precise:not(.is-disabled) .spectrum-Slider-handle:focus-visible:before", + ".spectrum-Slider.spectrum-Slider--precise:not(.is-disabled) .spectrum-Slider-handle:focus:before", ".spectrum-Slider.spectrum-Slider--ramp .spectrum-Slider-handle", ".spectrum-Slider:dir(rtl)", ".spectrum-Slider:dir(rtl) .spectrum-Slider-handle:before", + ".spectrum-Slider:not(.is-disabled) .spectrum-Slider--precise .spectrum-Slider-handle.is-focused:before", + ".spectrum-Slider:not(.is-disabled) .spectrum-Slider--precise .spectrum-Slider-handle:focus-visible:before", + ".spectrum-Slider:not(.is-disabled) .spectrum-Slider--precise .spectrum-Slider-handle:focus:before", + ".spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle.is-focused", + ".spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle.is-focused:before", + ".spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus", + ".spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus-visible", + ".spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus-visible:before", + ".spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus:before", ".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls.is-focused", ".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:active", ".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:focus-within", @@ -266,13 +275,16 @@ "--spectrum-animation-duration-100", "--spectrum-border-width-200", "--spectrum-cjk-line-height-100", + "--spectrum-component-bottom-to-text-100", + "--spectrum-component-bottom-to-text-200", + "--spectrum-component-bottom-to-text-300", + "--spectrum-component-bottom-to-text-75", "--spectrum-component-height-100", "--spectrum-component-height-200", "--spectrum-component-height-300", "--spectrum-component-height-75", "--spectrum-component-size-difference-down", "--spectrum-component-size-minimum-perspective-down", - "--spectrum-component-size-width-ratio-down", "--spectrum-component-top-to-text-100", "--spectrum-component-top-to-text-200", "--spectrum-component-top-to-text-300", @@ -282,8 +294,6 @@ "--spectrum-disabled-background-color", "--spectrum-disabled-border-color", "--spectrum-disabled-content-color", - "--spectrum-downstate-height", - "--spectrum-downstate-width", "--spectrum-field-default-width-extra-large", "--spectrum-field-default-width-large", "--spectrum-field-default-width-medium", @@ -311,7 +321,11 @@ "--spectrum-text-to-visual-75", "--spectrum-track-color" ], - "passthroughs": ["--mod-fieldlabel-top-to-text", "--mod-textfield-width"], + "passthroughs": [ + "--mod-fieldlabel-bottom-to-text", + "--mod-fieldlabel-top-to-text", + "--mod-textfield-width" + ], "high-contrast": [ "--highcontrast-slider-filled-track-fill-color", "--highcontrast-slider-handle-background-color", diff --git a/components/slider/index.css b/components/slider/index.css index 62df7240e7c..c6e42d1a069 100644 --- a/components/slider/index.css +++ b/components/slider/index.css @@ -36,6 +36,7 @@ --spectrum-slider-tick-mark-width: var(--spectrum-border-width-200); --spectrum-slider-tick-mark-border-radius: 2px; --spectrum-slider-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --spectrum-slider-downstate-perspective: var(--spectrum-component-size-minimum-perspective-down); /* colors */ --spectrum-slider-track-color: var(--spectrum-track-color); @@ -77,11 +78,7 @@ /* Field label passthrough */ --mod-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-100); - - .spectrum-Slider-handle { - /* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties -- used to assign downstate perspective */ - --spectrum-slider-downstate-perspective: max(var(--spectrum-downstate-height), var(--spectrum-downstate-width) * var(--spectrum-component-size-width-ratio-down)); - } + --mod-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-100); } .spectrum-Slider--sizeS { @@ -92,12 +89,12 @@ --spectrum-slider-control-to-side-field-label: var(--spectrum-slider-control-to-field-label-side-small); --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-500); --spectrum-slider-inline-size: var(--spectrum-field-default-width-small); - --spectrum-slider-downstate-perspective: var(--spectrum-component-size-minimum-perspective-down); --spectrum-slider-precision-handle-height: var(--spectrum-slider-precision-handle-height-small); --spectrum-slider-control-to-text-field: var(--spectrum-slider-control-to-text-field-small); --spectrum-slider-editable-control-to-field-label: var(--spectrum-slider-control-to-field-label-editable-small); --mod-textfield-width: var(--spectrum-slider-editable-field-inline-size-small); --mod-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-75); + --mod-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-75); } .spectrum-Slider--sizeL { @@ -114,6 +111,7 @@ --spectrum-slider-editable-control-to-field-label: var(--spectrum-slider-control-to-field-label-editable-large); --mod-textfield-width: var(--spectrum-slider-editable-field-inline-size-large); --mod-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-200); + --mod-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-200); /* TODO: placeholder value for sideLabel variant value width */ --spectrum-slider-value-inline-size: 18px; @@ -132,6 +130,7 @@ --spectrum-slider-editable-control-to-field-label: var(--spectrum-slider-control-to-field-label-editable-extra-large); --mod-textfield-width: var(--spectrum-slider-editable-field-inline-size-extra-large); --mod-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-300); + --mod-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-300); /* TODO: placeholder value for sideLabel variant value width */ --spectrum-slider-value-inline-size: 22px; @@ -172,14 +171,7 @@ inset-block-start: calc(var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / 2 - var(--spectrum-slider-precision-handle-height) / 2); margin-inline-start: calc((var(--spectrum-slider-precision-handle-width) + var(--spectrum-slider-handle-border-width)) * -0.5); - &.is-focused, &:focus, &:focus-visible { - &::before { - border-radius: var(--spectrum-slider-handle-border-radius); - block-size: calc(var(--spectrum-slider-precision-handle-height) + var(--spectrum-slider-focus-indicator-gap) * 2); - inline-size: calc(var(--spectrum-slider-precision-handle-width) + var(--spectrum-slider-focus-indicator-gap) * 2); - transition: none; - } - } + } } @@ -443,7 +435,7 @@ } /* Keyboard focused */ - &.is-focused, &:focus, &:focus-visible { + .spectrum-Slider:not(.is-disabled) &.is-focused, .spectrum-Slider:not(.is-disabled) &:focus, .spectrum-Slider:not(.is-disabled) &:focus-visible { border-color: var(--highcontrast-slider-handle-border-color-key-focus, var(--mod-slider-handle-border-color-key-focus, var(--spectrum-slider-handle-border-color-key-focus))); outline: 0; @@ -813,6 +805,16 @@ } } +/* Highly specific override: ensure precise handle focus ring matches the thin handle shape for enabled sliders */ +.spectrum-Slider.spectrum-Slider--precise:not(.is-disabled) .spectrum-Slider-handle.is-focused::before, +.spectrum-Slider.spectrum-Slider--precise:not(.is-disabled) .spectrum-Slider-handle:focus::before, +.spectrum-Slider.spectrum-Slider--precise:not(.is-disabled) .spectrum-Slider-handle:focus-visible::before { + border-radius: var(--spectrum-slider-handle-border-radius); + block-size: calc(var(--spectrum-slider-precision-handle-height) + var(--spectrum-slider-focus-indicator-gap) * 2); + inline-size: calc(var(--spectrum-slider-precision-handle-width) + var(--spectrum-slider-focus-indicator-gap) * 2); + transition: none; +} + @media (forced-colors: active) { .spectrum-Slider { --highcontrast-slider-track-color: ButtonText; diff --git a/components/slider/stories/slider.stories.js b/components/slider/stories/slider.stories.js index 998d1cb5c7d..0dba088e3b2 100644 --- a/components/slider/stories/slider.stories.js +++ b/components/slider/stories/slider.stories.js @@ -1,4 +1,4 @@ -import { Sizes, withDownStateDimensionCapture } from "@spectrum-css/preview/decorators"; +import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isActive, isDisabled, isEmphasized, isFocused, isHovered, size } from "@spectrum-css/preview/types"; import metadata from "../dist/metadata.json"; @@ -92,8 +92,9 @@ export default { control: "select", options: ["top", "side"], }, - fillColor: { - name: "Fill color", + trackColor: { + name: "Track color", + description: "Supports standard color input or any valid input for the background property such as, linear-gradient(red, blue) or transparent. Not available for ramp variant.", type: { name: "string" }, table: { type: { summary: "string" }, @@ -187,18 +188,12 @@ export default { type: "figma", url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=842-1056", }, - downState: { - selectors: [".spectrum-Slider-handle:not(:disabled)"], - }, packageJson, metadata, status: { type: "migrated", }, }, - decorators: [ - withDownStateDimensionCapture, - ], tags: ["migrated"], }; @@ -255,7 +250,7 @@ Sizing.parameters = { }; /** - * If the value represents an offset, the fill start can be set to represent the point of origin. The handle is positoned in the center of the track where the value is 0. + * If the value represents an offset, the fill start or end can be set to represent the point of origin. This allows the slider fill to extend from the origin toward the handle, in either direction along the track. */ export const Offset = Template.bind({}); Offset.args = { diff --git a/components/slider/stories/template.js b/components/slider/stories/template.js index fd2cb78babd..e70fde57663 100644 --- a/components/slider/stories/template.js +++ b/components/slider/stories/template.js @@ -20,7 +20,7 @@ export const Template = ({ variant, trackHeight, labelPosition, - fillColor, + trackColor, showTicks = false, showTickLabels = false, isDisabled = false, @@ -167,7 +167,7 @@ export const Template = ({ })} id=${ifDefined(id)} style=${styleMap({ - "--spectrum-slider-track-color": fillColor ? fillColor : undefined, + "--spectrum-slider-track-color": trackColor ? trackColor : undefined, ...customStyles, })} role=${ifDefined(finalValues.length > 1 ? "group" : undefined)} From 7ca42d78a6d02e4128ca484904ce62f9c8516acb Mon Sep 17 00:00:00 2001 From: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com> Date: Thu, 17 Jul 2025 10:10:31 -1000 Subject: [PATCH 16/21] fix(slider): Update components/slider/dist/metadata.json Addresses markdownlint-fix reported by reviewdog Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- components/slider/dist/metadata.json | 3 --- 1 file changed, 3 deletions(-) diff --git a/components/slider/dist/metadata.json b/components/slider/dist/metadata.json index b6106112966..02edfe1cb71 100644 --- a/components/slider/dist/metadata.json +++ b/components/slider/dist/metadata.json @@ -111,9 +111,6 @@ ".spectrum-Slider.spectrum-Slider--ramp .spectrum-Slider-handle", ".spectrum-Slider:dir(rtl)", ".spectrum-Slider:dir(rtl) .spectrum-Slider-handle:before", - ".spectrum-Slider:not(.is-disabled) .spectrum-Slider--precise .spectrum-Slider-handle.is-focused:before", - ".spectrum-Slider:not(.is-disabled) .spectrum-Slider--precise .spectrum-Slider-handle:focus-visible:before", - ".spectrum-Slider:not(.is-disabled) .spectrum-Slider--precise .spectrum-Slider-handle:focus:before", ".spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle.is-focused", ".spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle.is-focused:before", ".spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus", From 9fef7576893b5810b2233332f57415c9e510bd10 Mon Sep 17 00:00:00 2001 From: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com> Date: Thu, 17 Jul 2025 10:10:44 -1000 Subject: [PATCH 17/21] Update components/slider/dist/metadata.json Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- components/slider/dist/metadata.json | 1 - 1 file changed, 1 deletion(-) diff --git a/components/slider/dist/metadata.json b/components/slider/dist/metadata.json index 02edfe1cb71..adf2e79c853 100644 --- a/components/slider/dist/metadata.json +++ b/components/slider/dist/metadata.json @@ -92,7 +92,6 @@ ".spectrum-Slider.is-disabled .spectrum-Slider-controls", ".spectrum-Slider.is-disabled .spectrum-Slider-fill:before", ".spectrum-Slider.is-disabled .spectrum-Slider-handle", - ".spectrum-Slider.is-disabled .spectrum-Slider-handle.is-focused:before", ".spectrum-Slider.is-disabled .spectrum-Slider-handle:active", ".spectrum-Slider.is-disabled .spectrum-Slider-handle:focus-visible:before", ".spectrum-Slider.is-disabled .spectrum-Slider-handle:focus:before", From 1b1ebecd5d700515cf58490def78494fc95fc1bd Mon Sep 17 00:00:00 2001 From: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com> Date: Thu, 17 Jul 2025 10:11:33 -1000 Subject: [PATCH 18/21] Update components/slider/dist/metadata.json Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- components/slider/dist/metadata.json | 3 --- 1 file changed, 3 deletions(-) diff --git a/components/slider/dist/metadata.json b/components/slider/dist/metadata.json index adf2e79c853..68aac5a311b 100644 --- a/components/slider/dist/metadata.json +++ b/components/slider/dist/metadata.json @@ -86,9 +86,6 @@ ".spectrum-Slider-trackContainer", ".spectrum-Slider-value", ".spectrum-Slider.is-disabled", - ".spectrum-Slider.is-disabled .spectrum-Slider--precise .spectrum-Slider-handle.is-focused:before", - ".spectrum-Slider.is-disabled .spectrum-Slider--precise .spectrum-Slider-handle:focus-visible:before", - ".spectrum-Slider.is-disabled .spectrum-Slider--precise .spectrum-Slider-handle:focus:before", ".spectrum-Slider.is-disabled .spectrum-Slider-controls", ".spectrum-Slider.is-disabled .spectrum-Slider-fill:before", ".spectrum-Slider.is-disabled .spectrum-Slider-handle", From b8e9e4e20a0032541b37b8339109aa90f3acfa69 Mon Sep 17 00:00:00 2001 From: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com> Date: Thu, 17 Jul 2025 10:11:42 -1000 Subject: [PATCH 19/21] Update components/slider/dist/metadata.json Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- components/slider/dist/metadata.json | 2 -- 1 file changed, 2 deletions(-) diff --git a/components/slider/dist/metadata.json b/components/slider/dist/metadata.json index 68aac5a311b..7eaea714d74 100644 --- a/components/slider/dist/metadata.json +++ b/components/slider/dist/metadata.json @@ -90,8 +90,6 @@ ".spectrum-Slider.is-disabled .spectrum-Slider-fill:before", ".spectrum-Slider.is-disabled .spectrum-Slider-handle", ".spectrum-Slider.is-disabled .spectrum-Slider-handle:active", - ".spectrum-Slider.is-disabled .spectrum-Slider-handle:focus-visible:before", - ".spectrum-Slider.is-disabled .spectrum-Slider-handle:focus:before", ".spectrum-Slider.is-disabled .spectrum-Slider-handle:hover", ".spectrum-Slider.is-disabled .spectrum-Slider-labelContainer", ".spectrum-Slider.is-disabled .spectrum-Slider-ramp + .spectrum-Slider-handle", From c1581eec16d86c45b7721dc72a4c4d4b668e19e2 Mon Sep 17 00:00:00 2001 From: Rise Erpelding Date: Mon, 28 Jul 2025 13:40:05 -0500 Subject: [PATCH 20/21] test(slider): testing breakup & refresh --- components/slider/stories/slider.stories.js | 15 +- components/slider/stories/slider.test.js | 374 +++++++++++--------- 2 files changed, 217 insertions(+), 172 deletions(-) diff --git a/components/slider/stories/slider.stories.js b/components/slider/stories/slider.stories.js index 0dba088e3b2..0ceebdbfd03 100644 --- a/components/slider/stories/slider.stories.js +++ b/components/slider/stories/slider.stories.js @@ -3,7 +3,7 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isActive, isDisabled, isEmphasized, isFocused, isHovered, size } from "@spectrum-css/preview/types"; import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; -import { SliderGroup } from "./slider.test.js"; +import { OffsetGroup, RampGroup, RangeGroup, SliderGroup } from "./slider.test.js"; import { Template } from "./template.js"; /** @@ -415,3 +415,16 @@ WithForcedColors.parameters = { modes: disableDefaultModes, }, }; + +// test with /?path=/story/components-slider--offset-tests&globals=testingPreview:!true +export const OffsetTests = OffsetGroup.bind({}); +OffsetTests.tags = ["!autodocs", "!dev"]; + +// test with /?path=/story/components-slider--ramp-tests&globals=testingPreview:!true + +export const RampTests = RampGroup.bind({}); +RampTests.tags = ["!autodocs", "!dev"]; + +// test with /?path=/story/components-slider--range-tests&globals=testingPreview:!true +export const RangeTests = RangeGroup.bind({}); +RangeTests.tags = ["!autodocs", "!dev"]; diff --git a/components/slider/stories/slider.test.js b/components/slider/stories/slider.test.js index 71ccdd7d03f..7f087bd0e3e 100644 --- a/components/slider/stories/slider.test.js +++ b/components/slider/stories/slider.test.js @@ -1,24 +1,11 @@ import { Sizes, Variants } from "@spectrum-css/preview/decorators"; import { Template } from "./template.js"; -const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1); - export const testData = [ - ...["filled", "offset", "ramp"].map((variant) => ({ - testHeading: capitalize(variant), - variant, - values: variant === "offset" ? [-15] : [15] - })), + // Default variants { - testHeading: "Range", - variant: "filled", - values: [10, 20] - }, - { - testHeading: "With Ticks", - variant: "filled", - showTicks: true, - showTickLabels: true + testHeading: "Default filled", + variant: "filled" }, { testHeading: "Precise", @@ -26,133 +13,65 @@ export const testData = [ isPrecise: true }, { - testHeading: "Large Track", - variant: "filled", - trackHeight: "large" - }, - { - testHeading: "Precise Large Track", - variant: "filled", - isPrecise: true, - trackHeight: "large" - }, - // Ramp variants - { - testHeading: "Ramp Precise", - variant: "ramp", - isPrecise: true - }, - // Range variants - { - testHeading: "Range Precise", + testHeading: "Large track", variant: "filled", - values: [10, 20], - isPrecise: true - }, - { - testHeading: "Range Large Track", - variant: "filled", - values: [10, 20], trackHeight: "large" }, { - testHeading: "Range Precise Large Track", + testHeading: "Precise large track", variant: "filled", - values: [10, 20], - isPrecise: true, - trackHeight: "large" - }, - // Offset variants - { - testHeading: "Offset Precise", - variant: "offset", - values: [-15], - isPrecise: true - }, - { - testHeading: "Offset Large Track", - variant: "offset", - values: [-15], - trackHeight: "large" - }, - { - testHeading: "Offset Precise Large Track", - variant: "offset", - values: [-15], isPrecise: true, trackHeight: "large" }, // Ticks variants { - testHeading: "Ticks Precise", + testHeading: "With ticks", variant: "filled", showTicks: true, - showTickLabels: true, - isPrecise: true + showTickLabels: true }, { - testHeading: "Ticks Large Track", + testHeading: "Precise with ticks", variant: "filled", showTicks: true, showTickLabels: true, - trackHeight: "large" + isPrecise: true }, { - testHeading: "Ticks Precise Large Track", + testHeading: "Large track with ticks", variant: "filled", showTicks: true, showTickLabels: true, - isPrecise: true, trackHeight: "large" }, { - testHeading: "Ticks Range Large Track", + testHeading: "Large track with ticks and precise", variant: "filled", showTicks: true, showTickLabels: true, - values: [10, 20], - trackHeight: "large" - }, - { - testHeading: "Ticks Offset Large Track", - variant: "offset", - showTicks: true, - showTickLabels: true, - values: [-15], + isPrecise: true, trackHeight: "large" }, // Side label variants { - testHeading: "Side Label", + testHeading: "Side label", variant: "filled", labelPosition: "side" }, { - testHeading: "Side Label Precise", + testHeading: "Side label with precise", variant: "filled", labelPosition: "side", isPrecise: true }, { - testHeading: "Side Label Large Track", + testHeading: "Large track with side label", variant: "filled", labelPosition: "side", trackHeight: "large" }, { - testHeading: "Side Label Range", - variant: "filled", - labelPosition: "side", - values: [10, 20] - }, - { - testHeading: "Side Label Offset", - variant: "offset", - labelPosition: "side", - values: [-15] - }, - { - testHeading: "Side Label Ticks", + testHeading: "Side label with ticks", variant: "filled", labelPosition: "side", showTicks: true, @@ -165,94 +84,68 @@ export const testData = [ isEditable: true }, { - testHeading: "Editable Precise", + testHeading: "Editable with precise", variant: "filled", isEditable: true, isPrecise: true }, { - testHeading: "Editable Large Track", + testHeading: "Editable with large track", variant: "filled", isEditable: true, trackHeight: "large" }, { - testHeading: "Editable Offset", - variant: "offset", - isEditable: true, - values: [-15] - }, - { - testHeading: "Editable Side Label", + testHeading: "Editable with side label", variant: "filled", isEditable: true, labelPosition: "side" }, // No label variants { - testHeading: "No Label", + testHeading: "No label", variant: "filled", label: "" }, { - testHeading: "No Label Precise", + testHeading: "No label with precise", variant: "filled", label: "", isPrecise: true }, { - testHeading: "No Label Large Track", + testHeading: "No label with large track", variant: "filled", label: "", trackHeight: "large" }, { - testHeading: "No Label Range", - variant: "filled", - label: "", - values: [10, 20] - }, - { - testHeading: "No Label Offset", - variant: "offset", - label: "", - values: [-15] - }, - { - testHeading: "No Label Ticks", + testHeading: "No label with ticks", variant: "filled", label: "", showTicks: true, showTickLabels: true }, - // No label editable variants { - testHeading: "No Label Editable", + testHeading: "No label editable", variant: "filled", label: "", isEditable: true }, { - testHeading: "No Label Editable Precise", + testHeading: "No label editable with precise", variant: "filled", label: "", isEditable: true, isPrecise: true }, { - testHeading: "No Label Editable Large Track", + testHeading: "No label editable with large track", variant: "filled", label: "", isEditable: true, trackHeight: "large" }, - { - testHeading: "No Label Editable Offset", - variant: "offset", - label: "", - isEditable: true, - values: [-15] - }, // Disabled variants { testHeading: "Disabled", @@ -260,57 +153,148 @@ export const testData = [ isDisabled: true }, { - testHeading: "Disabled + precise", + testHeading: "Disabled with precise", variant: "filled", isDisabled: true, isPrecise: true }, { - testHeading: "Disabled + precise + large track", + testHeading: "Disabled with precise and large track", variant: "filled", isDisabled: true, isPrecise: true, trackHeight: "large" }, + // Emphasized variants { testHeading: "Emphasized", variant: "filled", isEmphasized: true }, { - testHeading: "Emphasized Precise", + testHeading: "Emphasized with precise", variant: "filled", isEmphasized: true, isPrecise: true }, { - testHeading: "Emphasized Large Track", + testHeading: "Emphasized with large track", variant: "filled", isEmphasized: true, trackHeight: "large" }, { - testHeading: "Emphasized Range", + testHeading: "Emphasized with ticks", + variant: "filled", + isEmphasized: true, + showTicks: true, + showTickLabels: true + }, + { + testHeading: "Emphasized with ticks and large track", variant: "filled", isEmphasized: true, + showTicks: true, + showTickLabels: true, + trackHeight: "large" + }, + // Sizes variants + { + testHeading: "Large track height sizes", + variant: "filled", + Template: (args, context) => { return Sizes({Template: Template, ...args}, context); }, + trackHeight: "large", + withStates: false, + }, + { + testHeading: "Large track height sizes with precise", + variant: "filled", + isPrecise: true, + Template: (args, context) => { return Sizes({Template: Template, ...args}, context); }, + trackHeight: "large", + withStates: false, + }, + { + testHeading: "Sizes with precise", + variant: "filled", + isPrecise: true, + Template: (args, context) => { return Sizes({Template: Template, ...args}, context); }, + withStates: false, + }, +]; + +const rangeTestData = [ + // Default variants + { + testHeading: "Range", + variant: "filled", values: [10, 20] }, { - testHeading: "Emphasized Range Precise", + testHeading: "Range with precise", + variant: "filled", + values: [10, 20], + isPrecise: true + }, + { + testHeading: "Range with large track", + variant: "filled", + values: [10, 20], + trackHeight: "large" + }, + { + testHeading: "Range with precise and large track", + variant: "filled", + values: [10, 20], + isPrecise: true, + trackHeight: "large" + }, + // Ticks variants + { + testHeading: "Range with ticks and large track", + variant: "filled", + showTicks: true, + showTickLabels: true, + values: [10, 20], + trackHeight: "large" + }, + // Side label variants + { + testHeading: "Range with side label", + variant: "filled", + labelPosition: "side", + values: [10, 20] + }, + // No label variants + { + testHeading: "Range with no label", + variant: "filled", + label: "", + values: [10, 20] + }, + // Emphasized variants + { + testHeading: "Emphasized range", + variant: "filled", + isEmphasized: true, + values: [10, 20] + }, + { + testHeading: "Emphasized range with precise", variant: "filled", isEmphasized: true, values: [10, 20], isPrecise: true }, { - testHeading: "Emphasized Range Large Track", + testHeading: "Emphasized range with large track", variant: "filled", isEmphasized: true, values: [10, 20], trackHeight: "large" }, { - testHeading: "Emphasized Range Precise Large Track", + testHeading: "Emphasized range with precise and large track", variant: "filled", isEmphasized: true, values: [10, 20], @@ -318,72 +302,115 @@ export const testData = [ trackHeight: "large" }, { - testHeading: "Emphasized Range Side Label", + testHeading: "Emphasized range with side label", variant: "filled", isEmphasized: true, values: [10, 20], labelPosition: "side" }, { - testHeading: "Emphasized Range Editable", + testHeading: "Emphasized range with editable", variant: "filled", isEmphasized: true, values: [10, 20], isEditable: true }, { - testHeading: "Emphasized Range No Label", + testHeading: "Emphasized range with no label", variant: "filled", isEmphasized: true, values: [10, 20], label: "" }, +]; + +const rampTestData = [ + // Default variants + { + testHeading: "Ramp", + variant: "ramp" + }, + { + testHeading: "Ramp with precise", + variant: "ramp", + isPrecise: true + }, +]; + +const offsetTestData = [ + // Default variants { - testHeading: "Emphasized Offset", + testHeading: "Offset", variant: "offset", - isEmphasized: true, values: [-15] }, { - testHeading: "Emphasized Ticks", - variant: "filled", - isEmphasized: true, - showTicks: true, - showTickLabels: true + testHeading: "Offset with precise", + variant: "offset", + values: [-15], + isPrecise: true }, { - testHeading: "Emphasized Ticks Large Track", - variant: "filled", - isEmphasized: true, + testHeading: "Offset with large track", + variant: "offset", + values: [-15], + trackHeight: "large" + }, + { + testHeading: "Offset with precise and large track", + variant: "offset", + values: [-15], + isPrecise: true, + trackHeight: "large" + }, + // Ticks variants + { + testHeading: "Offset with ticks and large track", + variant: "offset", showTicks: true, showTickLabels: true, + values: [-15], trackHeight: "large" }, + // Side label variants { - testHeading: "Large Track Height Sizes", - variant: "filled", - Template: (args, context) => { return Sizes({Template: Template, ...args}, context); }, - trackHeight: "large", - withStates: false, + testHeading: "Offset with side label", + variant: "offset", + labelPosition: "side", + values: [-15] }, + // Editable variants { - testHeading: "Large Track Height Sizes + precise", - variant: "filled", - isPrecise: true, - Template: (args, context) => { return Sizes({Template: Template, ...args}, context); }, - trackHeight: "large", - withStates: false, + testHeading: "Offset with editable", + variant: "offset", + isEditable: true, + values: [-15] }, + // No label variants { - testHeading: "Sizes + precise", - variant: "filled", - isPrecise: true, - Template: (args, context) => { return Sizes({Template: Template, ...args}, context); }, - withStates: false, + testHeading: "Offset with no label", + variant: "offset", + label: "", + values: [-15] + }, + { + testHeading: "Offset with no label and editable", + variant: "offset", + label: "", + isEditable: true, + values: [-15] + }, + // Emphasized variants + { + testHeading: "Emphasized offset", + variant: "offset", + isEmphasized: true, + values: [-15] }, ]; -export const SliderGroup = Variants({ +// Helper function to create a group with specific test data +const createGroup = (testData) => Variants({ Template, testData, stateData: [ @@ -410,3 +437,8 @@ export const SliderGroup = Variants({ } ] }); + +export const SliderGroup = createGroup(testData); +export const RangeGroup = createGroup(rangeTestData); +export const RampGroup = createGroup(rampTestData); +export const OffsetGroup = createGroup(offsetTestData); From ae30fb46c275836ab4969afe1de28584773b3f80 Mon Sep 17 00:00:00 2001 From: Rise Erpelding Date: Mon, 28 Jul 2025 13:48:39 -0500 Subject: [PATCH 21/21] test(slider): combine into 2 testing stories instead of 4 --- components/slider/stories/slider.stories.js | 17 ++++------------- components/slider/stories/slider.test.js | 4 +--- 2 files changed, 5 insertions(+), 16 deletions(-) diff --git a/components/slider/stories/slider.stories.js b/components/slider/stories/slider.stories.js index 0ceebdbfd03..3b69d70d1f5 100644 --- a/components/slider/stories/slider.stories.js +++ b/components/slider/stories/slider.stories.js @@ -3,7 +3,7 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isActive, isDisabled, isEmphasized, isFocused, isHovered, size } from "@spectrum-css/preview/types"; import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; -import { OffsetGroup, RampGroup, RangeGroup, SliderGroup } from "./slider.test.js"; +import { SliderGroup, VariantGroup } from "./slider.test.js"; import { Template } from "./template.js"; /** @@ -416,15 +416,6 @@ WithForcedColors.parameters = { }, }; -// test with /?path=/story/components-slider--offset-tests&globals=testingPreview:!true -export const OffsetTests = OffsetGroup.bind({}); -OffsetTests.tags = ["!autodocs", "!dev"]; - -// test with /?path=/story/components-slider--ramp-tests&globals=testingPreview:!true - -export const RampTests = RampGroup.bind({}); -RampTests.tags = ["!autodocs", "!dev"]; - -// test with /?path=/story/components-slider--range-tests&globals=testingPreview:!true -export const RangeTests = RangeGroup.bind({}); -RangeTests.tags = ["!autodocs", "!dev"]; +// test with /?path=/story/components-slider--variant-tests&globals=testingPreview:!true +export const VariantTests = VariantGroup.bind({}); +VariantTests.tags = ["!autodocs", "!dev"]; diff --git a/components/slider/stories/slider.test.js b/components/slider/stories/slider.test.js index 7f087bd0e3e..c36e23fc5fd 100644 --- a/components/slider/stories/slider.test.js +++ b/components/slider/stories/slider.test.js @@ -439,6 +439,4 @@ const createGroup = (testData) => Variants({ }); export const SliderGroup = createGroup(testData); -export const RangeGroup = createGroup(rangeTestData); -export const RampGroup = createGroup(rampTestData); -export const OffsetGroup = createGroup(offsetTestData); +export const VariantGroup = createGroup([...rangeTestData, ...rampTestData, ...offsetTestData]);