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

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

Merged
merged 27 commits into from
Sep 18, 2019

Conversation

layershifter
Copy link
Member

@layershifter layershifter commented Sep 11, 2019

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

return ToolbarMenuDivider.create(item, { overrideProps: dividerOverridesFn })

switch (kind) {
case 'checkbox':
Copy link
Contributor

Choose a reason for hiding this comment

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

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
Copy link

codecov bot commented Sep 16, 2019

Codecov Report

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

Impacted file tree graph

@@            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.

docs/src/components/ColorSchemes.tsx Outdated Show resolved Hide resolved
'aria-checked': props.checked,
'aria-disabled': props.disabled,
role: 'menuitemradio',
tabIndex: 0,
Copy link
Contributor

Choose a reason for hiding this comment

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

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

Copy link
Member Author

Choose a reason for hiding this comment

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

Good catch, removed 👍

accessibility?: Accessibility

/** Index of the currently active item. */
activeIndex?: number
Copy link
Contributor

Choose a reason for hiding this comment

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

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

Copy link
Member Author

Choose a reason for hiding this comment

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

Added 👍

@@ -35,12 +35,21 @@ export interface ToolbarMenuItemProps
/** A toolbar item can be active. */
active?: boolean

/** Item can show check indicator if selected. */
checked?: boolean
Copy link
Contributor

Choose a reason for hiding this comment

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

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants