feat(Slider): add support for custom tooltip content

Author: kmcfaul

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

@@ -42,8 +42,10 @@ export interface SliderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onCh
   className?: string;
   /** Array of custom slider step objects (value and label of each step) for the slider. */
   customSteps?: SliderStepObject[];
-  /* Adds a tooltip over the slider thumb containing the current value. */
+  /** Enables a tooltip over the silder thumb. Defaults to the current value, or tooltipContent if provided. */
   hasTooltipOverThumb?: boolean;
+  /** Content of the tooltip over the slider thumb. Defaults to the current value.  */
+  tooltipContent?: React.ReactNode;
   /** Accessible label for the input field. */
   inputAriaLabel?: string;
   /** Text label that is place after the input field. */
@@ -101,6 +103,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
   inputAriaLabel = 'Slider value input',
   thumbAriaLabel = 'Value',
   hasTooltipOverThumb = false,
+  tooltipContent,
   inputPosition = 'end',
   onChange,
   leftActions,
@@ -477,7 +480,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
             className={css('pf-v6-m-tabular-nums')}
             triggerRef={thumbRef}
             entryDelay={0}
-            content={findAriaTextValue()}
+            content={tooltipContent ? tooltipContent : findAriaTextValue()}
           >
             {thumbComponent}
           </Tooltip>

packages/react-core/src/components/Slider/__tests__/Slider.test.tsx

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { Slider } from '../Slider';
 import { Button } from '../../Button';
 
@@ -77,6 +78,17 @@ describe('slider', () => {
     const { asFragment } = render(<Slider value={50} hasTooltipOverThumb />);
     expect(asFragment()).toMatchSnapshot();
   });
+
+  test('renders slider with custom tooltip content on thumb', async () => {
+    const user = userEvent.setup();
+
+    render(<Slider value={50} hasTooltipOverThumb tooltipContent="Custom tooltip content" />);
+
+    await user.hover(screen.getByRole('slider'));
+
+    await screen.findByRole('tooltip');
+    expect(screen.getByRole('tooltip')).toHaveTextContent('Custom tooltip content');
+  });
 });
 
 test('renders slider with aria-labelledby', () => {

packages/react-core/src/components/Slider/examples/Slider.md

@@ -50,6 +50,12 @@ import LockOpenIcon from '@patternfly/react-icons/dist/esm/icons/lock-open-icon'
 
 ```
 
+### Custom step tooltip
+
+```ts file="./SliderCustomTooltip.tsx"
+
+```
+
 ## Types
 
 ### SliderOnChangeEvent

packages/react-core/src/components/Slider/examples/SliderCustomTooltip.tsx

@@ -0,0 +1,34 @@
+import { useState } from 'react';
+import { Slider, SliderOnChangeEvent } from '@patternfly/react-core';
+
+export const SliderCustomTooltip: React.FunctionComponent = () => {
+  const [value, setValue] = useState(50);
+  const steps = [
+    { value: 0, label: '0' },
+    { value: 12.5, label: '1', isLabelHidden: true },
+    { value: 25, label: '2' },
+    { value: 37.5, label: '3', isLabelHidden: true },
+    { value: 50, label: '4' },
+    { value: 62.5, label: '5', isLabelHidden: true },
+    { value: 75, label: '6' },
+    { value: 87.5, label: '7', isLabelHidden: true },
+    { value: 100, label: '8' }
+  ];
+
+  const displayValue = () => {
+    const step = steps.find((step) => step.value === value);
+    return step ? step.label : 0;
+  };
+
+  const customTooltipContent = () => <div>Custom tooltip content for step: {displayValue()}</div>;
+
+  return (
+    <Slider
+      hasTooltipOverThumb
+      tooltipContent={customTooltipContent()}
+      value={value}
+      onChange={(_event: SliderOnChangeEvent, value: number) => setValue(value)}
+      customSteps={steps}
+    />
+  );
+};