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

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

@@ -35,12 +35,21 @@ export interface ToolbarMenuItemProps
  /** A toolbar item can be active. */
  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 commented Sep 11, 2019 •

edited

Loading

jurokapsiar Sep 11, 2019

codecov bot commented Sep 16, 2019 •

edited

Loading

jurokapsiar Sep 17, 2019

layershifter Sep 17, 2019

jurokapsiar Sep 17, 2019

layershifter Sep 17, 2019

jurokapsiar Sep 17, 2019

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

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

Conversation

layershifter commented Sep 11, 2019 • edited Loading

jurokapsiar Sep 11, 2019

Choose a reason for hiding this comment

codecov bot commented Sep 16, 2019 • edited Loading

Codecov Report

jurokapsiar Sep 17, 2019

Choose a reason for hiding this comment

layershifter Sep 17, 2019

Choose a reason for hiding this comment

jurokapsiar Sep 17, 2019

Choose a reason for hiding this comment

layershifter Sep 17, 2019

Choose a reason for hiding this comment

jurokapsiar Sep 17, 2019

Choose a reason for hiding this comment

layershifter commented Sep 11, 2019 •

edited

Loading

codecov bot commented Sep 16, 2019 •

edited

Loading