feat: adding formatValue to allow customizing the value format (#2268)

* feat: adding formatValue to allow customizing the value format

* docs: update props table for SliderField

* docs: update docs

* Create red-pigs-rhyme.md

* chore: address feedback

* test: add unit tests

* chore: address comments

Author: zchenwei

.changeset/red-pigs-rhyme.md

@@ -0,0 +1,23 @@
+---
+"@aws-amplify/ui-react": minor
+---
+
+feat: adding `formatValue` prop on SliderField to allow formatting the value
+
+***Example***
+
+```jsx
+export const SliderFieldFormatValueExample = () => {
+  const formatValue = (value: number) => {
+    return `${value}%`;
+  };
+  return (
+    <SliderField
+      label="SliderField with formatted value"
+      defaultValue={50}
+      formatValue={formatValue}
+    />
+  );
+};
+
+```

docs/src/pages/[platform]/components/sliderfield/examples/SliderFieldFormatValueExample.tsx

@@ -0,0 +1,14 @@
+import { SliderField } from '@aws-amplify/ui-react';
+
+export const SliderFieldFormatValueExample = () => {
+  const formatValue = (value: number) => {
+    return `${value}%`;
+  };
+  return (
+    <SliderField
+      label="SliderField with formatted value"
+      defaultValue={50}
+      formatValue={formatValue}
+    />
+  );
+};

docs/src/pages/[platform]/components/sliderfield/examples/index.ts

@@ -1,6 +1,7 @@
 export { DefaultSliderFieldExample } from './DefaultSliderFieldExample';
 export { ControlledSliderFieldExample } from './ControlledSliderFieldExample';
 export { SliderFieldBasicsExample } from './SliderFieldBasicsExample';
+export { SliderFieldFormatValueExample } from './SliderFieldFormatValueExample';
 export { SliderFieldOrientationExample } from './SliderFieldOrientationExample';
 export { SliderFieldAriaExample } from './SliderFieldAriaExample';
 export { SliderFieldIconsExample } from './SliderFieldIconsExample';

docs/src/pages/[platform]/components/sliderfield/props-table.mdx

@@ -139,6 +139,16 @@ StyleToken<Property.Color>
       <TableCell className="props-table__tr-description">Applies to the filled-in part of the SliderField track</TableCell>
     </TableRow>
 
+    <TableRow>
+      <TableCell className="props-table__tr-name">formatValue</TableCell>
+      <TableCell>
+```jsx
+(value: number) => React.ReactNode
+```
+</TableCell>
+      <TableCell className="props-table__tr-description">Use to format how the value gets rendered</TableCell>
+    </TableRow>
+
     <TableRow>
       <TableCell className="props-table__tr-name">hasError</TableCell>
       <TableCell>

docs/src/pages/[platform]/components/sliderfield/react.mdx

@@ -5,6 +5,7 @@ import {
   DefaultSliderFieldExample,
   ControlledSliderFieldExample,
   SliderFieldBasicsExample,
+  SliderFieldFormatValueExample,
   SliderFieldOrientationExample,
   SliderFieldAriaExample,
   SliderFieldIconsExample,
@@ -135,6 +136,19 @@ To add icons on either side of the SliderField, you may use the `outerStartCompo
   </ExampleCode>
 </Example>
 
+### Format value
+To format how the `value` is displayed, you can pass in a render function to `formatValue` prop.
+
+<Example>
+  <SliderFieldFormatValueExample />
+  <ExampleCode>
+  ```jsx file=./examples/SliderFieldFormatValueExample.tsx
+
+  ```
+
+  </ExampleCode>
+</Example>
+
 ### Validation error
 
 To validate the SliderField input, use the `hasError` and `errorMessage` props.
@@ -190,15 +204,6 @@ To override styling on all SliderField components, you can set the Amplify CSS v
 }
 ```
 
-To replace SliderField styling, unset it:
-
-```css
-.amplify-sliderfield {
-  all: unset;
-  /* Add your styling here*/
-}
-```
-
 ### Local styling
 
 To override styling on a specific SliderField, you can use class selectors or style props.

packages/react/src/primitives/SliderField/SliderField.tsx

@@ -29,6 +29,7 @@ const SliderFieldPrimitive: Primitive<SliderFieldProps, typeof Root> = (
     emptyTrackColor,
     errorMessage,
     filledTrackColor,
+    formatValue,
     hasError = false,
     id,
     isDisabled,
@@ -77,6 +78,17 @@ const SliderFieldPrimitive: Primitive<SliderFieldProps, typeof Root> = (
     [onChange]
   );
 
+  const renderedValue = React.useMemo(() => {
+    const formattedValue = isFunction(formatValue)
+      ? formatValue(currentValue)
+      : currentValue;
+    return typeof formatValue === 'string' ? (
+      <View as="span">{formattedValue}</View>
+    ) : (
+      formattedValue
+    );
+  }, [currentValue, formatValue]);
+
   const isVertical = orientation === 'vertical';
   const componentClasses = classNames(
     ComponentClassNames.SliderFieldTrack,
@@ -109,7 +121,7 @@ const SliderFieldPrimitive: Primitive<SliderFieldProps, typeof Root> = (
         visuallyHidden={labelHidden}
       >
         <View as="span">{label}</View>
-        {!isValueHidden ? <View as="span">{currentValue}</View> : null}
+        {!isValueHidden ? renderedValue : null}
       </Label>
       <FieldDescription
         id={descriptionId}

packages/react/src/primitives/SliderField/__tests__/SliderField.test.tsx

@@ -8,6 +8,7 @@ import {
   SLIDER_ROOT_TEST_ID,
   SLIDER_TRACK_TEST_ID,
 } from '../SliderField';
+import { Heading } from '../../Heading';
 import {
   testFlexProps,
   expectFlexContainerStyleProps,
@@ -85,13 +86,43 @@ describe('SliderField: ', () => {
 
     it('should display value if isValueHidden is false', async () => {
       render(<SliderField defaultValue={10} label="slider" />);
-      const value = await screen.queryByText('10');
+      const value = screen.queryByText('10');
       expect(value).toBeInTheDocument();
     });
 
+    it('should display string formatted value if formatValue is provided', async () => {
+      render(
+        <SliderField
+          defaultValue={10}
+          label="slider"
+          formatValue={(value) => {
+            return `${value}%`;
+          }}
+        />
+      );
+
+      const value = await screen.findByText('10%');
+      expect(value).toBeInTheDocument();
+    });
+
+    it('should display component-based formatted value if formatValue is provided', async () => {
+      render(
+        <SliderField
+          defaultValue={10}
+          label="slider"
+          formatValue={(value) => {
+            return <Heading>{value}</Heading>;
+          }}
+        />
+      );
+
+      const heading = await screen.findByText('10');
+      expect(heading).toHaveClass(ComponentClassNames.Heading);
+    });
+
     it('should not display value if isValueHidden is true', async () => {
       render(<SliderField defaultValue={10} label="slider" isValueHidden />);
-      const value = await screen.queryByText('10');
+      const value = screen.queryByText('10');
       expect(value).not.toBeInTheDocument();
     });
   });
@@ -290,7 +321,7 @@ describe('SliderField: ', () => {
         />
       );
 
-      const errorText = await screen.queryByText(errorMessage);
+      const errorText = screen.queryByText(errorMessage);
       expect(errorText).not.toBeInTheDocument();
     });
 
@@ -303,7 +334,7 @@ describe('SliderField: ', () => {
           hasError
         />
       );
-      const errorText = await screen.queryByText(errorMessage);
+      const errorText = screen.queryByText(errorMessage);
       expect(errorText.innerHTML).toContain(errorMessage);
     });
   });
@@ -318,7 +349,7 @@ describe('SliderField: ', () => {
         />
       );
 
-      const descriptiveText = await screen.queryByText('Description');
+      const descriptiveText = screen.queryByText('Description');
       expect(descriptiveText.innerHTML).toContain('Description');
     });
 

packages/react/src/primitives/types/sliderField.ts

@@ -1,4 +1,5 @@
 import { Property } from 'csstype';
+import React from 'react';
 
 import { StyleToken } from './style';
 import { TextInputFieldProps } from './textField';
@@ -74,6 +75,12 @@ export interface SliderFieldProps extends TextInputFieldProps, ViewProps {
    */
   defaultValue?: number;
 
+  /**
+   * @description
+   * Use to format how the value gets rendered
+   */
+  formatValue?: (value: number) => React.ReactNode;
+
   /**
    * @description
    * Handles changes to the current value when using the SliderField as a controlled component