fix(s2): ensure slider respects custom widths and correct the fillOff…

…set (#7138) * fix(s2): ensure slider respects custom widths and correct fillOffset * remove fieldInput from track styling * add chromatic story replicating issue * fix lint
adobe · Oct 10, 2024 · a45e2a5 · a45e2a5 · rspbot · Oct 10, 2024
1 parent 0c28454
commit a45e2a5
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/packages/@react-spectrum/s2/chromatic/Slider.stories.tsx b/packages/@react-spectrum/s2/chromatic/Slider.stories.tsx
@@ -68,6 +68,18 @@ FormatOptions.args = {
   formatOptions: {style: 'currency', currency: 'JPY'}
 };
 
+export const MinMaxValue = (args: any) => (
+  <div style={{display: 'flex', flexDirection: 'column', alignItems: 'start', gap: 8}}>
+    <Slider {...args} />
+  </div>
+);
+
+MinMaxValue.args = {
+  label: 'Size',
+  minValue: 1,
+  maxValue: 5
+};
+
 export const ContextualHelpExample = (args: any) => (
   <div style={{display: 'flex', flexDirection: 'column', alignItems: 'start', gap: 8}}>
     <Slider {...args} />

diff --git a/packages/@react-spectrum/s2/src/Slider.tsx b/packages/@react-spectrum/s2/src/Slider.tsx
@@ -148,7 +148,6 @@ const output = style({
 });
 
 export let track = style({
-  ...fieldInput(),
   gridArea: 'track',
   position: 'relative',
   width: 'full',
@@ -379,7 +378,7 @@ export function SliderBase<T extends number | number[]>(props: SliderBaseProps<T
               </FieldLabel>
               {labelPosition === 'top' && outputValue}
             </div>
-            <div className={style({gridArea: 'input', display: 'inline-flex', alignItems: 'center', gap: {default: 16, size: {L: 20, XL: 24}}})({size})}>
+            <div className={style({...fieldInput(), display: 'inline-flex', alignItems: 'center', gap: {default: 16, size: {L: 20, XL: 24}}})({size})}>
               {props.children}
               {labelPosition === 'side' && outputValue}
             </div>
@@ -416,7 +415,7 @@ function Slider(props: SliderProps, ref: FocusableRef<HTMLDivElement>) {
         className={track({size, labelPosition, isInForm: !!formContext})}>
         {({state, isDisabled}) => {
 
-          fillOffset = fillOffset !== undefined ? clamp(fillOffset, state.getThumbMinValue(0), state.getThumbMaxValue(0)) : 0;
+          fillOffset = fillOffset !== undefined ? clamp(fillOffset, state.getThumbMinValue(0), state.getThumbMaxValue(0)) : state.getThumbMinValue(0);
 
           let fillWidth = state.getThumbPercent(0) - state.getValuePercent(fillOffset);
           let isRightOfOffset = fillWidth > 0;