From 290cac0343f882643a648f4b791fe438c1774139 Mon Sep 17 00:00:00 2001 From: Vincent Bailly Date: Wed, 25 Apr 2018 12:24:59 +0200 Subject: [PATCH 1/2] fix OWA-LPC-Safari bug --- .../src/components/DOSearchBox/DOSearchBox.scss | 1 + .../src/components/ExampleCard/ExampleCard.scss | 1 + .../src/components/Header/Header.scss | 1 + .../Suggestions/SuggestionsControl.scss | 1 + .../src/components/Shimmer/Shimmer.styles.ts | 1 + .../experiments/src/components/Tile/Tile.scss | 1 + .../src/components/Checkbox/Checkbox.styles.ts | 1 + .../Checkbox/__snapshots__/Checkbox.test.tsx.snap | 1 + .../src/components/CommandBar/CommandBar.scss | 3 ++- .../ContextualMenu/ContextualMenu.styles.ts | 1 + .../components/DetailsList/DetailsRowCheck.scss | 1 + .../src/components/Dropdown/Dropdown.scss | 1 + .../src/components/Facepile/Facepile.scss | 1 + .../src/components/GroupedList/GroupHeader.scss | 1 + .../examples/GroupedList.Custom.Example.scss | 1 + .../src/components/Link/Link.styles.ts | 1 + .../Link/__snapshots__/Link.test.tsx.snap | 2 ++ .../MarqueeSelection/MarqueeSelection.scss | 2 ++ .../src/components/Rating/Rating.styles.ts | 1 + .../Rating/__snapshots__/Rating.test.tsx.snap | 15 ++++++++++----- .../src/components/TextField/TextField.scss | 1 + .../pickers/Suggestions/Suggestions.scss | 1 + .../selection/examples/Selection.Example.scss | 2 ++ 23 files changed, 36 insertions(+), 6 deletions(-) diff --git a/apps/fabric-website/src/components/DOSearchBox/DOSearchBox.scss b/apps/fabric-website/src/components/DOSearchBox/DOSearchBox.scss index 60318d55964d8d..7bc5b10f2ca8b9 100644 --- a/apps/fabric-website/src/components/DOSearchBox/DOSearchBox.scss +++ b/apps/fabric-website/src/components/DOSearchBox/DOSearchBox.scss @@ -35,6 +35,7 @@ .od-SearchBox-button { background: none; + background-color: transparent; border: 0; color: transparent; position: absolute; diff --git a/packages/example-app-base/src/components/ExampleCard/ExampleCard.scss b/packages/example-app-base/src/components/ExampleCard/ExampleCard.scss index ba599c827c842d..dfb5cf93a701c6 100644 --- a/packages/example-app-base/src/components/ExampleCard/ExampleCard.scss +++ b/packages/example-app-base/src/components/ExampleCard/ExampleCard.scss @@ -25,6 +25,7 @@ .ms-Button.ExampleCard-codeButton { @include ms-margin-right(0); background: none; + background-color: transparent; border: 1px solid $ms-color-neutralTertiary; border-bottom: 0; border-top-left-radius: 4px; diff --git a/packages/example-app-base/src/components/Header/Header.scss b/packages/example-app-base/src/components/Header/Header.scss index cbf01e3ef1b4f3..4cb180b59df9c2 100644 --- a/packages/example-app-base/src/components/Header/Header.scss +++ b/packages/example-app-base/src/components/Header/Header.scss @@ -47,6 +47,7 @@ $Header-fabricWebsiteHeaderColor: #272630; position: relative; text-decoration: none; background: none; + background-color: transparent; border: none; padding: 0; padding: 0px 10px; diff --git a/packages/experiments/src/components/FloatingPicker/Suggestions/SuggestionsControl.scss b/packages/experiments/src/components/FloatingPicker/Suggestions/SuggestionsControl.scss index 5d8d706f73bcb0..75ea0a68c50b62 100644 --- a/packages/experiments/src/components/FloatingPicker/Suggestions/SuggestionsControl.scss +++ b/packages/experiments/src/components/FloatingPicker/Suggestions/SuggestionsControl.scss @@ -7,6 +7,7 @@ .actionButton { background: none; + background-color: transparent; border: 0; cursor: pointer; margin: 0; diff --git a/packages/experiments/src/components/Shimmer/Shimmer.styles.ts b/packages/experiments/src/components/Shimmer/Shimmer.styles.ts index 32ef4774beceb6..730d0c737b1b7e 100644 --- a/packages/experiments/src/components/Shimmer/Shimmer.styles.ts +++ b/packages/experiments/src/components/Shimmer/Shimmer.styles.ts @@ -89,6 +89,7 @@ export function getStyles(props: IShimmerStyleProps): IShimmerStyles { opacity: '0', lineHeight: '1', background: 'none', + backgroundColor: 'transparent', border: 'none', transition: 'opacity 200ms' }, diff --git a/packages/experiments/src/components/Tile/Tile.scss b/packages/experiments/src/components/Tile/Tile.scss index 207b5f43611e65..246719712475a9 100644 --- a/packages/experiments/src/components/Tile/Tile.scss +++ b/packages/experiments/src/components/Tile/Tile.scss @@ -157,6 +157,7 @@ @include right(0); border: none; background: none; + background-color: transparent; opacity: 0; box-sizing: border-box; padding: 6px; diff --git a/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.styles.ts b/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.styles.ts index fc7490353aa0c3..e84e8f40128867 100644 --- a/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.styles.ts @@ -37,6 +37,7 @@ export const getStyles = memoizeFunction(( padding: '0', border: 'none', background: 'none', + backgroundColor: 'transparent', margin: '0', outline: 'none', display: 'block', diff --git a/packages/office-ui-fabric-react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap index 4a75535621cfcb..71049b3bac467d 100644 --- a/packages/office-ui-fabric-react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap @@ -16,6 +16,7 @@ exports[`Checkbox renders Checkbox correctly 1`] = ` -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; background: none; + background-color: transparent; border: none; cursor: pointer; display: block; diff --git a/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.scss b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.scss index 2f4f6d4a9c1f4c..80e033e7c729e8 100644 --- a/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.scss +++ b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.scss @@ -98,6 +98,7 @@ $SearchBox-sidePadding: 8px; // padding in input on left and right sides without position: relative; background: none; + background-color: transparent; border: none; line-height: $CommandBarItem-height; min-width: 20px; @@ -172,7 +173,7 @@ $SearchBox-sidePadding: 8px; // padding in input on left and right sides without &.itemLinkIsExpanded:hover { background-color: $ms-color-neutralQuaternary; } - + &.inactive { color: $ms-color-neutralTertiaryAlt; cursor: default; diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.styles.ts b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.styles.ts index 424bcd7e8c7507..e65b4b3d650b4d 100644 --- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.styles.ts +++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.styles.ts @@ -219,6 +219,7 @@ export const getStyles = memoizeFunction(( fontWeight: FontWeights.semibold, color: ContextualMenuHeaderColor, background: 'none', + backgroundColor: 'transparent', border: 'none', height: ContextualMenuItemHeight, lineHeight: ContextualMenuItemHeight, diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.scss b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.scss index 114b7a4a2e21c6..d2810c9240795d 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.scss +++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.scss @@ -11,6 +11,7 @@ box-sizing: border-box; vertical-align: top; background: none; + background-color: transparent; border: none; opacity: 0; diff --git a/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.scss b/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.scss index 66cba6b8feecd4..d5407db8d683db 100644 --- a/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.scss +++ b/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.scss @@ -253,6 +253,7 @@ $DropDown-item-height: 32px; font-weight: $ms-font-weight-semibold; color: $ms-color-themePrimary; background: none; + background-color: transparent; border: none; height: $DropDown-item-height; line-height: $DropDown-item-height; diff --git a/packages/office-ui-fabric-react/src/components/Facepile/Facepile.scss b/packages/office-ui-fabric-react/src/components/Facepile/Facepile.scss index e02c5a99ab5ddc..ff4ad9f3a46afa 100644 --- a/packages/office-ui-fabric-react/src/components/Facepile/Facepile.scss +++ b/packages/office-ui-fabric-react/src/components/Facepile/Facepile.scss @@ -40,6 +40,7 @@ $spacingAroundItemButton: 2px; button.itemButton { display: inline; background: none; + background-color: transparent; padding: 0; cursor: pointer; border: none; diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.scss b/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.scss index 8cd93d87f595cb..ecd7f16450949a 100644 --- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.scss +++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.scss @@ -38,6 +38,7 @@ $groupHeader-ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045); @include focus-border(); cursor: default; background: none; + background-color: transparent; border: none; font-size: $ms-icon-size-l; } diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/examples/GroupedList.Custom.Example.scss b/packages/office-ui-fabric-react/src/components/GroupedList/examples/GroupedList.Custom.Example.scss index 377574f1fa47ca..fb8325313a9859 100644 --- a/packages/office-ui-fabric-react/src/components/GroupedList/examples/GroupedList.Custom.Example.scss +++ b/packages/office-ui-fabric-react/src/components/GroupedList/examples/GroupedList.Custom.Example.scss @@ -23,6 +23,7 @@ box-sizing: border-box; vertical-align: top; background: none; + background-color: transparent; border: none; padding-left: 32px; } diff --git a/packages/office-ui-fabric-react/src/components/Link/Link.styles.ts b/packages/office-ui-fabric-react/src/components/Link/Link.styles.ts index 1568800197ddf7..7fd3682704da4d 100644 --- a/packages/office-ui-fabric-react/src/components/Link/Link.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Link/Link.styles.ts @@ -20,6 +20,7 @@ export const getStyles = (props: ILinkStyleProps): ILinkStyles => { }, isButton && { background: 'none', + backgroundColor: 'transparent', border: 'none', cursor: 'pointer', display: 'inline', diff --git a/packages/office-ui-fabric-react/src/components/Link/__snapshots__/Link.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Link/__snapshots__/Link.test.tsx.snap index 9ff9a394be772c..36873c884c8e7b 100644 --- a/packages/office-ui-fabric-react/src/components/Link/__snapshots__/Link.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/Link/__snapshots__/Link.test.tsx.snap @@ -86,6 +86,7 @@ exports[`Link renders Link with no href as a button 1`] = ` ms-Link { background: none; + background-color: transparent; border: none; color: #0078d4; cursor: pointer; @@ -178,6 +179,7 @@ exports[`Link renders disabled Link with no href as a button correctly 1`] = ` is-disabled { background: none; + background-color: transparent; border: none; color: #a6a6a6; cursor: default; diff --git a/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelection.scss b/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelection.scss index 07464faacbbea0..30900122fddd06 100644 --- a/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelection.scss +++ b/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelection.scss @@ -15,6 +15,7 @@ @include high-contrast { background: none; + background-color: transparent; } } @@ -42,5 +43,6 @@ @include high-contrast { background: none; + background-color: transparent; } } diff --git a/packages/office-ui-fabric-react/src/components/Rating/Rating.styles.ts b/packages/office-ui-fabric-react/src/components/Rating/Rating.styles.ts index d9e0861c57ab06..f077567b8fba0e 100644 --- a/packages/office-ui-fabric-react/src/components/Rating/Rating.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Rating/Rating.styles.ts @@ -66,6 +66,7 @@ export function getStyles(props: IRatingStyleProps): IRatingStyles { 'ms-Rating-button', { background: 'none', + backgroundColor: 'transparent', margin: '3px 3px 0px 0px', padding: '0px', border: 'none', diff --git a/packages/office-ui-fabric-react/src/components/Rating/__snapshots__/Rating.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Rating/__snapshots__/Rating.test.tsx.snap index 3b03c3c06daaee..5af3fd76a49500 100644 --- a/packages/office-ui-fabric-react/src/components/Rating/__snapshots__/Rating.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/Rating/__snapshots__/Rating.test.tsx.snap @@ -30,6 +30,7 @@ exports[`Rating Renders Rating correctly 1`] = ` ms-Rating--small { background: none; + background-color: transparent; border: none; cursor: pointer; margin-bottom: 0px; @@ -94,7 +95,7 @@ exports[`Rating Renders Rating correctly 1`] = ` } id="RatingLabel1-1" > - +
- +
- +
- +
- +
Date: Thu, 26 Apr 2018 09:23:45 +0200 Subject: [PATCH 2/2] fix tests and add change files --- .../master_2018-04-26-07-20.json | 11 ++++++++++ .../experiments/master_2018-04-26-07-20.json | 11 ++++++++++ .../master_2018-04-26-07-20.json | 11 ++++++++++ .../__snapshots__/Checkbox.test.tsx.snap | 2 +- .../Link/__snapshots__/Link.test.tsx.snap | 4 ++-- .../Rating/__snapshots__/Rating.test.tsx.snap | 20 +++++++++---------- 6 files changed, 46 insertions(+), 13 deletions(-) create mode 100644 common/changes/@uifabric/example-app-base/master_2018-04-26-07-20.json create mode 100644 common/changes/@uifabric/experiments/master_2018-04-26-07-20.json create mode 100644 common/changes/@uifabric/fabric-website/master_2018-04-26-07-20.json diff --git a/common/changes/@uifabric/example-app-base/master_2018-04-26-07-20.json b/common/changes/@uifabric/example-app-base/master_2018-04-26-07-20.json new file mode 100644 index 00000000000000..5fa939f0399d06 --- /dev/null +++ b/common/changes/@uifabric/example-app-base/master_2018-04-26-07-20.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "", + "packageName": "@uifabric/example-app-base", + "type": "none" + } + ], + "packageName": "@uifabric/example-app-base", + "email": "vibailly@microsoft.com" +} \ No newline at end of file diff --git a/common/changes/@uifabric/experiments/master_2018-04-26-07-20.json b/common/changes/@uifabric/experiments/master_2018-04-26-07-20.json new file mode 100644 index 00000000000000..5dbf835ac6f886 --- /dev/null +++ b/common/changes/@uifabric/experiments/master_2018-04-26-07-20.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "", + "packageName": "@uifabric/experiments", + "type": "none" + } + ], + "packageName": "@uifabric/experiments", + "email": "vibailly@microsoft.com" +} \ No newline at end of file diff --git a/common/changes/@uifabric/fabric-website/master_2018-04-26-07-20.json b/common/changes/@uifabric/fabric-website/master_2018-04-26-07-20.json new file mode 100644 index 00000000000000..3fb046523b5c00 --- /dev/null +++ b/common/changes/@uifabric/fabric-website/master_2018-04-26-07-20.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "fix corner case bug with Safari", + "packageName": "@uifabric/fabric-website", + "type": "none" + } + ], + "packageName": "@uifabric/fabric-website", + "email": "vibailly@microsoft.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap index 71049b3bac467d..c374711d3f64d4 100644 --- a/packages/office-ui-fabric-react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap @@ -15,8 +15,8 @@ exports[`Checkbox renders Checkbox correctly 1`] = ` { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background: none; background-color: transparent; + background: none; border: none; cursor: pointer; display: block; diff --git a/packages/office-ui-fabric-react/src/components/Link/__snapshots__/Link.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Link/__snapshots__/Link.test.tsx.snap index 36873c884c8e7b..5feebc98bc8a07 100644 --- a/packages/office-ui-fabric-react/src/components/Link/__snapshots__/Link.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/Link/__snapshots__/Link.test.tsx.snap @@ -85,8 +85,8 @@ exports[`Link renders Link with no href as a button 1`] = ` className= ms-Link { - background: none; background-color: transparent; + background: none; border: none; color: #0078d4; cursor: pointer; @@ -178,8 +178,8 @@ exports[`Link renders disabled Link with no href as a button correctly 1`] = ` ms-Link is-disabled { - background: none; background-color: transparent; + background: none; border: none; color: #a6a6a6; cursor: default; diff --git a/packages/office-ui-fabric-react/src/components/Rating/__snapshots__/Rating.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Rating/__snapshots__/Rating.test.tsx.snap index 5af3fd76a49500..a2cc53fc7250d4 100644 --- a/packages/office-ui-fabric-react/src/components/Rating/__snapshots__/Rating.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/Rating/__snapshots__/Rating.test.tsx.snap @@ -29,8 +29,8 @@ exports[`Rating Renders Rating correctly 1`] = ` ms-Rating-button ms-Rating--small { - background: none; background-color: transparent; + background: none; border: none; cursor: pointer; margin-bottom: 0px; @@ -95,7 +95,7 @@ exports[`Rating Renders Rating correctly 1`] = ` } id="RatingLabel1-1" > - +
- +
- +
- +
- +