Skip to content
This repository has been 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
merged 40 commits into from
Oct 29, 2019

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!!

CHANGELOG.md Outdated Show resolved Hide resolved
@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.

None yet

3 participants