From bfefad5ee35dcb7826e3c7afd6b69804e0302b03 Mon Sep 17 00:00:00 2001 From: Brian Garland Date: Fri, 16 Feb 2018 16:01:50 -0800 Subject: [PATCH 1/5] convert scss to mergeStyles --- .../ScrollablePane/ScrollablePane.base.tsx | 27 +++++++---- .../ScrollablePane/ScrollablePane.scss | 38 --------------- .../ScrollablePane/ScrollablePane.styles.ts | 48 +++++++++++++++++-- .../ScrollablePane/ScrollablePane.types.ts | 16 +++++-- 4 files changed, 76 insertions(+), 53 deletions(-) delete mode 100644 packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.scss diff --git a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.base.tsx b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.base.tsx index 9494b41b8a29d..15c7ea7a1cb05 100644 --- a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.base.tsx +++ b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.base.tsx @@ -6,20 +6,25 @@ import * as PropTypes from 'prop-types'; import { autobind, BaseComponent, - css + classNamesFunction, + css, + customizable } from '../../Utilities'; import { IScrollablePane, IScrollablePaneProps, + IScrollablePaneStyles, + IScrollablePaneStyleProps } from './ScrollablePane.types'; import { Sticky } from '../../Sticky'; -import * as stylesImport from './ScrollablePane.scss'; -const styles: any = stylesImport; export interface IScrollablePaneContext { scrollablePane: PropTypes.Requireable; } +const getClassNames = classNamesFunction(); + +@customizable('ScrollablePane', ['theme']) export class ScrollablePaneBase extends BaseComponent implements IScrollablePane { public static childContextTypes: React.ValidationMap = { scrollablePane: PropTypes.object @@ -82,17 +87,23 @@ export class ScrollablePaneBase extends BaseComponent } public render() { - const { className } = this.props; + const { className, theme, getStyles } = this.props; + const classNames = getClassNames(getStyles!, + { + theme: theme!, + className + } + ); return (
-
-
-
+
+
+
{ this.props.children }
diff --git a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.scss b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.scss deleted file mode 100644 index 43cc1c7576648..0000000000000 --- a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.scss +++ /dev/null @@ -1,38 +0,0 @@ -@import '../../common/common'; - -.root { - overflow-y: auto; - max-height: inherit; - height: inherit; - -webkit-overflow-scrolling: touch; -} - -.stickyContainer { - overflow: hidden; - position: absolute; - pointer-events: none; -} - -.stickyAbove, -.stickyBelow { - position: absolute; - pointer-events: auto; - width: 100%; - z-index: 1; -} - -.stickyAbove { - top: 0; - - @include high-contrast { - border-bottom: 1px solid WindowText; - } -} - -.stickyBelow { - bottom: 0; - - @include high-contrast { - border-top: 1px solid WindowText; - } -} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.styles.ts b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.styles.ts index c672585439093..abc012af03701 100644 --- a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.styles.ts +++ b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.styles.ts @@ -1,7 +1,8 @@ import { IScrollablePaneStyleProps, IScrollablePaneStyles } from './ScrollablePane.types'; import { + HighContrastSelector, IStyle, - ITheme, + ITheme } from '../../Styling'; export const getStyles = ( @@ -14,15 +15,54 @@ export const getStyles = ( const { palette, semanticColors } = theme; + const AboveAndBelowStyles: IStyle = { + position: 'absolute', + pointerEvents: 'auto', + width: '100%', + zIndex: 1 + } + return ({ root: [ 'ms-ScrollablePane', { - // Insert css properties + overflowY: 'auto', + maxHeight: 'inherit', + height: 'inherit', + // @todo this doesn't work with JS + // -webkit-overflow-scrolling: touch; + }, + className + ], + stickyContainer: [ + { + overflow: 'hidden', + position: 'absolute', + pointerEvents: 'none', } ], - - // Insert className styles + stickyAbove: [ + { + top: 0, + selectors: { + [HighContrastSelector]: { + borderBottom: '1px solid WindowText' + } + } + }, + AboveAndBelowStyles + ], + stickyBelow: [ + { + bottom: 0, + selectors: { + [HighContrastSelector]: { + borderTop: '1px solid WindowText' + } + } + }, + AboveAndBelowStyles + ] }); }; diff --git a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.types.ts b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.types.ts index 037423a096c63..a048501a08ffb 100644 --- a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.types.ts +++ b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.types.ts @@ -50,9 +50,19 @@ export interface IScrollablePaneStyleProps { export interface IScrollablePaneStyles { /** - * Style for the root element. + * Style set for the root element. */ root: IStyle; - - // Insert ScrollablePane classNames below + /** + * Style set for the stickyContainer element. + */ + stickyContainer: IStyle; + /** + * Style set for the stickyAbove element. + */ + stickyAbove: IStyle; + /** + * Style set for the stickyAbove element. + */ + stickyBelow: IStyle; } \ No newline at end of file From 0ed22015634a9f1d334e785c7026fb8d3eefd0cb Mon Sep 17 00:00:00 2001 From: Brian Garland Date: Fri, 16 Feb 2018 16:02:47 -0800 Subject: [PATCH 2/5] rush change --- .../scrollablepane-scss2ms-pt2_2018-02-17-00-02.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/office-ui-fabric-react/scrollablepane-scss2ms-pt2_2018-02-17-00-02.json diff --git a/common/changes/office-ui-fabric-react/scrollablepane-scss2ms-pt2_2018-02-17-00-02.json b/common/changes/office-ui-fabric-react/scrollablepane-scss2ms-pt2_2018-02-17-00-02.json new file mode 100644 index 0000000000000..3434a87a0341a --- /dev/null +++ b/common/changes/office-ui-fabric-react/scrollablepane-scss2ms-pt2_2018-02-17-00-02.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Converting SCSS to MergeStyles step 2 - style conversion", + "type": "minor" + } + ], + "packageName": "office-ui-fabric-react", + "email": "v-brgarl@microsoft.com" +} \ No newline at end of file From e441d4ad931fa76ebae84fb432fe60e219c1110b Mon Sep 17 00:00:00 2001 From: Brian Garland Date: Fri, 16 Feb 2018 16:07:06 -0800 Subject: [PATCH 3/5] tslint fixes --- .../src/components/ScrollablePane/ScrollablePane.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.styles.ts b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.styles.ts index abc012af03701..f35a361fc07d4 100644 --- a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.styles.ts +++ b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.styles.ts @@ -20,7 +20,7 @@ export const getStyles = ( pointerEvents: 'auto', width: '100%', zIndex: 1 - } + }; return ({ root: [ From 159d2d90c2c339201cbd9fb057112492b2ba21e4 Mon Sep 17 00:00:00 2001 From: Brian Garland Date: Tue, 20 Feb 2018 09:56:32 -0800 Subject: [PATCH 4/5] remove css() function import from base --- .../src/components/ScrollablePane/ScrollablePane.base.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.base.tsx b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.base.tsx index 15c7ea7a1cb05..fba8e5fd19763 100644 --- a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.base.tsx +++ b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.base.tsx @@ -7,7 +7,6 @@ import { autobind, BaseComponent, classNamesFunction, - css, customizable } from '../../Utilities'; import { From 9afbccf61506bfd5ec4e285ea14283784ff00ecb Mon Sep 17 00:00:00 2001 From: Brian Garland Date: Tue, 20 Feb 2018 14:49:09 -0800 Subject: [PATCH 5/5] Added IRawStyle WebkitOverflowScrolling and applied to component --- packages/merge-styles/src/IRawStyleBase.ts | 5 +++++ .../src/components/ScrollablePane/ScrollablePane.styles.ts | 3 +-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/merge-styles/src/IRawStyleBase.ts b/packages/merge-styles/src/IRawStyleBase.ts index a1e8ce30117a2..c0a2414ee3dcd 100644 --- a/packages/merge-styles/src/IRawStyleBase.ts +++ b/packages/merge-styles/src/IRawStyleBase.ts @@ -173,6 +173,11 @@ export interface IRawStyleBase extends IRawFontStyle { */ WebkitFontSmoothing?: 'none' | 'antialiased' | 'grayscale' | 'subpixel-antialiased'; + /** + * (Webkit specific) momentum scrolling on iOS devices + */ + WebkitOverflowScrolling?: 'auto' | 'touch'; + /** * Aligns a flex container's lines within the flex container when there is extra space * in the cross-axis, similar to how justify-content aligns individual items within the main-axis. diff --git a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.styles.ts b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.styles.ts index f35a361fc07d4..814f6ff432b26 100644 --- a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.styles.ts +++ b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.styles.ts @@ -29,8 +29,7 @@ export const getStyles = ( overflowY: 'auto', maxHeight: 'inherit', height: 'inherit', - // @todo this doesn't work with JS - // -webkit-overflow-scrolling: touch; + WebkitOverflowScrolling: 'touch' }, className ],