Skip to content

feat(slider, tooltip): add static classes #20455

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
layershifter merged 7 commits into from
Nov 4, 2021
Merged

feat(slider, tooltip): add static classes #20455

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
383a078
feat(slider, tooltip): add static classes
layershifter Oct 27, 2021
bc8a604
Update packages/react-slider/src/components/RangedSlider/Spec.md
layershifter Nov 3, 2021
88a9981
Update packages/react-slider/src/components/Slider/Spec.md
layershifter Nov 3, 2021
4b5f0e0
Merge branch 'master' of https://github.com/microsoft/fluentui into f…
layershifter Nov 3, 2021
c5b65ba
use star export
layershifter Nov 3, 2021
fe64b02
fix VR regressions
layershifter Nov 3, 2021
e406cce
fix imports
layershifter Nov 3, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions change/@fluentui-react-slider-6b0d652f-c496-4f99-9615-07be85a380b8.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "prerelease",
"comment": "export static classes for components",
"packageName": "@fluentui/react-slider",
"email": "olfedias@microsoft.com",
"dependentChangeType": "patch"
}
7 changes: 7 additions & 0 deletions change/@fluentui-react-tooltip-4bbcc182-732e-4845-bfe2-65ec6a72b6c3.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "prerelease",
"comment": "export static classes for components",
"packageName": "@fluentui/react-tooltip",
"email": "olfedias@microsoft.com",
"dependentChangeType": "patch"
}
12 changes: 6 additions & 6 deletions packages/react-slider/etc/react-slider.api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

@layershifter layershifter Nov 2, 2021 •
edited
Loading

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I removed this export until we will agree on classes for slots


// @public
export const RangedSlider: ForwardRefComponent<RangedSliderProps>;

// @public (undocumented)
export const rangedSliderClassName = "fui-RangedSlider";

// @public (undocumented)
export interface RangedSliderCommons extends Omit<SliderCommons, 'value' | 'defaultValue' | 'origin' | 'onChange'> {
defaultValue?: [number, number];
Expand Down Expand Up @@ -52,6 +52,9 @@ export const renderSlider: (state: SliderState) => JSX.Element;
// @public
export const Slider: ForwardRefComponent<SliderProps>;

// @public (undocumented)
export const sliderClassName = "fui-Slider";

// @public (undocumented)
export type SliderCommons = {
defaultValue?: number;
Expand Down Expand Up @@ -98,9 +101,6 @@ export type SliderSlots = {
// @public (undocumented)
export type SliderState = ComponentState<SliderSlots> & SliderCommons;

// @public (undocumented)
export const upperThumbClassName: string;

// @public
export const useRangedSlider: (props: RangedSliderProps, ref: React_2.Ref<HTMLElement>) => RangedSliderState;

Expand Down
24 changes: 12 additions & 12 deletions packages/react-slider/src/components/RangedSlider/RangedSlider.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,17 +83,17 @@ 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);
expect(onChange.mock.calls[1][1]).toEqual({
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', () => {
Expand Down Expand Up @@ -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();
});
Expand Down Expand Up @@ -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', () => {
Expand Down
32 changes: 16 additions & 16 deletions packages/react-slider/src/components/RangedSlider/Spec.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,27 +123,27 @@ export const BasicRangedSliderExample = (props: RangedSliderProps) => {
- _**DOM** - how the component will be rendered as HTML elements_

```jsx
<div className="ms-RangedSlider-root">
<div className="ms-RangedSlider-markContainer">
<div className="ms-RangedSlider-markItemContainer">
<div className="ms-RangedSlider-mark" />
<div className="ms-RangedSlider-markLabel" />
<div className="fui-RangedSlider">
<div className="fui-RangedSlider-markContainer">
<div className="fui-RangedSlider-markItemContainer">
<div className="fui-RangedSlider-mark" />
<div className="fui-RangedSlider-markLabel" />
</div>
</div>
<div className="ms-RangedSlider-wrapper">
<div className="ms-Slider-rail" />
<div className="ms-Slider-trackWrapper">
<div className="ms-Slider-track" />
<div className="fui-RangedSlider-wrapper">
<div className="fui-Slider-rail" />
<div className="fui-Slider-trackWrapper">
<div className="fui-Slider-track" />
</div>
<div className="ms-RangedSlider-lowerThumbWrapper">
<div className="ms-RangedSlider-lowerInput" />
<div className="ms-Slider-lowerThumb" />
<div className="fui-RangedSlider-lowerThumbWrapper">
<div className="fui-RangedSlider-lowerInput" />
<div className="fui-Slider-lowerThumb" />
</div>
<div className="ms-RangedSlider-upperThumbWrapper">
<div className="ms-RangedSlider-upperInput" />
<div className="ms-RangedSlider-upperThumb" />
<div className="fui-RangedSlider-upperThumbWrapper">
<div className="fui-RangedSlider-upperInput" />
<div className="fui-RangedSlider-upperThumb" />
</div>
<div className="ms-RangedSlider-activeRail" />
<div className="fui-RangedSlider-activeRail" />
</div>
</div>
```
Expand Down
Loading