From af6b4a7599c096af1caa664e8b1e3ab442131926 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 25 May 2023 15:18:22 +0200 Subject: [PATCH 1/3] Make separator full width --- packages/components/src/dropdown-menu-v2/styles.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/components/src/dropdown-menu-v2/styles.ts b/packages/components/src/dropdown-menu-v2/styles.ts index c8843d052ec724..5b4ddf85b95431 100644 --- a/packages/components/src/dropdown-menu-v2/styles.ts +++ b/packages/components/src/dropdown-menu-v2/styles.ts @@ -18,6 +18,7 @@ const ANIMATION_PARAMS = { EASING: 'cubic-bezier( 0.16, 1, 0.3, 1 )', }; +const CONTENT_WRAPPER_PADDING = space( 2 ); const ITEM_PREFIX_WIDTH = space( 7 ); const ITEM_PADDING_INLINE_START = space( 2 ); const ITEM_PADDING_INLINE_END = space( 2.5 ); @@ -58,7 +59,7 @@ const baseContent = css` min-width: 220px; background-color: ${ COLORS.ui.background }; border-radius: 6px; - padding: ${ space( 2 ) }; + padding: ${ CONTENT_WRAPPER_PADDING }; box-shadow: 0.1px 4px 16.4px -0.5px rgba( 0, 0, 0, 0.1 ), 0px 5.5px 7.8px -0.3px rgba( 0, 0, 0, 0.1 ), 0px 2.7px 3.8px -0.2px rgba( 0, 0, 0, 0.1 ), @@ -242,7 +243,7 @@ export const Separator = styled( DropdownMenu.Separator )` /* TODO: doesn't match border color from variables */ background-color: ${ COLORS.ui.borderDisabled }; /* Negative horizontal margin to make separator go from side to side */ - margin: ${ space( 2 ) } 0; + margin: ${ space( 2 ) } calc( -1 * ${ CONTENT_WRAPPER_PADDING } ); `; export const ItemIndicator = styled( DropdownMenu.ItemIndicator )` From 9a3549ed19e49187ce21cb1205a5e527f214935e Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 25 May 2023 15:55:19 +0200 Subject: [PATCH 2/3] Change hover/focus/expanded state color --- .../components/src/dropdown-menu-v2/styles.ts | 21 ++++++++----------- 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/packages/components/src/dropdown-menu-v2/styles.ts b/packages/components/src/dropdown-menu-v2/styles.ts index 5b4ddf85b95431..64f72fa7f7c6d6 100644 --- a/packages/components/src/dropdown-menu-v2/styles.ts +++ b/packages/components/src/dropdown-menu-v2/styles.ts @@ -175,14 +175,13 @@ const baseItem = css` pointer-events: none; } + /* Hover and Focus styles */ &[data-highlighted] { - /* - TODO: reconcile with global focus styles - (incl high contrast mode fallbacks) - */ + /* TODO: reconcile with global focus styles */ + background-color: ${ COLORS.gray[ '100' ] }; - background-color: ${ COLORS.ui.theme }; - color: white; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; } svg { @@ -211,13 +210,11 @@ export const RadioItem = styled( DropdownMenu.RadioItem )` ${ baseItem } `; export const SubTrigger = styled( DropdownMenu.SubTrigger )` - &[data-state='open']:not( [data-highlighted] ) { - /* TODO: use variable */ - background-color: rgba( 56, 88, 233, 0.04 ); - color: ${ COLORS.ui.theme }; - } - ${ baseItem } + + &[data-state='open'] { + background-color: ${ COLORS.gray[ '100' ] }; + } `; export const Label = styled( DropdownMenu.Label )` From cee5a4dd4bcad078066888b01b2ea3b3240f5a65 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 25 May 2023 16:18:07 +0200 Subject: [PATCH 3/3] CHANGELOG --- packages/components/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index d9670d86cb91c7..6fd82a512e2608 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Experimental + +- `DropdownMenu` v2: Tweak styles ([#50967](https://github.com/WordPress/gutenberg/pull/50967)). + ## 25.0.0 (2023-05-24) ### Breaking Changes