diff --git a/.changeset/shy-actors-behave.md b/.changeset/shy-actors-behave.md new file mode 100644 index 00000000000..aecaf4fbf7e --- /dev/null +++ b/.changeset/shy-actors-behave.md @@ -0,0 +1,17 @@ +--- +"@spectrum-css/slider": major +--- + +### 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 diff --git a/components/slider/dist/metadata.json b/components/slider/dist/metadata.json index 66ce6fecc86..bee42f36315 100644 --- a/components/slider/dist/metadata.json +++ b/components/slider/dist/metadata.json @@ -2,9 +2,21 @@ "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", + ".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", - ".spectrum-Slider--ramp .spectrum-Slider-handle", + ".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", @@ -13,9 +25,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", @@ -23,8 +34,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", @@ -43,20 +57,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", @@ -95,14 +114,17 @@ ], "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-tick-mark-color", + "--mod-slider-emphasized-track-fill-color", "--mod-slider-font-size", "--mod-slider-handle-background-color", "--mod-slider-handle-background-color-disabled", @@ -113,28 +135,28 @@ "--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-gap", "--mod-slider-handle-size", + "--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", "--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-fill-color", "--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", - "--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", @@ -144,9 +166,7 @@ "--mod-slider-track-fill-color", "--mod-slider-track-fill-color-disabled", "--mod-slider-track-fill-thickness", - "--mod-slider-track-handleoffset", - "--mod-slider-track-margin-offset", - "--mod-slider-track-middle-handleoffset", + "--mod-slider-track-height-medium", "--mod-slider-track-thickness", "--mod-slider-value-inline-size", "--mod-slider-value-side-padding-inline" @@ -155,11 +175,32 @@ "--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-tick-mark-color", + "--spectrum-slider-emphasized-track-fill-color", "--spectrum-slider-font-size", "--spectrum-slider-handle-background-color", "--spectrum-slider-handle-background-color-disabled", @@ -170,38 +211,37 @@ "--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", + "--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-ramp-handle-background-color", - "--spectrum-slider-ramp-handle-border-color-active", - "--spectrum-slider-ramp-track-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-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", - "--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", @@ -211,14 +251,14 @@ "--spectrum-slider-track-fill-color", "--spectrum-slider-track-fill-color-disabled", "--spectrum-slider-track-fill-thickness", - "--spectrum-slider-track-handleoffset", - "--spectrum-slider-track-margin-offset", - "--spectrum-slider-track-middle-handleoffset", - "--spectrum-slider-track-thickness", + "--spectrum-slider-track-height-large", + "--spectrum-slider-track-height-medium", "--spectrum-slider-value-inline-size", "--spectrum-slider-value-side-padding-inline" ], "global": [ + "--spectrum-accent-color-1000", + "--spectrum-accent-content-color-default", "--spectrum-animation-duration-100", "--spectrum-border-width-200", "--spectrum-cjk-line-height-100", @@ -226,21 +266,32 @@ "--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", "--spectrum-corner-radius-500", + "--spectrum-default-font-style", "--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", "--spectrum-font-size-100", "--spectrum-font-size-200", + "--spectrum-font-size-300", "--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", @@ -248,13 +299,12 @@ "--spectrum-line-height-100", "--spectrum-logical-rotation", "--spectrum-neutral-content-color-default", - "--spectrum-spacing-100", - "--spectrum-spacing-200", + "--spectrum-regular-font-weight", "--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", @@ -268,12 +318,11 @@ "--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", "--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 cfaf3582bdf..a8cfcab13a8 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-handle-size: var(--spectrum-slider-handle-size-medium); + --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-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); + --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; @@ -31,82 +33,104 @@ --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-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); /* 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: transparent; - --spectrum-slider-handle-background-color-disabled: transparent; - --spectrum-slider-ramp-handle-background-color: var(--spectrum-gray-75); + --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-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-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-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); + --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 */ + --spectrum-slider-downstate-perspective: max(var(--spectrum-downstate-height), var(--spectrum-downstate-width) * var(--spectrum-component-size-width-ratio-down)); + } } .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-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-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; } .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-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-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; @@ -119,6 +143,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; @@ -132,6 +157,32 @@ } } +.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); + margin-inline-start: calc((var(--spectrum-slider-precision-handle-width) + var(--spectrum-slider-handle-border-width)) * -0.5); + + &.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; @@ -144,14 +195,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)); @@ -159,28 +206,39 @@ } } +.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; cursor: pointer; position: relative; z-index: auto; + inline-size: 100%; &:not(:has(.spectrum-Slider-ticks)) { display: flex; 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. @@ -204,8 +262,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; @@ -243,10 +299,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 */ } @@ -254,7 +308,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)); } @@ -263,7 +316,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; } @@ -281,10 +333,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 { @@ -293,11 +343,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 { @@ -309,10 +357,7 @@ .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%; @@ -339,7 +384,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; @@ -347,7 +392,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, @@ -427,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)); @@ -457,12 +504,8 @@ /* 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-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 { @@ -474,8 +517,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 { @@ -503,6 +546,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; @@ -521,6 +571,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); @@ -594,9 +651,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(--highcontrast-slider-filled-track-fill-color, var(--mod-slider-ramp-track-fill-color, var(--spectrum-slider-track-fill-color))); } } @@ -619,27 +694,15 @@ &: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--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; } -.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))); @@ -647,6 +710,33 @@ } } +.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--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-filled-track, var(--mod-slider-tick-mark-color-filled-track, var(--spectrum-slider-tick-mark-color-filled-track))); + } + } +} + +.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-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 { @@ -654,6 +744,17 @@ 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-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))); } } @@ -674,14 +775,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))); } } @@ -712,7 +812,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, var(--mod-slider-tick-mark-color, var(--spectrum-slider-tick-mark-color))); } } @@ -735,6 +835,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; @@ -744,11 +845,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-ramp-handle-border-color-active: ButtonFace; - --highcontrast-slider-ramp-handle-background-color: ButtonFace; - + --highcontrast-slider-handle-disabled-background-color: Canvas; --highcontrast-slider-label-text-color: CanvasText; --highcontrast-slider-label-text-color-disabled: GrayText; @@ -770,8 +867,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 1d6f5b9d479..a1eabe79e7d 100644 --- a/components/slider/stories/slider.stories.js +++ b/components/slider/stories/slider.stories.js @@ -1,6 +1,6 @@ -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 { 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"; @@ -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,27 @@ export default { control: "boolean", if: { arg: "showTicks", truthy: true }, }, + isPrecise: { + name: "Precise", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "Component", + }, + control: "boolean", + }, + isEditable: { + name: "Editable", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "Component", + }, + control: "boolean", + }, + isEmphasized, + isActive, + isHovered, isDisabled, isFocused: { ...isFocused, @@ -121,17 +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: { @@ -144,16 +181,29 @@ 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. + * 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 = {}; +Default.args = { + variant: "filled", +}; // ********* DOCS ONLY ********* // /** @@ -162,6 +212,7 @@ Default.args = {}; export const WithoutLabel = Template.bind({}); WithoutLabel.args = { label: "", + variant: "filled", }; WithoutLabel.tags = ["!dev"]; WithoutLabel.storyName = "Without label"; @@ -185,37 +236,23 @@ 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. */ -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, @@ -234,7 +271,7 @@ Ramp.parameters = { export const Range = Template.bind({}); Range.args = { ...Default.args, - values: [14, 16], + values: [10, 20], }; Range.tags = ["!dev"]; Range.parameters = { @@ -287,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 22777744fd4..12539ae25fa 100644 --- a/components/slider/stories/slider.test.js +++ b/components/slider/stories/slider.test.js @@ -1,69 +1,390 @@ 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 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", + 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 905fe770b40..1f2ebd6c454 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"; @@ -17,22 +18,29 @@ export const Template = ({ step = 2, values = [], variant, + trackHeight, labelPosition, fillColor, 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; @@ -68,7 +82,10 @@ export const Template = ({ const ticks = []; for (let i = from; i <= to; i += step) { ticks.push(html` -
+
${when(showTickLabels, () => html`${i}`, undefined)}
@@ -84,7 +101,9 @@ export const Template = ({
1, [`${rootClass}--filled`]: variant === "filled", [`${rootClass}--tick`]: showTicks, + [`${rootClass}--track-height-${trackHeight}`]: trackHeight, + [`${rootClass}--precise`]: isPrecise, + [`${rootClass}--emphasized`]: isEmphasized, "is-disabled": isDisabled, [`${rootClass}--sideLabel`]: labelPosition === "side", ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), @@ -125,7 +148,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)} @@ -151,7 +173,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)}%`, }) )} >
` @@ -220,7 +242,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 d1573c98a11..2ab158ac640 100644 --- a/tokens/custom/large-vars.css +++ b/tokens/custom/large-vars.css @@ -101,6 +101,30 @@ --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-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); diff --git a/tokens/custom/medium-vars.css b/tokens/custom/medium-vars.css index d9f08666d34..61887e42943 100644 --- a/tokens/custom/medium-vars.css +++ b/tokens/custom/medium-vars.css @@ -99,6 +99,30 @@ --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-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);