feat: Add format prop to RAC Slider component to enable aria-valuetext customization.

Author: robin-kestrel

packages/@adobe/react-spectrum/src/index.ts

@@ -65,7 +65,7 @@ export {Well} from '@react-spectrum/well';
 export {Item, Section} from '@react-stately/collections';
 export {useAsyncList, useListData, useTreeData} from '@react-stately/data';
 export {VisuallyHidden} from '@react-aria/visually-hidden';
-export {useCollator, useDateFormatter, useFilter, useLocale, useLocalizedStringFormatter, useMessageFormatter, useNumberFormatter} from '@react-aria/i18n';
+export {useCollator, useCustomNumberFormatter, useDateFormatter, useFilter, useLocale, useLocalizedStringFormatter, useMessageFormatter, useNumberFormatter} from '@react-aria/i18n';
 export {SSRProvider} from '@react-aria/ssr';
 export {useDragAndDrop, DIRECTORY_DRAG_TYPE} from '@react-spectrum/dnd';
 

packages/@react-aria/i18n/src/index.ts

@@ -16,6 +16,7 @@ export {useLocalizedStringFormatter, useLocalizedStringDictionary} from './useLo
 export {useListFormatter} from './useListFormatter';
 export {useDateFormatter} from './useDateFormatter';
 export {useNumberFormatter} from './useNumberFormatter';
+export {useCustomNumberFormatter} from './useCustomNumberFormatter';
 export {useCollator} from './useCollator';
 export {useFilter} from './useFilter';
 

packages/@react-aria/i18n/src/useCustomNumberFormatter.ts

@@ -0,0 +1,37 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {NumberFormatOptions, NumberFormatter} from '@internationalized/number';
+import {useLocale} from './context';
+import {useMemo} from 'react';
+
+export type CustomNumberFormat = NumberFormatOptions | ((value: number, locale: string) => string);
+
+export type CustomNumberFormatter = {
+  format(value: number): string
+}
+
+/**
+ * Provides localized number formatting for the current locale. Automatically updates when the locale changes,
+ * and handles caching of the number formatter for performance.
+ * @param format - Formatting options or function.
+ */
+export function useCustomNumberFormatter(format: CustomNumberFormat = {}): CustomNumberFormatter {
+  let {locale} = useLocale();
+  return useMemo(
+    () =>
+      typeof format === 'function'
+        ? {format: (value) => format(value, locale)}
+        : new NumberFormatter(locale, format),
+    [locale, format]
+  );
+}

packages/@react-stately/slider/src/useSliderState.ts

@@ -150,7 +150,7 @@ const DEFAULT_MAX_VALUE = 100;
 const DEFAULT_STEP_VALUE = 1;
 
 export interface SliderStateOptions<T> extends SliderProps<T> {
-  numberFormatter: Intl.NumberFormat
+  numberFormatter: { format(value: number): string }
 }
 
 /**

packages/react-aria-components/src/Slider.tsx

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaSliderProps, AriaSliderThumbProps, HoverEvents, mergeProps, Orientation, useFocusRing, useHover, useNumberFormatter, useSlider, useSliderThumb, VisuallyHidden} from 'react-aria';
+import {AriaSliderProps, AriaSliderThumbProps, HoverEvents, mergeProps, Orientation, useCustomNumberFormatter, useFocusRing, useHover, useSlider, useSliderThumb, VisuallyHidden} from 'react-aria';
 import {ContextValue, forwardRefType, Provider, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils';
 import {filterDOMProps} from '@react-aria/utils';
 import {LabelContext} from './Label';
@@ -21,6 +21,11 @@ export interface SliderProps<T = number | number[]> extends Omit<AriaSliderProps
   /**
    * The display format of the value label.
    */
+  format?: Intl.NumberFormatOptions | ((value: number, locale: string) => string),
+  /**
+   * The display format of the value label.
+   * @deprecated Use `format` instead.
+   */
   formatOptions?: Intl.NumberFormatOptions
 }
 
