diff --git a/components/fieldlabel/index.css b/components/fieldlabel/index.css index 03ac17104f2..503d3ccc0bd 100644 --- a/components/fieldlabel/index.css +++ b/components/fieldlabel/index.css @@ -11,22 +11,23 @@ governing permissions and limitations under the License. */ .spectrum-FieldLabel { + --spectrum-fieldlabel-min-height: var(--spectrum-component-height-75); --spectrum-fieldlabel-color: var(--spectrum-neutral-subdued-content-color-default); --spectrum-field-label-top-to-asterisk: var(--spectrum-field-label-top-to-asterisk-medium); --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium); --spectrum-fieldlabel-font-weight: var(--spectrum-regular-font-weight); + --spectrum-fieldlabel-line-height: var(--spectrum-line-height-100); + --spectrum-fieldlabel-line-height-cjk: var(--spectrum-cjk-line-height-100); } .spectrum-FieldLabel--sizeS { + --spectrum-fieldlabel-min-height: var(--spectrum-component-height-75); --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-75); --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-75); --spectrum-fieldlabel-font-size: var(--spectrum-font-size-75); - --spectrum-fieldlabel-line-height: var(--spectrum-line-height-100); - --spectrum-fieldlabel-line-height-cjk: var(--spectrum-cjk-line-height-100); - --spectrum-fieldlabel-side-padding-top: var(--spectrum-component-top-to-text-75); --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-100); @@ -35,13 +36,11 @@ governing permissions and limitations under the License. } .spectrum-FieldLabel--sizeM { + --spectrum-fieldlabel-min-height: var(--spectrum-component-height-75); --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-75); --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-75); --spectrum-fieldlabel-font-size: var(--spectrum-font-size-75); - --spectrum-fieldlabel-line-height: var(--spectrum-line-height-200); - --spectrum-fieldlabel-line-height-cjk: var(--spectrum-cjk-line-height-200); - --spectrum-fieldlabel-side-padding-top: var(--spectrum-component-top-to-text-75); --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200); @@ -50,13 +49,11 @@ governing permissions and limitations under the License. } .spectrum-FieldLabel--sizeL { + --spectrum-fieldlabel-min-height: var(--spectrum-component-height-100); --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-100); --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-100); --spectrum-fieldlabel-font-size: var(--spectrum-font-size-100); - --spectrum-fieldlabel-line-height: var(--spectrum-line-height-100); - --spectrum-fieldlabel-line-height-cjk: var(--spectrum-cjk-line-height-100); - --spectrum-fieldlabel-side-padding-top: var(--spectrum-component-top-to-text-100); --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200); @@ -65,13 +62,11 @@ governing permissions and limitations under the License. } .spectrum-FieldLabel--sizeXL { + --spectrum-fieldlabel-min-height: var(--spectrum-component-height-200); --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-200); --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-200); --spectrum-fieldlabel-font-size: var(--spectrum-font-size-200); - --spectrum-fieldlabel-line-height: var(--spectrum-line-height-200); - --spectrum-fieldlabel-line-height-cjk: var(--spectrum-cjk-line-height-200); - --spectrum-fieldlabel-side-padding-top: var(--spectrum-component-top-to-text-200); --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200); @@ -81,8 +76,8 @@ governing permissions and limitations under the License. .spectrum-FieldLabel { display: block; - box-sizing: border-box; + min-block-size: var(--mod-fieldlabel-min-height, var(--spectrum-fieldlabel-min-height)); padding-block: var(--spectrum-fieldlabel-top-to-text) var(--spectrum-fieldlabel-bottom-to-text); padding-inline: 0; diff --git a/components/fieldlabel/metadata/mods.md b/components/fieldlabel/metadata/mods.md index 3322496229f..59b92ac468b 100644 --- a/components/fieldlabel/metadata/mods.md +++ b/components/fieldlabel/metadata/mods.md @@ -7,6 +7,7 @@ | `--mod-fieldlabel-font-weight` | | `--mod-fieldlabel-line-height` | | `--mod-fieldlabel-line-height-cjk` | +| `--mod-fieldlabel-min-height` | | `--mod-fieldlabel-side-padding-right` | | `--mod-fieldlabel-side-padding-top` | | `--mod-spacing-300` | diff --git a/components/fieldlabel/stories/template.js b/components/fieldlabel/stories/template.js index fd9456999ab..655bb7569b7 100644 --- a/components/fieldlabel/stories/template.js +++ b/components/fieldlabel/stories/template.js @@ -12,7 +12,9 @@ export const Template = ({ customClasses = [], size = "m", label, - alignment = "left", + id, + forInput, + alignment, isDisabled, isRequired, style = {}, @@ -41,6 +43,8 @@ export const Template = ({ ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} style=${ifDefined(styleMap(style))} + id=${ifDefined(id)} + for=${ifDefined(forInput)} > ${label} ${isRequired ? diff --git a/components/slider/gulpfile.js b/components/slider/gulpfile.js index 3d2a7fa4e41..a225c256bfc 100644 --- a/components/slider/gulpfile.js +++ b/components/slider/gulpfile.js @@ -1 +1 @@ -module.exports = require('@spectrum-css/component-builder'); +module.exports = require('@spectrum-css/component-builder-simple'); \ No newline at end of file diff --git a/components/slider/index.css b/components/slider/index.css index e40dcb52b85..adbd3094de2 100644 --- a/components/slider/index.css +++ b/components/slider/index.css @@ -10,63 +10,81 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import "../vars/css/components/spectrum-slider.css"; .spectrum-Slider { - @remapvars { - find: --spectrum-slider-m-; - replace: --spectrum-slider-; - } - @remapvars { - find: --spectrum-slider-tick-m-; - replace: --spectrum-slider-tick-; - } - - /* todo: this is 0px in DNA, which seems wrong */ - --spectrum-slider-label-gap-y: var(--spectrum-global-dimension-size-85); + /* default sizing, matches t-shirt size M */ + --spectrum-slider-font-size: var(--spectrum-font-size-75); + --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-medium); + --spectrum-slider-control-height: var(--spectrum-component-height-100); + --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200); + --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-controls-margin: calc( - var(--spectrum-slider-handle-width) / 2 - ); - --spectrum-slider-track-margin-offset: calc( - var(--spectrum-slider-controls-margin) * -1 - ); - --spectrum-slider-handle-margin-top: calc( - var(--spectrum-slider-handle-width) / -2 - ); - --spectrum-slider-handle-margin-left: calc( - var(--spectrum-slider-handle-width) / -2 - ); +.spectrum-Slider--sizeS { + --spectrum-slider-font-size: var(--spectrum-font-size-75); + --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-small); + --spectrum-slider-control-height: var(--spectrum-component-height-75); + --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200); + --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-track-handleoffset: var(--spectrum-slider-handle-gap); - --spectrum-slider-track-middle-handleoffset: calc( - var(--spectrum-slider-handle-gap) + - calc(var(--spectrum-slider-handle-width) / 2) - ); +.spectrum-Slider--sizeL { + --spectrum-slider-font-size: var(--spectrum-font-size-100); + --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-large); + --spectrum-slider-control-height: var(--spectrum-component-height-200); + --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4); + --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-input-top: calc( - var(--spectrum-slider-handle-margin-top) / 4 - ); - --spectrum-slider-input-left: calc( - var(--spectrum-slider-handle-margin-left) / 4 - ); +.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-control-height: var(--spectrum-component-height-300); + --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4); + --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-color-min-height: auto; - --spectrum-slider-color-track-padding: 0; - --spectrum-slider-color-track-top: 0; - --spectrum-slider-color-track-margin-top: 0; - --spectrum-slider-color-track-margin-left: 0; - --spectrum-slider-color-track-margin-right: 0; - --spectrum-slider-color-handle-top: 50%; +.spectrum-Slider { + --spectrum-slider-cjk-line-height: var(--spectrum-cjk-line-height-100); + + --spectrum-slider-min-size: var(--spectrum-spacing-900); + + --spectrum-slider-track-corner-radius: var(--spectrum-corner-radius-75); + --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); + --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-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-disabled: var(--spectrum-disabled-background-color); + --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-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); + + /* values */ + --spectrum-slider-input-left: calc(var(--spectrum-slider-handle-margin-left) / 4); + --spectrum-slider-track-handleoffset: var(--spectrum-slider-handle-gap); - --spectrum-slider-ramp-margin-top: 0; --spectrum-slider-range-track-reset: 0; - --spectrum-slider-label-margin-bottom: -3px; - --spectrum-slider-label-gap-x: var(--spectrum-alias-item-control-gap-m); - --spectrum-slider-label-text-line-height: var( - --spectrum-global-font-line-height-small - ); } .spectrum-Slider { @@ -75,8 +93,7 @@ governing permissions and limitations under the License. /* Don't let z-index'd child elements float above other things on the page */ z-index: 1; display: block; - min-block-size: var(--spectrum-slider-height); - min-inline-size: var(--spectrum-slider-min-width); + min-inline-size: var(--mod-slider-min-size, var(--spectrum-slider-min-size)); user-select: none; } @@ -84,45 +101,52 @@ governing permissions and limitations under the License. .spectrum-Slider-controls { display: inline-block; box-sizing: border-box; - + cursor: pointer; position: relative; z-index: auto; /* These calculations prevent the track from spilling outside of the control */ - inline-size: calc(100% - calc(var(--spectrum-slider-controls-margin) * 2)); - margin-inline-start: var(--spectrum-slider-controls-margin); - min-block-size: var(--spectrum-slider-height); + 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)); +} + +/* TODO: Sliders with ticks + tick mark labels require more margin-block-end. + As of February 2023 we do not have tokens yet tokens for Ramp and Tick variants, + using control-height here instead. */ +.spectrum-Slider--tick { + margin-block-end: var(--mod-slider-control-height, var(--spectrum-slider-control-height)); +} + .spectrum-Slider-track, .spectrum-Slider-fill { - block-size: var(--spectrum-slider-track-height); + block-size: var(--mod-slider-track-fill-thickness, var(--spectrum-slider-track-fill-thickness)); box-sizing: border-box; position: absolute; z-index: 1; - inset-block-start: calc(var(--spectrum-slider-height) / 2); + inset-block-start: calc(var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / 2 - var(--mod-slider-track-fill-thickness, var(--spectrum-slider-track-fill-thickness)) / 2); inset-inline-start: 0; inset-inline-end: auto; - - margin-block-start: calc(var(--spectrum-slider-track-height) / -2); - pointer-events: none; -} -.spectrum-Slider-track, -.spectrum-Slider-fill { padding-block: 0; - padding-inline: 0 var(--spectrum-slider-track-handleoffset); - margin-inline-start: var(--spectrum-slider-track-margin-offset); + 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)); &:before { content: ""; display: block; block-size: 100%; + /* reset all border radii */ border-start-start-radius: 0; border-end-start-radius: 0; border-start-end-radius: 0; @@ -133,49 +157,50 @@ governing permissions and limitations under the License. .spectrum-Slider-track { &:first-of-type { &:before { - border-start-start-radius: var(--spectrum-slider-track-border-radius); - border-end-start-radius: var(--spectrum-slider-track-border-radius); - border-start-end-radius: 0; - border-end-end-radius: 0; + 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)); } } &:last-of-type { &:before { - border-start-start-radius: 0; - border-end-start-radius: 0; - border-start-end-radius: var(--spectrum-slider-track-border-radius); - border-end-end-radius: var(--spectrum-slider-track-border-radius); + border-start-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); + border-end-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); } } } .spectrum-Slider-track ~ .spectrum-Slider-track { inset-inline-start: auto; - inset-inline-end: var(--spectrum-slider-range-track-reset); + inset-inline-end: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset)); padding-block: 0; - padding-inline: var(--spectrum-slider-track-handleoffset) 0; - margin-inline-start: var(--spectrum-slider-range-track-reset); - margin-inline-end: var(--spectrum-slider-track-margin-offset); + 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)); +} + + +/* 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)); + } } .spectrum-Slider-fill { margin-inline-start: 0; padding-block: 0; - padding-inline: calc( - var(--spectrum-slider-controls-margin) + - var(--spectrum-slider-track-handleoffset) - ) - 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; } .spectrum-Slider-fill--right { padding-block: 0; - padding-inline: 0 - calc( - var(--spectrum-slider-controls-margin) + - var(--spectrum-slider-track-handleoffset) - ); + padding-inline-start: 0; + padding-inline-end: calc(var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin)) + var(--spectrum-slider-handle-gap, var(--spectrum-slider-handle-gap))); } .spectrum-Slider--range { @@ -184,58 +209,41 @@ governing permissions and limitations under the License. } .spectrum-Slider-track { - &:before { - border-start-start-radius: 0; - border-end-start-radius: 0; - border-start-end-radius: 0; - border-end-end-radius: 0; - } - &:first-of-type { - padding-inline: 0 var(--spectrum-slider-track-handleoffset); - inset-inline-start: var(--spectrum-slider-range-track-reset); + 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(--spectrum-slider-track-margin-offset); + margin-inline-start: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset)); + &:before { - border-start-start-radius: var(--spectrum-slider-m-track-border-radius); - border-end-start-radius: var(--spectrum-slider-m-track-border-radius); - border-start-end-radius: 0; - border-end-end-radius: 0; + 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)); } } - /* Force specificity otherwise the ~ rules above override */ - &:dir(ltr), - &:dir(rtl) { - padding-inline: var(--spectrum-slider-track-middle-handleoffset) - var(--spectrum-slider-track-middle-handleoffset); - inset-inline-start: auto; - inset-inline-end: auto; - margin-inline: var(--spectrum-slider-range-track-reset); - } &:last-of-type { - padding-inline: var(--spectrum-slider-track-handleoffset) 0; + padding-inline-start: var(--spectrum-slider-track-handleoffset); + padding-inline-end: 0; inset-inline-start: auto; - inset-inline-end: var(--spectrum-slider-range-track-reset); - margin-inline-end: var(--spectrum-slider-track-margin-offset); + 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)); + &:before { - border-start-end-radius: var(--spectrum-slider-m-track-border-radius); - border-end-end-radius: var(--spectrum-slider-m-track-border-radius); - border-start-start-radius: 0; - border-end-start-radius: 0; + border-start-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); + border-end-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); } } } } .spectrum-Slider-ramp { - margin-block-start: var(--spectrum-slider-ramp-margin-top); - block-size: var(--spectrum-slider-ramp-track-height); + margin-block-start: calc(var(--mod-slider-ramp-track-height, var(--spectrum-slider-ramp-track-height)) / 2); + 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); - inset-inline-end: var(--spectrum-slider-track-margin-offset); - inset-block-start: calc(var(--spectrum-slider-ramp-track-height) / 2); + 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%; @@ -249,31 +257,31 @@ governing permissions and limitations under the License. .spectrum-Slider-handle { position: absolute; inset-inline-start: 0; - inset-block-start: calc(var(--spectrum-slider-height) / 2); z-index: 2; - display: inline-block; box-sizing: border-box; - inline-size: var(--spectrum-slider-handle-width); - block-size: var(--spectrum-slider-handle-height); - - margin-block: var(--spectrum-slider-handle-margin-top) 0; - margin-inline: calc(var(--spectrum-slider-handle-width) / -2) 0; + inline-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)); + block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)); - border-width: var(--spectrum-slider-handle-border-size); + inset-block-start: calc( + var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / 2 - var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / 2 + ); + margin-block: 0; + margin-inline: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / -2) 0; + border-width: var(--mod-slider-handle-border-width, var(--spectrum-slider-handle-border-width)); border-style: solid; - border-radius: var(--spectrum-slider-handle-border-radius); + border-radius: var(--mod-slider-handle-border-radius, var(--spectrum-slider-handle-border-radius)); - transition: border-width var(--spectrum-slider-animation-duration) ease-in-out; + transition: border-width var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out; outline: none; &:active, &.is-focused, &.is-dragged { - border-width: var(--spectrum-slider-handle-border-size); + border-width: var(--mod-slider-handle-border-width-down, var(--spectrum-slider-handle-border-width-down)); } &:active, @@ -290,13 +298,12 @@ governing permissions and limitations under the License. left: 50%; top: 50%; - transition: box-shadow var(--spectrum-global-animation-duration-100) - ease-out, - width var(--spectrum-global-animation-duration-100) ease-out, - height var(--spectrum-global-animation-duration-100) ease-out; + transition: box-shadow var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out, + inline-size var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out, + block-size var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out; - width: var(--spectrum-slider-handle-width); - height: var(--spectrum-slider-handle-height); + inline-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)); + block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)); transform: translate(-50%, -50%); @@ -305,14 +312,8 @@ governing permissions and limitations under the License. &.is-focused { &:before { - width: calc( - var(--spectrum-slider-handle-width) + - var(--spectrum-alias-focus-ring-gap) * 2 - ); - height: calc( - var(--spectrum-slider-handle-height) + - var(--spectrum-alias-focus-ring-gap) * 2 - ); + 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); } } } @@ -321,12 +322,13 @@ governing permissions and limitations under the License. /* Remove the margin for input in Firefox and Safari. */ margin: 0; - inline-size: var(--spectrum-slider-handle-width); - block-size: var(--spectrum-slider-handle-height); + inline-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)); + block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)); padding: 0; position: absolute; - inset-block-start: var(--spectrum-slider-input-top); - inset-inline-start: var(--spectrum-slider-input-left); + + inset-block-start: var(--mod-slider-input-top-size, var(--spectrum-slider-input-top-size)); + inset-inline-start: var(--mod-slider-input-left, var(--spectrum-slider-input-left)); overflow: hidden; opacity: 0.000001; cursor: default; @@ -341,20 +343,27 @@ governing permissions and limitations under the License. .spectrum-Slider-labelContainer { display: flex; + align-items: center; position: relative; - inline-size: auto; - padding-block-start: var(--spectrum-fieldlabel-m-padding-top); + font-size: var(--mod-slider-font-size, var(--spectrum-slider-font-size)); + line-height: var(--mod-line-height-100, var(--spectrum-line-height-100)); + + margin-block-start: var(--mod-slider-label-top-to-text, var(--spectrum-slider-label-top-to-text)); - font-size: var(--spectrum-slider-label-text-size); - line-height: var(--spectrum-slider-label-text-line-height); - margin-block-end: var(--spectrum-slider-label-margin-bottom); + /* international support */ + &:lang(ja), + &:lang(zh), + &:lang(ko) { + line-height: var(--mod-slider-cjk-line-height, var(--spectrum-slider-cjk-line-height)); + } } .spectrum-Slider-label { padding-inline-start: 0; flex-grow: 1; + font-size: var(--mod-slider-font-size, var(--spectrum-slider-font-size)); } .spectrum-Slider-value { @@ -366,39 +375,70 @@ governing permissions and limitations under the License. } .spectrum-Slider-value { - margin-inline-start: var(--spectrum-slider-label-gap-x); + margin-inline-start: var(--mod-slider-label-margin-start, var(--spectrum-slider-label-margin-start)); +} + + +/* setting tick marks in relation to label */ +.spectrum-Slider--tick { + .spectrum-Slider-handle { + background-color: var(--highcontrast-slider-tick-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 + ); + } + + .spectrum-Slider-tickLabel { + margin-block-start: + calc( + var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) + var(--spectrum-text-to-visual-75) + ); + } } +/* TODO: missing core-tokens for tick variant */ .spectrum-Slider-ticks { display: flex; justify-content: space-between; z-index: 0; - margin: 0 var(--spectrum-slider-track-margin-offset); - margin-block-start: calc( - var(--spectrum-slider-tick-mark-height) + - 1px - ); + margin-inline: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset)); + + /* TODO: missing core-token for handle fill-color */ + &~.spectrum-Slider-handleContainer { + .spectrum-Slider-handle { + background: var(--mod-slider-ticks-handle-background-color, var(--spectrum-slider-ticks-handle-background-color)); + } + } } .spectrum-Slider-tick { position: relative; - inline-size: var(--spectrum-slider-tick-mark-width); + inline-size: var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)); + + /* tick marks are centered half based on slider control height and tick height */ + inset-block-start: calc(var(--mod-slider-track-thickness, var(--spectrum-slider-control-height)) / 2 - + var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) / 2 + ); + &:after { display: block; position: absolute; inset-block-start: 0; - inset-inline-start: calc( - 50% - calc(var(--spectrum-slider-tick-mark-width) / 2) - ); + inset-inline-start: calc(50% - calc(var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)) / 2)); content: ""; - inline-size: var(--spectrum-slider-tick-mark-width); - block-size: var(--spectrum-slider-tick-mark-height); + inline-size: var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)); + block-size: var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)); - border-radius: var(--spectrum-slider-tick-mark-border-radius); + border-radius: var(--mod-slider-tick-mark-border-radius, var(--spectrum-slider-tick-mark-border-radius)); } .spectrum-Slider-tickLabel { @@ -406,12 +446,9 @@ governing permissions and limitations under the License. align-items: center; justify-content: center; - margin-block: calc(var(--spectrum-slider-label-gap-y) + var(--spectrum-slider-tick-mark-height)) 0; - margin-inline: calc(var(--spectrum-slider-label-gap-x) * -1) - calc(var(--spectrum-slider-label-gap-x) * -1); - font-size: var(--spectrum-slider-label-text-size); - line-height: var(--spectrum-slider-label-text-line-height); + font-size: var(--mod-font-size-75, var(--spectrum-font-size-75)); + line-height: var(--mod-line-height-100, var(--spectrum-line-height-100)); } &:first-of-type, @@ -425,7 +462,8 @@ governing permissions and limitations under the License. &:first-of-type { /* fix off-by-one alignment */ - inset-inline-start: calc(var(--spectrum-slider-tick-mark-width) / -2); + inset-inline-start: calc(var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)) / -2); + .spectrum-Slider-tickLabel { inset-inline-start: 0; } @@ -433,7 +471,8 @@ governing permissions and limitations under the License. &:last-of-type { /* fix off-by-one alignment */ - inset-inline-end: calc(var(--spectrum-slider-tick-mark-width) / -2); + inset-inline-end: calc(var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)) / -2); + .spectrum-Slider-tickLabel { inset-inline-end: 0; } @@ -449,23 +488,245 @@ governing permissions and limitations under the License. cursor: default; pointer-events: none; } + + .spectrum-Slider-tickLabel { + color: var(--highcontrast-slider-label-text-color-disabled, var(--mod-slider-label-text-color-disabled, var(--spectrum-slider-label-text-color-disabled))); + } } } /* backwards compatibility: these are not required, but they make the handle go to the edegs and align right */ .spectrum-Slider-handleContainer, .spectrum-Slider-trackContainer { - width: calc(100% + var(--spectrum-slider-handle-width)); + inline-size: calc(100% + var(--spectrum-slider-handle-size)); position: absolute; - top: calc(var(--spectrum-slider-track-height) / 2 - 1px); + inset-block-start: 0; - margin-left: calc(var(--spectrum-slider-handle-width) / 2 * -1); + margin-inline-start: calc(var(--spectrum-slider-handle-size) / 2 * -1); } .spectrum-Slider-trackContainer { - height: var(--spectrum-slider-height); + block-size: var(--mod-slider-control-height, var(--spectrum-slider-control-height)); /* stop edges from peeking out */ overflow: hidden; } + + +.spectrum-Slider-track { + &::before { + background: var(--highcontrast-slider-track-color, var(--mod-slider-track-color, var(--spectrum-slider-track-color))); + } +} + + +.spectrum-Slider-labelContainer { + color: var(--highcontrast-slider-label-text-color, var(--mod-slider-label-text-color, var(--spectrum-slider-label-text-color))); +} + + +.spectrum-Slider--filled { + .spectrum-Slider-track:first-child { + &::before { + background: var(--highcontrast-slider-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color))); + } + } +} + +.spectrum-Slider-fill { + &::before { + background: var(--highcontrast-slider-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-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-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))); + } + + &.is-focused { + 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))); + + &: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 { + 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(--spectrum-slider-ramp-handle-background-color)); + + @media (forced-colors: active) { + /* forced-color-adjust required to ensure the "circle" around the handle is transparent */ + forced-color-adjust: none; + box-shadow: 0 0 0 var(--spectrum-slider-handle-gap) ButtonFace; + border-color: ButtonText; + background-color: ButtonFace; + } + } +} + +.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))); + background: var(--highcontrast-slider-handle-background-color, var(--mod-slider-handle-background-color, var(--spectrum-slider-handle-background-color))); + } +} + + +.spectrum-Slider--range { + .spectrum-Slider-track { + &:not(:first-of-type):not(:last-of-type) { + &:before { + background: var(--highcontrast-slider-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color))); + } + } + } +} + +.spectrum-Slider { + &.is-disabled { + .spectrum-Slider-labelContainer { + color: var(--highcontrast-slider-label-text-color-disabled, var(--mod-slider-label-text-color-disabled, var(--spectrum-slider-label-text-color-disabled))); + } + + .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))); + + &:hover, + &:active { + border-color: var(--highcontrast-disabled-border-color, var(--mod-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))); + } + } + + .spectrum-Slider-track { + &::before { + background: var(--highcontrast-slider-track-color-disabled, var(--mod-slider-track-color-disabled, var(--spectrum-slider-track-color-disabled))); + } + } + + &.spectrum-Slider--filled { + .spectrum-Slider-track:first-child { + &::before { + background: var(--highcontrast-slider-track-fill-color-disabled, var(--mod-slider-track-fill-color-disabled, var(--spectrum-slider-track-fill-color-disabled))); + } + } + } + + .spectrum-Slider-fill { + &::before { + background: var(--highcontrast-slider-track-fill-color-disabled, var(--mod-slider-track-fill-color-disabled, var(--spectrum-slider-track-fill-color-disabled))); + } + } + + .spectrum-Slider-ramp { + /* Slider handle turns transparent in high contrast mode for ramp */ + @media (forced-colors: active) { + & + .spectrum-Slider-handle { + fill: ButtonFace; + background-color: ButtonFace; + } + } + + path { + fill: var(--highcontrast-slider-ramp-track-color-disabled, var(--mod-slider-ramp-track-color-disabled, var(--spectrum-slider-ramp-track-color-disabled))); + } + } + + .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))); + } + } + + &.spectrum-Slider--range { + .spectrum-Slider-track { + &:not(:first-of-type):not(:last-of-type) { + &:before { + background: var(--highcontrast-slider-track-color-disabled, var(--mod-slider-track-color-disabled, var(--spectrum-slider-track-color-disabled))); + } + } + } + } + } +} + + +@media (forced-colors: active) { + + .spectrum-Slider { + --spectrum-slider-track-color: GrayText; + --spectrum-slider-track-fill-color: GrayText; + + --spectrum-slider-track-color-disabled: GrayText; + --spectrum-slider-track-fill-color-disabled: GrayText; + + /* over-writes */ + --highcontrast-slider-track-color: ButtonText; + --highcontrast-slider-track-fill-color: ButtonText; + --highcontrast-slider-track-fill-color: ButtonText; + --highcontrast-slider-ramp-track-color: ButtonText; + --highcontrast-slider-ramp-track-color-disabled: GrayText; + --highcontrast-slider-tick-mark-color: ButtonText; + + + --spectrum-slider-track-color: ButtonText; + --spectrum-slider-track-fill-color: ButtonText; + --spectrum-slider-ramp-track-color: ButtonText; + --spectrum-slider-ramp-track-color-disabled: GrayText; + + --spectrum-slider-handle-background-color: ButtonFace; + --spectrum-slider-handle-background-color-disabled: GrayText; + --spectrum-slider-handle-border-color: ButtonText; + --spectrum-slider-handle-disabled-background-color: GrayText; + + --spectrum-slider-tick-mark-color: ButtonText; + --spectrum-slider-tick-mark-color-disabled: GrayText; + + --spectrum-slider-handle-border-color-hover: Highlight; + --spectrum-slider-handle-border-color-down: Highlight; + --spectrum-slider-handle-border-color-key-focus: Highlight; + --spectrum-slider-handle-focus-ring-color-key-focus: Highlight; + + --spectrum-slider-track-color-disabled: GrayText; + --spectrum-slider-track-fill-color-disabled: GrayText; + + --spectrum-slider-handle-border-color-disabled: GrayText; + + --spectrum-slider-label-text-color: CanvasText; + --spectrum-slider-label-text-color-disabled: GrayText; + + --spectrum-slider-ramp-handle-border-color-active: ButtonText; + + } +} diff --git a/components/slider/metadata/mods.md b/components/slider/metadata/mods.md new file mode 100644 index 00000000000..f41c5524a81 --- /dev/null +++ b/components/slider/metadata/mods.md @@ -0,0 +1,55 @@ +| Modifiable Custom Properties | +| --- | +| `--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-font-size` | +| `--mod-slider-handle-background-color` | +| `--mod-slider-handle-background-color-disabled` | +| `--mod-slider-handle-border-color` | +| `--mod-slider-handle-border-color-disabled` | +| `--mod-slider-handle-border-color-down` | +| `--mod-slider-handle-border-color-hover` | +| `--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-input-left` | +| `--mod-slider-input-top-size` | +| `--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-height` | +| `--mod-slider-range-track-reset` | +| `--mod-slider-tick-handle-background-color` | +| `--mod-slider-tick-mark-border-radius` | +| `--mod-slider-tick-mark-color` | +| `--mod-slider-tick-mark-color-disabled` | +| `--mod-slider-tick-mark-height` | +| `--mod-slider-tick-mark-width` | +| `--mod-slider-ticks-handle-background-color` | +| `--mod-slider-track-color` | +| `--mod-slider-track-color-disabled` | +| `--mod-slider-track-corner-radius` | +| `--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-thickness` | \ No newline at end of file diff --git a/components/slider/metadata/slider.yml b/components/slider/metadata/slider.yml index 47bd6bce5cf..08465a54ecf 100644 --- a/components/slider/metadata/slider.yml +++ b/components/slider/metadata/slider.yml @@ -12,11 +12,14 @@ sections: ### Use class `is-dragged` instead of `u-isGrabbing` On `spectrum-Slider-handle` when dragging, use `is-dragged` instead of `u-isGrabbing`. + + ### Three Handles is included in the `range` variant + When using a slider with three handles, classify it as a `range` variant to apply correct styling examples: - id: slider name: Standard markup: | -
+
@@ -25,7 +28,7 @@ examples:
-
+
@@ -34,31 +37,139 @@ examples:
+ - id: slider-sizes + name: Sizes + markup: | +
+
+

