chore(behavior): rename toolbarBehavior to menuAsToolbarBehavior

CHANGELOG.md

@@ -17,7 +17,10 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
-  ### Features
+### BREAKING CHANGES
+- Rename `toolbarBehavior` to `menuAsToolbarBehavior` and `toolbarButtonBehavior` to `menuItemAsToolbarButtonBehavior` ([#1393](https://github.com/stardust-ui/react/pull/1393))
+
+### Features
 - Add `Toolbar` component @miroslavstastny ([#1408](https://github.com/stardust-ui/react/pull/1408))
 
 <!--------------------------------[ v0.32.0 ]------------------------------- -->

docs/src/components/ComponentDoc/ComponentControls/ComponentControls.tsx

@@ -1,10 +1,4 @@
-import {
-  Menu,
-  Provider,
-  ThemeInput,
-  toolbarBehavior,
-  toolbarButtonBehavior,
-} from '@stardust-ui/react'
+import { Menu, Provider, ThemeInput, menuAsToolbarBehavior } from '@stardust-ui/react'
 import * as _ from 'lodash'
 import * as React from 'react'
 import { NavLink } from 'react-router-dom'
@@ -69,13 +63,12 @@ const ComponentControls: React.FC<ComponentControlsProps> = props => {
         {...rest}
         fluid
         pills
-        accessibility={toolbarBehavior}
+        accessibility={menuAsToolbarBehavior}
         items={[
           {
             key: 'show-code',
             content: <ComponentButton iconName="code" label="Try it" />,
             onClick: onShowCode,
-            accessibility: toolbarButtonBehavior,
           },
           {
             key: 'show-codesandbox',
@@ -86,25 +79,21 @@ const ComponentControls: React.FC<ComponentControlsProps> = props => {
                 exampleName={examplePath}
               />
             ),
-            accessibility: toolbarButtonBehavior,
           },
           {
             key: 'show-variables',
             content: <ComponentButton iconName="paint brush" label="Theme it" />,
             onClick: onShowVariables,
-            accessibility: toolbarButtonBehavior,
           },
           {
             key: 'show-transparent',
             content: <ComponentButton iconName="adjust" label="Transparent" />,
             onClick: onShowTransparent,
-            accessibility: toolbarButtonBehavior,
           },
           {
             key: 'show-rtl',
             content: <ComponentButton iconName="align right" label="RTL" />,
             onClick: onShowRtl,
-            accessibility: toolbarButtonBehavior,
           },
           {
             key: 'maximize',
@@ -118,7 +107,6 @@ const ComponentControls: React.FC<ComponentControlsProps> = props => {
             )}/${showRtl}`,
             target: '_blank',
             rel: 'noopener noreferrer',
-            accessibility: toolbarButtonBehavior,
           },
           {
             key: 'copy-link',
@@ -135,7 +123,6 @@ const ComponentControls: React.FC<ComponentControlsProps> = props => {
               />
             ),
             onClick: onCopyLink,
-            accessibility: toolbarButtonBehavior,
           },
         ]}
       />

docs/src/examples/components/Chat/Performance/ChatWithPopover.perf.tsx

@@ -4,8 +4,7 @@ import {
   Chat,
   Menu,
   Provider,
-  toolbarBehavior,
-  toolbarButtonBehavior,
+  menuAsToolbarBehavior,
 } from '@stardust-ui/react'
 import * as _ from 'lodash'
 import * as React from 'react'
@@ -30,7 +29,7 @@ interface PopoverState {
 }
 
 const popoverBehavior: Accessibility = (props: any) => {
-  const behavior = toolbarBehavior(props)
+  const behavior = menuAsToolbarBehavior(props)
 
   behavior.focusZone.props.defaultTabbableElement = (root: HTMLElement): HTMLElement => {
     return root.querySelector('[aria-label="thumbs up"]')
@@ -62,33 +61,28 @@ class Popover extends React.Component<PopoverProps, PopoverState> {
             key: 'smile',
             icon: 'smile',
             className: 'smile-emoji',
-            accessibility: toolbarButtonBehavior,
             'aria-label': 'smile one',
           },
           {
             key: 'smile2',
             icon: 'smile',
             className: 'smile-emoji',
-            accessibility: toolbarButtonBehavior,
             'aria-label': 'smile two',
           },
           {
             key: 'smile3',
             icon: 'smile',
             className: 'smile-emoji',
-            accessibility: toolbarButtonBehavior,
             'aria-label': 'smile three',
           },
           {
             key: 'a',
             icon: 'thumbs up',
-            accessibility: toolbarButtonBehavior,
             'aria-label': 'thumbs up',
           },
           {
             key: 'c',
             icon: 'ellipsis horizontal',
-            accessibility: toolbarButtonBehavior,
             'aria-label': 'more options',
             indicator: false,
             menu: {

docs/src/examples/components/Menu/Usages/MenuExampleToolbar.shorthand.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Menu, toolbarBehavior } from '@stardust-ui/react'
+import { Menu, menuAsToolbarBehavior } from '@stardust-ui/react'
 
 const items = [
   {
@@ -122,7 +122,7 @@ class MenuExampleToolbarShorthand extends React.Component {
         defaultActiveIndex={0}
         items={items}
         iconOnly
-        accessibility={toolbarBehavior}
+        accessibility={menuAsToolbarBehavior}
         aria-label="Compose Editor"
       />
     )

docs/src/prototypes/chatMessages/ChatMessageWithPopover/Popover.tsx

@@ -1,4 +1,4 @@
-import { Accessibility, Menu, toolbarBehavior, toolbarButtonBehavior } from '@stardust-ui/react'
+import { Accessibility, Menu, menuAsToolbarBehavior } from '@stardust-ui/react'
 import * as React from 'react'
 import cx from 'classnames'
 
@@ -11,7 +11,7 @@ interface PopoverState {
 }
 
 const popoverBehavior: Accessibility = (props: any) => {
-  const behavior = toolbarBehavior(props)
+  const behavior = menuAsToolbarBehavior(props)
 
   behavior.focusZone.props.defaultTabbableElement = (root: HTMLElement): HTMLElement => {
     return root.querySelector('[aria-label="thumbs up"]')
@@ -43,33 +43,28 @@ class Popover extends React.Component<PopoverProps, PopoverState> {
             key: 'smile',
             icon: 'smile',
             className: 'smile-emoji',
-            accessibility: toolbarButtonBehavior,
             'aria-label': 'smile one',
           },
           {
             key: 'smile2',
             icon: 'smile',
             className: 'smile-emoji',
-            accessibility: toolbarButtonBehavior,
             'aria-label': 'smile two',
           },
           {
             key: 'smile3',
             icon: 'smile',
             className: 'smile-emoji',
-            accessibility: toolbarButtonBehavior,
             'aria-label': 'smile three',
           },
           {
             key: 'a',
             icon: 'thumbs up',
-            accessibility: toolbarButtonBehavior,
             'aria-label': 'thumbs up',
           },
           {
             key: 'c',
             icon: 'ellipsis horizontal',
-            accessibility: toolbarButtonBehavior,
             'aria-label': 'more options',
             indicator: false,
             menu: {

docs/src/prototypes/chatPane/composeMessage.tsx

@@ -4,8 +4,7 @@ import {
   Input,
   Menu,
   Provider,
-  toolbarButtonBehavior,
-  toolbarBehavior,
+  menuAsToolbarBehavior,
   MenuItemProps,
 } from '@stardust-ui/react'
 
@@ -42,7 +41,7 @@ const ComposeMessage: React.FunctionComponent<ComposeMessageProps> = props => (
           defaultActiveIndex={0}
           items={getMenuItems()}
           iconOnly
-          accessibility={toolbarBehavior}
+          accessibility={menuAsToolbarBehavior}
           aria-label="Compose Editor"
           styles={{ marginTop: '10px' }}
         />
@@ -90,7 +89,6 @@ const getMenuItems = (): MenuItemProps[] => {
       xSpacing: 'both',
       variables: siteVars => ({ color: siteVars.colors.grey[500] }),
     },
-    accessibility: toolbarButtonBehavior,
     'aria-label': `${name} tool`,
   }))
 

docs/src/views/AccessibilityBehaviors.tsx

@@ -78,11 +78,12 @@ export default () => (
           for components such as {code('Menu')} that contain children which, in turn, require their
           own behaviors. For instance, for a {code('Toolbar')} to work properly, the {code('Menu')}{' '}
           needs to have applied the
-          {code('toolbarBehavior')}, while each {code('MenuItem')} needs to have{' '}
-          {code('toolbarButtonBehavior')}. In this case of parent-child relationship, it makes sense
-          for the {code('toolbarBehavior')} to contain the default option for the {code('Menu')}{' '}
-          children, in this case {code('toolbarButtonBehavior')}. When the {code('Menu')} is
-          created, it will automatically add the default child behaviors for its children:
+          {code('menuAsToolbarBehavior')}, while each {code('MenuItem')} needs to have{' '}
+          {code('menuItemAsToolbarButtonBehavior')}. In this case of parent-child relationship, it
+          makes sense for the {code('menuAsToolbarBehavior')} to contain the default option for the{' '}
+          {code('Menu')} children, in this case {code('menuItemAsToolbarButtonBehavior')}. When the{' '}
+          {code('Menu')} is created, it will automatically add the default child behaviors for its
+          children:
           {code('MenuItem')} and {code('MenuDivider')}.
         </li>
       </ul>

packages/react/src/components/Chat/ChatMessage.tsx

@@ -18,7 +18,7 @@ import {
   applyAccessibilityKeyHandlers,
 } from '../../lib'
 import { WithAsProp, ShorthandValue, ComponentEventHandler, withSafeTypeForAs } from '../../types'
-import { chatMessageBehavior, toolbarBehavior } from '../../lib/accessibility'
+import { chatMessageBehavior, menuAsToolbarBehavior } from '../../lib/accessibility'
 import { IS_FOCUSABLE_ATTRIBUTE } from '../../lib/accessibility/FocusZone'
 import { Accessibility, AccessibilityActionHandlers } from '../../lib/accessibility/types'
 
@@ -214,7 +214,7 @@ class ChatMessage extends UIComponent<WithAsProp<ChatMessageProps>, ChatMessageS
             {Menu.create(actionMenu, {
               defaultProps: {
                 [IS_FOCUSABLE_ATTRIBUTE]: true,
-                accessibility: toolbarBehavior,
+                accessibility: menuAsToolbarBehavior,
                 className: ChatMessage.slotClassNames.actionMenu,
                 styles: styles.actionMenu,
               },

packages/react/src/components/Menu/Menu.tsx

@@ -32,7 +32,7 @@ export interface MenuProps extends UIComponentProps, ChildrenComponentProps {
   /**
    * Accessibility behavior if overridden by the user.
    * @default menuBehavior
-   * @available toolbarBehavior, tabListBehavior
+   * @available menuAsToolbarBehavior, tabListBehavior
    * */
   accessibility?: Accessibility
 

packages/react/src/components/Menu/MenuItem.tsx

@@ -46,7 +46,7 @@ export interface MenuItemProps
   /**
    * Accessibility behavior if overridden by the user.
    * @default menuItemBehavior
-   * @available toolbarButtonBehavior, tabBehavior
+   * @available menuItemAsToolbarButtonBehavior, tabBehavior
    * */
   accessibility?: Accessibility
 

packages/react/src/index.ts

@@ -180,10 +180,12 @@ export {
 } from './lib/accessibility/Behaviors/Menu/menuDividerBehavior'
 export { default as tabBehavior } from './lib/accessibility/Behaviors/Tab/tabBehavior'
 export { default as tabListBehavior } from './lib/accessibility/Behaviors/Tab/tabListBehavior'
-export { default as toolbarBehavior } from './lib/accessibility/Behaviors/Toolbar/toolbarBehavior'
 export {
-  default as toolbarButtonBehavior,
-} from './lib/accessibility/Behaviors/Toolbar/toolbarButtonBehavior'
+  default as menuAsToolbarBehavior,
+} from './lib/accessibility/Behaviors/Toolbar/menuAsToolbarBehavior'
+export {
+  default as menuItemAsToolbarButtonBehavior,
+} from './lib/accessibility/Behaviors/Toolbar/menuItemAsToolbarButtonBehavior'
 export {
   default as radioGroupBehavior,
 } from './lib/accessibility/Behaviors/Radio/radioGroupBehavior'

packages/react/src/lib/accessibility/Behaviors/Toolbar/toolbarBehavior.ts → packages/react/src/lib/accessibility/Behaviors/Toolbar/menuAsToolbarBehavior.ts

@@ -1,18 +1,18 @@
 import { Accessibility, FocusZoneMode } from '../../types'
 import { FocusZoneDirection } from '../../FocusZone'
-import toolbarButtonBehavior from './toolbarButtonBehavior'
+import menuItemAsToolbarButtonBehavior from './menuItemAsToolbarButtonBehavior'
 
 /**
  * @description
  * Implements ARIA Toolbar design pattern.
- * Child item components need to have toolbarButtonBehavior assigned.
+ * Child item components need to have menuItemAsToolbarButtonBehavior assigned.
  * @specification
  * Adds role 'toolbar' to 'root' component's part.
  * Embeds component into FocusZone.
  * Provides arrow key navigation in bidirectional direction.
  * When component's container element receives focus, focus will be set to the default focusable child element of the component.
  */
-const toolbarBehavior: Accessibility = (props: any) => ({
+const menuAsToolbarBehavior: Accessibility = (props: any) => ({
   attributes: {
     root: {
       role: 'toolbar',
@@ -26,8 +26,8 @@ const toolbarBehavior: Accessibility = (props: any) => ({
     },
   },
   childBehaviors: {
-    item: toolbarButtonBehavior,
+    item: menuItemAsToolbarButtonBehavior,
   },
 })
 
-export default toolbarBehavior
+export default menuAsToolbarBehavior

packages/react/src/lib/accessibility/Behaviors/Toolbar/toolbarButtonBehavior.ts → packages/react/src/lib/accessibility/Behaviors/Toolbar/menuItemAsToolbarButtonBehavior.ts

@@ -22,7 +22,7 @@ import * as _ from 'lodash'
  * Triggers 'openMenu' action with 'ArrowDown' on 'wrapper', when orientation is horizontal.
  * Triggers 'doNotNavigateNextParentItem' action with 'ArrowLeft' or 'ArrowRight' on 'wrapper', when toolbar button has submenu and it is opened.
  */
-const toolbarButtonBehavior: Accessibility = (props: any) => ({
+const menuItemAsToolbarButtonBehavior: Accessibility = (props: any) => ({
   attributes: {
     wrapper: {
       role: 'presentation',
@@ -64,4 +64,4 @@ const toolbarButtonBehavior: Accessibility = (props: any) => ({
   },
 })
 
-export default toolbarButtonBehavior
+export default menuItemAsToolbarButtonBehavior

packages/react/src/lib/accessibility/index.ts

@@ -20,8 +20,10 @@ export { default as inputBehavior } from './Behaviors/Input/inputBehavior'
 export { default as iconBehavior } from './Behaviors/Icon/iconBehavior'
 export { default as tabBehavior } from './Behaviors/Tab/tabBehavior'
 export { default as tabListBehavior } from './Behaviors/Tab/tabListBehavior'
-export { default as toolbarBehavior } from './Behaviors/Toolbar/toolbarBehavior'
-export { default as toolbarButtonBehavior } from './Behaviors/Toolbar/toolbarButtonBehavior'
+export { default as menuAsToolbarBehavior } from './Behaviors/Toolbar/menuAsToolbarBehavior'
+export {
+  default as menuItemAsToolbarButtonBehavior,
+} from './Behaviors/Toolbar/menuItemAsToolbarButtonBehavior'
 export { default as radioGroupBehavior } from './Behaviors/Radio/radioGroupBehavior'
 export { default as radioGroupItemBehavior } from './Behaviors/Radio/radioGroupItemBehavior'
 export { default as popupBehavior } from './Behaviors/Popup/popupBehavior'

packages/react/test/specs/behaviors/behavior-test.tsx

@@ -30,8 +30,8 @@ import {
   tabBehavior,
   tabListBehavior,
   toggleButtonBehavior,
-  toolbarBehavior,
-  toolbarButtonBehavior,
+  menuAsToolbarBehavior,
+  menuItemAsToolbarButtonBehavior,
   treeBehavior,
   treeTitleBehavior,
   gridBehavior,
@@ -74,9 +74,9 @@ testHelper.addBehavior('selectableListBehavior', selectableListBehavior)
 testHelper.addBehavior('selectableListItemBehavior', selectableListItemBehavior)
 testHelper.addBehavior('tabBehavior', tabBehavior)
 testHelper.addBehavior('tabListBehavior', tabListBehavior)
-testHelper.addBehavior('toolbarBehavior', toolbarBehavior)
+testHelper.addBehavior('menuAsToolbarBehavior', menuAsToolbarBehavior)
 testHelper.addBehavior('toggleButtonBehavior', toggleButtonBehavior)
-testHelper.addBehavior('toolbarButtonBehavior', toolbarButtonBehavior)
+testHelper.addBehavior('menuItemAsToolbarButtonBehavior', menuItemAsToolbarButtonBehavior)
 testHelper.addBehavior('treeTitleBehavior', treeTitleBehavior)
 testHelper.addBehavior('treeBehavior', treeBehavior)
 testHelper.addBehavior('gridBehavior', gridBehavior)