From ff9350cee578309f87891fb7f96d78b629d2f1ea Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Mon, 26 Aug 2024 19:04:42 +0200 Subject: [PATCH] Components: move displayName assignment to top-level files (#64793) * Update CONTRIBUTING guidelines * Update Composite component * Update DropdownMenuV2 component --- Co-authored-by: ciampo Co-authored-by: mirka <0mirka00@git.wordpress.org> --- packages/components/CONTRIBUTING.md | 19 ++++++----- .../components/src/composite/group-label.tsx | 1 - packages/components/src/composite/group.tsx | 1 - packages/components/src/composite/hover.tsx | 1 - packages/components/src/composite/index.tsx | 24 ++++++++++---- packages/components/src/composite/item.tsx | 1 - packages/components/src/composite/row.tsx | 1 - .../components/src/composite/typeahead.tsx | 1 - .../src/dropdown-menu-v2/checkbox-item.tsx | 1 - .../src/dropdown-menu-v2/context.tsx | 1 - .../components/src/dropdown-menu-v2/group.tsx | 1 - .../components/src/dropdown-menu-v2/index.tsx | 32 ++++++++++++++----- .../src/dropdown-menu-v2/item-help-text.tsx | 1 - .../src/dropdown-menu-v2/item-label.tsx | 1 - .../components/src/dropdown-menu-v2/item.tsx | 1 - .../src/dropdown-menu-v2/radio-item.tsx | 1 - .../src/dropdown-menu-v2/separator.tsx | 1 - 17 files changed, 52 insertions(+), 37 deletions(-) diff --git a/packages/components/CONTRIBUTING.md b/packages/components/CONTRIBUTING.md index 40718b3577ab94..8af8bbf801edfe 100644 --- a/packages/components/CONTRIBUTING.md +++ b/packages/components/CONTRIBUTING.md @@ -261,19 +261,18 @@ The following example implements all of the above recommendations. //======================= import { forwardRef } from '@wordpress/element'; -export const SubComponent = forwardRef( - function UnforwardedSubComponent( props, ref ) { +export const ComponentSubcomponent = forwardRef( + function UnforwardedComponentSubcomponent( props, ref ) { /* ... */ } ); -SubComponent.displayName = 'Component.SubComponent'; //======================= // context.ts //======================= import { createContext } from '@wordpress/element'; -export const Context = createContext(); +export const ComponentContext = createContext(); //======================= // hook.ts @@ -288,8 +287,8 @@ export function useComponent() { // component.tsx //======================= import { forwardRef } from '@wordpress/element'; -import { SubComponent } from './subcomponent'; -import { Context } from './context'; +import { ComponentSubcomponent } from './subcomponent'; +import { ComponentContext } from './context'; /** The top-level component's JSDoc. */ export const Component = Object.assign( @@ -298,9 +297,13 @@ export const Component = Object.assign( } ), { /** The subcomponent's JSDoc. */ - SubComponent, + Subcomponent: Object.assign(ComponentSubcomponent, { + displayName: 'Component.SubComponent';, + }), /** The context's JSDoc. */ - Context, + Context: Object.assign(ComponentContext, { + displayName: 'Component.Context' + }), } ); diff --git a/packages/components/src/composite/group-label.tsx b/packages/components/src/composite/group-label.tsx index ce3629e1d3e4b1..26d043cd0a1400 100644 --- a/packages/components/src/composite/group-label.tsx +++ b/packages/components/src/composite/group-label.tsx @@ -28,4 +28,3 @@ export const CompositeGroupLabel = forwardRef< /> ); } ); -CompositeGroupLabel.displayName = 'Composite.GroupLabel'; diff --git a/packages/components/src/composite/group.tsx b/packages/components/src/composite/group.tsx index cd908d97c2a3e2..a6b1b8b3f5254a 100644 --- a/packages/components/src/composite/group.tsx +++ b/packages/components/src/composite/group.tsx @@ -28,4 +28,3 @@ export const CompositeGroup = forwardRef< /> ); } ); -CompositeGroup.displayName = 'Composite.Group'; diff --git a/packages/components/src/composite/hover.tsx b/packages/components/src/composite/hover.tsx index 57aae1dde63c84..76a240e0767009 100644 --- a/packages/components/src/composite/hover.tsx +++ b/packages/components/src/composite/hover.tsx @@ -28,4 +28,3 @@ export const CompositeHover = forwardRef< /> ); } ); -CompositeHover.displayName = 'Composite.Hover'; diff --git a/packages/components/src/composite/index.tsx b/packages/components/src/composite/index.tsx index 1b4cc361ea4cfa..787150eb9b7146 100644 --- a/packages/components/src/composite/index.tsx +++ b/packages/components/src/composite/index.tsx @@ -93,7 +93,9 @@ export const Composite = Object.assign( * * ``` */ - Group: CompositeGroup, + Group: Object.assign( CompositeGroup, { + displayName: 'Composite.Group', + } ), /** * Renders a label in a composite group. This component must be wrapped with * `Composite.Group` so the `aria-labelledby` prop is properly set on the @@ -113,7 +115,9 @@ export const Composite = Object.assign( * * ``` */ - GroupLabel: CompositeGroupLabel, + GroupLabel: Object.assign( CompositeGroupLabel, { + displayName: 'Composite.GroupLabel', + } ), /** * Renders a composite item. * @@ -129,7 +133,7 @@ export const Composite = Object.assign( * * ``` */ - Item: CompositeItem, + Item: Object.assign( CompositeItem, { displayName: 'Composite.Item' } ), /** * Renders a composite row. Wrapping `Composite.Item` elements within * `Composite.Row` will create a two-dimensional composite widget, such as a @@ -154,7 +158,7 @@ export const Composite = Object.assign( * * ``` */ - Row: CompositeRow, + Row: Object.assign( CompositeRow, { displayName: 'Composite.Row' } ), /** * Renders an element in a composite widget that receives focus on mouse move * and loses focus to the composite base element on mouse leave. This should @@ -175,7 +179,9 @@ export const Composite = Object.assign( * * ``` */ - Hover: CompositeHover, + Hover: Object.assign( CompositeHover, { + displayName: 'Composite.Hover', + } ), /** * Renders a component that adds typeahead functionality to composite * components. Hitting printable character keys will move focus to the next @@ -192,7 +198,9 @@ export const Composite = Object.assign( * * ``` */ - Typeahead: CompositeTypeahead, + Typeahead: Object.assign( CompositeTypeahead, { + displayName: 'Composite.Typeahead', + } ), /** * The React context used by the composite components. It can be used by * to access the composite store, and to forward the context when composite @@ -207,6 +215,8 @@ export const Composite = Object.assign( * const compositeContext = useContext( Composite.Context ); * ``` */ - Context: CompositeContext, + Context: Object.assign( CompositeContext, { + displayName: 'Composite.Context', + } ), } ); diff --git a/packages/components/src/composite/item.tsx b/packages/components/src/composite/item.tsx index 634ddfbb9bf9e9..8067c222c1c97f 100644 --- a/packages/components/src/composite/item.tsx +++ b/packages/components/src/composite/item.tsx @@ -28,4 +28,3 @@ export const CompositeItem = forwardRef< /> ); } ); -CompositeItem.displayName = 'Composite.Item'; diff --git a/packages/components/src/composite/row.tsx b/packages/components/src/composite/row.tsx index eb130ce54aa85c..cbb9f80045de76 100644 --- a/packages/components/src/composite/row.tsx +++ b/packages/components/src/composite/row.tsx @@ -28,4 +28,3 @@ export const CompositeRow = forwardRef< /> ); } ); -CompositeRow.displayName = 'Composite.Row'; diff --git a/packages/components/src/composite/typeahead.tsx b/packages/components/src/composite/typeahead.tsx index 7d5a9931d19ab0..d5bb7e6e2e4cc5 100644 --- a/packages/components/src/composite/typeahead.tsx +++ b/packages/components/src/composite/typeahead.tsx @@ -28,4 +28,3 @@ export const CompositeTypeahead = forwardRef< /> ); } ); -CompositeTypeahead.displayName = 'Composite.Typeahead'; diff --git a/packages/components/src/dropdown-menu-v2/checkbox-item.tsx b/packages/components/src/dropdown-menu-v2/checkbox-item.tsx index d97859461b893f..2f0d15557bb5e5 100644 --- a/packages/components/src/dropdown-menu-v2/checkbox-item.tsx +++ b/packages/components/src/dropdown-menu-v2/checkbox-item.tsx @@ -57,4 +57,3 @@ export const DropdownMenuCheckboxItem = forwardRef< ); } ); -DropdownMenuCheckboxItem.displayName = 'DropdownMenuV2.CheckboxItem'; diff --git a/packages/components/src/dropdown-menu-v2/context.tsx b/packages/components/src/dropdown-menu-v2/context.tsx index c69fb3d30ef76f..b285843327267f 100644 --- a/packages/components/src/dropdown-menu-v2/context.tsx +++ b/packages/components/src/dropdown-menu-v2/context.tsx @@ -11,4 +11,3 @@ import type { DropdownMenuContext as DropdownMenuContextType } from './types'; export const DropdownMenuContext = createContext< DropdownMenuContextType | undefined >( undefined ); -DropdownMenuContext.displayName = 'DropdownMenuV2.Context'; diff --git a/packages/components/src/dropdown-menu-v2/group.tsx b/packages/components/src/dropdown-menu-v2/group.tsx index 806e22ca6a39a6..f2bf79015bc691 100644 --- a/packages/components/src/dropdown-menu-v2/group.tsx +++ b/packages/components/src/dropdown-menu-v2/group.tsx @@ -24,4 +24,3 @@ export const DropdownMenuGroup = forwardRef< /> ); } ); -DropdownMenuGroup.displayName = 'DropdownMenuV2.Group'; diff --git a/packages/components/src/dropdown-menu-v2/index.tsx b/packages/components/src/dropdown-menu-v2/index.tsx index 73c0890b6121e6..96d335f7b38bb9 100644 --- a/packages/components/src/dropdown-menu-v2/index.tsx +++ b/packages/components/src/dropdown-menu-v2/index.tsx @@ -200,14 +200,30 @@ const UnconnectedDropdownMenu = ( export const DropdownMenuV2 = Object.assign( contextConnect( UnconnectedDropdownMenu, 'DropdownMenu' ), { - Context: DropdownMenuContext, - Item: DropdownMenuItem, - RadioItem: DropdownMenuRadioItem, - CheckboxItem: DropdownMenuCheckboxItem, - Group: DropdownMenuGroup, - Separator: DropdownMenuSeparator, - ItemLabel: DropdownMenuItemLabel, - ItemHelpText: DropdownMenuItemHelpText, + Context: Object.assign( DropdownMenuContext, { + displayName: 'DropdownMenuV2.Context', + } ), + Item: Object.assign( DropdownMenuItem, { + displayName: 'DropdownMenuV2.Item', + } ), + RadioItem: Object.assign( DropdownMenuRadioItem, { + displayName: 'DropdownMenuV2.RadioItem', + } ), + CheckboxItem: Object.assign( DropdownMenuCheckboxItem, { + displayName: 'DropdownMenuV2.CheckboxItem', + } ), + Group: Object.assign( DropdownMenuGroup, { + displayName: 'DropdownMenuV2.Group', + } ), + Separator: Object.assign( DropdownMenuSeparator, { + displayName: 'DropdownMenuV2.Separator', + } ), + ItemLabel: Object.assign( DropdownMenuItemLabel, { + displayName: 'DropdownMenuV2.ItemLabel', + } ), + ItemHelpText: Object.assign( DropdownMenuItemHelpText, { + displayName: 'DropdownMenuV2.ItemHelpText', + } ), } ); diff --git a/packages/components/src/dropdown-menu-v2/item-help-text.tsx b/packages/components/src/dropdown-menu-v2/item-help-text.tsx index 71240db1cacfb6..0408d20dfbd40d 100644 --- a/packages/components/src/dropdown-menu-v2/item-help-text.tsx +++ b/packages/components/src/dropdown-menu-v2/item-help-text.tsx @@ -21,4 +21,3 @@ export const DropdownMenuItemHelpText = forwardRef< /> ); } ); -DropdownMenuItemHelpText.displayName = 'DropdownMenuV2.ItemHelpText'; diff --git a/packages/components/src/dropdown-menu-v2/item-label.tsx b/packages/components/src/dropdown-menu-v2/item-label.tsx index 1ba03b59ace5cd..a1f9391af2f92d 100644 --- a/packages/components/src/dropdown-menu-v2/item-label.tsx +++ b/packages/components/src/dropdown-menu-v2/item-label.tsx @@ -21,4 +21,3 @@ export const DropdownMenuItemLabel = forwardRef< /> ); } ); -DropdownMenuItemLabel.displayName = 'DropdownMenuV2.ItemLabel'; diff --git a/packages/components/src/dropdown-menu-v2/item.tsx b/packages/components/src/dropdown-menu-v2/item.tsx index 35cd747b47c259..50cf21f614dc59 100644 --- a/packages/components/src/dropdown-menu-v2/item.tsx +++ b/packages/components/src/dropdown-menu-v2/item.tsx @@ -44,4 +44,3 @@ export const DropdownMenuItem = forwardRef< ); } ); -DropdownMenuItem.displayName = 'DropdownMenuV2.Item'; diff --git a/packages/components/src/dropdown-menu-v2/radio-item.tsx b/packages/components/src/dropdown-menu-v2/radio-item.tsx index 6cfe85e149877c..c31f3ca0486398 100644 --- a/packages/components/src/dropdown-menu-v2/radio-item.tsx +++ b/packages/components/src/dropdown-menu-v2/radio-item.tsx @@ -64,4 +64,3 @@ export const DropdownMenuRadioItem = forwardRef< ); } ); -DropdownMenuRadioItem.displayName = 'DropdownMenuV2.RadioItem'; diff --git a/packages/components/src/dropdown-menu-v2/separator.tsx b/packages/components/src/dropdown-menu-v2/separator.tsx index 9bd551ea068ea5..bc5aff7ae26118 100644 --- a/packages/components/src/dropdown-menu-v2/separator.tsx +++ b/packages/components/src/dropdown-menu-v2/separator.tsx @@ -25,4 +25,3 @@ export const DropdownMenuSeparator = forwardRef< /> ); } ); -DropdownMenuSeparator.displayName = 'DropdownMenuV2.Separator';