From 240b0dae3eea5eefe59dec08cccd479d06a7b9d8 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 30 May 2023 14:04:52 +0200 Subject: [PATCH 01/12] Update border radius to 2px --- packages/components/src/dropdown-menu-v2/styles.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/components/src/dropdown-menu-v2/styles.ts b/packages/components/src/dropdown-menu-v2/styles.ts index 64f72fa7f7c6d6..6abdd7d78c82cd 100644 --- a/packages/components/src/dropdown-menu-v2/styles.ts +++ b/packages/components/src/dropdown-menu-v2/styles.ts @@ -8,7 +8,7 @@ import * as DropdownMenu from '@radix-ui/react-dropdown-menu'; /** * Internal dependencies */ -import { COLORS, font, rtl } from '../utils'; +import { COLORS, font, rtl, CONFIG } from '../utils'; import { space } from '../ui/utils/space'; import Icon from '../icon'; @@ -58,7 +58,7 @@ const slideLeftAndFade = keyframes( { const baseContent = css` min-width: 220px; background-color: ${ COLORS.ui.background }; - border-radius: 6px; + border-radius: ${ CONFIG.radiusBlockUi }; 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 ), @@ -156,7 +156,7 @@ const baseItem = css` font-weight: normal; line-height: 20px; color: ${ COLORS.gray[ 900 ] }; - border-radius: 3px; + border-radius: ${ CONFIG.radiusBlockUi }; display: flex; align-items: center; padding: ${ space( 2 ) } ${ ITEM_PADDING_INLINE_END } ${ space( 2 ) } From 023f4706a10edb732b05410eeb8d2cb7a8479668 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 30 May 2023 15:35:44 +0200 Subject: [PATCH 02/12] Add toolbar variant styles to top content wrapper --- .../components/src/dropdown-menu-v2/index.tsx | 41 ++++++++++++------- .../components/src/dropdown-menu-v2/styles.ts | 24 +++++++---- .../components/src/dropdown-menu-v2/types.ts | 8 ++++ 3 files changed, 51 insertions(+), 22 deletions(-) diff --git a/packages/components/src/dropdown-menu-v2/index.tsx b/packages/components/src/dropdown-menu-v2/index.tsx index b0617edd77f9f0..6e244a4295d86d 100644 --- a/packages/components/src/dropdown-menu-v2/index.tsx +++ b/packages/components/src/dropdown-menu-v2/index.tsx @@ -14,6 +14,7 @@ import { SVG, Circle } from '@wordpress/primitives'; /** * Internal dependencies */ +import { useContextSystem } from '../ui/context'; import { useSlot } from '../slot-fill'; import Icon from '../icon'; import { SLOT_NAME as POPOVER_DEFAULT_SLOT_NAME } from '../popover'; @@ -29,6 +30,7 @@ import type { DropdownMenuRadioItemProps, DropdownMenuSeparatorProps, DropdownSubMenuTriggerProps, + DropdownMenuContext, } from './types'; // Menu content's side padding + 4px @@ -46,21 +48,29 @@ const DropdownMenuPrivateContext = createContext< { * `DropdownMenu` displays a menu to the user (such as a set of actions * or functions) triggered by a button. */ -export const DropdownMenu = ( { - // Root props - defaultOpen, - open, - onOpenChange, - modal = true, - // Content positioning props - side = 'bottom', - sideOffset = 0, - align = 'center', - alignOffset = 0, - // Render props - children, - trigger, -}: DropdownMenuProps ) => { +export const DropdownMenu = ( props: DropdownMenuProps ) => { + const { + // Root props + defaultOpen, + open, + onOpenChange, + modal = true, + // Content positioning props + side = 'bottom', + sideOffset = 0, + align = 'center', + alignOffset = 0, + // Render props + children, + trigger, + + // From internal components context + variant, + } = useContextSystem< + // Adding `className` to the context type to avoid a TS error + DropdownMenuProps & DropdownMenuContext & { className?: string } + >( props, 'DropdownMenuV2' ); + // Render the portal in the default slot used by the legacy Popover component. const slot = useSlot( POPOVER_DEFAULT_SLOT_NAME ); const portalContainer = slot.ref?.current; @@ -83,6 +93,7 @@ export const DropdownMenu = ( { sideOffset={ sideOffset } alignOffset={ alignOffset } loop={ true } + variant={ variant } > css` min-width: 220px; background-color: ${ COLORS.ui.background }; border-radius: ${ CONFIG.radiusBlockUi }; 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 ), - 0px 0.7px 1px rgba( 0, 0, 0, 0.1 ); + box-shadow: ${ variant === 'toolbar' + ? TOOLBAR_VARIANT_BOX_SHADOW + : DEFAULT_BOX_SHADOW }; animation-duration: ${ ANIMATION_PARAMS.DURATION }; animation-timing-function: ${ ANIMATION_PARAMS.EASING }; will-change: transform, opacity; @@ -193,8 +201,10 @@ const baseItem = css` } `; -export const Content = styled( DropdownMenu.Content )` - ${ baseContent } +export const Content = styled( DropdownMenu.Content )< + Pick< DropdownMenuContext, 'variant' > +>` + ${ ( props ) => baseContent( props.variant ) } `; export const SubContent = styled( DropdownMenu.SubContent )` ${ baseContent } diff --git a/packages/components/src/dropdown-menu-v2/types.ts b/packages/components/src/dropdown-menu-v2/types.ts index 1fb246fafd6537..5de6c1efbbd740 100644 --- a/packages/components/src/dropdown-menu-v2/types.ts +++ b/packages/components/src/dropdown-menu-v2/types.ts @@ -248,3 +248,11 @@ export type DropdownMenuGroupProps = { }; export type DropdownMenuSeparatorProps = {}; + +export type DropdownMenuContext = { + /** + * This variant can be used to change the appearance of the component in + * specific contexts, ie. when rendered inside the `Toolbar` component. + */ + variant?: 'toolbar'; +}; From b61a72c1a7afd2dcb300306dc34caff8d7f19c97 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 30 May 2023 15:36:10 +0200 Subject: [PATCH 03/12] Add toolbar variant styles to sub content wrapper and separators via internal react context --- .../components/src/dropdown-menu-v2/index.tsx | 25 +++++++++++-------- .../components/src/dropdown-menu-v2/styles.ts | 17 +++++++++---- .../components/src/dropdown-menu-v2/types.ts | 7 ++++++ 3 files changed, 34 insertions(+), 15 deletions(-) diff --git a/packages/components/src/dropdown-menu-v2/index.tsx b/packages/components/src/dropdown-menu-v2/index.tsx index 6e244a4295d86d..bff0c7a84d24ff 100644 --- a/packages/components/src/dropdown-menu-v2/index.tsx +++ b/packages/components/src/dropdown-menu-v2/index.tsx @@ -31,6 +31,7 @@ import type { DropdownMenuSeparatorProps, DropdownSubMenuTriggerProps, DropdownMenuContext, + DropdownMenuPrivateContext as DropdownMenuPrivateContextType, } from './types'; // Menu content's side padding + 4px @@ -38,11 +39,11 @@ const SUB_MENU_OFFSET_SIDE = 12; // Opposite amount of the top padding of the menu item const SUB_MENU_OFFSET_ALIGN = -8; -const DropdownMenuPrivateContext = createContext< { - portalContainer: HTMLElement | null; -} >( { - portalContainer: null, -} ); +const DropdownMenuPrivateContext = + createContext< DropdownMenuPrivateContextType >( { + variant: undefined, + portalContainer: null, + } ); /** * `DropdownMenu` displays a menu to the user (such as a set of actions @@ -96,7 +97,7 @@ export const DropdownMenu = ( props: DropdownMenuProps ) => { variant={ variant } > { children } @@ -145,7 +146,9 @@ export const DropdownSubMenu = ( { children, trigger, }: DropdownSubMenuProps ) => { - const { portalContainer } = useContext( DropdownMenuPrivateContext ); + const { variant, portalContainer } = useContext( + DropdownMenuPrivateContext + ); return ( { children } @@ -265,6 +269,7 @@ export const DropdownMenuRadioItem = ( { ); }; -export const DropdownMenuSeparator = ( props: DropdownMenuSeparatorProps ) => ( - -); +export const DropdownMenuSeparator = ( props: DropdownMenuSeparatorProps ) => { + const { variant } = useContext( DropdownMenuPrivateContext ); + return ; +}; diff --git a/packages/components/src/dropdown-menu-v2/styles.ts b/packages/components/src/dropdown-menu-v2/styles.ts index 5654981416f72c..a5dc07003acb9e 100644 --- a/packages/components/src/dropdown-menu-v2/styles.ts +++ b/packages/components/src/dropdown-menu-v2/styles.ts @@ -206,8 +206,10 @@ export const Content = styled( DropdownMenu.Content )< >` ${ ( props ) => baseContent( props.variant ) } `; -export const SubContent = styled( DropdownMenu.SubContent )` - ${ baseContent } +export const SubContent = styled( DropdownMenu.SubContent )< + Pick< DropdownMenuContext, 'variant' > +>` + ${ ( props ) => baseContent( props.variant ) } `; export const Item = styled( DropdownMenu.Item )` @@ -245,10 +247,15 @@ export const Label = styled( DropdownMenu.Label )` text-transform: uppercase; `; -export const Separator = styled( DropdownMenu.Separator )` - height: 1px; +export const Separator = styled( DropdownMenu.Separator )< + Pick< DropdownMenuContext, 'variant' > +>` + height: ${ CONFIG.borderWidth }; /* TODO: doesn't match border color from variables */ - background-color: ${ COLORS.ui.borderDisabled }; + background-color: ${ ( props ) => + props.variant === 'toolbar' + ? TOOLBAR_VARIANT_BORDER_COLOR + : COLORS.ui.borderDisabled }; /* Negative horizontal margin to make separator go from side to side */ margin: ${ space( 2 ) } calc( -1 * ${ CONTENT_WRAPPER_PADDING } ); `; diff --git a/packages/components/src/dropdown-menu-v2/types.ts b/packages/components/src/dropdown-menu-v2/types.ts index 5de6c1efbbd740..4b2d5aad71120a 100644 --- a/packages/components/src/dropdown-menu-v2/types.ts +++ b/packages/components/src/dropdown-menu-v2/types.ts @@ -256,3 +256,10 @@ export type DropdownMenuContext = { */ variant?: 'toolbar'; }; + +export type DropdownMenuPrivateContext = Pick< + DropdownMenuContext, + 'variant' +> & { + portalContainer: HTMLElement | null; +}; From f02b777b9a52d06dd97bf4aa5dc7159363369215 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 30 May 2023 15:51:19 +0200 Subject: [PATCH 04/12] Connect `DropdownMenu` to the components context system --- .../components/src/dropdown-menu-v2/index.tsx | 19 ++++++++++++------- packages/components/src/ui/context/index.ts | 1 + 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/packages/components/src/dropdown-menu-v2/index.tsx b/packages/components/src/dropdown-menu-v2/index.tsx index bff0c7a84d24ff..de727deb9ccb7a 100644 --- a/packages/components/src/dropdown-menu-v2/index.tsx +++ b/packages/components/src/dropdown-menu-v2/index.tsx @@ -14,7 +14,7 @@ import { SVG, Circle } from '@wordpress/primitives'; /** * Internal dependencies */ -import { useContextSystem } from '../ui/context'; +import { useContextSystem, contextConnectWithoutRef } from '../ui/context'; import { useSlot } from '../slot-fill'; import Icon from '../icon'; import { SLOT_NAME as POPOVER_DEFAULT_SLOT_NAME } from '../popover'; @@ -45,11 +45,7 @@ const DropdownMenuPrivateContext = portalContainer: null, } ); -/** - * `DropdownMenu` displays a menu to the user (such as a set of actions - * or functions) triggered by a button. - */ -export const DropdownMenu = ( props: DropdownMenuProps ) => { +const UnconnectedDropdownMenu = ( props: DropdownMenuProps ) => { const { // Root props defaultOpen, @@ -70,7 +66,7 @@ export const DropdownMenu = ( props: DropdownMenuProps ) => { } = useContextSystem< // Adding `className` to the context type to avoid a TS error DropdownMenuProps & DropdownMenuContext & { className?: string } - >( props, 'DropdownMenuV2' ); + >( props, 'DropdownMenu' ); // Render the portal in the default slot used by the legacy Popover component. const slot = useSlot( POPOVER_DEFAULT_SLOT_NAME ); @@ -107,6 +103,15 @@ export const DropdownMenu = ( props: DropdownMenuProps ) => { ); }; +/** + * `DropdownMenu` displays a menu to the user (such as a set of actions + * or functions) triggered by a button. + */ +export const DropdownMenu = contextConnectWithoutRef( + UnconnectedDropdownMenu, + 'DropdownMenu' +); + export const DropdownSubMenuTrigger = ( { prefix, suffix = ( diff --git a/packages/components/src/ui/context/index.ts b/packages/components/src/ui/context/index.ts index 54694e47304ff2..266e2c3459a547 100644 --- a/packages/components/src/ui/context/index.ts +++ b/packages/components/src/ui/context/index.ts @@ -4,6 +4,7 @@ export { } from './context-system-provider'; export { contextConnect, + contextConnectWithoutRef, hasConnectNamespace, getConnectNamespace, } from './context-connect'; From 35425388f6ea0c51175a80cce36ce6c800035979 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 30 May 2023 15:51:31 +0200 Subject: [PATCH 05/12] Add temporary Storybook example --- .../src/dropdown-menu-v2/stories/index.tsx | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/packages/components/src/dropdown-menu-v2/stories/index.tsx b/packages/components/src/dropdown-menu-v2/stories/index.tsx index 4bee7c902063f4..89c0ca0c028a8a 100644 --- a/packages/components/src/dropdown-menu-v2/stories/index.tsx +++ b/packages/components/src/dropdown-menu-v2/stories/index.tsx @@ -33,6 +33,7 @@ import { menu, wordpress } from '@wordpress/icons'; * Internal dependencies */ import Icon from '../../icon'; +import { ContextSystemProvider } from '../../ui/context'; const meta: ComponentMeta< typeof DropdownMenu > = { title: 'Components (Experimental)/DropdownMenu v2', @@ -197,3 +198,19 @@ Default.args = { ), }; + +const toolbarVariantContextValue = { + DropdownMenu: { + variant: 'toolbar', + }, +}; +export const ToolbarVariant: ComponentStory< typeof DropdownMenu > = ( + props +) => ( + + + +); +ToolbarVariant.args = { + ...Default.args, +}; From 460831f1170faa15db39634b26bb6a1cf8bd4074 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 30 May 2023 16:34:15 +0200 Subject: [PATCH 06/12] Memoize internal context value to avoid extra re-renders --- .../components/src/dropdown-menu-v2/index.tsx | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/packages/components/src/dropdown-menu-v2/index.tsx b/packages/components/src/dropdown-menu-v2/index.tsx index de727deb9ccb7a..11155918635052 100644 --- a/packages/components/src/dropdown-menu-v2/index.tsx +++ b/packages/components/src/dropdown-menu-v2/index.tsx @@ -6,7 +6,12 @@ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'; /** * WordPress dependencies */ -import { forwardRef, createContext, useContext } from '@wordpress/element'; +import { + forwardRef, + createContext, + useContext, + useMemo, +} from '@wordpress/element'; import { isRTL } from '@wordpress/i18n'; import { check, chevronRightSmall, lineSolid } from '@wordpress/icons'; import { SVG, Circle } from '@wordpress/primitives'; @@ -72,6 +77,14 @@ const UnconnectedDropdownMenu = ( props: DropdownMenuProps ) => { const slot = useSlot( POPOVER_DEFAULT_SLOT_NAME ); const portalContainer = slot.ref?.current; + const privateContextValue = useMemo( + () => ( { + variant, + portalContainer, + } ), + [ variant, portalContainer ] + ); + return ( { variant={ variant } > { children } From b1a871d23f10d63e392ce09b1a1cfae23c32a9f0 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 30 May 2023 16:35:28 +0200 Subject: [PATCH 07/12] CHANGELOG --- packages/components/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index e1c10790e1746a..0ad95dbde54099 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -16,7 +16,7 @@ ### Experimental -- `DropdownMenu` v2: Tweak styles ([#50967](https://github.com/WordPress/gutenberg/pull/50967)). +- `DropdownMenu` v2: Tweak styles ([#50967](https://github.com/WordPress/gutenberg/pull/50967), [#51097](https://github.com/WordPress/gutenberg/pull/51097)). - `DropdownMenu` v2: Render in the default `Popover.Slot` ([#51046](https://github.com/WordPress/gutenberg/pull/51046)). ## 25.0.0 (2023-05-24) From 8e711f97cfb5797a63259a7789bd116863c37959 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 30 May 2023 17:10:53 +0200 Subject: [PATCH 08/12] Set the toolbar dropdown menu variant in the toolbar component via the context system --- .../components/src/toolbar/toolbar/index.tsx | 27 ++++++++++++++----- 1 file changed, 20 insertions(+), 7 deletions(-) diff --git a/packages/components/src/toolbar/toolbar/index.tsx b/packages/components/src/toolbar/toolbar/index.tsx index db5ced5a382a21..fabaf654f9455e 100644 --- a/packages/components/src/toolbar/toolbar/index.tsx +++ b/packages/components/src/toolbar/toolbar/index.tsx @@ -16,7 +16,18 @@ import deprecated from '@wordpress/deprecated'; import ToolbarGroup from '../toolbar-group'; import ToolbarContainer from './toolbar-container'; import type { ToolbarProps } from './types'; -import type { WordPressComponentProps } from '../../ui/context'; +import { + WordPressComponentProps, + ContextSystemProvider, +} from '../../ui/context'; + +const CONTEXT_SYSTEM_VALUE = { + DropdownMenu: { + // Note: the legacy `DropdownMenu` component is not yet reactive to this + // context variant. See https://github.com/WordPress/gutenberg/pull/51097. + variant: 'toolbar', + }, +}; function UnforwardedToolbar( { @@ -40,12 +51,14 @@ function UnforwardedToolbar( className ); return ( - + + + ); } From 6415777961f69a16502c0eb023907a16a9a0ab78 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 31 May 2023 12:26:48 +0200 Subject: [PATCH 09/12] Tweak box shadow to match the existing popover --- packages/components/src/dropdown-menu-v2/styles.ts | 8 +++----- packages/components/src/utils/config-values.js | 1 + 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/components/src/dropdown-menu-v2/styles.ts b/packages/components/src/dropdown-menu-v2/styles.ts index a5dc07003acb9e..d3ed206b5f7319 100644 --- a/packages/components/src/dropdown-menu-v2/styles.ts +++ b/packages/components/src/dropdown-menu-v2/styles.ts @@ -25,11 +25,9 @@ const ITEM_PADDING_INLINE_START = space( 2 ); const ITEM_PADDING_INLINE_END = space( 2.5 ); // TODO: should bring this into the config, and make themeable +const DEFAULT_BORDER_COLOR = COLORS.ui.borderDisabled; const TOOLBAR_VARIANT_BORDER_COLOR = COLORS.gray[ '900' ]; -const DEFAULT_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 ), -0px 0.7px 1px rgba( 0, 0, 0, 0.1 )`; +const DEFAULT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ DEFAULT_BORDER_COLOR }, ${ CONFIG.popoverShadow }`; const TOOLBAR_VARIANT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ TOOLBAR_VARIANT_BORDER_COLOR }`; const slideUpAndFade = keyframes( { @@ -255,7 +253,7 @@ export const Separator = styled( DropdownMenu.Separator )< background-color: ${ ( props ) => props.variant === 'toolbar' ? TOOLBAR_VARIANT_BORDER_COLOR - : COLORS.ui.borderDisabled }; + : DEFAULT_BORDER_COLOR }; /* Negative horizontal margin to make separator go from side to side */ margin: ${ space( 2 ) } calc( -1 * ${ CONTENT_WRAPPER_PADDING } ); `; diff --git a/packages/components/src/utils/config-values.js b/packages/components/src/utils/config-values.js index 40c15a22ec17e3..5587720573e95c 100644 --- a/packages/components/src/utils/config-values.js +++ b/packages/components/src/utils/config-values.js @@ -67,6 +67,7 @@ export default Object.assign( {}, CONTROL_PROPS, TOGGLE_GROUP_CONTROL_PROPS, { cardPaddingSmall: `${ space( 4 ) }`, cardPaddingMedium: `${ space( 4 ) } ${ space( 6 ) }`, cardPaddingLarge: `${ space( 6 ) } ${ space( 8 ) }`, + popoverShadow: `0 0.7px 1px rgba(0, 0, 0, 0.1), 0 1.2px 1.7px -0.2px rgba(0, 0, 0, 0.1), 0 2.3px 3.3px -0.5px rgba(0, 0, 0, 0.1)`, surfaceBackgroundColor: COLORS.white, surfaceBackgroundSubtleColor: '#F3F3F3', surfaceBackgroundTintColor: '#F5F5F5', From 4722d5f3e06502b33c33dc96aca79b329aff3066 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 31 May 2023 12:47:03 +0200 Subject: [PATCH 10/12] Update icon size and helper text styles in Storybook example --- packages/components/src/dropdown-menu-v2/stories/index.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/components/src/dropdown-menu-v2/stories/index.tsx b/packages/components/src/dropdown-menu-v2/stories/index.tsx index 89c0ca0c028a8a..8880acaf735096 100644 --- a/packages/components/src/dropdown-menu-v2/stories/index.tsx +++ b/packages/components/src/dropdown-menu-v2/stories/index.tsx @@ -7,6 +7,7 @@ import styled from '@emotion/styled'; /** * Internal dependencies */ +import { COLORS } from '../../utils'; import { DropdownMenu, DropdownMenuItem, @@ -74,8 +75,8 @@ const meta: ComponentMeta< typeof DropdownMenu > = { export default meta; const ItemHelpText = styled.span` - font-size: 10px; - color: #777; + font-size: 12px; + color: ${ COLORS.gray[ '700' ] }; /* "> * > &" syntax is to target only immediate parent menu item */ [data-highlighted] > * > &, @@ -145,7 +146,7 @@ Default.args = { Menu item } + prefix={ } > Menu item with prefix From a938932c191142807961576788e908a31bc14fbf Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 31 May 2023 12:49:21 +0200 Subject: [PATCH 11/12] Tweak sub menu offset --- packages/components/src/dropdown-menu-v2/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/dropdown-menu-v2/index.tsx b/packages/components/src/dropdown-menu-v2/index.tsx index 11155918635052..28d825b8934ecd 100644 --- a/packages/components/src/dropdown-menu-v2/index.tsx +++ b/packages/components/src/dropdown-menu-v2/index.tsx @@ -40,7 +40,7 @@ import type { } from './types'; // Menu content's side padding + 4px -const SUB_MENU_OFFSET_SIDE = 12; +const SUB_MENU_OFFSET_SIDE = 16; // Opposite amount of the top padding of the menu item const SUB_MENU_OFFSET_ALIGN = -8; From 0887983f16602f12fb6a7b79730cc0ebfbedf846 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 31 May 2023 14:22:29 +0200 Subject: [PATCH 12/12] add TODO comment --- packages/components/src/toolbar/toolbar/index.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/components/src/toolbar/toolbar/index.tsx b/packages/components/src/toolbar/toolbar/index.tsx index fabaf654f9455e..9c837a72aa0e83 100644 --- a/packages/components/src/toolbar/toolbar/index.tsx +++ b/packages/components/src/toolbar/toolbar/index.tsx @@ -21,6 +21,10 @@ import { ContextSystemProvider, } from '../../ui/context'; +// TODO: +// - (optional) make the legacy `DropdownMenu` read the context variable +// - swap the legacy `DropdownMenu` with the new version of the component +// once it's stable const CONTEXT_SYSTEM_VALUE = { DropdownMenu: { // Note: the legacy `DropdownMenu` component is not yet reactive to this