fix(Menu): Adding dark & contrast themes for Menu toolbar (#708)

* adding more icons we need for MW & setting initial variable for icon to outline

* menu bar is working for teams & teams dark themes

* menu high contrast variables & styles

* on hover/focus making the icons show filled state instead of outline

* focus border is the correct size (30x30px) && high contrast menu styles are working

* removed circularRadius from menuVariables since it is no longer used in the styles

* removing explicit background & adding variable for iconOnlyActiveColor

* fixed order of how styles get applied

* add changelog entry

* rename videoCameraEmphasis icon file

* rename videoCameraEmphasis icon file

* cleaned up styles

* move changelog entry to the right spot... oops

Author: codepretty

CHANGELOG.md

@@ -30,6 +30,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix doc layout for Menu component @codepretty ([#695] https://github.com/stardust-ui/react/pull/695)
 - Fix focus outline visible only during keyboard navigation @kolaps33 ([#689] https://github.com/stardust-ui/react/pull/689)
 - Fix handling changes of `renderer` prop in `Provider` @layershifter ([#702](https://github.com/stardust-ui/react/pull/702))
+- Fix Menu themeing styles @codepretty ([#708](https://github.com/stardust-ui/react/pull/708))
 - Prevent infinite rendering loop start on `Popup` open @kuzhelov ([#705](https://github.com/stardust-ui/react/pull/705))
 
 <!--------------------------------[ v0.16.1 ]------------------------------- -->

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

@@ -3,31 +3,64 @@ import { Menu, toolbarBehavior, toolbarButtonBehavior } from '@stardust-ui/react
 
 const items = [
   {
-    key: 'cloud',
+    key: 'format',
     icon: {
-      name: 'cloud',
-      circular: true,
-      size: 'small',
+      name: 'format',
+      variables: { outline: true },
     },
     accessibility: toolbarButtonBehavior,
-    'aria-label': 'Cloud Tool',
+    'aria-label': 'Format Tool',
   },
   {
-    key: 'clock',
+    key: 'paperclip',
     icon: {
-      name: 'clock',
-      circular: true,
-      size: 'small',
+      name: 'paperclip',
+      variables: { outline: true },
     },
     accessibility: toolbarButtonBehavior,
-    'aria-label': 'Clock Tool',
+    'aria-label': 'Paperclip Tool',
+  },
+  {
+    key: 'emoji',
+    icon: {
+      name: 'emoji',
+      variables: { outline: true },
+    },
+    accessibility: toolbarButtonBehavior,
+    'aria-label': 'Emoji Tool',
+  },
+  {
+    key: 'giphy',
+    icon: {
+      name: 'giphy',
+      variables: { outline: true },
+    },
+    accessibility: toolbarButtonBehavior,
+    'aria-label': 'Giphy tool',
+  },
+  {
+    key: 'sticker',
+    icon: {
+      name: 'sticker',
+      variables: { outline: true },
+    },
+    accessibility: toolbarButtonBehavior,
+    'aria-label': 'Sticker Tool',
+  },
+  {
+    key: 'meetup',
+    icon: {
+      name: 'video-camera-emphasis',
+      variables: { outline: true },
+    },
+    accessibility: toolbarButtonBehavior,
+    'aria-label': 'Meetup Tool',
   },
   {
     key: 'book',
     icon: {
       name: 'book',
-      circular: true,
-      size: 'small',
+      variables: { outline: true },
     },
     accessibility: toolbarButtonBehavior,
     'aria-label': 'Book Tool',

src/themes/teams-dark/components/Menu/menuVariables.ts

@@ -0,0 +1,9 @@
+export interface MenuVariables {
+  color: string
+}
+
+export default (siteVars: any): MenuVariables => {
+  return {
+    color: siteVars.white,
+  }
+}

src/themes/teams-high-contrast/componentStyles.ts

@@ -0,0 +1 @@
+export { default as MenuItem } from './components/Menu/menuItemStyles'

src/themes/teams-high-contrast/componentVariables.ts

@@ -4,8 +4,7 @@ export { default as Chat } from './components/Chat/chatVariables'
 export { default as ChatMessage } from './components/Chat/chatMessageVariables'
 export { default as Divider } from './components/Divider/dividerVariables'
 export { default as Header } from './components/Header/headerVariables'
-
 export { default as Input } from './components/Input/inputVariables'
-
+export { default as Menu } from './components/Menu/menuVariables'
 export { default as Text } from './components/Text/textVariables'
 export { default as TreeTitle } from './components/Tree/treeTitleVariables'

src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts

@@ -0,0 +1,41 @@
+import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
+import { MenuVariables } from './menuVariables'
+import { MenuItemProps, MenuItemState } from '../../../../components/Menu/MenuItem'
+
+type MenuItemPropsAndState = MenuItemProps & MenuItemState
+
+const menuItemStyles: ComponentSlotStylesInput<MenuItemPropsAndState, MenuVariables> = {
+  wrapper: ({ props, variables }): ICSSInJSStyle => {
+    const { iconOnly, isFromKeyboard } = props
+
+    return {
+      ...(iconOnly && {
+        // focus styles
+        ...(isFromKeyboard && {
+          color: variables.activeColor,
+          background: variables.activeBackgroundColor,
+        }),
+
+        // hover styles
+        ':hover': {
+          color: variables.activeColor,
+          background: variables.activeBackgroundColor,
+        },
+      }),
+    }
+  },
+
+  root: ({ props }): ICSSInJSStyle => {
+    const { iconOnly, isFromKeyboard } = props
+
+    return {
+      // focus styles
+      ...(isFromKeyboard &&
+        iconOnly && {
+          borderColor: 'transparent',
+        }),
+    }
+  },
+}
+
+export default menuItemStyles

src/themes/teams-high-contrast/components/Menu/menuVariables.ts

@@ -0,0 +1,13 @@
+export interface MenuVariables {
+  color: string
+  activeColor: string
+  activeBackgroundColor: string
+}
+
+export default (siteVars: any): MenuVariables => {
+  return {
+    color: siteVars.white,
+    activeColor: siteVars.black,
+    activeBackgroundColor: siteVars.accessibleYellow,
+  }
+}

src/themes/teams-high-contrast/index.ts

@@ -1,6 +1,7 @@
 import mergeThemes from '../../lib/mergeThemes'
 import * as siteVariables from './siteVariables'
 import * as componentVariables from './componentVariables'
+import * as componentStyles from './componentStyles'
 import teams from '../teams'
 
-export default mergeThemes(teams, { siteVariables, componentVariables })
+export default mergeThemes(teams, { siteVariables, componentVariables, componentStyles })

src/themes/teams/components/Icon/svg/ProcessedIcons/icons-attachment.tsx

@@ -15,4 +15,5 @@ export default {
     </svg>
   ),
   styles: {},
+  exportedAs: 'paperclip',
 } as TeamsProcessedSvgIconSpec