S

+
+
+ +
14
+
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+ +
+

M

+
+
+ +
14
+
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+ +
+

L

+
+
+ +
14
+
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+ +
+

XL

+
+
+ +
14
+
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
- id: slider name: With Label markup: | -
+
- -
14
+ +
14
- +
-
+
- -
14
+ +
14
- +
@@ -67,28 +178,28 @@ examples: name: Filled description: With fill. markup: | -
+
- -
14
+ +
14
- +
-
+
- -
14
+ +
14
- +
@@ -97,43 +208,43 @@ examples: name: Filled-Offset description: With fill and offset. markup: | -
+
- -
14
+ +
14
- +
-
+
- -
14
+ +
14
- +
-
+
- -
14
+ +
14
- +
@@ -143,37 +254,37 @@ examples: name: Range description: A range slider with two handles. markup: | -
+
-
+
@@ -182,59 +293,64 @@ examples: name: Tick description: Spectrum tick slider markup: | -
+
- +
14
-
-
-
- +
+
+
+
+
+
+ +
-
-
+
- +
14
-
-
-
- +
+
+
+
+
+
+ +
-
- id: slider-tick name: Tick with Labels description: Spectrum tick slider with labels markup: | -
+
- -
14
+ +
14
-
0
@@ -255,19 +371,24 @@ examples:
100
-
- +
+
+
+
+
+
+ +
-
-
+ +
- -
14
+ +
14
-
0
@@ -288,19 +409,24 @@ examples:
100
-
- +
+
+
+
+
+
+ +
-
- id: slider-ramp name: Ramp markup: | -
+
- -
14
+ +
14
@@ -309,14 +435,14 @@ examples:
- +
-
+
- -
14
+ +
14
@@ -325,7 +451,7 @@ examples:
- +
diff --git a/components/slider/package.json b/components/slider/package.json index fc704ea6235..8c51add3989 100644 --- a/components/slider/package.json +++ b/components/slider/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/slider", - "version": "3.1.25", + "version": "4.0.0-beta.8", "description": "The Spectrum CSS slider component", "license": "Apache-2.0", "author": "Adobe", @@ -18,11 +18,13 @@ "build": "gulp" }, "peerDependencies": { - "@spectrum-css/vars": ">=9" + "@spectrum-css/stepper": ">=4", + "@spectrum-css/tokens": ">=9 <=10" }, "devDependencies": { - "@spectrum-css/component-builder": "^4.0.9", - "@spectrum-css/vars": "^9.0.5", + "@spectrum-css/component-builder-simple": "^2.0.11", + "@spectrum-css/stepper": "^4.0.23", + "@spectrum-css/tokens": "^10.0.0", "gulp": "^4.0.0" }, "publishConfig": { diff --git a/components/slider/skin.css b/components/slider/skin.css deleted file mode 100644 index 317bf643aac..00000000000 --- a/components/slider/skin.css +++ /dev/null @@ -1,206 +0,0 @@ -/*! -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -.spectrum-Slider { - --spectrum-slider-m-focus-ring-size: var( - --spectrum-alias-focus-ring-size - ); - - /* todo: remove when fixed */ - --spectrum-slider-m-handle-border-color-key-focus: var( - --spectrum-global-color-gray-800 - ); - --spectrum-slider-m-handle-focus-ring-color-key-focus: var( - --spectrum-alias-focus-color - ); - --spectrum-slider-m-label-text-color: var(--spectrum-alias-label-text-color); - - --spectrum-slider-m-label-text-color-disabled: var(--spectrum-alias-text-color-disabled); -} - -.spectrum-Slider-track { - &::before { - background: var(--spectrum-slider-m-track-color); - } -} - -.spectrum-Slider-labelContainer { - color: var(--spectrum-slider-m-label-text-color); -} - -.spectrum-Slider--filled { - .spectrum-Slider-track:first-child { - &::before { - background: var(--spectrum-slider-m-track-fill-color); - } - } -} - -.spectrum-Slider-fill { - &::before { - background: var(--spectrum-slider-m-track-fill-color); - } -} - -.spectrum-Slider-ramp { - path { - fill: var(--spectrum-slider-m-track-color); - } -} - -.spectrum-Slider-handle { - border-color: var(--spectrum-slider-m-handle-border-color); - background: var(--spectrum-slider-m-handle-background-color); - - &:hover { - border-color: var(--spectrum-slider-m-handle-border-color-hover); - } - - &.is-focused { - border-color: var(--spectrum-slider-m-handle-border-color-key-focus); - - &:before { - box-shadow: 0 0 0 var(--spectrum-slider-m-focus-ring-size) - var(--spectrum-slider-m-handle-focus-ring-color-key-focus); - } - } - - &:active, - &.is-dragged { - border-color: var(--spectrum-slider-m-handle-border-color-down); - } -} - - -.spectrum-Slider--ramp { - .spectrum-Slider-handle { - /* We can't draw this one correctly without this hack : ( */ - box-shadow: 0 0 0 var(--spectrum-slider-m-handle-gap) var(--spectrum-alias-background-color-default); - } -} - -.spectrum-Slider-input { - background: transparent; -} - -.spectrum-Slider-tick { - &:after { - background-color: var(--spectrum-slider-m-tick-mark-color); - } -} - - -.spectrum-Slider-handle { - &.is-dragged { - border-color: var(--spectrum-slider-m-handle-border-color-down); - background: var(--spectrum-slider-m-handle-background-color); - } -} - -.spectrum-Slider--range { - .spectrum-Slider-track { - &:not(:first-of-type):not(:last-of-type) { - &:before { - background: var(--spectrum-slider-m-track-fill-color); - } - } - } -} - - -.spectrum-Slider { - &.is-disabled { - .spectrum-Slider-labelContainer { - color: var(--spectrum-slider-m-label-text-color-disabled); - } - - .spectrum-Slider-handle { - border-color: var(--spectrum-slider-m-handle-border-color-disabled); - background: var(--spectrum-alias-background-color-default); - - &:hover, - &:active { - border-color: var(--spectrum-slider-m-handle-border-color-disabled); - background: var(--spectrum-slider-m-handle-background-color); - } - } - .spectrum-Slider-track { - &::before { - background: var(--spectrum-slider-m-track-color-disabled); - } - } - &.spectrum-Slider--filled { - .spectrum-Slider-track:first-child { - &::before { - background: var(--spectrum-slider-m-track-fill-color-disabled); - } - } - } - .spectrum-Slider-fill { - &::before { - background: var(--spectrum-slider-m-track-fill-color-disabled); - } - } - - .spectrum-Slider-ramp { - path { - fill: var(--spectrum-slider-ramp-track-color-disabled); - } - } - - - &.spectrum-Slider--range { - .spectrum-Slider-track { - &:not(:first-of-type):not(:last-of-type) { - &:before { - background: var(--spectrum-slider-m-track-fill-color-disabled); - } - } - } - } - } -} -@media (forced-colors: active) { - .spectrum-Slider { - .spectrum-Slider-handle { - &:before { - forced-color-adjust: none; - } - } - --spectrum-slider-m-handle-border-color-key-focus: Highlight; - --spectrum-alias-background-color-default: ButtonFace; - --spectrum-alias-focus-color: ButtonText; - --spectrum-alias-label-text-color: CanvasText; - --spectrum-alias-text-color-disabled: GrayText; - --spectrum-slider-m-handle-background-color: ButtonFace; - --spectrum-slider-m-handle-border-color: ButtonText; - --spectrum-slider-m-handle-border-color-disabled: GrayText; - --spectrum-slider-m-handle-border-color-down: Highlight; - --spectrum-slider-m-handle-border-color-hover: Highlight; - --spectrum-slider-m-handle-border-color-key-focus: Highlight; - --spectrum-slider-m-handle-focus-ring-color-key-focus: ButtonText; - --spectrum-slider-m-label-text-color: CanvasText; - --spectrum-slider-m-label-text-color-disabled: GrayText; - --spectrum-slider-m-tick-mark-color: ButtonText; - --spectrum-slider-m-track-color: ButtonText; - --spectrum-slider-m-track-color-disabled: GrayText; - --spectrum-slider-m-track-fill-color: ButtonText; - --spectrum-slider-m-track-fill-color-disabled: GrayText; - --spectrum-slider-ramp-track-color-disabled: GrayText; - } - .spectrum-Slider--ramp { - .spectrum-Slider-handle { - /* We can't draw this one correctly without this hack : ( */ - forced-color-adjust: none; - } - } -} diff --git a/components/slider/stories/slider.stories.js b/components/slider/stories/slider.stories.js index 2835ecb3dd1..1aece6e70e3 100644 --- a/components/slider/stories/slider.stories.js +++ b/components/slider/stories/slider.stories.js @@ -8,6 +8,16 @@ export default { component: "Slider", argTypes: { reducedMotion: { table: { disable: true } }, + size: { + name: "Size", + type: { name: "string", required: true }, + table: { + type: { summary: "string" }, + category: "Component", + }, + options: ["s", "m", "l", "xl"], + control: "select" + }, label: { name: "Label", type: { name: "string" }, @@ -116,10 +126,12 @@ export default { export const Default = Template.bind({}); Default.args = { label: "Slider label", + size: "m", min: 10, max: 20, values: [14], step: 2, + id: 'spectrum-Slider' }; export const Filled = Template.bind({}); @@ -159,3 +171,12 @@ Disabled.args = { ...Default.args, isDisabled: true, }; + +export const Gradient = Template.bind({}); +Gradient.args = { + ...Default.args, + style: { + "--spectrum-slider-track-color": "linear-gradient(to right, red, green 100%)", + "--spectrum-slider-track-color-rtl": "linear-gradient(to left, red, green 100%)" + } +} diff --git a/components/slider/stories/template.js b/components/slider/stories/template.js index d55f89e2dc8..a86123847c3 100644 --- a/components/slider/stories/template.js +++ b/components/slider/stories/template.js @@ -5,25 +5,38 @@ import { ifDefined } from "lit-html/directives/if-defined.js"; import { useArgs, useGlobals } from "@storybook/client-api"; +import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/template.js"; + + import "../index.css"; -import "../skin.css"; export const Template = ({ rootClass = "spectrum-Slider", + size, label, min = 0, max = 10, step = 2, values = [], variant, - fillColor, + fillColor = "rgb(213, 213, 213)", showTicks = false, isDisabled = false, isFocused = false, customClasses = [], + style = {}, id, - // ...globals + ...globals }) => { + const { express } = globals; + + try { + if (!express) import(/* webpackPrefetch: true */ "../themes/spectrum.css"); + else import(/* webpackPrefetch: true */ "../themes/express.css"); + } catch (e) { + console.warn(e); + } + const [_, updateArgs] = useArgs(); const [{ textDirection }] = useGlobals(); @@ -82,7 +95,7 @@ export const Template = ({ }))}> 1, [`${rootClass}--filled`]: variant === "filled", + [`${rootClass}--tick`]: showTicks, 'is-disabled': isDisabled, ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} id=${ifDefined(id)} - style=${ifDefined(styleMap({ + style=${styleMap({ maxWidth: `var(--spectrum-global-dimension-size-3000)`, - ['--spectrum-slider-m-track-fill-color']: fillColor, - }))} + ['--spectrum-slider-track-color']: fillColor, + ...style + })} role=${ifDefined(values.length > 1 ? "group" : undefined)} aria-labelledby=${ifDefined(label && id ? `${id}-label` : undefined)}> - ${label ? html`
1 ? "presentation" : undefined)}> - + ${label ? + html`
1 ? "presentation" : undefined)}> + ${FieldLabel({ + ...globals, + size, + label, + isDisabled, + id: id ? `${id}-label` : undefined, + forInput: id ? `${id}-1` : undefined, + customClasses: [`${rootClass}-label`] + })} ${values.length ? html`
${values[0]}${values.length > 1 ? ` - ${values[1]}` : ''}
`: ''} -
`: ''} +
`: ''}
diff --git a/components/slider/themes/express.css b/components/slider/themes/express.css new file mode 100644 index 00000000000..901a84472d6 --- /dev/null +++ b/components/slider/themes/express.css @@ -0,0 +1,34 @@ +/* +Copyright 2023 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +@container (--system: express) { + .spectrum-Slider { + + --spectrum-slider-track-color: var(--spectrum-gray-200); + --spectrum-slider-track-fill-color: var(--spectrum-gray-600); + --spectrum-slider-ramp-track-color: var(--spectrum-gray-300); + --spectrum-slider-ramp-track-color-disabled: var(--spectrum-gray-200); + + --spectrum-slider-handle-background-color: var(--spectrum-gray-50); + --spectrum-slider-handle-background-color-disabled: var(--spectrum-gray-50); + --spectrum-slider-ramp-handle-background-color: var(--spectrum-gray-50); + --spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-50); + --spectrum-slider-handle-border-color: var(--spectrum-gray-800); + --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-50); + + --spectrum-slider-tick-mark-color: var(--spectrum-gray-200); + + --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); + } +} diff --git a/components/slider/themes/spectrum.css b/components/slider/themes/spectrum.css new file mode 100644 index 00000000000..6835ce65e64 --- /dev/null +++ b/components/slider/themes/spectrum.css @@ -0,0 +1,34 @@ +/* +Copyright 2023 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +@container (--system: spectrum) { + .spectrum-Slider { + + --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-200); + + --spectrum-slider-handle-background-color: transparent; + --spectrum-slider-handle-background-color-disabled: transparent; + --spectrum-slider-ramp-handle-background-color: var(--spectrum-gray-100); + --spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-100); + --spectrum-slider-handle-border-color: var(--spectrum-gray-700); + --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-100); + + --spectrum-slider-tick-mark-color: var(--spectrum-gray-300); + + --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); + } +} diff --git a/site/resources/js/enhancement.js b/site/resources/js/enhancement.js index 9637b1aef4c..dc91f8ade59 100644 --- a/site/resources/js/enhancement.js +++ b/site/resources/js/enhancement.js @@ -558,7 +558,7 @@ function makeDoubleSlider(slider) { var sliderOffsetLeft = slider.offsetLeft + slider.offsetParent.offsetLeft; var x = Math.max(Math.min(e.x - sliderOffsetLeft, sliderOffsetWidth), 0); - var percent = (x / sliderOffsetWidth) * 100; + var percent = Math.round((x / sliderOffsetWidth) * 100); if (isRTL()) { percent = 100 - percent; @@ -624,6 +624,7 @@ function makeSlider(slider) { var handles = slider.querySelectorAll('.spectrum-Slider-handle'); var handle = handles[0]; var isColor = slider.classList.contains('spectrum-Slider--color'); + var value = slider.querySelector('.spectrum-Slider-value'); var fill = slider.querySelector('.spectrum-Slider-fill'); if (handles.length > 1) { @@ -655,12 +656,16 @@ function makeSlider(slider) { var sliderOffsetLeft = slider.offsetLeft + slider.offsetParent.offsetLeft; var x = Math.max(Math.min(e.x - sliderOffsetLeft, sliderOffsetWidth), 0); - var percent = (x / sliderOffsetWidth) * 100; + var percent = Math.round((x / sliderOffsetWidth) * 100); if (isRTL()) { percent = 100 - percent; } + if (value) { + value.innerText = percent; + } + if (leftTrack && rightTrack && !isColor) { leftTrack.style.width = percent + '%'; rightTrack.style.width = (100 - percent) + '%';