From 92d722fd9aa2f969a96e4ce30e45baf04173ff8c Mon Sep 17 00:00:00 2001 From: Kevin Coughlin Date: Mon, 7 May 2018 11:33:31 -0700 Subject: [PATCH 01/11] Mv Slider implementation to .base.tsx --- .../src/components/Slider/{Slider.tsx => Slider.base.tsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename packages/office-ui-fabric-react/src/components/Slider/{Slider.tsx => Slider.base.tsx} (100%) diff --git a/packages/office-ui-fabric-react/src/components/Slider/Slider.tsx b/packages/office-ui-fabric-react/src/components/Slider/Slider.base.tsx similarity index 100% rename from packages/office-ui-fabric-react/src/components/Slider/Slider.tsx rename to packages/office-ui-fabric-react/src/components/Slider/Slider.base.tsx From 598677f74689a84cfbfc72f55e62e93562c6b69d Mon Sep 17 00:00:00 2001 From: Kevin Coughlin Date: Mon, 7 May 2018 11:36:50 -0700 Subject: [PATCH 02/11] Export Slider.base --- packages/office-ui-fabric-react/src/components/Slider/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/office-ui-fabric-react/src/components/Slider/index.ts b/packages/office-ui-fabric-react/src/components/Slider/index.ts index 1651b69e2cfb2e..fd07578506773a 100644 --- a/packages/office-ui-fabric-react/src/components/Slider/index.ts +++ b/packages/office-ui-fabric-react/src/components/Slider/index.ts @@ -1,2 +1,3 @@ export * from './Slider'; +export * from './Slider.base'; export * from './Slider.types'; \ No newline at end of file From ad456a816b8551496d7e0973aa4730c50d248ab5 Mon Sep 17 00:00:00 2001 From: Kevin Coughlin Date: Mon, 7 May 2018 11:41:54 -0700 Subject: [PATCH 03/11] Slider impl with getStyles and interface imports --- .../src/components/Slider/Slider.base.tsx | 2 +- .../src/components/Slider/Slider.tsx | 15 +++++++++++++++ 2 files changed, 16 insertions(+), 1 deletion(-) create mode 100644 packages/office-ui-fabric-react/src/components/Slider/Slider.tsx diff --git a/packages/office-ui-fabric-react/src/components/Slider/Slider.base.tsx b/packages/office-ui-fabric-react/src/components/Slider/Slider.base.tsx index 5664501ff87173..63d9979d642468 100644 --- a/packages/office-ui-fabric-react/src/components/Slider/Slider.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Slider/Slider.base.tsx @@ -23,7 +23,7 @@ export enum ValuePosition { Next = 1 } -export class Slider extends BaseComponent implements ISlider { +export class SliderBase extends BaseComponent implements ISlider { public static defaultProps: {} = { step: 1, min: 0, diff --git a/packages/office-ui-fabric-react/src/components/Slider/Slider.tsx b/packages/office-ui-fabric-react/src/components/Slider/Slider.tsx new file mode 100644 index 00000000000000..3fb8ee1dd11461 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Slider/Slider.tsx @@ -0,0 +1,15 @@ +import { styled } from '../../Utilities'; + +import { + ISliderProps, + ISliderStyleProps, + ISliderStyles +} from './Slider.types'; + +import { SliderBase } from './Slider.base'; +import { getStyles } from './Slider.styles'; + +export const Slider = styled( + SliderBase, + getStyles +); \ No newline at end of file From ebb36f6965e02fc4eea194a8273f0e9deda0713b Mon Sep 17 00:00:00 2001 From: Kevin Coughlin Date: Mon, 7 May 2018 11:59:00 -0700 Subject: [PATCH 04/11] Refactor hierarchy to Slider.styles and expose via interfaces --- .../src/components/Slider/Slider.styles.ts | 55 +++++++++++++++++++ .../src/components/Slider/Slider.types.ts | 37 ++++++++++++- 2 files changed, 91 insertions(+), 1 deletion(-) create mode 100644 packages/office-ui-fabric-react/src/components/Slider/Slider.styles.ts diff --git a/packages/office-ui-fabric-react/src/components/Slider/Slider.styles.ts b/packages/office-ui-fabric-react/src/components/Slider/Slider.styles.ts new file mode 100644 index 00000000000000..4d9ef21cba7f5a --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Slider/Slider.styles.ts @@ -0,0 +1,55 @@ +import { ISliderStyleProps, ISliderStyles } from './Slider.types'; +import { getGlobalClassNames } from '../..'; + +const GlobalClassNames = { + root: 'ms-Slider', + container: 'ms-Slider-container', + slideBox: 'ms-Slider-slideBox', + line: 'ms-Slider-line', + thumb: 'ms-Slider-thumb', + active: 'ms-Slider-active', + inactive: 'ms-Slider-inactive', + value: 'ms-Slider-value' +}; + +export const getStyles = (props: ISliderStyleProps): ISliderStyles => { + + const { className, theme } = props; + const classNames = getGlobalClassNames(GlobalClassNames, theme); + + return ({ + root: [ + classNames.root, + {}, + className + ], + container: [ + classNames.container, + {} + ], + slideBox: [ + classNames.slideBox, + {} + ], + line: [ + classNames.line, + {} + ], + thumb: [ + classNames.thumb, + {} + ], + active: [ + classNames.active, + {} + ], + inactive: [ + classNames.inactive, + {} + ], + value: [ + classNames.value, + {} + ] + }); +}; diff --git a/packages/office-ui-fabric-react/src/components/Slider/Slider.types.ts b/packages/office-ui-fabric-react/src/components/Slider/Slider.types.ts index c87a716ba15f00..2e22899c9deca8 100644 --- a/packages/office-ui-fabric-react/src/components/Slider/Slider.types.ts +++ b/packages/office-ui-fabric-react/src/components/Slider/Slider.types.ts @@ -1,4 +1,7 @@ import * as React from 'react'; +import { SliderBase } from './Slider.base'; +import { IStyle, ITheme } from '../../Styling'; +import { IStyleFunction } from '../../Utilities'; export interface ISlider { value: number | undefined; @@ -6,13 +9,23 @@ export interface ISlider { focus: () => void; } -export interface ISliderProps { +export interface ISliderProps extends React.Props { /** * Optional callback to access the ISlider interface. Use this instead of ref for accessing * the public methods and properties of the component. */ componentRef?: (component: ISlider | null) => void; + /** + * Call to provide customized styling that will layer on top of the variant rules. + */ + getStyles?: IStyleFunction; + + /** + * Theme provided by High-Order Component. + */ + theme?: ITheme; + /** * Description label of the Slider */ @@ -88,3 +101,25 @@ export interface ISliderProps { */ buttonProps?: React.HTMLAttributes; } + +export interface ISliderStyleProps { + /** + * Theme provided by High-Order Component. + */ + theme: ITheme; + /** + * Accept custom classNames. + */ + className?: string; +} + +export interface ISliderStyles { + root: IStyle, + container: IStyle, + slideBox: IStyle, + line: IStyle, + thumb: IStyle, + active: IStyle, + inactive: IStyle, + value: IStyle +} \ No newline at end of file From 843b15baca9c24087b4850211424b08aeaf2b08e Mon Sep 17 00:00:00 2001 From: Kevin Coughlin Date: Mon, 7 May 2018 12:07:55 -0700 Subject: [PATCH 05/11] Reflect current set of style attrs and globals --- .../src/components/Slider/Slider.styles.ts | 21 +++++++++-------- .../src/components/Slider/Slider.types.ts | 23 ++++++++++++------- 2 files changed, 27 insertions(+), 17 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Slider/Slider.styles.ts b/packages/office-ui-fabric-react/src/components/Slider/Slider.styles.ts index 4d9ef21cba7f5a..1022dd49e95133 100644 --- a/packages/office-ui-fabric-react/src/components/Slider/Slider.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Slider/Slider.styles.ts @@ -7,9 +7,9 @@ const GlobalClassNames = { slideBox: 'ms-Slider-slideBox', line: 'ms-Slider-line', thumb: 'ms-Slider-thumb', - active: 'ms-Slider-active', - inactive: 'ms-Slider-inactive', - value: 'ms-Slider-value' + activeSection: 'ms-Slider-active', + inactiveSection: 'ms-Slider-inactive', + valueLabel: 'ms-Slider-value' }; export const getStyles = (props: ISliderStyleProps): ISliderStyles => { @@ -39,16 +39,19 @@ export const getStyles = (props: ISliderStyleProps): ISliderStyles => { classNames.thumb, {} ], - active: [ - classNames.active, + lineContainer: [ {} ], - inactive: [ - classNames.inactive, + activeSection: [ + classNames.activeSection, {} ], - value: [ - classNames.value, + inactiveSection: [ + classNames.inactiveSection, + {} + ], + valueLabel: [ + classNames.valueLabel, {} ] }); diff --git a/packages/office-ui-fabric-react/src/components/Slider/Slider.types.ts b/packages/office-ui-fabric-react/src/components/Slider/Slider.types.ts index 2e22899c9deca8..8e9b131fd1b997 100644 --- a/packages/office-ui-fabric-react/src/components/Slider/Slider.types.ts +++ b/packages/office-ui-fabric-react/src/components/Slider/Slider.types.ts @@ -111,15 +111,22 @@ export interface ISliderStyleProps { * Accept custom classNames. */ className?: string; + titleLabel?: string; + rootIsEnabled?: boolean; + rootIsDisabled?: boolean; + rootIsHorizontal?: boolean; + rootIsVertical?: boolean; + showTransitions?: boolean; } export interface ISliderStyles { - root: IStyle, - container: IStyle, - slideBox: IStyle, - line: IStyle, - thumb: IStyle, - active: IStyle, - inactive: IStyle, - value: IStyle + root: IStyle; + container: IStyle; + slideBox: IStyle; + line: IStyle; + thumb: IStyle; + lineContainer: IStyle; + activeSection: IStyle; + inactiveSection: IStyle; + valueLabel: IStyle; } \ No newline at end of file From a3d94144206b08768903c8e35d7bb00bc091d3d3 Mon Sep 17 00:00:00 2001 From: Kevin Coughlin Date: Mon, 7 May 2018 12:11:49 -0700 Subject: [PATCH 06/11] + changefile --- .../keco-ms-slider-pt1_2018-05-07-19-11.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/office-ui-fabric-react/keco-ms-slider-pt1_2018-05-07-19-11.json diff --git a/common/changes/office-ui-fabric-react/keco-ms-slider-pt1_2018-05-07-19-11.json b/common/changes/office-ui-fabric-react/keco-ms-slider-pt1_2018-05-07-19-11.json new file mode 100644 index 00000000000000..030a518696ef4d --- /dev/null +++ b/common/changes/office-ui-fabric-react/keco-ms-slider-pt1_2018-05-07-19-11.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Part 1 of converting Slider to mergeStyles", + "type": "minor" + } + ], + "packageName": "office-ui-fabric-react", + "email": "keco@microsoft.com" +} \ No newline at end of file From c513e5510738360b615fec62602d8df98de25d3a Mon Sep 17 00:00:00 2001 From: Kevin Coughlin Date: Mon, 7 May 2018 13:30:41 -0700 Subject: [PATCH 07/11] Update Slider snapshot test --- .../src/components/Slider/__snapshots__/Slider.test.tsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/office-ui-fabric-react/src/components/Slider/__snapshots__/Slider.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Slider/__snapshots__/Slider.test.tsx.snap index a0a17a02b7dd28..b160919ae6f511 100644 --- a/packages/office-ui-fabric-react/src/components/Slider/__snapshots__/Slider.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/Slider/__snapshots__/Slider.test.tsx.snap @@ -15,7 +15,7 @@ exports[`Slider renders Slider correctly 1`] = ` aria-valuetext={undefined} className="ms-Slider-slideBox ms-Slider-showValue ms-Slider-showTransitions undefined" disabled={false} - id="Slider0" + id="Slider1" onKeyDown={[Function]} onMouseDown={[Function]} onTouchStart={[Function]} From 0af163e39cadd02071e756c7b9629c8a3b29ad19 Mon Sep 17 00:00:00 2001 From: Kevin Coughlin Date: Mon, 7 May 2018 13:52:14 -0700 Subject: [PATCH 08/11] Refactor Slider tests to test SliderBase --- .../src/components/Slider/Slider.test.tsx | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Slider/Slider.test.tsx b/packages/office-ui-fabric-react/src/components/Slider/Slider.test.tsx index a0a09e9dc38d5c..565e6d913b21ea 100644 --- a/packages/office-ui-fabric-react/src/components/Slider/Slider.test.tsx +++ b/packages/office-ui-fabric-react/src/components/Slider/Slider.test.tsx @@ -4,20 +4,21 @@ import * as ReactDOM from 'react-dom'; import * as ReactTestUtils from 'react-dom/test-utils'; import * as renderer from 'react-test-renderer'; -import { Slider } from './Slider'; +import { SliderBase } from './Slider.base'; +import { getStyles } from './Slider.styles'; import { ISlider } from './Slider.types'; describe('Slider', () => { it('renders Slider correctly', () => { - const component = renderer.create(); + const component = renderer.create(); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); }); it('renders a slider', () => { const component = ReactTestUtils.renderIntoDocument( - + ); const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance) as Element; const labelElement = renderedDOM.querySelector('.ms-Label') as HTMLElement; @@ -31,7 +32,8 @@ describe('Slider', () => { changedValue = val; }; const component = ReactTestUtils.renderIntoDocument( - ); @@ -70,7 +72,7 @@ describe('Slider', () => { it('has type=button on all buttons', () => { const component = ReactTestUtils.renderIntoDocument( - + ); const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance) as Element; @@ -88,14 +90,14 @@ describe('Slider', () => { ReactTestUtils.renderIntoDocument( // tslint:disable-next-line:jsx-no-lambda - slider = s } /> + slider = s } /> ); expect(slider!.value).toEqual(12); }); it('renders correct aria-valuetext', () => { let component = ReactTestUtils.renderIntoDocument( - + ); let renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance) as Element; let button = renderedDOM.querySelector('.ms-Slider-slideBox') as HTMLElement; @@ -108,7 +110,8 @@ describe('Slider', () => { const getTextValue = (value: number) => values[value]; component = ReactTestUtils.renderIntoDocument( - From 6883d7d1bf173fee623f4adf6c261f286a39e2f5 Mon Sep 17 00:00:00 2001 From: Kevin Coughlin Date: Mon, 7 May 2018 13:53:35 -0700 Subject: [PATCH 09/11] Add SliderBase type param throughout Slider tests --- .../src/components/Slider/Slider.test.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Slider/Slider.test.tsx b/packages/office-ui-fabric-react/src/components/Slider/Slider.test.tsx index 565e6d913b21ea..d2b4f7c8d01954 100644 --- a/packages/office-ui-fabric-react/src/components/Slider/Slider.test.tsx +++ b/packages/office-ui-fabric-react/src/components/Slider/Slider.test.tsx @@ -17,7 +17,7 @@ describe('Slider', () => { }); it('renders a slider', () => { - const component = ReactTestUtils.renderIntoDocument( + const component = ReactTestUtils.renderIntoDocument( ); const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance) as Element; @@ -31,7 +31,7 @@ describe('Slider', () => { const onChange = (val: any) => { changedValue = val; }; - const component = ReactTestUtils.renderIntoDocument( + const component = ReactTestUtils.renderIntoDocument( { }); it('has type=button on all buttons', () => { - const component = ReactTestUtils.renderIntoDocument( + const component = ReactTestUtils.renderIntoDocument( ); @@ -88,7 +88,7 @@ describe('Slider', () => { it('can read the current value', () => { let slider: ISlider | null; - ReactTestUtils.renderIntoDocument( + ReactTestUtils.renderIntoDocument( // tslint:disable-next-line:jsx-no-lambda slider = s } /> ); @@ -96,7 +96,7 @@ describe('Slider', () => { }); it('renders correct aria-valuetext', () => { - let component = ReactTestUtils.renderIntoDocument( + let component = ReactTestUtils.renderIntoDocument( ); let renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance) as Element; @@ -109,7 +109,7 @@ describe('Slider', () => { const selected = 1; const getTextValue = (value: number) => values[value]; - component = ReactTestUtils.renderIntoDocument( + component = ReactTestUtils.renderIntoDocument( Date: Mon, 7 May 2018 13:55:26 -0700 Subject: [PATCH 10/11] Test Slider for snapshot comparison only --- .../src/components/Slider/Slider.test.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/office-ui-fabric-react/src/components/Slider/Slider.test.tsx b/packages/office-ui-fabric-react/src/components/Slider/Slider.test.tsx index d2b4f7c8d01954..0a9e1439470afb 100644 --- a/packages/office-ui-fabric-react/src/components/Slider/Slider.test.tsx +++ b/packages/office-ui-fabric-react/src/components/Slider/Slider.test.tsx @@ -4,6 +4,7 @@ import * as ReactDOM from 'react-dom'; import * as ReactTestUtils from 'react-dom/test-utils'; import * as renderer from 'react-test-renderer'; +import { Slider } from './Slider'; import { SliderBase } from './Slider.base'; import { getStyles } from './Slider.styles'; import { ISlider } from './Slider.types'; @@ -11,7 +12,7 @@ import { ISlider } from './Slider.types'; describe('Slider', () => { it('renders Slider correctly', () => { - const component = renderer.create(); + const component = renderer.create(); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); }); From e68a0b86a1f1a5a69d69bb588663faac83cefe07 Mon Sep 17 00:00:00 2001 From: Jason Gore Date: Tue, 15 May 2018 13:49:58 -0700 Subject: [PATCH 11/11] Minor typing fix per PR feedback. --- .../src/components/Slider/Slider.base.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/office-ui-fabric-react/src/components/Slider/Slider.base.tsx b/packages/office-ui-fabric-react/src/components/Slider/Slider.base.tsx index 1b91efef8b0f0c..7eb926c6b39b0e 100644 --- a/packages/office-ui-fabric-react/src/components/Slider/Slider.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Slider/Slider.base.tsx @@ -27,7 +27,7 @@ export enum ValuePosition { } export class SliderBase extends BaseComponent implements ISlider { - public static defaultProps: {} = { + public static defaultProps: ISliderProps = { step: 1, min: 0, max: 10,