feat(slider): create slider (#1503)

* feat(slider): init

* refactor(slider): add semantic html and story

* feat(slider): styling wip

* refactor(slider): remove datalist and options

* feat(slider): finish styling default slider

* refactor(slider): temp remove unnecessary disabled state

* refactor(slider): support not focus-visible

* test(slider): add no label story and snaps

* refactor(slider): shift and dry styles

* feat(slider): add cursor and disabled styling

* test(slider): add disabled and focus stories

* fix(slider): increase size and hitbox for axe

* feat(slider): add markers

* fix(slider): align markers to values

* test(slider): update snaps

* fix(slider): make marker color high enough contrast

* docs(slider): clean comments and strengthen type

* feat(slider): generate markers and more style disabled

* docs(slider): add helper fn docstring  and dry stories

* refactor(slider): move util func to util folder

* feat(slider): allow fieldnote as aria description

src/components/Slider/Slider.module.css

@@ -0,0 +1,168 @@
+@import '../../design-tokens/mixins.css';
+
+/*------------------------------------*\
+ # SLIDER
+\*------------------------------------*/
+
+/**
+ * Slider wrapping Label and Input
+ */
+.slider {
+ --slider-track-height: var(--eds-size-1);
+ --slider-thumb-size: var(--eds-size-3);
+
+ display: flex;
+ flex-direction: column;
+ gap: var(--eds-size-1-and-half);
+}
+
+/**
+ * Slider label disabled
+ */
+.slider__label--disabled {
+ color: var(--eds-theme-color-text-disabled);
+}
+
+/**
+ * Slider Input
+ */
+.slider__input {
+ /* increases vertical hitbox for target size accessibility */
+ padding-top: 22px;
+ padding-bottom: 22px;
+ /* fills left side of track as a percentage of the input value */
+ --slider-track-background: linear-gradient(
+ /* fill from left to right */ to right,
+ /* fill color */ var(--eds-theme-color-background-brand-primary-strong)
+ /* percent to fill */ calc(var(--ratio) * 100%),
+ /* unfilled color */ var(--eds-theme-color-background-neutral-medium)
+ /* don't blend the colors */ 0
+ );
+
+ appearance: none;
+ background: transparent;
+
+ height: var(--slider-thumb-size);
+}
+.slider__input:focus {
+ outline: none;
+}
+.slider__input:disabled {
+ --slider-track-background: linear-gradient(
+ /* fill from left to right */ to right,
+ /* fill color */ var(--eds-theme-color-background-disabled)
+ /* percent to fill */ calc(var(--ratio) * 100%),
+ /* unfilled color */ var(--eds-theme-color-background-neutral-medium)
+ /* don't blend the colors */ 0
+ );
+ cursor: not-allowed;
+}
+
+/* 
+ * Chrome, Safari, Edge Chromium
+ * Although redundant with Firefox, has to be separate or else Chrome ignores
+ */
+.slider__input::-webkit-slider-runnable-track {
+ background: var(--slider-track-background);
+ height: var(--slider-track-height);
+ border-radius: var(--eds-border-radius-full);
+}
+/**
+ * Slider Input Track
+ */
+/* Firefox */
+.slider__input::-moz-range-track {
+ background: var(--slider-track-background);
+ height: var(--slider-track-height);
+ border-radius: var(--eds-border-radius-full);
+}
+
+/* Chrome, Safari, Edge Chromium */
+.slider__input::-webkit-slider-thumb {
+ appearance: none;
+
+ height: var(--slider-thumb-size);
+ width: var(--slider-thumb-size);
+ background: var(--eds-theme-color-text-neutral-default-inverse);
+ border: var(--eds-border-width-md) solid
+ var(--eds-theme-color-border-neutral-default);
+ border-radius: var(--eds-border-radius-full);
+
+ margin-top: calc(
+ var(--slider-track-height) / 2 - var(--slider-thumb-size) / 2
+ ); /* Centers thumb on the track */
+}
+.slider__input:not(:disabled)::-webkit-slider-thumb {
+ cursor: grab;
+}
+.slider__input:not(:disabled)::-webkit-slider-thumb:active {
+ cursor: grabbing;
+}
+/* Chrome, Safari, Edge Chromium Focus */
+.slider__input:focus-visible::-webkit-slider-thumb {
+ @mixin focus;
+}
+@supports not selector(:focus-visible) {
+ .slider__input:focus::-webkit-slider-thumb {
+ @mixin focus;
+ }
+}
+
+/*
+ * Slider Input Thumb
+ */
+/* Firefox */
+.slider__input::-moz-range-thumb {
+ box-sizing: border-box;
+
+ height: var(--slider-thumb-size);
+ width: var(--slider-thumb-size);
+ background: var(--eds-theme-color-text-neutral-default-inverse);
+ border: var(--eds-border-width-md) solid
+ var(--eds-theme-color-border-neutral-default);
+ border-radius: var(--eds-border-radius-full);
+}
+.slider__input:not(:disabled)::-moz-range-thumb {
+ cursor: grab;
+}
+.slider__input:not(:disabled)::-moz-range-thumb:active {
+ cursor: grabbing;
+}
+/* Firefox Focus */
+.slider__input:focus-visible::-moz-range-thumb {
+ @mixin focus;
+}
+@supports not selector(:focus-visible) {
+ .slider__input:focus::-moz-range-thumb {
+ @mixin focus;
+ }
+}
+
+/**
+ * Slider Markers wrapper below the track
+ */
+.slider__markers {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ /* Calculates offset of the markers to align with actual values */
+ padding-left: calc(var(--slider-thumb-size) / 2);
+ padding-right: calc(var(--slider-thumb-size) / 2);
+}
+
+/**
+ * Slider Marker 
+ */
+.slider__marker {
+ @mixin eds-theme-typography-caption-text-sm;
+
+ /* Centers the text to the marker location */
+ width: 0px;
+ display: flex;
+ justify-content: center;
+}
+
+.slider__marker--disabled {
+ color: var(--eds-theme-color-text-disabled);
+}

src/components/Slider/Slider.stories.tsx

@@ -0,0 +1,143 @@
+import { BADGE } from '@geometricpanda/storybook-addon-badges';
+import type { StoryObj, Meta } from '@storybook/react';
+import { userEvent } from '@storybook/testing-library';
+import React, { useState } from 'react';
+
+import { Slider } from './Slider';
+
+export default {
+ title: 'Components/Slider',
+ component: Slider,
+ parameters: {
+ layout: 'centered',
+ badges: [BADGE.BETA],
+ },
+ decorators: [
+ (Story) => (
+ <div className="w-96">
+ <Story />
+ </div>
+ ),
+ ],
+ render: (args) => <InteractiveSlider {...args} />,
+} as Meta<Args>;
+
+const InteractiveSlider = ({
+ min = 0,
+ max = 100,
+ step = 1,
+ value = 50,
+ ...args
+}: Args) => {
+ const [sliderValue, setSliderValue] = useState(value);
+ return (
+ <Slider
+ max={max}
+ min={min}
+ step={step}
+ {...args}
+ onChange={(e) => setSliderValue(Number(e.target.value))}
+ value={sliderValue}
+ />
+ );
+};
+
+type Args = React.ComponentProps<typeof Slider>;
+
+export const Default: StoryObj<Args> = {
+ args: {
+ label: 'Slider Label',
+ },
+};
+
+export const NoVisibleLabel: StoryObj<Args> = {
+ args: {
+ 'aria-label': 'Not visible slider label',
+ },
+};
+
+export const GeneratedMarkers: StoryObj<Args> = {
+ args: {
+ label: 'Slider Label',
+ min: 1,
+ max: 5,
+ value: 3,
+ step: 1,
+ markers: 'number',
+ },
+};
+
+export const NegativeNonIntegerMarkers: StoryObj<Args> = {
+ args: {
+ label: 'Slider Label',
+ min: -1,
+ max: 1,
+ value: 0,
+ step: 0.5,
+ markers: 'number',
+ },
+};
+
+export const Disabled: StoryObj<Args> = {
+ args: {
+ label: 'Slider Label',
+ min: 1,
+ max: 5,
+ value: 3,
+ step: 1,
+ markers: 'number',
+ disabled: true,
+ },
+};
+
+export const MarkersSmallValues: StoryObj<Args> = {
+ args: {
+ label: 'Slider Label',
+ min: 1,
+ max: 5,
+ value: 3,
+ markers: ['1', '2', '3', '4', '5'],
+ },
+};
+
+export const MarkersLargeValues: StoryObj<Args> = {
+ args: {
+ label: 'Slider Label',
+ min: 0,
+ max: 10000,
+ value: 5000,
+ step: 2500,
+ markers: 'number',
+ },
+ decorators: [
+ (Story) => (
+ <div className="w-80">
+ <Story />
+ </div>
+ ),
+ ],
+};
+
+export const FieldNote: StoryObj<Args> = {
+ args: {
+ label: 'Slider Label',
+ fieldNote: 'This is a fieldnote. It overrides the markers',
+ markers: 'number',
+ },
+};
+
+// For visual regression test
+export const Focus: StoryObj<Args> = {
+ args: {
+ label: 'Slider Label',
+ },
+ parameters: {
+ /**
+ * No point snapping the button as this story is testing visual regression on the focus state (snap no difference than Default story).
+ */
+ snapshot: { skip: true },
+ },
+ play: () => {
+ userEvent.tab();
+ },
+};

src/components/Slider/Slider.test.tsx

@@ -0,0 +1,36 @@
+import { generateSnapshots } from '@chanzuckerberg/story-utils';
+import { render } from '@testing-library/react';
+import React from 'react';
+import * as stories from './Slider.stories';
+import Slider from './';
+
+describe('<Slider />', () => {
+ generateSnapshots(stories);
+ describe('error throws', () => {
+ // expect console error from react, suppressed.
+ const consoleErrorMock = jest.spyOn(console, 'error');
+ consoleErrorMock.mockImplementation();
+ it('throws an error if no label or aria-label', () => {
+ expect(() => {
+ render(<Slider max={5} min={0} step={1} value={2} />);
+ }).toThrow(/You must provide a visible label or aria-label/);
+ });
+ it('throws an error if told to generate markers, but steps are not integers', () => {
+ expect(() => {
+ render(
+ <Slider
+ label="Test"
+ markers="number"
+ max={5}
+ min={0}
+ step={2}
+ value={2}
+ />,
+ );
+ }).toThrow(
+ /Number of markers is not an integer. Change step or supply custom markers/,
+ );
+ });
+ consoleErrorMock.mockRestore();
+ });
+});