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

fix(MenuItem): icon only active state in Teams theme #1464

Merged
mnajdova merged 10 commits into from
Jun 7, 2019
Merged

fix(MenuItem): icon only active state in Teams theme #1464

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
7bec410
-fixed menu item icon only active color and filled state
Jun 7, 2019
f718861
-updated HC menu variables
Jun 7, 2019
f59af3e
-updated changelog
Jun 7, 2019
c5a08b9
-fixed steps in screener toolbar tests
Jun 7, 2019
26f8da0
Merge branch 'master' into fix/menu-item-icon-only-active-color
layershifter Jun 7, 2019
f0aa024
-renamed start and end idx to item
Jun 7, 2019
454d5b2
Merge remote-tracking branch 'origin/fix/menu-item-icon-only-active-c…
Jun 7, 2019
99aae06
-fixed changelog entry
Jun 7, 2019
9bdfd00
-fixed common steps
Jun 7, 2019
36312ba
Merge branch 'master' into fix/menu-item-icon-only-active-color
mnajdova Jun 7, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
- Fix click handling on focus for `action` slot in `Attachment` component @Bugaa92 ([#1444](https://github.com/stardust-ui/react/pull/1444))
- Fix Teams' theme list item end media styles @mnajdova ([#1448](https://github.com/stardust-ui/react/pull/1448))
- Fix the order of the fela plugin @mnajdova ([#1461](https://github.com/stardust-ui/react/pull/1461))
- Fix `active` styles for `iconOnly` `MenuItem` in Teams theme @mnajdova ([#1464](https://github.com/stardust-ui/react/pull/1464))

### Documentation
- Remove unfinished themes from the docs themes dropdown on components examples pages @alinais ([#1473](https://github.com/stardust-ui/react/pull/1473)
Expand Down
2 changes: 1 addition & 1 deletion docs/src/examples/components/Menu/Usages/MenuExampleToolbar.shorthand.steps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const config: ScreenerTestsConfig = {
themes: ['teams', 'teamsDark', 'teamsHighContrast'],
steps: [
(builder, keys) =>
getScreenerSteps()[0](builder, keys)
getScreenerSteps({ startItem: 2, endItem: 4 })[0](builder, keys)
.click(selectors.lastItem)
.snapshot('Clicks on the last item and opens submenu')

Expand Down
16 changes: 11 additions & 5 deletions docs/src/examples/components/Menu/commonScreenerSteps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,29 @@ import { Menu } from '@stardust-ui/react'

interface StepsOptions {
vertical?: boolean
startItem?: number
endItem?: number
}

const selectors = {
menu: `.${Menu.className}`,
item: (itemIndex: number) => `.${Menu.className} li:nth-child(${itemIndex}) a`,
}

const getScreenerSteps = ({ vertical }: StepsOptions = {}): ScreenerSteps => [
const getScreenerSteps = ({
vertical,
startItem = 2,
endItem = 3,
}: StepsOptions = {}): ScreenerSteps => [
(builder, keys) =>
builder
.hover(selectors.item(2))
.hover(selectors.item(startItem))
.snapshot('Hovers 2nd item (hover state styles)')
.click(selectors.item(2))
.click(selectors.item(startItem))
.snapshot('Clicks on 2nd item (active state styles)')
.keys(selectors.item(2), vertical ? keys.downArrow : keys.rightArrow)
.keys(selectors.item(startItem), vertical ? keys.downArrow : keys.rightArrow)
.snapshot('Navigates to next item (focus state styles)')
.keys(selectors.item(3), vertical ? keys.upArrow : keys.leftArrow)
.keys(selectors.item(endItem), vertical ? keys.upArrow : keys.leftArrow)
.snapshot('Navigates to previous item (active and focus state styles)'),
]

Expand Down
1 change: 1 addition & 0 deletions packages/react/src/themes/teams-high-contrast/components/Menu/menuVariables.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,4 +23,5 @@ export default (siteVars: any): Partial<MenuVariables> => ({
primaryBorderColor: siteVars.colors.white,

verticalBackgroundColor: siteVars.colors.black,
iconOnlyColorActive: siteVars.colors.black,
})
14 changes: 9 additions & 5 deletions packages/react/src/themes/teams/components/Menu/menuItemStyles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -325,11 +325,14 @@ const menuItemStyles: ComponentSlotStylesInput<MenuItemPropsAndState, MenuVariab
}),

// active styles
...(active &&
(primary
? {
...(iconOnly && { color: 'inherit' }),
...(active && {
...(iconOnly && {
color: v.iconOnlyColorActive,
Copy link
Contributor

@kuzhelov kuzhelov Jun 7, 2019 •
edited
Loading

Choose a reason for hiding this comment

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

just to be sure - could you, please, suggest where original inherit value had resulted in suboptimal styles?

Copy link
Contributor Author

@mnajdova mnajdova Jun 7, 2019

Choose a reason for hiding this comment

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

In team's theme the iconOnly Menu should always have the brand color for the active items. The inherit color is black in default theme.

...getIconFillOrOutlineStyles({ outline: false }),
}),

...(primary
? {
...(underlined && {
color: colors.borderActive,
...underlinedItem(v.borderColorActive || colors.borderActive),
Expand All @@ -338,7 +341,8 @@ const menuItemStyles: ComponentSlotStylesInput<MenuItemPropsAndState, MenuVariab
: underlined && {
fontWeight: 700,
...underlinedItem(v.colorActive),
})),
}),
}),

// focus styles
...(isFromKeyboard && {
Expand Down