feat(Toolbar): add support for radio & checkbox groups by layershifter · Pull Request #1920 · microsoft/fluent-ui-react

layershifter · 2019-09-11T15:21:46Z

This PR:

adds a new toggle kind of items in ToolbarItem's menu
adds a new group kind of items in ToolbarItem's menu, which is implemented by ToolbarMenuRadioGroup
added new accessibility behaviors to implements there features

Based on: https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-2/menubar-2.html

…at/toolbar-groups

…at/toolbar-groups # Conflicts: # CHANGELOG.md

jurokapsiar · 2019-09-11T18:48:15Z

packages/react/src/components/Toolbar/ToolbarMenu.tsx

-        return ToolbarMenuDivider.create(item, { overrideProps: dividerOverridesFn })
+
+      switch (kind) {
+        case 'checkbox':


just noticed that we call it toggle in the Toolbar component. We should probably have the same naming across these two

…at/toolbar-groups # Conflicts: # CHANGELOG.md # packages/react/src/themes/teams/components/Toolbar/toolbarMenuItemStyles.ts

codecov · 2019-09-16T10:37:36Z

Codecov Report

Merging #1920 into master will decrease coverage by 0.1%.
The diff coverage is 53.84%.

@@            Coverage Diff             @@
##           master    #1920      +/-   ##
==========================================
- Coverage   70.52%   70.42%   -0.11%     
==========================================
  Files         884      889       +5     
  Lines        7810     7841      +31     
  Branches     2257     2263       +6     
==========================================
+ Hits         5508     5522      +14     
- Misses       2291     2308      +17     
  Partials       11       11

Impacted Files	Coverage Δ
packages/react/src/index.ts	`100% <ø> (ø)`	⬆️
packages/react/src/components/Toolbar/Toolbar.tsx	`47.76% <ø> (ø)`	⬆️
.../teams/components/Toolbar/toolbarMenuItemStyles.ts	`7.69% <0%> (-0.65%)`	⬇️
.../Behaviors/Toolbar/toolbarMenuItemRadioBehavior.ts	`100% <100%> (ø)`
...react/src/components/Toolbar/ToolbarRadioGroup.tsx	`100% <100%> (ø)`	⬆️
...haviors/Toolbar/toolbarMenuItemCheckboxBehavior.ts	`100% <100%> (ø)`
...Behaviors/Toolbar/toolbarMenuRadioGroupBehavior.ts	`100% <100%> (ø)`
...kages/react/src/components/Toolbar/ToolbarMenu.tsx	`58.62% <35.71%> (-19.16%)`	⬇️
...t/src/components/Toolbar/ToolbarMenuRadioGroup.tsx	`45.45% <45.45%> (ø)`
.../components/Toolbar/toolbarMenuRadioGroupStyles.ts	`50% <50%> (ø)`
... and 6 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 79cabdc...c08f354. Read the comment docs.

packages/react/test/specs/components/Toolbar/ToolbarMenuRadioGroup-test.ts

docs/src/components/ColorSchemes.tsx

jurokapsiar · 2019-09-17T02:46:43Z

packages/react/src/lib/accessibility/Behaviors/Toolbar/toolbarMenuItemRadioBehavior.ts

+      'aria-checked': props.checked,
+      'aria-disabled': props.disabled,
+      role: 'menuitemradio',
+      tabIndex: 0,


we should not need tabIndex if data-is-focusable is used and the item is in focus zone

Good catch, removed 👍

jurokapsiar · 2019-09-17T02:53:53Z

packages/react/src/components/Toolbar/ToolbarMenuRadioGroup.tsx

+  accessibility?: Accessibility
+
+  /** Index of the currently active item. */
+  activeIndex?: number


to meke it predictable, I think we should add activeIndex to toolbarRadioGroup as well

…react into feat/toolbar-groups

…at/toolbar-groups

jurokapsiar · 2019-09-17T14:11:15Z

packages/react/src/components/Toolbar/ToolbarMenuItem.tsx

  active?: boolean

+  /** Item can show check indicator if selected. */
+  checked?: boolean


sorry that I missed it before - for toggle in the toolbar we are using toggleButtonBehavior, there the prop is called active. That way it would even be consistent with the toolbar menu radio.

…om/stardust-ui/react into feat/toolbar-groups

Changes addressed :rocket

layershifter added 5 commits September 10, 2019 16:35

wip!

decdb0a

Merge branch 'master' of https://github.com/stardust-ui/react into fe…

e5e1be0

…at/toolbar-groups

wip

8300c42

wip

29031f4

add UT

e279c26

vercel bot requested a deployment to staging September 11, 2019 15:23 Pending

wip!

0b09922

vercel bot deployed to staging September 11, 2019 15:26 View deployment

layershifter added 2 commits September 11, 2019 17:30

wip!

0ee8280

add behaviors to tests

a72776d

vercel bot deployed to staging September 11, 2019 15:32 View deployment

layershifter added 3 commits September 11, 2019 17:56

fix UTs

223b94f

add CH

56a9197

Merge branch 'master' of https://github.com/stardust-ui/react into fe…

a28fcd9

…at/toolbar-groups # Conflicts: # CHANGELOG.md

vercel bot deployed to staging September 11, 2019 15:58 View deployment

layershifter added ⚙️ enhancement New feature or request 🚀 ready for review labels Sep 11, 2019

layershifter marked this pull request as ready for review September 11, 2019 16:00

layershifter requested review from dvdzkwsk, kuzhelov, levithomason, miroslavstastny and mnajdova as code owners September 11, 2019 16:00

jurokapsiar reviewed Sep 11, 2019

View reviewed changes

layershifter added 4 commits September 16, 2019 12:26

rename to toggle

c18b2d8

rename to toggle

be3749e

Merge branch 'master' of https://github.com/stardust-ui/react into fe…

b7fd7e7

…at/toolbar-groups # Conflicts: # CHANGELOG.md # packages/react/src/themes/teams/components/Toolbar/toolbarMenuItemStyles.ts

fix TS issues

dd56b71

vercel bot deployed to staging September 16, 2019 10:37 View deployment

layershifter added 2 commits September 16, 2019 14:10

nit fixes

8aff9bf

fix CI

a0cba3d

vercel bot deployed to staging September 16, 2019 12:35 View deployment

add role presentation on li to enable reader narrate position

c64c9cc

vercel bot deployed to staging September 16, 2019 13:48 View deployment

jurokapsiar previously requested changes Sep 17, 2019

View reviewed changes

kolaps33 approved these changes Sep 17, 2019

View reviewed changes

layershifter added 6 commits September 17, 2019 14:05

restore type change

d84016c

Merge branch 'feat/toolbar-groups' of https://github.com/stardust-ui/…

e222fa7

…react into feat/toolbar-groups

add UT, fix TS error

b0f0552

remove tabIndex

82b78f5

add activeIndex to ToolbarRadioGroup

787e97d

Merge branch 'master' of https://github.com/stardust-ui/react into fe…

ad052ce

…at/toolbar-groups

vercel bot deployed to staging September 17, 2019 12:16 View deployment

remove test for tabIndex

15e4d71

vercel bot deployed to staging September 17, 2019 12:27 View deployment

jurokapsiar reviewed Sep 17, 2019

View reviewed changes

layershifter added 2 commits September 17, 2019 16:16

Merge branches 'feat/toolbar-groups' and 'master' of https://github.c…

80fcd34

…om/stardust-ui/react into feat/toolbar-groups

rename to active

c08f354

vercel bot requested a deployment to staging September 17, 2019 14:27 Pending

vercel bot deployed to staging September 17, 2019 14:34 View deployment

layershifter merged commit 94c7905 into master Sep 18, 2019

layershifter deleted the feat/toolbar-groups branch September 18, 2019 09:53

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(Toolbar): add support for radio & checkbox groups#1920

feat(Toolbar): add support for radio & checkbox groups#1920
layershifter merged 27 commits intomasterfrom
feat/toolbar-groups

layershifter commented Sep 11, 2019 •

edited

Loading

Uh oh!

jurokapsiar Sep 11, 2019

Uh oh!

codecov bot commented Sep 16, 2019 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

jurokapsiar Sep 17, 2019

Uh oh!

layershifter Sep 17, 2019

Uh oh!

jurokapsiar Sep 17, 2019

Uh oh!

layershifter Sep 17, 2019

Uh oh!

jurokapsiar Sep 17, 2019

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

layershifter commented Sep 11, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jurokapsiar Sep 11, 2019

Choose a reason for hiding this comment

Uh oh!

codecov bot commented Sep 16, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

Uh oh!

jurokapsiar Sep 17, 2019

Choose a reason for hiding this comment

Uh oh!

layershifter Sep 17, 2019

Choose a reason for hiding this comment

Uh oh!

jurokapsiar Sep 17, 2019

Choose a reason for hiding this comment

Uh oh!

layershifter Sep 17, 2019

Choose a reason for hiding this comment

Uh oh!

jurokapsiar Sep 17, 2019

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

layershifter commented Sep 11, 2019 •

edited

Loading

codecov bot commented Sep 16, 2019 •

edited

Loading