From 45494ff6aa61ffbfe07a0cad640edb5475318df4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Dias?= Date: Fri, 15 Jan 2021 13:59:45 +0100 Subject: [PATCH 1/7] fix(react-examples): Add title prop to icons in OverflowSet example (microsoftdesign/fluentui#10284) --- .../src/react/OverflowSet/OverflowSet.Vertical.Example.tsx | 4 ++++ .../react/__snapshots__/OverflowSet.Vertical.Example.tsx.shot | 3 +++ 2 files changed, 7 insertions(+) diff --git a/packages/react-examples/src/react/OverflowSet/OverflowSet.Vertical.Example.tsx b/packages/react-examples/src/react/OverflowSet/OverflowSet.Vertical.Example.tsx index 97b50281657200..d696b7dc8aedfd 100644 --- a/packages/react-examples/src/react/OverflowSet/OverflowSet.Vertical.Example.tsx +++ b/packages/react-examples/src/react/OverflowSet/OverflowSet.Vertical.Example.tsx @@ -16,6 +16,7 @@ const onRenderItem = (item: IOverflowSetItemProps): JSX.Element => { return ( ( key: 'item1', icon: 'Add', name: 'Add', + title: 'Add', ariaLabel: 'New. Use left and right arrow keys to navigate', onClick: noOp, }, @@ -53,12 +55,14 @@ export const OverflowSetVerticalExample: React.FunctionComponent = () => ( key: 'item2', icon: 'Upload', name: 'Upload', + title: 'Upload', onClick: noOp, }, { key: 'item3', icon: 'Share', name: 'Share', + title: 'Share', onClick: noOp, }, ]} diff --git a/packages/react-examples/src/react/__snapshots__/OverflowSet.Vertical.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/OverflowSet.Vertical.Example.tsx.shot index 9437aa6e355a41..1ed4ec1d61debe 100644 --- a/packages/react-examples/src/react/__snapshots__/OverflowSet.Vertical.Example.tsx.shot +++ b/packages/react-examples/src/react/__snapshots__/OverflowSet.Vertical.Example.tsx.shot @@ -112,6 +112,7 @@ exports[`Component Examples renders OverflowSet.Vertical.Example.tsx correctly 1 onMouseDown={[Function]} onMouseUp={[Function]} role="menuitem" + title="Add" type="button" > Date: Tue, 19 Jan 2021 19:59:05 +0100 Subject: [PATCH 2/7] Replace title prop for TooltipHost --- .../OverflowSet.Vertical.Example.tsx | 33 +- .../OverflowSet.Vertical.Example.tsx.shot | 1099 +++++++++-------- 2 files changed, 593 insertions(+), 539 deletions(-) diff --git a/packages/react-examples/src/react/OverflowSet/OverflowSet.Vertical.Example.tsx b/packages/react-examples/src/react/OverflowSet/OverflowSet.Vertical.Example.tsx index d696b7dc8aedfd..b1039aa3da60b9 100644 --- a/packages/react-examples/src/react/OverflowSet/OverflowSet.Vertical.Example.tsx +++ b/packages/react-examples/src/react/OverflowSet/OverflowSet.Vertical.Example.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { CommandBarButton } from '@fluentui/react/lib/compat/Button'; import { IOverflowSetItemProps, OverflowSet } from '@fluentui/react/lib/OverflowSet'; +import { TooltipHost } from '@fluentui/react'; const noOp = () => undefined; @@ -14,26 +15,28 @@ const onRenderOverflowButtonStyles = { const onRenderItem = (item: IOverflowSetItemProps): JSX.Element => { return ( - + + + ); }; const onRenderOverflowButton = (overflowItems: any[] | undefined): JSX.Element => { return ( - + + + ); }; diff --git a/packages/react-examples/src/react/__snapshots__/OverflowSet.Vertical.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/OverflowSet.Vertical.Example.tsx.shot index 1ed4ec1d61debe..3e1232402eac67 100644 --- a/packages/react-examples/src/react/__snapshots__/OverflowSet.Vertical.Example.tsx.shot +++ b/packages/react-examples/src/react/__snapshots__/OverflowSet.Vertical.Example.tsx.shot @@ -25,148 +25,161 @@ exports[`Component Examples renders OverflowSet.Vertical.Example.tsx correctly 1 + > +  + + + +
* { - left: 0px; - position: relative; - top: 0px; - } - @media screen and (-ms-high-contrast: active){& { - border: none; - } - &:hover { - background-color: #f3f2f1; - color: #201f1e; - } - @media screen and (-ms-high-contrast: active){&:hover { - color: Highlight; - } - &:hover .ms-Button-icon { - color: #106ebe; - } - &:hover .ms-Button-menuIcon { - color: #323130; - } - &:active { - background-color: #edebe9; - color: #201f1e; - } - &:active .ms-Button-icon { - color: #005a9e; - } - &:active .ms-Button-menuIcon { - color: #323130; - } - data-is-focusable={true} - onClick={[Function]} + onBlurCapture={[Function]} + onFocusCapture={[Function]} onKeyDown={[Function]} - onKeyPress={[Function]} - onKeyUp={[Function]} - onMouseDown={[Function]} - onMouseUp={[Function]} - role="menuitem" - title="Upload" - type="button" + onMouseEnter={[Function]} + onMouseLeave={[Function]} > - * { + left: 0px; + position: relative; + top: 0px; } - data-automationid="splitbuttonprimary" + @media screen and (-ms-high-contrast: active){& { + border: none; + } + &:hover { + background-color: #f3f2f1; + color: #201f1e; + } + @media screen and (-ms-high-contrast: active){&:hover { + color: Highlight; + } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } + &:active { + background-color: #edebe9; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; + } + data-is-focusable={true} + onClick={[Function]} + onKeyDown={[Function]} + onKeyPress={[Function]} + onKeyUp={[Function]} + onMouseDown={[Function]} + onMouseUp={[Function]} + role="menuitem" + type="button" > - + -  - - - + > +  + + + +
* { - left: 0px; - position: relative; - top: 0px; - } - @media screen and (-ms-high-contrast: active){& { - border: none; - } - &:hover { - background-color: #f3f2f1; - color: #201f1e; - } - @media screen and (-ms-high-contrast: active){&:hover { - color: Highlight; - } - &:hover .ms-Button-icon { - color: #106ebe; - } - &:hover .ms-Button-menuIcon { - color: #323130; - } - &:active { - background-color: #edebe9; - color: #201f1e; - } - &:active .ms-Button-icon { - color: #005a9e; - } - &:active .ms-Button-menuIcon { - color: #323130; - } - data-is-focusable={true} - onClick={[Function]} + onBlurCapture={[Function]} + onFocusCapture={[Function]} onKeyDown={[Function]} - onKeyPress={[Function]} - onKeyUp={[Function]} - onMouseDown={[Function]} - onMouseUp={[Function]} - role="menuitem" - title="Share" - type="button" + onMouseEnter={[Function]} + onMouseLeave={[Function]} > - * { + left: 0px; + position: relative; + top: 0px; + } + @media screen and (-ms-high-contrast: active){& { + border: none; } - data-automationid="splitbuttonprimary" + &:hover { + background-color: #f3f2f1; + color: #201f1e; + } + @media screen and (-ms-high-contrast: active){&:hover { + color: Highlight; + } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } + &:active { + background-color: #edebe9; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; + } + data-is-focusable={true} + onClick={[Function]} + onKeyDown={[Function]} + onKeyPress={[Function]} + onKeyUp={[Function]} + onMouseDown={[Function]} + onMouseUp={[Function]} + role="menuitem" + type="button" > - + -  - - - + > +  + + + +
- + > +  + + + +
`; From b05f3ccb6126867afd6d6dae7434bd6e0bbc1c59 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= Date: Tue, 19 Jan 2021 19:33:45 +0100 Subject: [PATCH 3/7] fix(react-examples): Change item names to match icon in OverflowSet example (#16494) - [x] Addresses an existing issue: Fixes microsoftdesign/fluentui#10282 - [x] Include a change request file using `$ yarn change`: No change files are needed Add descriptive names for the icons used in the OverflowSet Vertical example. Removed unused `icon` props for the `overflowItems` --- .../__snapshots__/OverflowSet.Vertical.Example.tsx.shot | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-examples/src/react/__snapshots__/OverflowSet.Vertical.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/OverflowSet.Vertical.Example.tsx.shot index 3e1232402eac67..64fc691f5cbffb 100644 --- a/packages/react-examples/src/react/__snapshots__/OverflowSet.Vertical.Example.tsx.shot +++ b/packages/react-examples/src/react/__snapshots__/OverflowSet.Vertical.Example.tsx.shot @@ -36,7 +36,7 @@ exports[`Component Examples renders OverflowSet.Vertical.Example.tsx correctly 1 onMouseLeave={[Function]} > - + } + > +  + + +
-
* { + left: 0px; + position: relative; + top: 0px; + } + @media screen and (-ms-high-contrast: active){& { + border: none; + } + &:hover { + background-color: #f3f2f1; + color: #201f1e; + } + @media screen and (-ms-high-contrast: active){&:hover { + color: Highlight; + } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } + &:active { + background-color: #edebe9; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; + } + data-is-focusable={true} + onClick={[Function]} onKeyDown={[Function]} - onMouseEnter={[Function]} - onMouseLeave={[Function]} + onKeyPress={[Function]} + onKeyUp={[Function]} + onMouseDown={[Function]} + onMouseUp={[Function]} + role="menuitem" + type="button" > - -
+ } + > +  + + +
-
* { + left: 0px; + position: relative; + top: 0px; + } + @media screen and (-ms-high-contrast: active){& { + border: none; + } + &:hover { + background-color: #f3f2f1; + color: #201f1e; + } + @media screen and (-ms-high-contrast: active){&:hover { + color: Highlight; + } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } + &:active { + background-color: #edebe9; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; + } + data-is-focusable={true} + onClick={[Function]} onKeyDown={[Function]} - onMouseEnter={[Function]} - onMouseLeave={[Function]} + onKeyPress={[Function]} + onKeyUp={[Function]} + onMouseDown={[Function]} + onMouseUp={[Function]} + role="menuitem" + type="button" > - -
+ } + > +  + + +
-
* { + left: 0px; + position: relative; + top: 0px; + } + @media screen and (-ms-high-contrast: active){& { + border: none; + } + &:hover { + background-color: #f3f2f1; + color: #201f1e; + } + @media screen and (-ms-high-contrast: active){&:hover { + color: Highlight; + } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } + &:active { + background-color: #edebe9; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; + } + data-is-focusable={true} + onClick={[Function]} onKeyDown={[Function]} - onMouseEnter={[Function]} - onMouseLeave={[Function]} + onKeyPress={[Function]} + onKeyUp={[Function]} + onMouseDown={[Function]} + onMouseUp={[Function]} + role="menuitem" + title="More items" + type="button" > - -
+ } + > +  + + +
`; diff --git a/packages/react-examples/src/react/__snapshots__/ResizeGroup.OverflowSet.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/ResizeGroup.OverflowSet.Example.tsx.shot index a250071c46fae2..c05929077e18cb 100644 --- a/packages/react-examples/src/react/__snapshots__/ResizeGroup.OverflowSet.Example.tsx.shot +++ b/packages/react-examples/src/react/__snapshots__/ResizeGroup.OverflowSet.Example.tsx.shot @@ -3608,7 +3608,7 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl box-shadow: none; box-sizing: border-box; color: #323130; - display: block; + display: inline-block; font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; font-size: 14px; font-weight: 600; @@ -3632,7 +3632,7 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl className= ms-Toggle-innerContainer { - display: inline-flex; + display: flex; position: relative; } > @@ -3737,7 +3737,7 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl box-shadow: none; box-sizing: border-box; color: #323130; - display: block; + display: inline-block; font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; font-size: 14px; font-weight: 600; @@ -3761,7 +3761,7 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl className= ms-Toggle-innerContainer { - display: inline-flex; + display: flex; position: relative; } > @@ -3866,7 +3866,7 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl box-shadow: none; box-sizing: border-box; color: #323130; - display: block; + display: inline-block; font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; font-size: 14px; font-weight: 600; @@ -3890,7 +3890,7 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl className= ms-Toggle-innerContainer { - display: inline-flex; + display: flex; position: relative; } > diff --git a/packages/react-examples/src/react/__snapshots__/Shimmer.Application.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/Shimmer.Application.Example.tsx.shot index aae7ed345f4601..160855acd9fada 100644 --- a/packages/react-examples/src/react/__snapshots__/Shimmer.Application.Example.tsx.shot +++ b/packages/react-examples/src/react/__snapshots__/Shimmer.Application.Example.tsx.shot @@ -25,7 +25,7 @@ Array [ box-shadow: none; box-sizing: border-box; color: #323130; - display: block; + display: inline-block; font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; font-size: 14px; font-weight: 600; @@ -49,7 +49,7 @@ Array [ className= ms-Toggle-innerContainer { - display: inline-flex; + display: flex; position: relative; } > diff --git a/packages/react-examples/src/react/__snapshots__/Shimmer.LoadData.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/Shimmer.LoadData.Example.tsx.shot index 98ec0f1748b6d8..d96b0a9cc9cc17 100644 --- a/packages/react-examples/src/react/__snapshots__/Shimmer.LoadData.Example.tsx.shot +++ b/packages/react-examples/src/react/__snapshots__/Shimmer.LoadData.Example.tsx.shot @@ -34,7 +34,7 @@ exports[`Component Examples renders Shimmer.LoadData.Example.tsx correctly 1`] = className= ms-Toggle-innerContainer { - display: inline-flex; + display: flex; position: relative; } > @@ -399,7 +399,7 @@ exports[`Component Examples renders Shimmer.LoadData.Example.tsx correctly 1`] = className= ms-Toggle-innerContainer { - display: inline-flex; + display: flex; position: relative; } > diff --git a/packages/react-examples/src/react/__snapshots__/SwatchColorPicker.Basic.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/SwatchColorPicker.Basic.Example.tsx.shot index 9c71e29d91a9f8..fce1d98aebd096 100644 --- a/packages/react-examples/src/react/__snapshots__/SwatchColorPicker.Basic.Example.tsx.shot +++ b/packages/react-examples/src/react/__snapshots__/SwatchColorPicker.Basic.Example.tsx.shot @@ -115,6 +115,9 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl position: relative; top: 0px; } + @media screen and (-ms-high-contrast: active){& { + border-color: Window; + } .ms-Fabric--isFocusVisible &:focus::after { border-color: #605e5c; border-radius: 50%; @@ -162,7 +165,6 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl padding-top: 2px; } @media screen and (-ms-high-contrast: active){&:hover { - border-color: Highlight; color: Highlight; } data-index={0} @@ -284,6 +286,9 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl position: relative; top: 0px; } + @media screen and (-ms-high-contrast: active){& { + border-color: Window; + } .ms-Fabric--isFocusVisible &:focus::after { border-color: #605e5c; border-radius: 50%; @@ -331,7 +336,6 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl padding-top: 2px; } @media screen and (-ms-high-contrast: active){&:hover { - border-color: Highlight; color: Highlight; } data-index={1} @@ -453,6 +457,9 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl position: relative; top: 0px; } + @media screen and (-ms-high-contrast: active){& { + border-color: Window; + } .ms-Fabric--isFocusVisible &:focus::after { border-color: #605e5c; border-radius: 50%; @@ -500,7 +507,6 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl padding-top: 2px; } @media screen and (-ms-high-contrast: active){&:hover { - border-color: Highlight; color: Highlight; } data-index={2} @@ -622,6 +628,9 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl position: relative; top: 0px; } + @media screen and (-ms-high-contrast: active){& { + border-color: Window; + } .ms-Fabric--isFocusVisible &:focus::after { border-color: #605e5c; border-radius: 50%; @@ -669,7 +678,6 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl padding-top: 2px; } @media screen and (-ms-high-contrast: active){&:hover { - border-color: Highlight; color: Highlight; } data-index={3} @@ -791,6 +799,9 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl position: relative; top: 0px; } + @media screen and (-ms-high-contrast: active){& { + border-color: Window; + } .ms-Fabric--isFocusVisible &:focus::after { border-color: #605e5c; border-radius: 50%; @@ -838,7 +849,6 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl padding-top: 2px; } @media screen and (-ms-high-contrast: active){&:hover { - border-color: Highlight; color: Highlight; } data-index={4} @@ -1007,6 +1017,9 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl position: relative; top: 0px; } + @media screen and (-ms-high-contrast: active){& { + border-color: Window; + } .ms-Fabric--isFocusVisible &:focus::after { outline-offset: 1px; } @@ -1045,7 +1058,6 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl padding-top: 2px; } @media screen and (-ms-high-contrast: active){&:hover { - border-color: Highlight; color: Highlight; } data-index={0} @@ -1165,6 +1177,9 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl position: relative; top: 0px; } + @media screen and (-ms-high-contrast: active){& { + border-color: Window; + } .ms-Fabric--isFocusVisible &:focus::after { outline-offset: 1px; } @@ -1203,7 +1218,6 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl padding-top: 2px; } @media screen and (-ms-high-contrast: active){&:hover { - border-color: Highlight; color: Highlight; } data-index={1} @@ -1323,6 +1337,9 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl position: relative; top: 0px; } + @media screen and (-ms-high-contrast: active){& { + border-color: Window; + } .ms-Fabric--isFocusVisible &:focus::after { outline-offset: 1px; } @@ -1361,7 +1378,6 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl padding-top: 2px; } @media screen and (-ms-high-contrast: active){&:hover { - border-color: Highlight; color: Highlight; } data-index={2} @@ -1481,6 +1497,9 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl position: relative; top: 0px; } + @media screen and (-ms-high-contrast: active){& { + border-color: Window; + } .ms-Fabric--isFocusVisible &:focus::after { outline-offset: 1px; } @@ -1519,7 +1538,6 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl padding-top: 2px; } @media screen and (-ms-high-contrast: active){&:hover { - border-color: Highlight; color: Highlight; } data-index={3} @@ -1639,6 +1657,9 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl position: relative; top: 0px; } + @media screen and (-ms-high-contrast: active){& { + border-color: Window; + } .ms-Fabric--isFocusVisible &:focus::after { outline-offset: 1px; } @@ -1677,7 +1698,6 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl padding-top: 2px; } @media screen and (-ms-high-contrast: active){&:hover { - border-color: Highlight; color: Highlight; } data-index={4} @@ -1844,6 +1864,9 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl position: relative; top: 0px; } + @media screen and (-ms-high-contrast: active){& { + border-color: Window; + } .ms-Fabric--isFocusVisible &:focus::after { outline-offset: 3px; } @@ -1882,7 +1905,6 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl padding-top: 2px; } @media screen and (-ms-high-contrast: active){&:hover { - border-color: Highlight; color: Highlight; } data-index={0} @@ -2002,6 +2024,9 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl position: relative; top: 0px; } + @media screen and (-ms-high-contrast: active){& { + border-color: Window; + } .ms-Fabric--isFocusVisible &:focus::after { outline-offset: 3px; } @@ -2040,7 +2065,6 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl padding-top: 2px; } @media screen and (-ms-high-contrast: active){&:hover { - border-color: Highlight; color: Highlight; } data-index={1} @@ -2160,6 +2184,9 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl position: relative; top: 0px; } + @media screen and (-ms-high-contrast: active){& { + border-color: Window; + } .ms-Fabric--isFocusVisible &:focus::after { outline-offset: 3px; } @@ -2198,7 +2225,6 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl padding-top: 2px; } @media screen and (-ms-high-contrast: active){&:hover { - border-color: Highlight; color: Highlight; } data-index={2} @@ -2318,6 +2344,9 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl position: relative; top: 0px; } + @media screen and (-ms-high-contrast: active){& { + border-color: Window; + } .ms-Fabric--isFocusVisible &:focus::after { outline-offset: 3px; } @@ -2356,7 +2385,6 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl padding-top: 2px; } @media screen and (-ms-high-contrast: active){&:hover { - border-color: Highlight; color: Highlight; } data-index={3} @@ -2476,6 +2504,9 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl position: relative; top: 0px; } + @media screen and (-ms-high-contrast: active){& { + border-color: Window; + } .ms-Fabric--isFocusVisible &:focus::after { outline-offset: 3px; } @@ -2514,7 +2545,6 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl padding-top: 2px; } @media screen and (-ms-high-contrast: active){&:hover { - border-color: Highlight; color: Highlight; } data-index={4} @@ -2691,6 +2721,9 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl position: relative; top: 0px; } + @media screen and (-ms-high-contrast: active){& { + border-color: Window; + } .ms-Fabric--isFocusVisible &:focus::after { border-color: #605e5c; border-radius: 50%; @@ -2738,7 +2771,6 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl padding-top: 2px; } @media screen and (-ms-high-contrast: active){&:hover { - border-color: Highlight; color: Highlight; } data-index={0} @@ -2860,6 +2892,9 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl position: relative; top: 0px; } + @media screen and (-ms-high-contrast: active){& { + border-color: Window; + } .ms-Fabric--isFocusVisible &:focus::after { border-color: #605e5c; border-radius: 50%; @@ -2907,7 +2942,6 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl padding-top: 2px; } @media screen and (-ms-high-contrast: active){&:hover { - border-color: Highlight; color: Highlight; } data-index={1} @@ -3029,6 +3063,9 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl position: relative; top: 0px; } + @media screen and (-ms-high-contrast: active){& { + border-color: Window; + } .ms-Fabric--isFocusVisible &:focus::after { border-color: #605e5c; border-radius: 50%; @@ -3076,7 +3113,6 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl padding-top: 2px; } @media screen and (-ms-high-contrast: active){&:hover { - border-color: Highlight; color: Highlight; } data-index={2} @@ -3198,6 +3234,9 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl position: relative; top: 0px; } + @media screen and (-ms-high-contrast: active){& { + border-color: Window; + } .ms-Fabric--isFocusVisible &:focus::after { border-color: #605e5c; border-radius: 50%; @@ -3245,7 +3284,6 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl padding-top: 2px; } @media screen and (-ms-high-contrast: active){&:hover { - border-color: Highlight; color: Highlight; } data-index={3} @@ -3371,6 +3409,9 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl position: relative; top: 0px; } + @media screen and (-ms-high-contrast: active){& { + border-color: Window; + } .ms-Fabric--isFocusVisible &:focus::after { border-color: #605e5c; border-radius: 50%; @@ -3418,7 +3459,6 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl padding-top: 2px; } @media screen and (-ms-high-contrast: active){&:hover { - border-color: Highlight; color: Highlight; } data-index={4} @@ -3540,6 +3580,9 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl position: relative; top: 0px; } + @media screen and (-ms-high-contrast: active){& { + border-color: Window; + } .ms-Fabric--isFocusVisible &:focus::after { border-color: #605e5c; border-radius: 50%; @@ -3587,7 +3630,6 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl padding-top: 2px; } @media screen and (-ms-high-contrast: active){&:hover { - border-color: Highlight; color: Highlight; } data-index={5} @@ -3709,6 +3751,9 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl position: relative; top: 0px; } + @media screen and (-ms-high-contrast: active){& { + border-color: Window; + } .ms-Fabric--isFocusVisible &:focus::after { border-color: #605e5c; border-radius: 50%; @@ -3756,7 +3801,6 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl padding-top: 2px; } @media screen and (-ms-high-contrast: active){&:hover { - border-color: Highlight; color: Highlight; } data-index={6} @@ -3878,6 +3922,9 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl position: relative; top: 0px; } + @media screen and (-ms-high-contrast: active){& { + border-color: Window; + } .ms-Fabric--isFocusVisible &:focus::after { border-color: #605e5c; border-radius: 50%; @@ -3925,7 +3972,6 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl padding-top: 2px; } @media screen and (-ms-high-contrast: active){&:hover { - border-color: Highlight; color: Highlight; } data-index={7} @@ -4051,6 +4097,9 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl position: relative; top: 0px; } + @media screen and (-ms-high-contrast: active){& { + border-color: Window; + } .ms-Fabric--isFocusVisible &:focus::after { border-color: #605e5c; border-radius: 50%; @@ -4098,7 +4147,6 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl padding-top: 2px; } @media screen and (-ms-high-contrast: active){&:hover { - border-color: Highlight; color: Highlight; } data-index={8} @@ -4220,6 +4268,9 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl position: relative; top: 0px; } + @media screen and (-ms-high-contrast: active){& { + border-color: Window; + } .ms-Fabric--isFocusVisible &:focus::after { border-color: #605e5c; border-radius: 50%; @@ -4267,7 +4318,6 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl padding-top: 2px; } @media screen and (-ms-high-contrast: active){&:hover { - border-color: Highlight; color: Highlight; } data-index={9} @@ -4389,6 +4439,9 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl position: relative; top: 0px; } + @media screen and (-ms-high-contrast: active){& { + border-color: Window; + } .ms-Fabric--isFocusVisible &:focus::after { border-color: #605e5c; border-radius: 50%; @@ -4436,7 +4489,6 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl padding-top: 2px; } @media screen and (-ms-high-contrast: active){&:hover { - border-color: Highlight; color: Highlight; } data-index={10} @@ -4558,6 +4610,9 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl position: relative; top: 0px; } + @media screen and (-ms-high-contrast: active){& { + border-color: Window; + } .ms-Fabric--isFocusVisible &:focus::after { border-color: #605e5c; border-radius: 50%; @@ -4605,7 +4660,6 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl padding-top: 2px; } @media screen and (-ms-high-contrast: active){&:hover { - border-color: Highlight; color: Highlight; } data-index={11} @@ -4780,6 +4834,10 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl position: relative; top: 0px; } + @media screen and (-ms-high-contrast: active){& { + border-color: Window; + color: GrayText; + } .ms-Fabric--isFocusVisible &:focus::after { border-color: #605e5c; border-radius: 50%; @@ -4952,6 +5010,10 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl position: relative; top: 0px; } + @media screen and (-ms-high-contrast: active){& { + border-color: Window; + color: GrayText; + } .ms-Fabric--isFocusVisible &:focus::after { border-color: #605e5c; border-radius: 50%; @@ -5124,6 +5186,10 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl position: relative; top: 0px; } + @media screen and (-ms-high-contrast: active){& { + border-color: Window; + color: GrayText; + } .ms-Fabric--isFocusVisible &:focus::after { border-color: #605e5c; border-radius: 50%; @@ -5296,6 +5362,10 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl position: relative; top: 0px; } + @media screen and (-ms-high-contrast: active){& { + border-color: Window; + color: GrayText; + } .ms-Fabric--isFocusVisible &:focus::after { border-color: #605e5c; border-radius: 50%; @@ -5468,6 +5538,10 @@ exports[`Component Examples renders SwatchColorPicker.Basic.Example.tsx correctl position: relative; top: 0px; } + @media screen and (-ms-high-contrast: active){& { + border-color: Window; + color: GrayText; + } .ms-Fabric--isFocusVisible &:focus::after { border-color: #605e5c; border-radius: 50%; diff --git a/packages/react-examples/src/react/__snapshots__/TagPicker.Basic.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/TagPicker.Basic.Example.tsx.shot index c41932aa472c8c..34e2a2127cbedc 100644 --- a/packages/react-examples/src/react/__snapshots__/TagPicker.Basic.Example.tsx.shot +++ b/packages/react-examples/src/react/__snapshots__/TagPicker.Basic.Example.tsx.shot @@ -34,7 +34,7 @@ exports[`Component Examples renders TagPicker.Basic.Example.tsx correctly 1`] = box-shadow: none; box-sizing: border-box; color: #323130; - display: block; + display: inline-block; font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; font-size: 14px; font-weight: 600; @@ -58,7 +58,7 @@ exports[`Component Examples renders TagPicker.Basic.Example.tsx correctly 1`] = className= ms-Toggle-innerContainer { - display: inline-flex; + display: flex; position: relative; } > diff --git a/packages/react-examples/src/react/__snapshots__/TextField.ErrorMessage.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/TextField.ErrorMessage.Example.tsx.shot index d27580c6d4ec88..503e5671740889 100644 --- a/packages/react-examples/src/react/__snapshots__/TextField.ErrorMessage.Example.tsx.shot +++ b/packages/react-examples/src/react/__snapshots__/TextField.ErrorMessage.Example.tsx.shot @@ -48,7 +48,7 @@ exports[`Component Examples renders TextField.ErrorMessage.Example.tsx correctly box-shadow: none; box-sizing: border-box; color: #323130; - display: block; + display: inline-block; font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; font-size: 14px; font-weight: 600; @@ -74,7 +74,7 @@ exports[`Component Examples renders TextField.ErrorMessage.Example.tsx correctly className= ms-Toggle-innerContainer { - display: inline-flex; + display: flex; position: relative; } > From b5361135398869b103894e7da07a80aee4ff242e Mon Sep 17 00:00:00 2001 From: Elizabeth Craig Date: Thu, 21 Jan 2021 20:36:29 -0800 Subject: [PATCH 6/7] Update just one snapshot --- .../OverflowSet.Vertical.Example.tsx.shot | 1105 +++++++++-------- 1 file changed, 578 insertions(+), 527 deletions(-) diff --git a/packages/react-examples/src/react/__snapshots__/OverflowSet.Vertical.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/OverflowSet.Vertical.Example.tsx.shot index 9437aa6e355a41..e892177d4d5182 100644 --- a/packages/react-examples/src/react/__snapshots__/OverflowSet.Vertical.Example.tsx.shot +++ b/packages/react-examples/src/react/__snapshots__/OverflowSet.Vertical.Example.tsx.shot @@ -22,150 +22,163 @@ exports[`Component Examples renders OverflowSet.Vertical.Example.tsx correctly 1 flex-shrink: 0; } > - + > +  + + + +
- + > +  + + + +
- + > +  + + + +
- + > +  + + + +
`; From 710a21a50aa2417e324f9565140b885a0c60031a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Dias?= Date: Fri, 22 Jan 2021 13:28:10 +0100 Subject: [PATCH 7/7] Remove extraneous id on tooltips Add label to overflow button --- .../src/react/OverflowSet/OverflowSet.Vertical.Example.tsx | 7 ++++--- .../__snapshots__/OverflowSet.Vertical.Example.tsx.shot | 1 + 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/react-examples/src/react/OverflowSet/OverflowSet.Vertical.Example.tsx b/packages/react-examples/src/react/OverflowSet/OverflowSet.Vertical.Example.tsx index b1039aa3da60b9..a1c2b0d7c6def8 100644 --- a/packages/react-examples/src/react/OverflowSet/OverflowSet.Vertical.Example.tsx +++ b/packages/react-examples/src/react/OverflowSet/OverflowSet.Vertical.Example.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { CommandBarButton } from '@fluentui/react/lib/compat/Button'; import { IOverflowSetItemProps, OverflowSet } from '@fluentui/react/lib/OverflowSet'; -import { TooltipHost } from '@fluentui/react'; +import { DirectionalHint, TooltipHost } from '@fluentui/react'; const noOp = () => undefined; @@ -15,7 +15,7 @@ const onRenderOverflowButtonStyles = { const onRenderItem = (item: IOverflowSetItemProps): JSX.Element => { return ( - + { const onRenderOverflowButton = (overflowItems: any[] | undefined): JSX.Element => { return ( - +