@@ -49,7 +54,7 @@ export interface SliderRenderProps {
 function Slider<T extends number | number[]>(props: SliderProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, SliderContext);
   let trackRef = useRef<HTMLDivElement>(null);
-  let numberFormatter = useNumberFormatter(props.formatOptions);
+  let numberFormatter = useCustomNumberFormatter(props.format ?? props.formatOptions);
   let state = useSliderState({...props, numberFormatter});
   let [labelRef, label] = useSlot();
   let {

packages/react-aria-components/stories/Slider.stories.tsx

@@ -95,6 +95,55 @@ SliderCSS.argTypes = {
   }
 };
 
+interface SliderCustomFormatProps<T = number | number[]> extends SliderProps<T> {
+  fahrenheit: boolean,
+  showAlternative: boolean
+}
+
+function temperatureUnitFormat(fahrenheit: boolean): Intl.NumberFormatOptions {
+  return {
+    style: 'unit',
+    unit: fahrenheit ? 'fahrenheit' : 'celsius',
+    maximumFractionDigits: 1
+  };
+}
+
+export const SliderCustomFormat = ({fahrenheit, showAlternative, ...props}: SliderCustomFormatProps) => {
+  const mainFormat = temperatureUnitFormat(fahrenheit);
+  let format: Intl.NumberFormatOptions | ((value: number, locale: string) => string) = mainFormat;
+
+  if (showAlternative) {
+    format = (value, locale) => {
+      const formatter = new Intl.NumberFormat(locale, mainFormat);
+      const altValue = fahrenheit ? value * 9 / 5 + 32 : (value - 32) * 5 / 9;
+      const altFormat = temperatureUnitFormat(!fahrenheit);
+      const altFormatter = new Intl.NumberFormat(locale, altFormat);
+      return `${formatter.format(value)} (${altFormatter.format(altValue)})`;
+    };
+  }
+
+  return (
+    <Slider {...props} defaultValue={32} className={styles.slider} format={format}>
+      <div className={styles.label}>
+        <Label>Temperature</Label>
+        <SliderOutput />
+      </div>
+      <SliderTrack className={styles.track}>
+        <SliderThumb className={styles.thumb} />
+      </SliderTrack>
+    </Slider>
+  );
+};
+
+SliderCustomFormat.args = {
+  fahrenheit: false,
+  showAlternative: false,
+  isDisabled: false,
+  minValue: 0,
+  maxValue: 100,
+  step: 1
+};
+
 const CustomThumb = ({index, children}: {index: number, children: React.ReactNode}) => {
   return (
     <SliderThumb

packages/react-aria/src/index.ts

@@ -19,7 +19,7 @@ export {useDateField, useDatePicker, useDateRangePicker, useDateSegment, useTime
 export {useDialog} from '@react-aria/dialog';
 export {useDrag, useDrop, useDraggableCollection, useDroppableCollection, useDroppableItem, useDropIndicator, useDraggableItem, useClipboard, DragPreview, ListDropTargetDelegate, DIRECTORY_DRAG_TYPE, isDirectoryDropItem, isFileDropItem, isTextDropItem} from '@react-aria/dnd';
 export {FocusRing, FocusScope, useFocusManager, useFocusRing, useFocusable} from '@react-aria/focus';
-export {I18nProvider, useCollator, useDateFormatter, useFilter, useLocale, useLocalizedStringFormatter, useMessageFormatter, useNumberFormatter} from '@react-aria/i18n';
+export {I18nProvider, useCollator, useCustomNumberFormatter, useDateFormatter, useFilter, useLocale, useLocalizedStringFormatter, useMessageFormatter, useNumberFormatter} from '@react-aria/i18n';
 export {useFocus, useFocusVisible, useFocusWithin, useHover, useInteractOutside, useKeyboard, useMove, usePress, useLongPress} from '@react-aria/interactions';
 export {useField, useLabel} from '@react-aria/label';
 export {useGridList, useGridListItem, useGridListSelectionCheckbox} from '@react-aria/gridlist';