Fluentui: Breadcrumb: Focus style has double rectangles
micahgodbolt
All 2 comments
Looked real quick with @khuynh92 (@mikewheaton FYI) and backtracked it to this PR. The issue comes from having getFocusStyle() on itemLink style area of the Breadcrumb:
https://github.com/OfficeDev/office-ui-fabric-react/blob/0cacff12208fb85c55cfd23148e03797a151304d/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.styles.ts#L138
... which gets passed to Link as a className. Link's root area which takes in that class sets the focus rectangle without getFocusStyle helper but instead sets an outline with it's default 0px inset. Because getFocusStyle by default has inset equal to 1px we get a doubled outline when we focus on it.
@khuynh92 will submit a PR for a one of the fixes we found and hoping the designer can decide which one is better.
Vitalius1
on 18 Jan 2019
:tada:This issue was addressed in #7716, which has now been successfully released as [email protected].:tada:
Handy links:
msft-github-bot
on 21 Jan 2019
Related issues
nekoya
路
3Comments
prashkan
路
3Comments
rickyp-ms
路
3Comments
holysnake91
路
3Comments
luisrudge
路
3Comments
Most helpful comment
Looked real quick with @khuynh92 (@mikewheaton FYI) and backtracked it to this PR. The issue comes from having
getFocusStyle()onitemLinkstyle area of theBreadcrumb:https://github.com/OfficeDev/office-ui-fabric-react/blob/0cacff12208fb85c55cfd23148e03797a151304d/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.styles.ts#L138
... which gets passed to Link as a className.
Link'srootarea which takes in that class sets the focus rectangle withoutgetFocusStylehelper but instead sets an outline with it's default 0pxinset. BecausegetFocusStyleby default hasinsetequal to 1px we get a doubled outline when we focus on it.@khuynh92 will submit a PR for a one of the fixes we found and hoping the designer can decide which one is better.