From cfb210101339bba1e07a9a410012dda22db3e1f7 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Thu, 10 Jan 2019 13:25:45 -0800 Subject: [PATCH 01/13] adding more icons we need for MW & setting initial variable for icon to outline --- .../MenuExampleToolbar.shorthand.tsx | 57 +++++++++++++++---- .../svg/ProcessedIcons/icons-attachment.tsx | 1 + .../icons-call-meetup-filled.tsx | 11 ---- .../ProcessedIcons/icons-call-meetup-line.tsx | 1 + .../Icon/svg/ProcessedIcons/index-new.ts | 2 - .../Icon/svg/ProcessedIcons/index.ts | 2 - .../teams/components/Icon/svg/icons/index.ts | 4 ++ .../components/Icon/svg/icons/paperclip.tsx | 18 ++++++ .../Icon/svg/icons/video-camera-emphasis.tsx | 20 +++++++ 9 files changed, 89 insertions(+), 27 deletions(-) delete mode 100644 src/themes/teams/components/Icon/svg/ProcessedIcons/icons-call-meetup-filled.tsx create mode 100644 src/themes/teams/components/Icon/svg/icons/paperclip.tsx create mode 100644 src/themes/teams/components/Icon/svg/icons/video-camera-emphasis.tsx diff --git a/docs/src/examples/components/Menu/Variations/MenuExampleToolbar.shorthand.tsx b/docs/src/examples/components/Menu/Variations/MenuExampleToolbar.shorthand.tsx index 746ea86e4b..8ee2eff3d4 100644 --- a/docs/src/examples/components/Menu/Variations/MenuExampleToolbar.shorthand.tsx +++ b/docs/src/examples/components/Menu/Variations/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/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/index.ts b/src/themes/teams/components/Icon/svg/icons/index.ts index 72df6582ee..2763d39c05 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 './video-camera-emphasis' 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..541b621230 --- /dev/null +++ b/src/themes/teams/components/Icon/svg/icons/paperclip.tsx @@ -0,0 +1,18 @@ +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/icons/video-camera-emphasis.tsx b/src/themes/teams/components/Icon/svg/icons/video-camera-emphasis.tsx new file mode 100644 index 0000000000..566779e81f --- /dev/null +++ b/src/themes/teams/components/Icon/svg/icons/video-camera-emphasis.tsx @@ -0,0 +1,20 @@ +import * as React from 'react' +import { TeamsProcessedSvgIconSpec } from '../types' + +export default { + icon: ({ classes }) => ( + + + + + + + ), + styles: {}, +} as TeamsProcessedSvgIconSpec From cf938dd80372f31b85ee32c4ea4f1251c39a255f Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Thu, 10 Jan 2019 16:29:58 -0800 Subject: [PATCH 02/13] menu bar is working for teams & teams dark themes --- .../teams-dark/components/Menu/menuVariables.ts | 9 +++++++++ .../teams/components/Menu/menuItemStyles.ts | 15 +++++++++++---- src/themes/teams/components/Menu/menuVariables.ts | 4 ++-- 3 files changed, 22 insertions(+), 6 deletions(-) create mode 100644 src/themes/teams-dark/components/Menu/menuVariables.ts 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/components/Menu/menuItemStyles.ts b/src/themes/teams/components/Menu/menuItemStyles.ts index ee58466747..b1495fba44 100644 --- a/src/themes/teams/components/Menu/menuItemStyles.ts +++ b/src/themes/teams/components/Menu/menuItemStyles.ts @@ -261,7 +261,14 @@ const menuItemStyles: ComponentSlotStylesInput { return { color: siteVars.gray02, - backgroundColor: siteVars.white, + backgroundColor: 'inherit', - activeColor: siteVars.black, + activeColor: siteVars.brand06, activeBackgroundColor: siteVars.gray10, focusedBackgroundColor: siteVars.gray14, borderColor: siteVars.gray08, From 1753a8b032df56d87eba136428ef963fb957e5b4 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Fri, 11 Jan 2019 11:42:03 -0800 Subject: [PATCH 03/13] menu high contrast variables & styles --- .../teams-high-contrast/componentStyles.ts | 1 + .../teams-high-contrast/componentVariables.ts | 3 +- .../components/Menu/menuItemStyles.ts | 37 +++++++++++++++++++ .../components/Menu/menuVariables.ts | 13 +++++++ src/themes/teams-high-contrast/index.ts | 3 +- 5 files changed, 54 insertions(+), 3 deletions(-) create mode 100644 src/themes/teams-high-contrast/componentStyles.ts create mode 100644 src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts create mode 100644 src/themes/teams-high-contrast/components/Menu/menuVariables.ts 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..df3b86f33f --- /dev/null +++ b/src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts @@ -0,0 +1,37 @@ +import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +import { MenuVariables } from './menuVariables' +import { MenuItemProps, MenuItemState } from '../../../../components/Menu/MenuItem' + +type MenuItemPropsAndState = MenuItemProps & MenuItemState + +const getIconOnlyFocusedAndHoverStyles = ({ + variables, +}: { + variables: MenuVariables +}): ICSSInJSStyle => { + return { + color: variables.activeColor, + background: variables.activeBackgroundColor, + borderRadius: 'unset', // override from Teams default theme + } +} + +const menuItemStyles: ComponentSlotStylesInput = { + root: ({ props, variables, theme }): ICSSInJSStyle => { + const { iconOnly, isFromKeyboard } = props + + return { + // focus styles + ...(isFromKeyboard && { + ...(iconOnly && getIconOnlyFocusedAndHoverStyles({ variables })), + }), + + // hover styles + ':hover': { + ...(iconOnly && getIconOnlyFocusedAndHoverStyles({ variables })), + }, + } + }, +} + +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 }) From b1039f2d5c2424e3d19626c3e01b9ce04f8dfda4 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Fri, 11 Jan 2019 12:35:21 -0800 Subject: [PATCH 04/13] on hover/focus making the icons show filled state instead of outline --- .../teams/components/Icon/svg/icons/emoji.tsx | 5 +++-- .../teams/components/Icon/svg/icons/format.tsx | 5 +++-- .../teams/components/Icon/svg/icons/giphy.tsx | 5 +++-- .../components/Icon/svg/icons/paperclip.tsx | 5 +++-- .../teams/components/Icon/svg/icons/sticker.tsx | 5 +++-- .../Icon/svg/icons/video-camera-emphasis.tsx | 5 +++-- .../teams/components/Menu/menuItemStyles.ts | 16 ++++++++++++++++ 7 files changed, 34 insertions(+), 12 deletions(-) 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/paperclip.tsx b/src/themes/teams/components/Icon/svg/icons/paperclip.tsx index 541b621230..141fa4bbfa 100644 --- a/src/themes/teams/components/Icon/svg/icons/paperclip.tsx +++ b/src/themes/teams/components/Icon/svg/icons/paperclip.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/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/video-camera-emphasis.tsx b/src/themes/teams/components/Icon/svg/icons/video-camera-emphasis.tsx index 566779e81f..164381350d 100644 --- a/src/themes/teams/components/Icon/svg/icons/video-camera-emphasis.tsx +++ b/src/themes/teams/components/Icon/svg/icons/video-camera-emphasis.tsx @@ -1,4 +1,5 @@ import * as React from 'react' +import cx from 'classnames' import { TeamsProcessedSvgIconSpec } from '../types' export default { @@ -6,11 +7,11 @@ export default { diff --git a/src/themes/teams/components/Menu/menuItemStyles.ts b/src/themes/teams/components/Menu/menuItemStyles.ts index b1495fba44..32000a6896 100644 --- a/src/themes/teams/components/Menu/menuItemStyles.ts +++ b/src/themes/teams/components/Menu/menuItemStyles.ts @@ -301,6 +301,14 @@ const menuItemStyles: ComponentSlotStylesInput Date: Fri, 11 Jan 2019 13:48:55 -0800 Subject: [PATCH 05/13] focus border is the correct size (30x30px) && high contrast menu styles are working --- .../components/Menu/menuItemStyles.ts | 19 +++++++--- .../teams/components/Menu/menuItemStyles.ts | 35 +++++++++++-------- 2 files changed, 34 insertions(+), 20 deletions(-) diff --git a/src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts b/src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts index df3b86f33f..361f134a78 100644 --- a/src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts +++ b/src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts @@ -12,19 +12,16 @@ const getIconOnlyFocusedAndHoverStyles = ({ return { color: variables.activeColor, background: variables.activeBackgroundColor, - borderRadius: 'unset', // override from Teams default theme } } const menuItemStyles: ComponentSlotStylesInput = { - root: ({ props, variables, theme }): ICSSInJSStyle => { + wrapper: ({ props, variables }): ICSSInJSStyle => { const { iconOnly, isFromKeyboard } = props return { // focus styles - ...(isFromKeyboard && { - ...(iconOnly && getIconOnlyFocusedAndHoverStyles({ variables })), - }), + ...(isFromKeyboard && iconOnly && getIconOnlyFocusedAndHoverStyles({ variables })), // hover styles ':hover': { @@ -32,6 +29,18 @@ const menuItemStyles: ComponentSlotStylesInput { + const { iconOnly, isFromKeyboard } = props + + return { + // focus styles + ...(isFromKeyboard && + iconOnly && { + borderColor: 'transparent', + }), + } + }, } export default menuItemStyles diff --git a/src/themes/teams/components/Menu/menuItemStyles.ts b/src/themes/teams/components/Menu/menuItemStyles.ts index 32000a6896..7ce61715c4 100644 --- a/src/themes/teams/components/Menu/menuItemStyles.ts +++ b/src/themes/teams/components/Menu/menuItemStyles.ts @@ -277,7 +277,8 @@ const menuItemStyles: ComponentSlotStylesInput Date: Fri, 11 Jan 2019 15:32:59 -0800 Subject: [PATCH 06/13] removed circularRadius from menuVariables since it is no longer used in the styles --- src/themes/teams/components/Menu/menuItemStyles.ts | 2 +- src/themes/teams/components/Menu/menuVariables.ts | 4 ---- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/src/themes/teams/components/Menu/menuItemStyles.ts b/src/themes/teams/components/Menu/menuItemStyles.ts index 7ce61715c4..1ef6190301 100644 --- a/src/themes/teams/components/Menu/menuItemStyles.ts +++ b/src/themes/teams/components/Menu/menuItemStyles.ts @@ -267,7 +267,7 @@ const menuItemStyles: ComponentSlotStylesInput { primaryHoverBorderColor: siteVars.gray08, primaryUnderlinedBorderColor: siteVars.gray08, - circularRadius: pxToRem(999), lineHeightBase: siteVars.lineHeightBase, } } From 5ba78cee22d388e86746119fba66d0b85e284eba Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Fri, 11 Jan 2019 16:15:47 -0800 Subject: [PATCH 07/13] removing explicit background & adding variable for iconOnlyActiveColor --- .../teams/components/Menu/menuItemStyles.ts | 27 ++++++++++++------- .../teams/components/Menu/menuVariables.ts | 7 ++--- 2 files changed, 22 insertions(+), 12 deletions(-) diff --git a/src/themes/teams/components/Menu/menuItemStyles.ts b/src/themes/teams/components/Menu/menuItemStyles.ts index 1ef6190301..b053c7fb38 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: 'inherit', - activeColor: siteVars.brand06, + iconOnlyActiveColor: siteVars.brand06, + + activeColor: siteVars.black, activeBackgroundColor: siteVars.gray10, focusedBackgroundColor: siteVars.gray14, borderColor: siteVars.gray08, From 353b4de7e648fd76de048ea6d0f008fb1851db40 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Fri, 11 Jan 2019 16:27:23 -0800 Subject: [PATCH 08/13] fixed order of how styles get applied --- .../teams/components/Menu/menuItemStyles.ts | 33 +++++++++---------- 1 file changed, 15 insertions(+), 18 deletions(-) diff --git a/src/themes/teams/components/Menu/menuItemStyles.ts b/src/themes/teams/components/Menu/menuItemStyles.ts index b053c7fb38..a6a9f32556 100644 --- a/src/themes/teams/components/Menu/menuItemStyles.ts +++ b/src/themes/teams/components/Menu/menuItemStyles.ts @@ -191,20 +191,6 @@ const menuItemStyles: ComponentSlotStylesInput Date: Fri, 11 Jan 2019 16:30:11 -0800 Subject: [PATCH 09/13] add changelog entry --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 11e157148e..b163f79be6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -27,6 +27,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Add `MenuDivider` component and `kind` prop to the `items` inside of the `Menu` for creating different components @mnajdova ([#682](https://github.com/stardust-ui/react/pull/682)) ### Fixes +- Fix Menu themeing styles @codepretty ([#708](https://github.com/stardust-ui/react/pull/708)) - Fix unicode arrow characters to be RTL aware ([#690](https://github.com/stardust-ui/react/pull/690)) - Fix positioning of `Popup` with changable content @layershifter ([#678](https://github.com/stardust-ui/react/pull/678)) - Fix default props in `Accordion` and `Dropdown` components @layershifter ([#675](https://github.com/stardust-ui/react/pull/675)) From 286359f758945cc2d363224b625a5a46e2347171 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Fri, 11 Jan 2019 16:35:59 -0800 Subject: [PATCH 10/13] rename videoCameraEmphasis icon file --- .../teams/components/Icon/svg/icons/index.ts | 2 +- .../Icon/svg/icons/video-camera-emphasis.tsx | 21 ------------------- 2 files changed, 1 insertion(+), 22 deletions(-) delete mode 100644 src/themes/teams/components/Icon/svg/icons/video-camera-emphasis.tsx diff --git a/src/themes/teams/components/Icon/svg/icons/index.ts b/src/themes/teams/components/Icon/svg/icons/index.ts index 2763d39c05..b8937e6213 100644 --- a/src/themes/teams/components/Icon/svg/icons/index.ts +++ b/src/themes/teams/components/Icon/svg/icons/index.ts @@ -59,7 +59,7 @@ import translation from './translation' import trashCan from './trashCan' import underline from './underline' import undo from './undo' -import videoCameraEmphasis from './video-camera-emphasis' +import videoCameraEmphasis from './videoCameraEmphasis' export default { add, diff --git a/src/themes/teams/components/Icon/svg/icons/video-camera-emphasis.tsx b/src/themes/teams/components/Icon/svg/icons/video-camera-emphasis.tsx deleted file mode 100644 index 164381350d..0000000000 --- a/src/themes/teams/components/Icon/svg/icons/video-camera-emphasis.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import * as React from 'react' -import cx from 'classnames' -import { TeamsProcessedSvgIconSpec } from '../types' - -export default { - icon: ({ classes }) => ( - - - - - - - ), - styles: {}, -} as TeamsProcessedSvgIconSpec From 4d927415f68dbaa157e06022eeefa23e246955d5 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Fri, 11 Jan 2019 16:36:21 -0800 Subject: [PATCH 11/13] rename videoCameraEmphasis icon file --- .../Icon/svg/icons/videoCameraEmphasis.tsx | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 src/themes/teams/components/Icon/svg/icons/videoCameraEmphasis.tsx 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 From db70051971ecec1d4e0159da4d3e6b1fc4fccab8 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Fri, 11 Jan 2019 17:09:43 -0800 Subject: [PATCH 12/13] cleaned up styles --- .../components/Menu/menuItemStyles.ts | 29 ++++++++----------- 1 file changed, 12 insertions(+), 17 deletions(-) diff --git a/src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts b/src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts index 361f134a78..89bb4bc300 100644 --- a/src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts +++ b/src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts @@ -4,29 +4,24 @@ import { MenuItemProps, MenuItemState } from '../../../../components/Menu/MenuIt type MenuItemPropsAndState = MenuItemProps & MenuItemState -const getIconOnlyFocusedAndHoverStyles = ({ - variables, -}: { - variables: MenuVariables -}): ICSSInJSStyle => { - return { - color: variables.activeColor, - background: variables.activeBackgroundColor, - } -} - const menuItemStyles: ComponentSlotStylesInput = { wrapper: ({ props, variables }): ICSSInJSStyle => { const { iconOnly, isFromKeyboard } = props return { - // focus styles - ...(isFromKeyboard && iconOnly && getIconOnlyFocusedAndHoverStyles({ variables })), + ...(iconOnly && { + // focus styles + ...(isFromKeyboard && { + color: variables.activeColor, + background: variables.activeBackgroundColor, + }), - // hover styles - ':hover': { - ...(iconOnly && getIconOnlyFocusedAndHoverStyles({ variables })), - }, + // hover styles + ':hover': { + color: variables.activeColor, + background: variables.activeBackgroundColor, + }, + }), } }, From f4631b8068e8042c5d89042fdccc281baf8f5d23 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Fri, 11 Jan 2019 17:14:50 -0800 Subject: [PATCH 13/13] move changelog entry to the right spot... oops --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 79ce7edced..c695812344 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -24,6 +24,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ### Fixes - 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)) ## [v0.16.1](https://github.com/stardust-ui/react/tree/v0.16.1) (2019-01-10) @@ -35,7 +36,6 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Add `MenuDivider` component and `kind` prop to the `items` inside of the `Menu` for creating different components @mnajdova ([#682](https://github.com/stardust-ui/react/pull/682)) ### Fixes -- Fix Menu themeing styles @codepretty ([#708](https://github.com/stardust-ui/react/pull/708)) - Fix unicode arrow characters to be RTL aware ([#690](https://github.com/stardust-ui/react/pull/690)) - Fix positioning of `Popup` with changable content @layershifter ([#678](https://github.com/stardust-ui/react/pull/678)) - Fix default props in `Accordion` and `Dropdown` components @layershifter ([#675](https://github.com/stardust-ui/react/pull/675))