Fix wrapping and support uncontrolled value label in slider (#1399)

Co-authored-by: Danni <drobinson@livefyre.com>

Author: devongovett

packages/@adobe/spectrum-css-temp/components/slider/index.css

@@ -362,6 +362,7 @@ governing permissions and limitations under the License.
 
 .spectrum-Slider-value {
   margin-inline-start: var(--spectrum-slider-label-gap-x);
+  white-space: nowrap;
 }
 
 .spectrum-Slider-ticks {

packages/@react-spectrum/slider/src/RangeSlider.tsx

@@ -23,7 +23,7 @@ import styles from '@adobe/spectrum-css-temp/components/slider/vars.css';
 import {useLocale, useMessageFormatter} from '@react-aria/i18n';
 
 function RangeSlider(props: SpectrumRangeSliderProps, ref: FocusableRef<HTMLDivElement>) {
-  let {onChange, value, defaultValue, ...otherProps} = props;
+  let {onChange, value, defaultValue, getValueLabel, ...otherProps} = props;
 
   let baseProps: Omit<SliderBaseProps, 'children'> = {
     ...otherProps,
@@ -34,7 +34,8 @@ function RangeSlider(props: SpectrumRangeSliderProps, ref: FocusableRef<HTMLDivE
       : [props.minValue ?? DEFAULT_MIN_VALUE, props.maxValue ?? DEFAULT_MAX_VALUE],
     onChange(v) {
       onChange?.({start: v[0], end: v[1]});
-    }
+    },
+    getValueLabel: getValueLabel ? ([start, end]) => getValueLabel({start, end}) : undefined
   };
 
   let formatter = useMessageFormatter(intlMessages);

packages/@react-spectrum/slider/src/Slider.tsx

@@ -21,7 +21,7 @@ import styles from '@adobe/spectrum-css-temp/components/slider/vars.css';
 import {useLocale} from '@react-aria/i18n';
 
 function Slider(props: SpectrumSliderProps, ref: FocusableRef<HTMLDivElement>) {
-  let {onChange, value, defaultValue, isFilled, fillOffset, trackGradient, ...otherProps} = props;
+  let {onChange, value, defaultValue, isFilled, fillOffset, trackGradient, getValueLabel, ...otherProps} = props;
 
   let baseProps: Omit<SliderBaseProps, 'children'> = {
     ...otherProps,
@@ -30,7 +30,8 @@ function Slider(props: SpectrumSliderProps, ref: FocusableRef<HTMLDivElement>) {
     defaultValue: defaultValue != null ? [defaultValue] : undefined,
     onChange(v) {
       onChange?.(v[0]);
-    }
+    },
+    getValueLabel: getValueLabel ? ([v]) => getValueLabel(v) : undefined
   };
 
   let {direction} = useLocale();

packages/@react-spectrum/slider/src/SliderBase.tsx

@@ -40,7 +40,7 @@ function SliderBase(props: SliderBaseProps, ref: FocusableRef<HTMLDivElement>) {
     classes,
     style,
     labelPosition = 'top',
-    valueLabel,
+    getValueLabel,
     showValueLabel = !!props.label,
     formatOptions,
     ...otherProps
@@ -80,10 +80,31 @@ function SliderBase(props: SliderBaseProps, ref: FocusableRef<HTMLDivElement>) {
   let inputRef = useRef();
   let domRef = useFocusableRef(ref, inputRef);
 
-  let displayValue = valueLabel;
+  let displayValue = '';
   let maxLabelLength = undefined;
 
-  if (!displayValue) {
+  if (typeof getValueLabel === 'function') {
+    displayValue = getValueLabel(state.values);
+    switch (state.values.length) {
+      case 1:
+        maxLabelLength = Math.max(
+          getValueLabel([state.getThumbMinValue(0)]).length,
+          getValueLabel([state.getThumbMaxValue(0)]).length
+        );
+        break;
+      case 2:
+        // Try all possible combinations of min and max values.
+        maxLabelLength = Math.max(
+          getValueLabel([state.getThumbMinValue(0), state.getThumbMinValue(1)]).length,
+          getValueLabel([state.getThumbMinValue(0), state.getThumbMaxValue(1)]).length,
+          getValueLabel([state.getThumbMaxValue(0), state.getThumbMinValue(1)]).length,
+          getValueLabel([state.getThumbMaxValue(0), state.getThumbMaxValue(1)]).length
+        );
+        break;
+      default:
+        throw new Error('Only sliders with 1 or 2 handles are supported!');
+    }
+  } else {
     maxLabelLength = Math.max([...formatter.format(state.getThumbMinValue(0))].length, [...formatter.format(state.getThumbMaxValue(0))].length);
     switch (state.values.length) {
       case 1:

packages/@react-spectrum/slider/stories/RangeSlider.stories.tsx

@@ -13,7 +13,7 @@
 import {action} from '@storybook/addon-actions';
 import {ErrorBoundary} from '@react-spectrum/story-utils';
 import {RangeSlider} from '../';
-import React, {useState} from 'react';
+import React from 'react';
 import {SpectrumRangeSliderProps} from '@react-types/slider';
 import {storiesOf} from '@storybook/react';
 
@@ -58,10 +58,11 @@ storiesOf('Slider/RangeSlider', module)
   )
   .add(
     'custom valueLabel',
-    () => {
-      let [state, setState] = useState({start: 20, end: 50});
-      return render({label: 'Label', value: state, onChange: setState, valueLabel: `${state.start} <-> ${state.end}`});
-    }
+    () => render({label: 'Label', getValueLabel: (value) => `${value.start} <-> ${value.end}`})
+  )
+  .add(
+    'custom valueLabel with label overflow',
+    () => render({label: 'This is a rather long label for this narrow slider element.', getValueLabel: (value) => `${value.start} <-> ${value.end}`})
   )
   .add(
     'labelPosition: side',

packages/@react-spectrum/slider/stories/Slider.stories.tsx

@@ -13,7 +13,7 @@
 import {action} from '@storybook/addon-actions';
 import {ErrorBoundary} from '@react-spectrum/story-utils';
 import {Flex} from '@adobe/react-spectrum';
-import React, {useState} from 'react';
+import React from 'react';
 import {Slider} from '../';
 import {SpectrumSliderProps} from '@react-types/slider';
 import {storiesOf} from '@storybook/react';
@@ -70,10 +70,11 @@ storiesOf('Slider', module)
   )
   .add(
     'custom valueLabel',
-    () => {
-      let [state, setState] = useState(0);
-      return render({label: 'Label', value: state, onChange: setState, valueLabel: `A ${state} B`});
-    }
+    () => render({label: 'Label', getValueLabel: state => `A ${state} B`})
+  )
+  .add(
+    'custom valueLabel with label overflow',
+    () => render({label: 'This is a rather long label for this narrow slider element.', getValueLabel: state => `A ${state} B`})
   )
   .add(
     'labelPosition: side',

packages/@react-spectrum/slider/test/RangeSlider.test.tsx

@@ -162,7 +162,7 @@ describe('RangeSlider', function () {
   it('supports a custom valueLabel', function () {
     function Test() {
       let [value, setValue] = useState({start: 10, end: 40});
-      return (<RangeSlider label="The Label" value={value} onChange={setValue} valueLabel={`A${value.start}B${value.end}C`} />);
+      return (<RangeSlider label="The Label" value={value} onChange={setValue} getValueLabel={value => `A${value.start}B${value.end}C`} />);
     }
 
     let {getAllByRole, getByRole} = render(<Test />);

packages/@react-spectrum/slider/test/Slider.test.tsx

@@ -145,10 +145,10 @@ describe('Slider', function () {
     expect(renders).toStrictEqual([50, 55]);
   });
 
-  it('supports a custom valueLabel', function () {
+  it('supports a custom getValueLabel', function () {
     function Test() {
       let [value, setValue] = useState(50);
-      return (<Slider label="The Label" value={value} onChange={setValue} valueLabel={`A${value}B`} />);
+      return (<Slider label="The Label" value={value} onChange={setValue} getValueLabel={value => `A${value}B`} />);
     }
 
     let {getByRole} = render(<Test />);

packages/@react-types/slider/src/index.d.ts

@@ -1,5 +1,4 @@
 import {AriaLabelingProps, AriaValidationProps, FocusableDOMProps, FocusableProps, LabelableProps, LabelPosition, Orientation, RangeInputBase, RangeValue, StyleProps, Validation, ValueBase} from '@react-types/shared';
-import {ReactNode} from 'react';
 
 export interface BaseSliderProps extends RangeInputBase<number>, LabelableProps, AriaLabelingProps {
   orientation?: Orientation,
@@ -24,8 +23,8 @@ export interface SpectrumBarSliderBase<T> extends BaseSliderProps, ValueBase<T>,
   labelPosition?: LabelPosition,
   /** Whether the value's label is displayed. True by default if there's a `label`, false by default if not. */
   showValueLabel?: boolean,
-  /** The content to display as the value's label. Overrides default formatted number. */
-  valueLabel?: ReactNode
+  /** A function that returns the content to display as the value's label. Overrides default formatted number. */
+  getValueLabel?: (value: T) => string
 }
 
 export interface SpectrumSliderProps extends SpectrumBarSliderBase<number> {