feat(react-range-slider): introduce RangeSlider component

apps/vr-tests-react-components/src/stories/RangeSlider/RangeSlider.stories.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react-webpack5';
+import { Steps, type StoryParameters } from 'storywright';
+import { RangeSlider } from '@fluentui/react-slider';
+import { getStoryVariant, RTL, TestWrapperDecorator } from '../../utilities';
+
+export default {
+  title: 'RangeSlider Converged',
+  decorators: [TestWrapperDecorator],
+  parameters: {
+    storyWright: { steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() },
+  } satisfies StoryParameters,
+} satisfies Meta<typeof RangeSlider>;
+
+export const Horizontal0 = () => <RangeSlider defaultValue={{ start: 0, end: 0 }} />;
+Horizontal0.storyName = 'Horizontal - 0%';
+
+export const Horizontal0RTL = getStoryVariant(Horizontal0, RTL);
+
+export const HorizontalMiddle = () => <RangeSlider defaultValue={{ start: 20, end: 80 }} />;
+HorizontalMiddle.storyName = 'Horizontal - Middle';
+
+export const HorizontalMiddleRTL = getStoryVariant(HorizontalMiddle, RTL);
+
+export const Horizontal100 = () => <RangeSlider defaultValue={{ start: 100, end: 100 }} />;
+Horizontal100.storyName = 'Horizontal - 100%';
+
+export const Horizontal100RTL = getStoryVariant(Horizontal100, RTL);
+
+export const HorizontalFullRange = () => <RangeSlider defaultValue={{ start: 0, end: 100 }} />;
+HorizontalFullRange.storyName = 'Horizontal - Full Range';
+
+export const Vertical0 = () => <RangeSlider vertical defaultValue={{ start: 0, end: 0 }} />;
+Vertical0.storyName = 'Vertical - 0%';
+
+export const Vertical0RTL = getStoryVariant(Vertical0, RTL);
+
+export const VerticalMiddle = () => <RangeSlider vertical defaultValue={{ start: 20, end: 80 }} />;
+VerticalMiddle.storyName = 'Vertical - Middle';
+
+export const VerticalMiddleRTL = getStoryVariant(VerticalMiddle, RTL);
+
+export const Vertical100 = () => <RangeSlider vertical defaultValue={{ start: 100, end: 100 }} />;
+Vertical100.storyName = 'Vertical - 100%';
+
+export const Vertical100RTL = getStoryVariant(Vertical100, RTL);
+
+export const SizeMedium = () => <RangeSlider size="medium" defaultValue={{ start: 30, end: 70 }} />;
+SizeMedium.storyName = 'Size - medium';
+
+export const SizeSmall = () => <RangeSlider size="small" defaultValue={{ start: 30, end: 70 }} />;
+SizeSmall.storyName = 'Size - small';
+
+export const SizeSmallVertical = () => <RangeSlider size="small" vertical defaultValue={{ start: 30, end: 70 }} />;
+SizeSmallVertical.storyName = 'Size - small vertical';
+
+export const Step = () => <RangeSlider step={10} min={0} max={100} defaultValue={{ start: 20, end: 80 }} />;
+Step.storyName = 'Step';
+
+export const StepVertical = () => (
+  <RangeSlider step={10} min={0} max={100} vertical defaultValue={{ start: 20, end: 80 }} />
+);
+StepVertical.storyName = 'Step - vertical';
+
+export const MinMax = () => <RangeSlider min={10} max={60} defaultValue={{ start: 20, end: 50 }} />;
+MinMax.storyName = 'Custom min/max';

apps/vr-tests-react-components/src/stories/RangeSlider/RangeSliderInteractions.stories.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react-webpack5';
+import { Steps, type StoryParameters } from 'storywright';
+import { RangeSlider } from '@fluentui/react-slider';
+import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL, TestWrapperDecorator } from '../../utilities';
+
+export default {
+  title: 'RangeSlider Converged',
+  decorators: [TestWrapperDecorator],
+  parameters: {
+    storyWright: {
+      steps: new Steps()
+        .snapshot('default', { cropTo: '.testWrapper' })
+        .hover('.test-class')
+        .snapshot('hover', { cropTo: '.testWrapper' })
+        .mouseDown('.test-class')
+        .snapshot('pressed', { cropTo: '.testWrapper' })
+        .mouseUp('.test-class')
+        .end(),
+    },
+  } satisfies StoryParameters,
+} satisfies Meta<typeof RangeSlider>;
+
+export const Root = () => <RangeSlider className="test-class" defaultValue={{ start: 20, end: 80 }} />;
+
+export const RootRTL = getStoryVariant(Root, RTL);
+
+export const RootHighContrast = getStoryVariant(Root, HIGH_CONTRAST);
+
+export const RootDarkMode = getStoryVariant(Root, DARK_MODE);
+
+export const Vertical = () => <RangeSlider className="test-class" vertical defaultValue={{ start: 20, end: 80 }} />;
+
+export const VerticalRTL = getStoryVariant(Vertical, RTL);
+
+export const Disabled = () => <RangeSlider className="test-class" disabled defaultValue={{ start: 20, end: 60 }} />;
+
+export const DisabledHighContrast = getStoryVariant(Disabled, HIGH_CONTRAST);
+
+export const DisabledDarkMode = getStoryVariant(Disabled, DARK_MODE);
+
+export const DisabledVertical = () => (
+  <RangeSlider className="test-class" disabled vertical defaultValue={{ start: 20, end: 60 }} />
+);

