Skip to content
This repository was archived by the owner on Mar 4, 2020. It is now read-only.

feat(ListItem,Button,ToolbarItem,ToolbarMenu): Adding/fixing universal focus indicator#2011

Merged
bcalvery merged 40 commits intomasterfrom
feat/add-focus-toolbar-icons
Oct 29, 2019
Merged

feat(ListItem,Button,ToolbarItem,ToolbarMenu): Adding/fixing universal focus indicator#2011
bcalvery merged 40 commits intomasterfrom
feat/add-focus-toolbar-icons

Conversation

@bcalvery
Copy link
Contributor

@bcalvery bcalvery commented Oct 4, 2019

Updating ListItem, Button, ToolbarItem, ToolbarMenuItem to use the common "getBorderFocusStyles" component to indicate keyboard focus.

Also incorporated theme changes for button - fixing issues reported by design.

Note: Keyboard focus is now a distinctly separate treatment from hover.

ListItem:

Selected item at bottom of each list, keyboard focused item at top.
Before:
image
After:
image

Button:

Issue with border was in the wrong position (it should be outboard of main button border)
Idle state on left, keyboard focus state on right.
Before:
image
After:
image

Before:
image
After:
image

Note style of circular button is changed to behave like normal button.
Also updated buttonVariables to use colorScheme variables.

ToolbarItem

Before:
image
After:
image

ToolbarMenuItem:

Before:
image
After:
image

@codecov
Copy link

codecov bot commented Oct 4, 2019

Codecov Report

Merging #2011 into master will increase coverage by 5.48%.
The diff coverage is n/a.

Impacted file tree graph

@@            Coverage Diff             @@
##           master    #2011      +/-   ##
==========================================
+ Coverage   68.52%   74.01%   +5.48%     
==========================================
  Files         910      167     -743     
  Lines        8306     5895    -2411     
  Branches     2438     1738     -700     
==========================================
- Hits         5692     4363    -1329     
+ Misses       2600     1518    -1082     
  Partials       14       14
Impacted Files Coverage Δ
...s/components/RadioGroup/radioGroupItemVariables.ts
...mponents/Icon/svg/ProcessedIcons/icons-zoom-in.tsx
.../components/Icon/svg/ProcessedIcons/icons-hand.tsx
...src/themes/teams/components/Dialog/dialogStyles.ts
...s/Icon/svg/ProcessedIcons/icons-files-document.tsx
.../themes/teams/components/Icon/svg/icons/italic.tsx
...emes/teams/components/Toolbar/toolbarMenuStyles.ts
...c/themes/teams/components/Icon/svg/icons/robot.tsx
...-contrast/components/TextArea/textAreaVariables.ts
...s/accessibility/src/behaviors/Tree/treeBehavior.ts
... and 722 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 0a715ab...33ba3de. Read the comment docs.

@bcalvery bcalvery changed the title feat(ListItem,Button,ToolbarItem,ToolbarMenu): Adding/fixing univeral focus indicator feat(ListItem,Button,ToolbarItem,ToolbarMenu): Adding/fixing universal focus indicator Oct 25, 2019
Copy link
Collaborator

@codepretty codepretty left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I keyboarded around a few components and looks good from what I can tell! thanks Brian!!

@bcalvery bcalvery merged commit 961776a into master Oct 29, 2019
@bcalvery bcalvery deleted the feat/add-focus-toolbar-icons branch October 29, 2019 17:51
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants