background property such as, linear-gradient(red, blue) or transparent. Not available for ramp variant.",
type: { name: "string" },
table: {
type: { summary: "string" },
@@ -112,26 +124,58 @@ export default {
control: "boolean",
if: { arg: "showTicks", truthy: true },
},
+ isPrecise: {
+ name: "Precise handle control",
+ description: "Provides precise control for accurate values.",
+ type: { name: "boolean" },
+ table: {
+ type: { summary: "boolean" },
+ category: "Component",
+ },
+ control: "boolean",
+ },
+ isEditable: {
+ name: "Editable text input",
+ description: "Enables text input to also control the slider value.",
+ type: { name: "boolean" },
+ table: {
+ type: { summary: "boolean" },
+ category: "Component",
+ },
+ control: "boolean",
+ },
+ isEmphasized,
+ isActive,
+ isHovered,
isDisabled,
isFocused: {
...isFocused,
if: { arg: "isDisabled", truthy: false },
},
- values: { table: { disable: true } },
+ values: {
+ table: { disable: true }
+ },
},
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,
+ variant: "filled",
},
parameters: {
actions: {
@@ -146,22 +190,30 @@ export default {
},
packageJson,
metadata,
+ status: {
+ type: "migrated",
+ },
},
+ 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 when the global direction is LTR and from the right side of the track when the global direction is RTL.
*/
export const Default = SliderGroup.bind({});
-Default.args = {};
+Default.args = {
+ variant: "filled",
+};
// ********* DOCS ONLY ********* //
/**
- * If a slider's label is undefined, it should still include an aria-label in HTML (depending on the context, “aria-label” or “aria-labelledby”).
+ * If a slider's label is undefined, it should still include an aria-label in HTML (depending on the context, "aria-label" or "aria-labelledby").
*/
export const WithoutLabel = Template.bind({});
WithoutLabel.args = {
label: "",
+ variant: "filled",
};
WithoutLabel.tags = ["!dev"];
WithoutLabel.storyName = "Without label";
@@ -171,6 +223,18 @@ WithoutLabel.parameters = {
},
};
+export const Editable = Template.bind({});
+Editable.args = {
+ ...Default.args,
+ isEditable: true,
+};
+Editable.tags = ["!dev"];
+Editable.parameters = {
+ chromatic: {
+ disableSnapshot: true,
+ },
+};
+
export const Sizing = (args, context) => Sizes({
Template,
withBorder: false,
@@ -186,31 +250,28 @@ Sizing.parameters = {
};
/**
- * The track of the slider can have a fill. By default, the fill originates from the left side of the track.
+ * If the value represents an offset, the fill start or end can be set to represent the point of origin. This allows the slider fill to extend from the origin toward the handle, in either direction along the track.
*/
-export const Filled = Template.bind({});
-Filled.args = {
+export const Offset = Template.bind({});
+Offset.args = {
...Default.args,
- variant: "filled",
+ variant: "offset",
+ values: [-15],
};
-Filled.tags = ["!dev"];
-Filled.parameters = {
+Offset.tags = ["!dev"];
+Offset.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 Precise = Template.bind({});
+Precise.args = {
...Default.args,
- min: 0,
- variant: "offset",
+ isPrecise: true,
};
-FilledOffset.tags = ["!dev"];
-FilledOffset.parameters = {
+Precise.tags = ["!dev"];
+Precise.parameters = {
chromatic: {
disableSnapshot: true,
},
@@ -234,7 +295,7 @@ Ramp.parameters = {
export const Range = Template.bind({});
Range.args = {
...Default.args,
- values: [14, 16],
+ values: [10, 20],
};
Range.tags = ["!dev"];
Range.parameters = {
@@ -275,6 +336,24 @@ TickWithLabels.parameters = {
};
TickWithLabels.storyName = "Tick with labels";
+/**
+ * Large track height.
+ */
+export const TrackHeight = Template.bind({});
+TrackHeight.args = {
+ ...Default.args,
+ trackHeight: "large",
+};
+TrackHeight.tags = ["!dev"];
+TrackHeight.parameters = {
+ chromatic: {
+ disableSnapshot: true,
+ },
+};
+TrackHeight.storyName = "Large track height";
+
+
+
export const Disabled = Template.bind({});
Disabled.args = {
...Default.args,
@@ -287,34 +366,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,
},
@@ -345,3 +415,7 @@ WithForcedColors.parameters = {
modes: disableDefaultModes,
},
};
+
+// test with /?path=/story/components-slider--variant-tests&globals=testingPreview:!true
+export const VariantTests = VariantGroup.bind({});
+VariantTests.tags = ["!autodocs", "!dev"];
diff --git a/components/slider/stories/slider.test.js b/components/slider/stories/slider.test.js
index 22777744fd4..c36e23fc5fd 100644
--- a/components/slider/stories/slider.test.js
+++ b/components/slider/stories/slider.test.js
@@ -1,69 +1,442 @@
-import { Variants } from "@spectrum-css/preview/decorators";
+import { Sizes, Variants } from "@spectrum-css/preview/decorators";
import { Template } from "./template.js";
-export const SliderGroup = Variants({
+export const testData = [
+ // Default variants
+ {
+ testHeading: "Default filled",
+ variant: "filled"
+ },
+ {
+ testHeading: "Precise",
+ variant: "filled",
+ isPrecise: true
+ },
+ {
+ testHeading: "Large track",
+ variant: "filled",
+ trackHeight: "large"
+ },
+ {
+ testHeading: "Precise large track",
+ variant: "filled",
+ isPrecise: true,
+ trackHeight: "large"
+ },
+ // Ticks variants
+ {
+ testHeading: "With ticks",
+ variant: "filled",
+ showTicks: true,
+ showTickLabels: true
+ },
+ {
+ testHeading: "Precise with ticks",
+ variant: "filled",
+ showTicks: true,
+ showTickLabels: true,
+ isPrecise: true
+ },
+ {
+ testHeading: "Large track with ticks",
+ variant: "filled",
+ showTicks: true,
+ showTickLabels: true,
+ trackHeight: "large"
+ },
+ {
+ testHeading: "Large track with ticks and precise",
+ variant: "filled",
+ showTicks: true,
+ showTickLabels: true,
+ isPrecise: true,
+ trackHeight: "large"
+ },
+ // Side label variants
+ {
+ testHeading: "Side label",
+ variant: "filled",
+ labelPosition: "side"
+ },
+ {
+ testHeading: "Side label with precise",
+ variant: "filled",
+ labelPosition: "side",
+ isPrecise: true
+ },
+ {
+ testHeading: "Large track with side label",
+ variant: "filled",
+ labelPosition: "side",
+ trackHeight: "large"
+ },
+ {
+ testHeading: "Side label with ticks",
+ variant: "filled",
+ labelPosition: "side",
+ showTicks: true,
+ showTickLabels: true
+ },
+ // Editable variants
+ {
+ testHeading: "Editable",
+ variant: "filled",
+ isEditable: true
+ },
+ {
+ testHeading: "Editable with precise",
+ variant: "filled",
+ isEditable: true,
+ isPrecise: true
+ },
+ {
+ testHeading: "Editable with large track",
+ variant: "filled",
+ isEditable: true,
+ trackHeight: "large"
+ },
+ {
+ testHeading: "Editable with side label",
+ variant: "filled",
+ isEditable: true,
+ labelPosition: "side"
+ },
+ // No label variants
+ {
+ testHeading: "No label",
+ variant: "filled",
+ label: ""
+ },
+ {
+ testHeading: "No label with precise",
+ variant: "filled",
+ label: "",
+ isPrecise: true
+ },
+ {
+ testHeading: "No label with large track",
+ variant: "filled",
+ label: "",
+ trackHeight: "large"
+ },
+ {
+ testHeading: "No label with ticks",
+ variant: "filled",
+ label: "",
+ showTicks: true,
+ showTickLabels: true
+ },
+ {
+ testHeading: "No label editable",
+ variant: "filled",
+ label: "",
+ isEditable: true
+ },
+ {
+ testHeading: "No label editable with precise",
+ variant: "filled",
+ label: "",
+ isEditable: true,
+ isPrecise: true
+ },
+ {
+ testHeading: "No label editable with large track",
+ variant: "filled",
+ label: "",
+ isEditable: true,
+ trackHeight: "large"
+ },
+ // Disabled variants
+ {
+ testHeading: "Disabled",
+ variant: "filled",
+ isDisabled: true
+ },
+ {
+ testHeading: "Disabled with precise",
+ variant: "filled",
+ isDisabled: true,
+ isPrecise: true
+ },
+ {
+ testHeading: "Disabled with precise and large track",
+ variant: "filled",
+ isDisabled: true,
+ isPrecise: true,
+ trackHeight: "large"
+ },
+ // Emphasized variants
+ {
+ testHeading: "Emphasized",
+ variant: "filled",
+ isEmphasized: true
+ },
+ {
+ testHeading: "Emphasized with precise",
+ variant: "filled",
+ isEmphasized: true,
+ isPrecise: true
+ },
+ {
+ testHeading: "Emphasized with large track",
+ variant: "filled",
+ isEmphasized: true,
+ trackHeight: "large"
+ },
+ {
+ testHeading: "Emphasized with ticks",
+ variant: "filled",
+ isEmphasized: true,
+ showTicks: true,
+ showTickLabels: true
+ },
+ {
+ testHeading: "Emphasized with ticks and large track",
+ variant: "filled",
+ isEmphasized: true,
+ showTicks: true,
+ showTickLabels: true,
+ trackHeight: "large"
+ },
+ // Sizes variants
+ {
+ testHeading: "Large track height sizes",
+ variant: "filled",
+ Template: (args, context) => { return Sizes({Template: Template, ...args}, context); },
+ trackHeight: "large",
+ withStates: false,
+ },
+ {
+ testHeading: "Large track height sizes with precise",
+ variant: "filled",
+ isPrecise: true,
+ Template: (args, context) => { return Sizes({Template: Template, ...args}, context); },
+ trackHeight: "large",
+ withStates: false,
+ },
+ {
+ testHeading: "Sizes with precise",
+ variant: "filled",
+ isPrecise: true,
+ Template: (args, context) => { return Sizes({Template: Template, ...args}, context); },
+ withStates: false,
+ },
+];
+
+const rangeTestData = [
+ // Default variants
+ {
+ testHeading: "Range",
+ variant: "filled",
+ values: [10, 20]
+ },
+ {
+ testHeading: "Range with precise",
+ variant: "filled",
+ values: [10, 20],
+ isPrecise: true
+ },
+ {
+ testHeading: "Range with large track",
+ variant: "filled",
+ values: [10, 20],
+ trackHeight: "large"
+ },
+ {
+ testHeading: "Range with precise and large track",
+ variant: "filled",
+ values: [10, 20],
+ isPrecise: true,
+ trackHeight: "large"
+ },
+ // Ticks variants
+ {
+ testHeading: "Range with ticks and large track",
+ variant: "filled",
+ showTicks: true,
+ showTickLabels: true,
+ values: [10, 20],
+ trackHeight: "large"
+ },
+ // Side label variants
+ {
+ testHeading: "Range with side label",
+ variant: "filled",
+ labelPosition: "side",
+ values: [10, 20]
+ },
+ // No label variants
+ {
+ testHeading: "Range with no label",
+ variant: "filled",
+ label: "",
+ values: [10, 20]
+ },
+ // Emphasized variants
+ {
+ testHeading: "Emphasized range",
+ variant: "filled",
+ isEmphasized: true,
+ values: [10, 20]
+ },
+ {
+ testHeading: "Emphasized range with precise",
+ variant: "filled",
+ isEmphasized: true,
+ values: [10, 20],
+ isPrecise: true
+ },
+ {
+ testHeading: "Emphasized range with large track",
+ variant: "filled",
+ isEmphasized: true,
+ values: [10, 20],
+ trackHeight: "large"
+ },
+ {
+ testHeading: "Emphasized range with precise and large track",
+ variant: "filled",
+ isEmphasized: true,
+ values: [10, 20],
+ isPrecise: true,
+ trackHeight: "large"
+ },
+ {
+ testHeading: "Emphasized range with side label",
+ variant: "filled",
+ isEmphasized: true,
+ values: [10, 20],
+ labelPosition: "side"
+ },
+ {
+ testHeading: "Emphasized range with editable",
+ variant: "filled",
+ isEmphasized: true,
+ values: [10, 20],
+ isEditable: true
+ },
+ {
+ testHeading: "Emphasized range with no label",
+ variant: "filled",
+ isEmphasized: true,
+ values: [10, 20],
+ label: ""
+ },
+];
+
+const rampTestData = [
+ // Default variants
+ {
+ testHeading: "Ramp",
+ variant: "ramp"
+ },
+ {
+ testHeading: "Ramp with precise",
+ variant: "ramp",
+ isPrecise: true
+ },
+];
+
+const offsetTestData = [
+ // Default variants
+ {
+ testHeading: "Offset",
+ variant: "offset",
+ values: [-15]
+ },
+ {
+ testHeading: "Offset with precise",
+ variant: "offset",
+ values: [-15],
+ isPrecise: true
+ },
+ {
+ testHeading: "Offset with large track",
+ variant: "offset",
+ values: [-15],
+ trackHeight: "large"
+ },
+ {
+ testHeading: "Offset with precise and large track",
+ variant: "offset",
+ values: [-15],
+ isPrecise: true,
+ trackHeight: "large"
+ },
+ // Ticks variants
+ {
+ testHeading: "Offset with ticks and large track",
+ variant: "offset",
+ showTicks: true,
+ showTickLabels: true,
+ values: [-15],
+ trackHeight: "large"
+ },
+ // Side label variants
+ {
+ testHeading: "Offset with side label",
+ variant: "offset",
+ labelPosition: "side",
+ values: [-15]
+ },
+ // Editable variants
+ {
+ testHeading: "Offset with editable",
+ variant: "offset",
+ isEditable: true,
+ values: [-15]
+ },
+ // No label variants
+ {
+ testHeading: "Offset with no label",
+ variant: "offset",
+ label: "",
+ values: [-15]
+ },
+ {
+ testHeading: "Offset with no label and editable",
+ variant: "offset",
+ label: "",
+ isEditable: true,
+ values: [-15]
+ },
+ // Emphasized variants
+ {
+ testHeading: "Emphasized offset",
+ variant: "offset",
+ isEmphasized: true,
+ values: [-15]
+ },
+];
+
+// Helper function to create a group with specific test data
+const createGroup = (testData) => 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],
- },
+ testData,
+ stateData: [
{
- testHeading: "Tick",
- showTicks: true,
+ testHeading: "Hovered",
+ isHovered: true
},
{
- testHeading: "Tick with labels",
- showTicks: true,
- showTickLabels: true,
+ testHeading: "Active",
+ isActive: true
},
{
- testHeading: "Side label",
- labelPosition: "side",
+ testHeading: "Focused",
+ isFocused: 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 + Hovered",
+ isFocused: true,
+ isHovered: 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
+ }
]
});
+
+export const SliderGroup = createGroup(testData);
+export const VariantGroup = createGroup([...rangeTestData, ...rampTestData, ...offsetTestData]);
diff --git a/components/slider/stories/template.js b/components/slider/stories/template.js
index 905fe770b40..e70fde57663 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";
@@ -13,26 +14,47 @@ export const Template = ({
size,
label,
min = 0,
- max = 10,
+ max = 15,
step = 2,
values = [],
variant,
+ trackHeight,
labelPosition,
- fillColor,
+ trackColor,
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;
+ // Auto-set values and range for offset variant
+ let finalValues = values;
+ let finalMin = min;
+ let finalMax = max;
+ if (variant === "offset") {
+ // Only set default value if no values are provided
+ if (values.length === 0) {
+ finalValues = [0]; // Default to center (0)
+ }
+ finalMin = -15; // Left edge = negative
+ finalMax = 15; // Right edge = positive
+ }
+
+ const { globals = {}, updateArgs } = context;
+ let fillPercentage = 50;
const isRTL = globals.textDirection !== "rtl";
- const rangeLength = max - min;
- const centerPoint = rangeLength / 2 + min;
+ const rangeLength = finalMax - finalMin;
+ const centerPoint = rangeLength / 2 + finalMin;
const isRamp = variant === "ramp";
+ const maskWidth = (fillPercentage / 100) * 240;
const rampSVG = html`
`;
- const getPosition = (v) => ((v - min) / rangeLength) * 100;
+ const getPosition = (v) => ((v - finalMin) / rangeLength) * 100;
const getWidth = (start, end) => {
const distance = end > start ? end - start : start - end;
@@ -68,7 +96,10 @@ export const Template = ({
const ticks = [];
for (let i = from; i <= to; i += step) {
ticks.push(html`
-