Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: v0 menu style migration from v9 #25012

Merged
merged 15 commits into from
Nov 1, 2022
Merged

feat: v0 menu style migration from v9 #25012

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
1f3fcce
Add 4px border radius when hovering on menu item
Sep 29, 2022
f38a1cf
Add 4px padding right and left to the menu
Sep 29, 2022
bfc41c9
Add subMenuIconColor to menu variables
Sep 29, 2022
6ca08ee
Add color to icons when hovering on menuItem
Sep 29, 2022
405e8fb
Merge branch 'master' of https://github.com/microsoft/fluentui into v…
Sep 29, 2022
5b71b97
Add changelog entry
Sep 29, 2022
6251070
Change icon color when hovering only for Teams theme
Oct 3, 2022
be6aaf4
Unchanged color in dark and high contrast themes
Oct 3, 2022
68ab661
Use a token for the icon color
Oct 3, 2022
ee04c21
Removed check not needed
Oct 3, 2022
58d852f
Removed useless check
Oct 25, 2022
e571984
Importing menuItemIconClassName
Oct 31, 2022
c480571
Merge branch 'master' into v0-menu-migration-from-v9
Oct 31, 2022
e170705
Merge branch 'master' into v0-menu-migration-from-v9
Oct 31, 2022
a7d3608
Empty-Commit
Oct 31, 2022
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 packages/fluentui/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
- Add a new comfy layout variation for `ChatMessage` @davezuko ([#23974](https://github.com/microsoft/fluentui/pull/23974))
- Add `FocusTrapZone` prop `preventScrollOnRestoreFocus` to prevent scroll on focus when `FocusTrapZone` releases @yuanboxue-amber ([#24632](https://github.com/microsoft/fluentui/pull/24632))
- Add new style to v0 Tooltip to match v9 Tooltip @GianoglioEnrico ([#24908](https://github.com/microsoft/fluentui/pull/24908))
- Restyling v0 Menu to match v9 Menu @GianoglioEnrico ([#25012](https://github.com/microsoft/fluentui/pull/25012))

### Fixes
- Allow React 17 in `peerDependencies` of all packages and bump react-is to 17 @TristanWatanabe ([#24356](https://github.com/microsoft/fluentui/pull/24356))
Expand Down
1 change: 1 addition & 0 deletions packages/fluentui/react-northstar/src/themes/teams-dark/components/Menu/menuVariables.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,4 +53,5 @@ export const menuVariables = (siteVars: any): Partial<MenuVariables> => ({
activePrimaryIndicatorColor: siteVars.colors.white,
activePrimaryVerticalIndicatorColor: siteVars.colors.white,
indicatorColorHover: siteVars.colors.white,
subMenuIconColor: undefined,
GianoglioEnrico marked this conversation as resolved.
Show resolved Hide resolved
});
1 change: 1 addition & 0 deletions .../fluentui/react-northstar/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 @@ -57,4 +57,5 @@ export const menuVariables = (siteVars: any): Partial<MenuVariables> => ({

borderColorFocus: siteVars.colors.black,
outlineColorFocus: siteVars.accessibleCyan,
subMenuIconColor: undefined,
});
12 changes: 11 additions & 1 deletion packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuItemStyles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ export const verticalPillsBottomMargin = pxToRem(5);
export const horizontalPillsRightMargin = pxToRem(8);
export const verticalPointingBottomMargin = pxToRem(12);

export const menuItemIconClassName = 'ui-menu__itemicon';
GianoglioEnrico marked this conversation as resolved.
Show resolved Hide resolved

export const underlinedItem = (color: string): ICSSInJSStyle => ({
paddingBottom: 0,
borderBottom: `solid ${pxToRem(4)} ${color}`,
Expand Down Expand Up @@ -200,7 +202,15 @@ export const menuItemStyles: ComponentSlotStylesPrepared<MenuItemStylesProps, Me
color: v.colorHover,

...(underlined && { color: v.underlinedColorHover }),

...(!disabled &&
!iconOnly &&
!primary &&
vertical && {
[`&>.${menuItemIconClassName}`]: {
color: v.subMenuIconColor,
...(v.subMenuIconColor && getIconFillOrOutlineStyles({ outline: false })),
},
}),
...(!disabled && {
...(iconOnly && getIconFillOrOutlineStyles({ outline: false })),
...(primary
Expand Down
1 change: 1 addition & 0 deletions packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuItemWrapperStyles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,6 +171,7 @@ export const menuItemWrapperStyles: ComponentSlotStylesPrepared<MenuItemWrapperS
...(vertical && {
color: v.wrapperColorHover,
background: v.backgroundColorHover || colors.backgroundHover,
borderRadius: pxToRem(4),
}),

...(primary && {
Expand Down
2 changes: 1 addition & 1 deletion packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuStyles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export const menuStyles: ComponentSlotStylesPrepared<MenuStylesProps, MenuVariab
...(vertical && {
flexDirection: 'column',
backgroundColor: v.verticalBackgroundColor,
padding: `${pxToRem(8)} 0`,
padding: `${pxToRem(8)} ${pxToRem(4)}`,
...(submenu && {
boxShadow: v.verticalBoxShadow,
}),
Expand Down
2 changes: 2 additions & 0 deletions packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuVariables.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,7 @@ export interface MenuVariables {
indicatorColorHover: string;

subMenuBorderColor: string;
subMenuIconColor: string;
}

export const menuVariables = (siteVars: any): MenuVariables => {
Expand Down Expand Up @@ -203,5 +204,6 @@ export const menuVariables = (siteVars: any): MenuVariables => {
indicatorColorHover: siteVars.colors.grey[500],

subMenuBorderColor: siteVars.colorScheme.default.borderTransparent,
subMenuIconColor: siteVars.colors.brand[600],
GianoglioEnrico marked this conversation as resolved.
Show resolved Hide resolved
};
};