diff --git a/CHANGELOG.md b/CHANGELOG.md index 06992b0ca8..526873ebc2 100644 --- a/CHANGELOG.md +++ b/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)) diff --git a/docs/src/examples/components/Menu/Usages/MenuExampleToolbar.shorthand.tsx b/docs/src/examples/components/Menu/Usages/MenuExampleToolbar.shorthand.tsx index 746ea86e4b..8ee2eff3d4 100644 --- a/docs/src/examples/components/Menu/Usages/MenuExampleToolbar.shorthand.tsx +++ b/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', diff --git a/src/themes/teams-dark/components/Menu/menuVariables.ts b/src/themes/teams-dark/components/Menu/menuVariables.ts new file mode 100644 index 0000000000..eb6e5c4a3b --- /dev/null +++ b/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, + } +} diff --git a/src/themes/teams-high-contrast/componentStyles.ts b/src/themes/teams-high-contrast/componentStyles.ts new file mode 100644 index 0000000000..d8b38bba66 --- /dev/null +++ b/src/themes/teams-high-contrast/componentStyles.ts @@ -0,0 +1 @@ +export { default as MenuItem } from './components/Menu/menuItemStyles' diff --git a/src/themes/teams-high-contrast/componentVariables.ts b/src/themes/teams-high-contrast/componentVariables.ts index c267102ca7..5fe7ad8df0 100644 --- a/src/themes/teams-high-contrast/componentVariables.ts +++ b/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' diff --git a/src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts b/src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts new file mode 100644 index 0000000000..89bb4bc300 --- /dev/null +++ b/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 = { + 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 diff --git a/src/themes/teams-high-contrast/components/Menu/menuVariables.ts b/src/themes/teams-high-contrast/components/Menu/menuVariables.ts new file mode 100644 index 0000000000..5ca3949a01 --- /dev/null +++ b/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, + } +} diff --git a/src/themes/teams-high-contrast/index.ts b/src/themes/teams-high-contrast/index.ts index 4cd2c1e2b5..2bccfaec27 100644 --- a/src/themes/teams-high-contrast/index.ts +++ b/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 }) diff --git a/src/themes/teams/components/Icon/svg/ProcessedIcons/icons-attachment.tsx b/src/themes/teams/components/Icon/svg/ProcessedIcons/icons-attachment.tsx index 541b621230..23f4aabf2e 100644 --- a/src/themes/teams/components/Icon/svg/ProcessedIcons/icons-attachment.tsx +++ b/src/themes/teams/components/Icon/svg/ProcessedIcons/icons-attachment.tsx @@ -15,4 +15,5 @@ export default { ), styles: {}, + exportedAs: 'paperclip', } as TeamsProcessedSvgIconSpec diff --git a/src/themes/teams/components/Icon/svg/ProcessedIcons/icons-call-meetup-filled.tsx b/src/themes/teams/components/Icon/svg/ProcessedIcons/icons-call-meetup-filled.tsx deleted file mode 100644 index 06fecf3820..0000000000 --- a/src/themes/teams/components/Icon/svg/ProcessedIcons/icons-call-meetup-filled.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react' -import { TeamsProcessedSvgIconSpec } from '../types' - -export default { - icon: ({ classes }) => ( - - - - ), - styles: {}, -} as TeamsProcessedSvgIconSpec diff --git a/src/themes/teams/components/Icon/svg/ProcessedIcons/icons-call-meetup-line.tsx b/src/themes/teams/components/Icon/svg/ProcessedIcons/icons-call-meetup-line.tsx index 566779e81f..6bf90f648d 100644 --- a/src/themes/teams/components/Icon/svg/ProcessedIcons/icons-call-meetup-line.tsx +++ b/src/themes/teams/components/Icon/svg/ProcessedIcons/icons-call-meetup-line.tsx @@ -17,4 +17,5 @@ export default { ), styles: {}, + exportedAs: 'video-camera-emphasis', } as TeamsProcessedSvgIconSpec diff --git a/src/themes/teams/components/Icon/svg/ProcessedIcons/index-new.ts b/src/themes/teams/components/Icon/svg/ProcessedIcons/index-new.ts index fd5909cba7..4bdc1490f4 100644 --- a/src/themes/teams/components/Icon/svg/ProcessedIcons/index-new.ts +++ b/src/themes/teams/components/Icon/svg/ProcessedIcons/index-new.ts @@ -260,7 +260,6 @@ import processedIcons_callmissed from './icons-call-missed' import processedIcons_callmicrophoneunmuting from './icons-call-microphone-unmuting' import processedIcons_callmicrophoneofffilled from './icons-call-microphone-off-filled' import processedIcons_callmeetupline from './icons-call-meetup-line' -import processedIcons_callmeetupfilled from './icons-call-meetup-filled' import processedIcons_callincomingvideo from './icons-call-incoming-video' import processedIcons_callhold from './icons-call-hold' import processedIcons_callend from './icons-call-end' @@ -564,7 +563,6 @@ export default { processedIcons_callmicrophoneunmuting, processedIcons_callmicrophoneofffilled, processedIcons_callmeetupline, - processedIcons_callmeetupfilled, processedIcons_callincomingvideo, processedIcons_callhold, processedIcons_callend, diff --git a/src/themes/teams/components/Icon/svg/ProcessedIcons/index.ts b/src/themes/teams/components/Icon/svg/ProcessedIcons/index.ts index 84d712f3a3..7520f0a28b 100644 --- a/src/themes/teams/components/Icon/svg/ProcessedIcons/index.ts +++ b/src/themes/teams/components/Icon/svg/ProcessedIcons/index.ts @@ -261,7 +261,6 @@ import processedIcons_callmissed from './icons-call-missed' import processedIcons_callmicrophoneunmuting from './icons-call-microphone-unmuting' import processedIcons_callmicrophoneofffilled from './icons-call-microphone-off-filled' import processedIcons_callmeetupline from './icons-call-meetup-line' -import processedIcons_callmeetupfilled from './icons-call-meetup-filled' import processedIcons_callincomingvideo from './icons-call-incoming-video' import processedIcons_callhold from './icons-call-hold' import processedIcons_callend from './icons-call-end' @@ -565,7 +564,6 @@ export default { processedIcons_callmicrophoneunmuting, processedIcons_callmicrophoneofffilled, processedIcons_callmeetupline, - processedIcons_callmeetupfilled, processedIcons_callincomingvideo, processedIcons_callhold, processedIcons_callend, diff --git a/src/themes/teams/components/Icon/svg/icons/emoji.tsx b/src/themes/teams/components/Icon/svg/icons/emoji.tsx index 73379afe1b..941271b6e2 100644 --- a/src/themes/teams/components/Icon/svg/icons/emoji.tsx +++ b/src/themes/teams/components/Icon/svg/icons/emoji.tsx @@ -1,17 +1,18 @@ import * as React from 'react' +import cx from 'classnames' import { TeamsProcessedSvgIconSpec } from '../types' export default { icon: ({ classes }) => ( - + diff --git a/src/themes/teams/components/Icon/svg/icons/format.tsx b/src/themes/teams/components/Icon/svg/icons/format.tsx index 79f60ef3f5..b454243998 100644 --- a/src/themes/teams/components/Icon/svg/icons/format.tsx +++ b/src/themes/teams/components/Icon/svg/icons/format.tsx @@ -1,15 +1,16 @@ import * as React from 'react' +import cx from 'classnames' import { TeamsSvgIconSpec } from '../types' export default { icon: ({ classes }) => ( diff --git a/src/themes/teams/components/Icon/svg/icons/giphy.tsx b/src/themes/teams/components/Icon/svg/icons/giphy.tsx index aa051757ae..42460130ca 100644 --- a/src/themes/teams/components/Icon/svg/icons/giphy.tsx +++ b/src/themes/teams/components/Icon/svg/icons/giphy.tsx @@ -1,14 +1,15 @@ import * as React from 'react' +import cx from 'classnames' import { TeamsSvgIconSpec } from '../types' export default { icon: ({ classes }) => ( - + - + diff --git a/src/themes/teams/components/Icon/svg/icons/index.ts b/src/themes/teams/components/Icon/svg/icons/index.ts index 72df6582ee..b8937e6213 100644 --- a/src/themes/teams/components/Icon/svg/icons/index.ts +++ b/src/themes/teams/components/Icon/svg/icons/index.ts @@ -39,6 +39,7 @@ import micOff from './micOff' import more from './more' import numberList from './numberList' import outdent from './outdent' +import paperclip from './paperclip' import participantRemove from './participantRemove' import quote from './quote' import redbang from './redbang' @@ -58,6 +59,7 @@ import translation from './translation' import trashCan from './trashCan' import underline from './underline' import undo from './undo' +import videoCameraEmphasis from './videoCameraEmphasis' export default { add, @@ -98,6 +100,7 @@ export default { more, 'number-list': numberList, outdent, + paperclip, 'participant-add': addParticipant, 'participant-remove': participantRemove, quote, @@ -118,4 +121,5 @@ export default { 'team-create': teamCreate, underline, undo, + 'video-camera-emphasis': videoCameraEmphasis, } as { [iconName: string]: TeamsSvgIconSpec } diff --git a/src/themes/teams/components/Icon/svg/icons/paperclip.tsx b/src/themes/teams/components/Icon/svg/icons/paperclip.tsx new file mode 100644 index 0000000000..141fa4bbfa --- /dev/null +++ b/src/themes/teams/components/Icon/svg/icons/paperclip.tsx @@ -0,0 +1,19 @@ +import * as React from 'react' +import cx from 'classnames' +import { TeamsProcessedSvgIconSpec } from '../types' + +export default { + icon: ({ classes }) => ( + + + + + ), + styles: {}, +} as TeamsProcessedSvgIconSpec diff --git a/src/themes/teams/components/Icon/svg/icons/sticker.tsx b/src/themes/teams/components/Icon/svg/icons/sticker.tsx index c14e0974a2..bd804335a5 100644 --- a/src/themes/teams/components/Icon/svg/icons/sticker.tsx +++ b/src/themes/teams/components/Icon/svg/icons/sticker.tsx @@ -1,15 +1,16 @@ import * as React from 'react' +import cx from 'classnames' import { TeamsProcessedSvgIconSpec } from '../types' export default { icon: ({ classes }) => ( - + - + diff --git a/src/themes/teams/components/Icon/svg/icons/videoCameraEmphasis.tsx b/src/themes/teams/components/Icon/svg/icons/videoCameraEmphasis.tsx new file mode 100644 index 0000000000..164381350d --- /dev/null +++ b/src/themes/teams/components/Icon/svg/icons/videoCameraEmphasis.tsx @@ -0,0 +1,21 @@ +import * as React from 'react' +import cx from 'classnames' +import { TeamsProcessedSvgIconSpec } from '../types' + +export default { + icon: ({ classes }) => ( + + + + + + + ), + styles: {}, +} as TeamsProcessedSvgIconSpec diff --git a/src/themes/teams/components/Menu/menuItemStyles.ts b/src/themes/teams/components/Menu/menuItemStyles.ts index f0553f481a..89b4ea0aef 100644 --- a/src/themes/teams/components/Menu/menuItemStyles.ts +++ b/src/themes/teams/components/Menu/menuItemStyles.ts @@ -24,7 +24,6 @@ const getActionStyles = ({ underlined || iconOnly ? { color, - background: v.backgroundColor, } : primary ? { @@ -45,13 +44,12 @@ const getFocusedStyles = ({ variables: MenuVariables color: string }): ICSSInJSStyle => { - const { primary, underlined, iconOnly, isFromKeyboard, active } = props + const { primary, underlined, isFromKeyboard, active } = props if (active && !underlined) return {} return { - ...((underlined && !isFromKeyboard) || iconOnly + ...(underlined && !isFromKeyboard ? { color, - background: v.backgroundColor, } : primary ? { @@ -156,7 +154,6 @@ const menuItemStyles: ComponentSlotStylesInput { return { color: siteVars.gray02, - backgroundColor: siteVars.white, + + iconOnlyActiveColor: siteVars.brand06, activeColor: siteVars.black, activeBackgroundColor: siteVars.gray10, @@ -45,7 +43,6 @@ export default (siteVars: any): MenuVariables => { primaryHoverBorderColor: siteVars.gray08, primaryUnderlinedBorderColor: siteVars.gray08, - circularRadius: pxToRem(999), lineHeightBase: siteVars.lineHeightBase, } }