change/@fluentui-react-utilities-62e6d74e-d2a9-4d6b-a3d9-d41e4eda4d5e.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "extracts getPercent from Slider component and adds it as a helper to react-utilities so it can be shared by Slider and RangeSlider",
+  "packageName": "@fluentui/react-utilities",
+  "email": "soniaboller@gmail.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-slider/library/etc/react-slider.api.md

@@ -6,6 +6,8 @@
 
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
+import type { EventData } from '@fluentui/react-utilities';
+import type { EventHandler } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
@@ -18,11 +20,63 @@ export const RangeSlider: ForwardRefComponent<RangeSliderProps>;
 // @public (undocumented)
 export const rangeSliderClassNames: SlotClassNames<RangeSliderSlots>;
 
-// @public
-export type RangeSliderProps = ComponentProps<RangeSliderSlots> & {};
+// @public (undocumented)
+export const rangeSliderCSSVars: {
+    rangeSliderDirectionVar: string;
+    rangeSliderInnerThumbRadiusVar: string;
+    rangeSliderLowerProgressVar: string;
+    rangeSliderUpperProgressVar: string;
+    rangeSliderProgressColorVar: string;
+    rangeSliderRailSizeVar: string;
+    rangeSliderRailColorVar: string;
+    rangeSliderStepsPercentVar: string;
+    rangeSliderThumbColorVar: string;
+    rangeSliderThumbSizeVar: string;
+};
 
-// @public
-export type RangeSliderState = ComponentState<RangeSliderSlots>;
+// @public (undocumented)
+export type RangeSliderOnChangeData = EventData<'change', React_2.ChangeEvent<HTMLInputElement>> & {
+    value: RangeSliderValue;
+};
+
+// @public (undocumented)
+export type RangeSliderProps = Omit<ComponentProps<Partial<RangeSliderSlots>, 'startInput' | 'endInput'>, 'defaultValue' | 'onChange' | 'size' | 'value'> & {
+    defaultValue?: RangeSliderValue;
+    disabled?: boolean;
+    max?: number;
+    min?: number;
+    size?: 'small' | 'medium';
+    step?: number;
+    value?: RangeSliderValue;
+    vertical?: boolean;
+    onChange?: EventHandler<RangeSliderOnChangeData>;
+};
+
+// @public (undocumented)
+export type RangeSliderSlots = {
+    root: NonNullable<Slot<'div'>>;
+    rail: NonNullable<Slot<'div'>>;
+    startThumb: NonNullable<Slot<'div'>>;
+    endThumb: NonNullable<Slot<'div'>>;
+    startInput: NonNullable<Slot<'input'>> & {
+        orient?: 'horizontal' | 'vertical';
+    };
+    endInput: NonNullable<Slot<'input'>> & {
+        orient?: 'horizontal' | 'vertical';
+    };
+};
+
+// @public (undocumented)
+export type RangeSliderState = ComponentState<RangeSliderSlots> & Pick<RangeSliderProps, 'disabled' | 'size' | 'vertical'> & {
+    value: RangeSliderValue;
+    activeThumb: 'start' | 'end';
+};
+
+// @public (undocumented)
+export type RangeSliderValue = {
+    start: number;
+    end: number;
+};
 
 // @public
 export const renderRangeSlider_unstable: (state: RangeSliderState) => JSXElement;
@@ -83,7 +137,10 @@ export type SliderState = ComponentState<SliderSlots> & Pick<SliderProps, 'disab
 // @public
 export const useRangeSlider_unstable: (props: RangeSliderProps, ref: React_2.Ref<HTMLDivElement>) => RangeSliderState;
 
-// @public
+// @public (undocumented)
+export const useRangeSliderState_unstable: (state: RangeSliderState, props: RangeSliderProps) => RangeSliderState;
+
+// @public (undocumented)
 export const useRangeSliderStyles_unstable: (state: RangeSliderState) => RangeSliderState;
 
 // @public (undocumented)

packages/react-components/react-slider/library/src/RangeSlider.ts

@@ -1,8 +1,16 @@
 export {
   rangeSliderClassNames,
+  rangeSliderCSSVars,
   RangeSlider,
   renderRangeSlider_unstable,
   useRangeSlider_unstable,
+  useRangeSliderState_unstable,
   useRangeSliderStyles_unstable,
 } from './components/RangeSlider/index';
-export type { RangeSliderProps, RangeSliderState } from './components/RangeSlider/index';
+export type {
+  RangeSliderOnChangeData,
+  RangeSliderProps,
+  RangeSliderSlots,
+  RangeSliderState,
+  RangeSliderValue,
+} from './components/RangeSlider/index';