From 383a0786eb584b42a67cc875b23f3036e8d31895 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Wed, 27 Oct 2021 12:52:04 +0200 Subject: [PATCH 1/6] feat(slider, tooltip): add static classes --- ...-6b0d652f-c496-4f99-9615-07be85a380b8.json | 7 + ...-4bbcc182-732e-4845-bfe2-65ec6a72b6c3.json | 7 + packages/react-slider/etc/react-slider.api.md | 12 +- .../RangedSlider/RangedSlider.test.tsx | 24 +- .../src/components/RangedSlider/Spec.md | 32 +- .../__snapshots__/RangedSlider.test.tsx.snap | 220 +++++------ .../src/components/RangedSlider/index.ts | 2 +- .../RangedSlider/useRangedSliderStyles.ts | 11 +- .../src/components/Slider/Slider.test.tsx | 24 +- .../src/components/Slider/Spec.md | 24 +- .../Slider/__snapshots__/Slider.test.tsx.snap | 348 +++++++++--------- .../src/components/Slider/index.ts | 2 +- .../src/components/Slider/useSliderStyles.ts | 27 +- .../react-slider/src/utils/renderMarks.tsx | 14 +- .../react-tooltip/etc/react-tooltip.api.md | 3 + .../src/components/Tooltip/Tooltip.test.tsx | 1 + .../__snapshots__/Tooltip.test.tsx.snap | 4 +- .../src/components/Tooltip/index.ts | 2 +- .../components/Tooltip/useTooltipStyles.ts | 3 + 19 files changed, 399 insertions(+), 368 deletions(-) create mode 100644 change/@fluentui-react-slider-6b0d652f-c496-4f99-9615-07be85a380b8.json create mode 100644 change/@fluentui-react-tooltip-4bbcc182-732e-4845-bfe2-65ec6a72b6c3.json diff --git a/change/@fluentui-react-slider-6b0d652f-c496-4f99-9615-07be85a380b8.json b/change/@fluentui-react-slider-6b0d652f-c496-4f99-9615-07be85a380b8.json new file mode 100644 index 00000000000000..5251a9cf6d1da3 --- /dev/null +++ b/change/@fluentui-react-slider-6b0d652f-c496-4f99-9615-07be85a380b8.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "export static classes for components", + "packageName": "@fluentui/react-slider", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-tooltip-4bbcc182-732e-4845-bfe2-65ec6a72b6c3.json b/change/@fluentui-react-tooltip-4bbcc182-732e-4845-bfe2-65ec6a72b6c3.json new file mode 100644 index 00000000000000..08af6252c217ce --- /dev/null +++ b/change/@fluentui-react-tooltip-4bbcc182-732e-4845-bfe2-65ec6a72b6c3.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "export static classes for components", + "packageName": "@fluentui/react-tooltip", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-slider/etc/react-slider.api.md b/packages/react-slider/etc/react-slider.api.md index 8405247b856452..64fcd72eb93eb9 100644 --- a/packages/react-slider/etc/react-slider.api.md +++ b/packages/react-slider/etc/react-slider.api.md @@ -10,12 +10,12 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { IntrinsicShorthandProps } from '@fluentui/react-utilities'; import * as React_2 from 'react'; -// @public (undocumented) -export const lowerThumbClassName: string; - // @public export const RangedSlider: ForwardRefComponent; +// @public (undocumented) +export const rangedSliderClassName = "fui-RangedSlider"; + // @public (undocumented) export interface RangedSliderCommons extends Omit { defaultValue?: [number, number]; @@ -52,6 +52,9 @@ export const renderSlider: (state: SliderState) => JSX.Element; // @public export const Slider: ForwardRefComponent; +// @public (undocumented) +export const sliderClassName = "fui-Slider"; + // @public (undocumented) export type SliderCommons = { defaultValue?: number; @@ -98,9 +101,6 @@ export type SliderSlots = { // @public (undocumented) export type SliderState = ComponentState & SliderCommons; -// @public (undocumented) -export const upperThumbClassName: string; - // @public export const useRangedSlider: (props: RangedSliderProps, ref: React_2.Ref) => RangedSliderState; diff --git a/packages/react-slider/src/components/RangedSlider/RangedSlider.test.tsx b/packages/react-slider/src/components/RangedSlider/RangedSlider.test.tsx index c03f0a7e3720b1..ed3dfa6c4a864a 100644 --- a/packages/react-slider/src/components/RangedSlider/RangedSlider.test.tsx +++ b/packages/react-slider/src/components/RangedSlider/RangedSlider.test.tsx @@ -83,8 +83,8 @@ describe('RangedSlider', () => { value: [50, 100], }); expect(inputRef.current?.value).toEqual('50'); - expect(wrapper.find('.ms-Slider-track').props().style?.width).toEqual('55%'); - expect(wrapper.find('.ms-Slider-track').props().style?.left).toEqual('45%'); + expect(wrapper.find('.fui-Slider-track').props().style?.width).toEqual('55%'); + expect(wrapper.find('.fui-Slider-track').props().style?.left).toEqual('45%'); wrapper.simulate('pointerdown', { type: 'pointermove', clientX: 24, clientY: 0 }); expect(onChange).toBeCalledTimes(2); @@ -92,8 +92,8 @@ describe('RangedSlider', () => { value: [20, 100], }); expect(inputRef.current?.value).toEqual('20'); - expect(wrapper.find('.ms-Slider-track').props().style?.width).toEqual('76%'); - expect(wrapper.find('.ms-Slider-track').props().style?.left).toEqual('24%'); + expect(wrapper.find('.fui-Slider-track').props().style?.width).toEqual('76%'); + expect(wrapper.find('.fui-Slider-track').props().style?.left).toEqual('24%'); }); it('calls onChange when pointerDown', () => { @@ -214,16 +214,16 @@ describe('RangedSlider', () => { expect(onChange.mock.calls[0][1]).toEqual({ value: [50, 100] }); expect(lowerInputRef.current?.value).toEqual('50'); expect(upperInputRef.current?.value).toEqual('100'); - expect(wrapper.find('.ms-Slider-track').props().style?.width).toEqual('50%'); - expect(wrapper.find('.ms-Slider-track').props().style?.left).toEqual('50%'); + expect(wrapper.find('.fui-Slider-track').props().style?.width).toEqual('50%'); + expect(wrapper.find('.fui-Slider-track').props().style?.left).toEqual('50%'); activeRail.simulate('pointerdown', { type: 'pointermove', clientX: -10, clientY: 0 }); expect(onChange).toBeCalledTimes(2); expect(onChange.mock.calls[1][1]).toEqual({ value: [0, 100] }); expect(lowerInputRef.current?.value).toEqual('0'); expect(upperInputRef.current?.value).toEqual('100'); - expect(wrapper.find('.ms-Slider-track').props().style?.width).toEqual('100%'); - expect(wrapper.find('.ms-Slider-track').props().style?.left).toEqual('0%'); + expect(wrapper.find('.fui-Slider-track').props().style?.width).toEqual('100%'); + expect(wrapper.find('.fui-Slider-track').props().style?.left).toEqual('0%'); wrapper.unmount(); }); @@ -253,16 +253,16 @@ describe('RangedSlider', () => { expect(onChange.mock.calls[0][1]).toEqual({ value: [50, 100] }); expect(lowerInputRef.current?.value).toEqual('50'); expect(upperInputRef.current?.value).toEqual('100'); - expect(wrapper.find('.ms-Slider-track').props().style?.width).toEqual('55%'); - expect(wrapper.find('.ms-Slider-track').props().style?.left).toEqual('45%'); + expect(wrapper.find('.fui-Slider-track').props().style?.width).toEqual('55%'); + expect(wrapper.find('.fui-Slider-track').props().style?.left).toEqual('45%'); wrapper.simulate('pointerdown', { type: 'pointermove', clientX: 84, clientY: 0 }, { type: 'pointerup' }); expect(onChange).toBeCalledTimes(2); expect(onChange.mock.calls[1][1]).toEqual({ value: [50, 80] }); expect(lowerInputRef.current?.value).toEqual('50'); expect(upperInputRef.current?.value).toEqual('80'); - expect(wrapper.find('.ms-Slider-track').props().style?.width).toEqual('34%'); - expect(wrapper.find('.ms-Slider-track').props().style?.left).toEqual('50%'); + expect(wrapper.find('.fui-Slider-track').props().style?.width).toEqual('34%'); + expect(wrapper.find('.fui-Slider-track').props().style?.left).toEqual('50%'); }); it('handles a keyboardStep prop', () => { diff --git a/packages/react-slider/src/components/RangedSlider/Spec.md b/packages/react-slider/src/components/RangedSlider/Spec.md index 0a02411f0bd8e0..061a3135414cd0 100644 --- a/packages/react-slider/src/components/RangedSlider/Spec.md +++ b/packages/react-slider/src/components/RangedSlider/Spec.md @@ -123,27 +123,27 @@ export const BasicRangedSliderExample = (props: RangedSliderProps) => { - _**DOM** - how the component will be rendered as HTML elements_ ```jsx -
-
-
-
-
+
+
+
+
+
-
-
-
-
+
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
+
``` diff --git a/packages/react-slider/src/components/RangedSlider/__snapshots__/RangedSlider.test.tsx.snap b/packages/react-slider/src/components/RangedSlider/__snapshots__/RangedSlider.test.tsx.snap index 9aab92a83880e6..868354e61fcaed 100644 --- a/packages/react-slider/src/components/RangedSlider/__snapshots__/RangedSlider.test.tsx.snap +++ b/packages/react-slider/src/components/RangedSlider/__snapshots__/RangedSlider.test.tsx.snap @@ -3,7 +3,7 @@ exports[`RangedSlider Snapshot Tests renders RangedSlider with marks correctly 1`] = `
@@ -266,7 +266,7 @@ exports[`RangedSlider Snapshot Tests renders RangedSlider with marks correctly 1 class="" >
@@ -283,7 +283,7 @@ exports[`RangedSlider Snapshot Tests renders RangedSlider with marks correctly 1 value="0" />
@@ -344,7 +344,7 @@ exports[`RangedSlider Snapshot Tests renders disabled RangedSlider correctly 1`] value="0" />
@@ -405,7 +405,7 @@ exports[`RangedSlider Snapshot Tests renders horizontal RangedSlider correctly 1 value="5" />
@@ -481,7 +481,7 @@ exports[`RangedSlider Snapshot Tests renders horizontal Slider with (custom mark class="" >
@@ -498,7 +498,7 @@ exports[`RangedSlider Snapshot Tests renders horizontal Slider with (custom mark value="0" />
@@ -558,7 +558,7 @@ exports[`RangedSlider Snapshot Tests renders vertical RangedSlider correctly 1`] value="2" />
@@ -634,7 +634,7 @@ exports[`RangedSlider Snapshot Tests renders vertical Slider with (custom marks) class="" >
@@ -651,7 +651,7 @@ exports[`RangedSlider Snapshot Tests renders vertical Slider with (custom marks) value="0" />
({ // TODO: Update this to [`& + .${lowerThumbClassName}`] - '& + .ms-Slider-thumb-lower': { + '& + .fui-Slider-thumb-lower': { ':before': { outline: 'none', boxSizing: 'border-box', @@ -49,7 +51,7 @@ const useInputStyles = makeStyles({ upperInputFocusIndicator: createCustomFocusIndicatorStyle( theme => ({ // TODO: Update this to [`& + .${upperThumbClassName}`] - '& + .ms-Slider-thumb-upper': { + '& + .fui-Slider-thumb-upper': { ':before': { outline: 'none', boxSizing: 'border-box', @@ -74,6 +76,7 @@ export const useRangedSliderStyles = (state: RangedSliderState): RangedSliderSta const inputStyles = useInputStyles(); state.root.className = mergeClasses( + rangedSliderClassName, rootStyles.root, rootStyles[state.size!], state.vertical ? rootStyles.vertical : rootStyles.horizontal, diff --git a/packages/react-slider/src/components/Slider/Slider.test.tsx b/packages/react-slider/src/components/Slider/Slider.test.tsx index ec3cdd7c311e5e..3c476acfeddd50 100644 --- a/packages/react-slider/src/components/Slider/Slider.test.tsx +++ b/packages/react-slider/src/components/Slider/Slider.test.tsx @@ -158,13 +158,13 @@ describe('Slider', () => { expect(onChange).toBeCalledTimes(1); expect(onChange.mock.calls[0][1]).toEqual({ value: 50 }); expect(inputRef.current?.value).toEqual('50'); - expect(wrapper.find('.ms-Slider-track').props().style?.width).toEqual('45%'); + expect(wrapper.find('.fui-Slider-track').props().style?.width).toEqual('45%'); wrapper.simulate('pointerdown', { type: 'pointermove', clientX: 24, clientY: 0 }); expect(onChange).toBeCalledTimes(2); expect(onChange.mock.calls[1][1]).toEqual({ value: 20 }); expect(inputRef.current?.value).toEqual('20'); - expect(wrapper.find('.ms-Slider-track').props().style?.width).toEqual('24%'); + expect(wrapper.find('.fui-Slider-track').props().style?.width).toEqual('24%'); }); it('calls onChange when pointerDown', () => { @@ -237,13 +237,13 @@ describe('Slider', () => { expect(onChange).toBeCalledTimes(1); expect(onChange.mock.calls[0][1]).toEqual({ value: 100 }); expect(inputRef.current?.value).toEqual('100'); - expect(wrapper.find('.ms-Slider-track').props().style?.width).toEqual('100%'); + expect(wrapper.find('.fui-Slider-track').props().style?.width).toEqual('100%'); sliderRoot.simulate('pointerdown', { type: 'pointermove', clientX: -10, clientY: 0 }); expect(onChange).toBeCalledTimes(2); expect(onChange.mock.calls[1][1]).toEqual({ value: 0 }); expect(inputRef.current?.value).toEqual('0'); - expect(wrapper.find('.ms-Slider-track').props().style?.width).toEqual('0%'); + expect(wrapper.find('.fui-Slider-track').props().style?.width).toEqual('0%'); wrapper.unmount(); }); @@ -264,13 +264,13 @@ describe('Slider', () => { expect(onChange).toBeCalledTimes(1); expect(onChange.mock.calls[0][1]).toEqual({ value: 50 }); expect(inputRef.current?.value).toEqual('50'); - expect(wrapper.find('.ms-Slider-track').props().style?.width).toEqual('45%'); + expect(wrapper.find('.fui-Slider-track').props().style?.width).toEqual('45%'); wrapper.simulate('pointerdown', { type: 'pointermove', clientX: 24, clientY: 0 }, { type: 'pointerup' }); expect(onChange).toBeCalledTimes(2); expect(onChange.mock.calls[1][1]).toEqual({ value: 20 }); expect(inputRef.current?.value).toEqual('20'); - expect(wrapper.find('.ms-Slider-track').props().style?.width).toEqual('24%'); + expect(wrapper.find('.fui-Slider-track').props().style?.width).toEqual('24%'); }); it('handles keydown events', () => { @@ -354,7 +354,7 @@ describe('Slider', () => { const { container } = render(); const sliderRoot = screen.getByTestId('test'); - const sliderTrack = container.querySelector('.ms-Slider-track'); + const sliderTrack = container.querySelector('.fui-Slider-track'); fireEvent.keyDown(sliderRoot, { key: 'ArrowUp' }); expect(sliderTrack?.getAttribute('style')).toContain('0px 99px 99px 0px'); @@ -367,7 +367,7 @@ describe('Slider', () => { const { container } = render(); const sliderRoot = screen.getByTestId('test'); - const sliderTrack = container.querySelector('.ms-Slider-track'); + const sliderTrack = container.querySelector('.fui-Slider-track'); fireEvent.keyDown(sliderRoot, { key: 'ArrowUp' }); expect(sliderTrack?.getAttribute('style')).toContain('0px 0px 99px 99px'); @@ -402,19 +402,19 @@ describe('Slider', () => { const { container } = render(); const sliderWrapper = container.querySelector('.test-class'); expect(sliderWrapper?.getAttribute('style')).toContain('grid-template-columns: 0% 100%'); - expect(container.querySelector('.ms-Slider-firstMark')).toBeTruthy(); - expect(container.querySelector('.ms-Slider-lastMark')).toBeTruthy; + expect(container.querySelector('.fui-Slider-firstMark')).toBeTruthy(); + expect(container.querySelector('.fui-Slider-lastMark')).toBeTruthy; }); it('correctly calculates the origin border-radius when given min as the origin', () => { const { container } = render(); - const sliderTrack = container.querySelector('.ms-Slider-track'); + const sliderTrack = container.querySelector('.fui-Slider-track'); expect(sliderTrack?.getAttribute('style')).toContain('99px'); }); it('correctly calculates the origin border-radius when given max as the origin', () => { const { container } = render(); - const sliderTrack = container.querySelector('.ms-Slider-track'); + const sliderTrack = container.querySelector('.fui-Slider-track'); expect(sliderTrack?.getAttribute('style')).toContain('99px'); }); diff --git a/packages/react-slider/src/components/Slider/Spec.md b/packages/react-slider/src/components/Slider/Spec.md index c6c0dfc1faedfb..bec4cbb976efcb 100644 --- a/packages/react-slider/src/components/Slider/Spec.md +++ b/packages/react-slider/src/components/Slider/Spec.md @@ -154,23 +154,23 @@ https://hackmd.io/VUpPADJ7Ry-ZXTrtffD7Sg - _**DOM** - how the component will be rendered as HTML elements_ ```jsx -
-
-
-
-
+
+
+
+
+
-
-
-
-
+
+
+
+
-
+
-
-
+
+
``` diff --git a/packages/react-slider/src/components/Slider/__snapshots__/Slider.test.tsx.snap b/packages/react-slider/src/components/Slider/__snapshots__/Slider.test.tsx.snap index e65b7ee3b58856..dc317176e479e5 100644 --- a/packages/react-slider/src/components/Slider/__snapshots__/Slider.test.tsx.snap +++ b/packages/react-slider/src/components/Slider/__snapshots__/Slider.test.tsx.snap @@ -3,7 +3,7 @@ exports[`Slider Snapshot Tests renders Slider with custom mark labels correctly 1`] = `
world
@@ -61,7 +61,7 @@ exports[`Slider Snapshot Tests renders Slider with custom mark labels correctly class="" >
@@ -70,7 +70,7 @@ exports[`Slider Snapshot Tests renders Slider with custom mark labels correctly style="transform: translateX(5%); transition: none;" >
world
@@ -150,7 +150,7 @@ exports[`Slider Snapshot Tests renders Slider with custom marks correctly 1`] = class="" >
@@ -159,7 +159,7 @@ exports[`Slider Snapshot Tests renders Slider with custom marks correctly 1`] = style="transform: translateX(5%); transition: none;" >
@@ -444,7 +444,7 @@ exports[`Slider Snapshot Tests renders Slider with marks correctly 1`] = ` class="" >
@@ -453,7 +453,7 @@ exports[`Slider Snapshot Tests renders Slider with marks correctly 1`] = ` style="transform: translateX(5%); transition: none;" >
@@ -497,7 +497,7 @@ exports[`Slider Snapshot Tests renders disabled Slider correctly 1`] = ` style="transform: translateX(50%); transition: none;" >
hello
world
@@ -576,7 +576,7 @@ exports[`Slider Snapshot Tests renders disabled Slider with mark labels correctl class="" >
@@ -585,7 +585,7 @@ exports[`Slider Snapshot Tests renders disabled Slider with mark labels correctl style="transform: translateX(5%); transition: none;" >
@@ -630,7 +630,7 @@ exports[`Slider Snapshot Tests renders horizontal Slider correctly 1`] = ` style="transform: translateX(50%); transition: none;" >
hello
world
@@ -708,7 +708,7 @@ exports[`Slider Snapshot Tests renders horizontal Slider with mark labels correc class="" >
@@ -717,7 +717,7 @@ exports[`Slider Snapshot Tests renders horizontal Slider with mark labels correc style="transform: translateX(5%); transition: none;" >
@@ -785,7 +785,7 @@ exports[`Slider Snapshot Tests renders horizontal Slider with unique mark values class="" >
@@ -794,7 +794,7 @@ exports[`Slider Snapshot Tests renders horizontal Slider with unique mark values style="transform: translateX(5%); transition: none;" >
@@ -838,7 +838,7 @@ exports[`Slider Snapshot Tests renders horizontal origin Slider correctly 1`] = style="transform: translateX(50%); transition: none;" >
@@ -882,7 +882,7 @@ exports[`Slider Snapshot Tests renders vertical Slider correctly 1`] = ` style="transform: translateY(50%); transition: none;" >
hello
world
@@ -960,7 +960,7 @@ exports[`Slider Snapshot Tests renders vertical Slider with mark labels correctl class="" >
@@ -969,7 +969,7 @@ exports[`Slider Snapshot Tests renders vertical Slider with mark labels correctl style="transform: translateY(5%); transition: none;" >
@@ -1037,7 +1037,7 @@ exports[`Slider Snapshot Tests renders vertical Slider with unique mark values c class="" >
@@ -1046,7 +1046,7 @@ exports[`Slider Snapshot Tests renders vertical Slider with unique mark values c style="transform: translateY(5%); transition: none;" >
@@ -1090,7 +1090,7 @@ exports[`Slider Snapshot Tests renders vertical origin Slider correctly 1`] = ` style="transform: translateY(50%); transition: none;" >
({ cursor: 'grab', ':hover': { - '& .ms-Slider-thumb': { + [`& .${thumbClassName}`]: { background: theme.colorBrandBackgroundHover, }, - '& .ms-Slider-track': { + [`& .${trackClassName}`]: { background: theme.colorBrandBackgroundHover, }, }, ':active': { cursor: 'grabbing', - '& .ms-Slider-thumb': { + [`& .${thumbClassName}`]: { background: theme.colorBrandBackgroundPressed, }, - '& .ms-Slider-track': { + [`& .${trackClassName}`]: { background: theme.colorBrandBackgroundPressed, }, }, @@ -205,7 +211,7 @@ export const useMarksWrapperStyles = makeStyles({ fontSize: '12px', }, - '& .ms-Slider-firstMark, .ms-Slider-lastMark': { + [`& .${firstMarkClassName}, .${lastMarkClassName}`]: { opacity: '0', }, }), @@ -216,7 +222,7 @@ export const useMarksWrapperStyles = makeStyles({ marginRight: 'calc(var(--slider-thumb-size) / 2)', justifyItems: 'end', - '& .ms-Slider-markItemContainer': { + [`& .${markContainerClassName}`]: { display: 'flex', flexDirection: 'column', transform: 'translateX(50%)', @@ -241,7 +247,7 @@ export const useMarksWrapperStyles = makeStyles({ marginLeft: 'calc(var(--slider-rail-size) + var(--slider-mark-size))', justifyItems: 'start', - '& .ms-Slider-markItemContainer': { + [`& .${markContainerClassName}`]: { display: 'flex', flexDirection: 'row', transform: 'translateY(50%)', @@ -389,6 +395,7 @@ export const useSliderStyles = (state: SliderState): SliderState => { const inputStyles = useInputStyles(); state.root.className = mergeClasses( + sliderClassName, rootStyles.root, rootStyles.focusIndicator, rootStyles[state.size!], diff --git a/packages/react-slider/src/utils/renderMarks.tsx b/packages/react-slider/src/utils/renderMarks.tsx index 2baa1aec531931..c4cc9174de1fe0 100644 --- a/packages/react-slider/src/utils/renderMarks.tsx +++ b/packages/react-slider/src/utils/renderMarks.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; import { mergeClasses } from '@fluentui/react-make-styles'; - -// The mark related classNames are needed since they are used in a JSX element that is dynamically generated. -const markContainerClassName = 'ms-Slider-markItemContainer'; -const firstMarkClassName = 'ms-Slider-firstMark'; -const lastMarkClassName = 'ms-Slider-lastMark'; -export const markClassName = 'ms-Slider-mark'; -export const markLabelClassName = 'ms-Slider-label'; +import { + firstMarkClassName, + lastMarkClassName, + markClassName, + markContainerClassName, + markLabelClassName, +} from '../components/Slider/useSliderStyles'; /** * Renders the marks diff --git a/packages/react-tooltip/etc/react-tooltip.api.md b/packages/react-tooltip/etc/react-tooltip.api.md index 654cd6e273805a..542797fdb33fc1 100644 --- a/packages/react-tooltip/etc/react-tooltip.api.md +++ b/packages/react-tooltip/etc/react-tooltip.api.md @@ -22,6 +22,9 @@ export const renderTooltip: (state: TooltipState) => JSX.Element; // @public export const Tooltip: ForwardRefComponent; +// @public (undocumented) +export const tooltipClassName = "fui-Tooltip"; + // @public export type TooltipCommons = { appearance?: 'inverted'; diff --git a/packages/react-tooltip/src/components/Tooltip/Tooltip.test.tsx b/packages/react-tooltip/src/components/Tooltip/Tooltip.test.tsx index 77136eae0b8b1e..b16a53fb976800 100644 --- a/packages/react-tooltip/src/components/Tooltip/Tooltip.test.tsx +++ b/packages/react-tooltip/src/components/Tooltip/Tooltip.test.tsx @@ -14,6 +14,7 @@ describe('Tooltip', () => { 'component-handles-ref', 'component-has-root-ref', 'component-handles-classname', + 'component-has-static-classname', 'as-renders-fc', 'as-passes-as-value', 'as-renders-html', diff --git a/packages/react-tooltip/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap b/packages/react-tooltip/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap index c77c7d0479907b..84a44d692c066e 100644 --- a/packages/react-tooltip/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap +++ b/packages/react-tooltip/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap @@ -16,7 +16,7 @@ exports[`Tooltip renders a description tooltip content always 1`] = ` dir="ltr" >