From 0d92708ec38107177aea6de5bb1f74b11918b85f Mon Sep 17 00:00:00 2001 From: Mohit Bagra Date: Thu, 25 Jan 2018 13:50:47 -0500 Subject: [PATCH 1/4] fix invisibile focus outline in baseButton in IE11 --- .../src/components/Button/BaseButton.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/office-ui-fabric-react/src/components/Button/BaseButton.styles.ts b/packages/office-ui-fabric-react/src/components/Button/BaseButton.styles.ts index c2116f22bd57f5..0e4bca70a37b2f 100644 --- a/packages/office-ui-fabric-react/src/components/Button/BaseButton.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Button/BaseButton.styles.ts @@ -38,7 +38,7 @@ export const getStyles = memoizeFunction(( return { root: [ - getFocusStyle(theme, -1), + getFocusStyle(theme, 0), theme.fonts.medium, { boxSizing: 'border-box', From e4c86bd25929153d6369cbfe4f40e78e970ea07f Mon Sep 17 00:00:00 2001 From: Mohit Bagra Date: Thu, 25 Jan 2018 13:57:26 -0500 Subject: [PATCH 2/4] add change file --- ...-fixfocusoutlinebasebuttonIE_2018-01-25-18-57.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/office-ui-fabric-react/mbagra-fixfocusoutlinebasebuttonIE_2018-01-25-18-57.json diff --git a/common/changes/office-ui-fabric-react/mbagra-fixfocusoutlinebasebuttonIE_2018-01-25-18-57.json b/common/changes/office-ui-fabric-react/mbagra-fixfocusoutlinebasebuttonIE_2018-01-25-18-57.json new file mode 100644 index 00000000000000..41d84e5d25cf18 --- /dev/null +++ b/common/changes/office-ui-fabric-react/mbagra-fixfocusoutlinebasebuttonIE_2018-01-25-18-57.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Fix an issue in IE11 where focus outline was not visible in BaseButton component", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "mbagra@microsoft.com" +} \ No newline at end of file From cf1f3972a43e0434cdd870aa0f9a810cdd22938a Mon Sep 17 00:00:00 2001 From: Mohit Bagra Date: Fri, 26 Jan 2018 11:39:25 -0500 Subject: [PATCH 3/4] commit updated snapshot files --- .../__snapshots__/Breadcrumb.test.tsx.snap | 8 +- .../Button/__snapshots__/Button.test.tsx.snap | 40 ++++---- .../__snapshots__/ComboBox.test.tsx.snap | 8 +- .../__snapshots__/Facepile.test.tsx.snap | 8 +- .../Nav/__snapshots__/Nav.test.tsx.snap | 8 +- .../Pivot/__snapshots__/Pivot.test.tsx.snap | 16 ++-- .../__snapshots__/SpinButton.test.tsx.snap | 16 ++-- .../SwatchColorPicker.test.tsx.snap | 96 +++++++++---------- 8 files changed, 100 insertions(+), 100 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap index 30ff42150359c8..fb09b3f497f3b6 100644 --- a/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap @@ -218,13 +218,13 @@ exports[`Breadcrumb renders breadcumb correctly 2`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } &:hover { diff --git a/packages/office-ui-fabric-react/src/components/Button/__snapshots__/Button.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Button/__snapshots__/Button.test.tsx.snap index 0fbc1378c8cfc1..0abfbf809d05bf 100644 --- a/packages/office-ui-fabric-react/src/components/Button/__snapshots__/Button.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/Button/__snapshots__/Button.test.tsx.snap @@ -40,13 +40,13 @@ exports[`Button renders ActionButton correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } &:hover { @@ -144,13 +144,13 @@ exports[`Button renders CommandBarButton correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } &:hover { @@ -294,13 +294,13 @@ exports[`Button renders CompoundButton correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } &:hover { @@ -422,13 +422,13 @@ exports[`Button renders DefaultButton correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } &:hover { @@ -520,13 +520,13 @@ exports[`Button renders IconButton correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } &:hover { diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap b/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap index a9e542b214e9a7..1ff608d6538ca5 100644 --- a/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap @@ -160,13 +160,13 @@ exports[`ComboBox Renders ComboBox correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } @media screen and (-ms-high-contrast: active){& { diff --git a/packages/office-ui-fabric-react/src/components/Facepile/__snapshots__/Facepile.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Facepile/__snapshots__/Facepile.test.tsx.snap index 8169b99dca04cb..2f3a04b98c67f1 100644 --- a/packages/office-ui-fabric-react/src/components/Facepile/__snapshots__/Facepile.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/Facepile/__snapshots__/Facepile.test.tsx.snap @@ -129,13 +129,13 @@ exports[`Facepile renders Facepile correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } data="75%" diff --git a/packages/office-ui-fabric-react/src/components/Nav/__snapshots__/Nav.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Nav/__snapshots__/Nav.test.tsx.snap index 25e12db86478e2..20b01b7d049b63 100644 --- a/packages/office-ui-fabric-react/src/components/Nav/__snapshots__/Nav.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/Nav/__snapshots__/Nav.test.tsx.snap @@ -81,13 +81,13 @@ exports[`Nav renders Nav correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } &:hover { diff --git a/packages/office-ui-fabric-react/src/components/Pivot/__snapshots__/Pivot.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Pivot/__snapshots__/Pivot.test.tsx.snap index 8058f2c9d08bd1..7d238a093b799d 100644 --- a/packages/office-ui-fabric-react/src/components/Pivot/__snapshots__/Pivot.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/Pivot/__snapshots__/Pivot.test.tsx.snap @@ -59,13 +59,13 @@ exports[`Pivot renders Pivot correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } &:hover { @@ -152,13 +152,13 @@ exports[`Pivot renders Pivot correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } &:hover { diff --git a/packages/office-ui-fabric-react/src/components/SpinButton/__snapshots__/SpinButton.test.tsx.snap b/packages/office-ui-fabric-react/src/components/SpinButton/__snapshots__/SpinButton.test.tsx.snap index 928e00cac02cf4..7347cffc2f2d74 100644 --- a/packages/office-ui-fabric-react/src/components/SpinButton/__snapshots__/SpinButton.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/SpinButton/__snapshots__/SpinButton.test.tsx.snap @@ -185,13 +185,13 @@ exports[`SpinButton renders SpinButton correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } &:hover { @@ -291,13 +291,13 @@ exports[`SpinButton renders SpinButton correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } &:hover { diff --git a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/__snapshots__/SwatchColorPicker.test.tsx.snap b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/__snapshots__/SwatchColorPicker.test.tsx.snap index 32120e45c26f32..55a6bcfa7c5ada 100644 --- a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/__snapshots__/SwatchColorPicker.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/__snapshots__/SwatchColorPicker.test.tsx.snap @@ -91,13 +91,13 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } @media screen and (-ms-high-contrast: active){& { @@ -275,13 +275,13 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } @media screen and (-ms-high-contrast: active){& { @@ -459,13 +459,13 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } @media screen and (-ms-high-contrast: active){& { @@ -643,13 +643,13 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } @media screen and (-ms-high-contrast: active){& { @@ -831,13 +831,13 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } @media screen and (-ms-high-contrast: active){& { @@ -1015,13 +1015,13 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } @media screen and (-ms-high-contrast: active){& { @@ -1199,13 +1199,13 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } @media screen and (-ms-high-contrast: active){& { @@ -1383,13 +1383,13 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } @media screen and (-ms-high-contrast: active){& { @@ -1571,13 +1571,13 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } @media screen and (-ms-high-contrast: active){& { @@ -1755,13 +1755,13 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } @media screen and (-ms-high-contrast: active){& { @@ -1939,13 +1939,13 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } @media screen and (-ms-high-contrast: active){& { @@ -2123,13 +2123,13 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } @media screen and (-ms-high-contrast: active){& { From a90cec7ebe1a3e9edb6c394757daa13e99d26b10 Mon Sep 17 00:00:00 2001 From: Mohit Bagra Date: Fri, 26 Jan 2018 12:19:06 -0500 Subject: [PATCH 4/4] commit one more snap file --- .../__snapshots__/CommandBar.test.tsx.snap | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/experiments/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap b/packages/experiments/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap index 75d5b04109162d..151c73ebe1d816 100644 --- a/packages/experiments/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap +++ b/packages/experiments/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap @@ -80,13 +80,13 @@ exports[`CommandBar renders commands correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } &:hover { @@ -181,13 +181,13 @@ exports[`CommandBar renders commands correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } &:hover {