Skip to content

Commit

Permalink
Rename subcomponents to get their JSDocs picked up by README generator
Browse files Browse the repository at this point in the history
  • Loading branch information
ciampo committed Dec 23, 2024
1 parent d60966a commit 93215f7
Show file tree
Hide file tree
Showing 17 changed files with 218 additions and 179 deletions.
51 changes: 51 additions & 0 deletions packages/components/src/menu/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,9 @@ The placement of the menu popover.

### Menu.TriggerButton

Renders a menu button that toggles the visibility of a sibling
`Menu.Popover` component when clicked or when using arrow keys.

#### Props

##### `accessibleWhenDisabled`
Expand Down Expand Up @@ -125,6 +128,14 @@ merged.

### Menu.Popover

Renders a dropdown menu element that's controlled by a sibling
`Menu.TriggerButton` component. It renders a popover and automatically
focuses on items when the menu is shown.

The only valid children of `Menu.Popover` are `Menu.Item`,
`Menu.RadioItem`, `Menu.CheckboxItem`, `Menu.Group`, `Menu.Separator`,
and `Menu` (for nested dropdown menus).

#### Props

##### `children`
Expand Down Expand Up @@ -185,6 +196,11 @@ negative values to make the popover shift to the opposite side.

### Menu.Item

Renders a menu item inside the `Menu.Popover` or `Menu.Group` components.

It can optionally contain one instance of the `Menu.ItemLabel` component
and one instance of the `Menu.ItemHelpText` component.

#### Props

##### `children`
Expand Down Expand Up @@ -244,6 +260,12 @@ The contents of the menu item's suffix, such as a keyboard shortcut.

### Menu.RadioItem

Renders a radio menu item inside the `Menu.Popover` or `Menu.Group`
components.

It can optionally contain one instance of the `Menu.ItemLabel` component
and one instance of the `Menu.ItemHelpText` component.

#### Props

##### `children`
Expand Down Expand Up @@ -336,6 +358,12 @@ The radio item's value.

### Menu.CheckboxItem

Renders a checkbox menu item inside the `Menu.Popover` or `Menu.Group`
components.

It can optionally contain one instance of the `Menu.ItemLabel` component
and one instance of the `Menu.ItemHelpText` component.

#### Props

##### `children`
Expand Down Expand Up @@ -429,6 +457,9 @@ associated to the same `name`.

### Menu.ItemLabel

Renders a menu item's label text. It should be wrapped with `Menu.Item`,
`Menu.RadioItem`, or `Menu.CheckboxItem`.

#### Props

##### `as`
Expand All @@ -440,6 +471,9 @@ The HTML element or React component to render the component as.

### Menu.ItemHelpText

Renders a menu item's help text. It should be wrapped with `Menu.Item`,
`Menu.RadioItem`, or `Menu.CheckboxItem`.

#### Props

##### `as`
Expand All @@ -451,6 +485,11 @@ The HTML element or React component to render the component as.

### Menu.Group

Renders a group for menu items.

It should contain one instance of `Menu.GroupLabel` and one or more
instances of `Menu.Item`, `Menu.RadioItem`, or `Menu.CheckboxItem`.

#### Props

##### `children`
Expand All @@ -464,6 +503,11 @@ The contents of the menu group, which should include one instance of the

### Menu.GroupLabel

Renders a label in a menu group.

This component should be wrapped with `Menu.Group` so the
`aria-labelledby` is correctly set on the group element.

#### Props

##### `children`
Expand All @@ -476,10 +520,17 @@ label for the menu group.

### Menu.Separator

Renders a divider between menu items or menu groups.

#### Props

### Menu.SubmenuTriggerItem

Renders a menu item that toggles the visibility of a sibling
`Menu.Popover` component when clicked or when using arrow keys.

This component is used to create a nested dropdown menu.

#### Props

##### `children`
Expand Down
24 changes: 12 additions & 12 deletions packages/components/src/menu/checkbox-item.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,18 @@ import { Icon, check } from '@wordpress/icons';
* Internal dependencies
*/
import type { WordPressComponentProps } from '../context';
import { MenuContext } from './context';
import type { MenuCheckboxItemProps } from './types';
import { Context } from './context';
import type { CheckboxItemProps } from './types';
import * as Styled from './styles';

export const MenuCheckboxItem = forwardRef<
export const CheckboxItem = forwardRef<
HTMLDivElement,
WordPressComponentProps< MenuCheckboxItemProps, 'div', false >
>( function MenuCheckboxItem(
WordPressComponentProps< CheckboxItemProps, 'div', false >
>( function CheckboxItem(
{ suffix, children, disabled = false, hideOnClick = false, ...props },
ref
) {
const menuContext = useContext( MenuContext );
const menuContext = useContext( Context );

if ( ! menuContext?.store ) {
throw new Error(
Expand All @@ -33,7 +33,7 @@ export const MenuCheckboxItem = forwardRef<
}

return (
<Styled.MenuCheckboxItem
<Styled.CheckboxItem
ref={ ref }
{ ...props }
accessibleWhenDisabled
Expand All @@ -50,17 +50,17 @@ export const MenuCheckboxItem = forwardRef<
<Icon icon={ check } size={ 24 } />
</Ariakit.MenuItemCheck>

<Styled.MenuItemContentWrapper>
<Styled.MenuItemChildrenWrapper>
<Styled.ItemContentWrapper>
<Styled.ItemChildrenWrapper>
{ children }
</Styled.MenuItemChildrenWrapper>
</Styled.ItemChildrenWrapper>

{ suffix && (
<Styled.ItemSuffixWrapper>
{ suffix }
</Styled.ItemSuffixWrapper>
) }
</Styled.MenuItemContentWrapper>
</Styled.MenuCheckboxItem>
</Styled.ItemContentWrapper>
</Styled.CheckboxItem>
);
} );
6 changes: 2 additions & 4 deletions packages/components/src/menu/context.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,6 @@ import { createContext } from '@wordpress/element';
/**
* Internal dependencies
*/
import type { MenuContext as MenuContextType } from './types';
import type { ContextProps } from './types';

export const MenuContext = createContext< MenuContextType | undefined >(
undefined
);
export const Context = createContext< ContextProps | undefined >( undefined );
22 changes: 11 additions & 11 deletions packages/components/src/menu/docs-manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,57 +4,57 @@
"filePath": "./index.tsx",
"subcomponents": [
{
"displayName": "MenuTriggerButton",
"displayName": "TriggerButton",
"preferredDisplayName": "Menu.TriggerButton",
"filePath": "./trigger-button.tsx"
},
{
"displayName": "MenuPopover",
"displayName": "Popover",
"preferredDisplayName": "Menu.Popover",
"filePath": "./popover.tsx"
},
{
"displayName": "MenuItem",
"displayName": "Item",
"preferredDisplayName": "Menu.Item",
"filePath": "./item.tsx"
},
{
"displayName": "MenuRadioItem",
"displayName": "RadioItem",
"preferredDisplayName": "Menu.RadioItem",
"filePath": "./radio-item.tsx"
},
{
"displayName": "MenuCheckboxItem",
"displayName": "CheckboxItem",
"preferredDisplayName": "Menu.CheckboxItem",
"filePath": "./checkbox-item.tsx"
},
{
"displayName": "MenuItemLabel",
"displayName": "ItemLabel",
"preferredDisplayName": "Menu.ItemLabel",
"filePath": "./item-label.tsx"
},
{
"displayName": "MenuItemHelpText",
"displayName": "ItemHelpText",
"preferredDisplayName": "Menu.ItemHelpText",
"filePath": "./item-help-text.tsx"
},
{
"displayName": "MenuGroup",
"displayName": "Group",
"preferredDisplayName": "Menu.Group",
"filePath": "./group.tsx"
},
{
"displayName": "MenuGroupLabel",
"displayName": "GroupLabel",
"preferredDisplayName": "Menu.GroupLabel",
"filePath": "./group-label.tsx"
},
{
"displayName": "MenuSeparator",
"displayName": "Separator",
"preferredDisplayName": "Menu.Separator",
"filePath": "./separator.tsx"
},
{
"displayName": "MenuSubmenuTriggerItem",
"displayName": "SubmenuTriggerItem",
"preferredDisplayName": "Menu.SubmenuTriggerItem",
"filePath": "./submenu-trigger-item.tsx"
}
Expand Down
14 changes: 7 additions & 7 deletions packages/components/src/menu/group-label.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,16 @@ import { forwardRef, useContext } from '@wordpress/element';
* Internal dependencies
*/
import type { WordPressComponentProps } from '../context';
import { MenuContext } from './context';
import { Context } from './context';
import { Text } from '../text';
import type { MenuGroupLabelProps } from './types';
import type { GroupLabelProps } from './types';
import * as Styled from './styles';

export const MenuGroupLabel = forwardRef<
export const GroupLabel = forwardRef<
HTMLDivElement,
WordPressComponentProps< MenuGroupLabelProps, 'div', false >
>( function MenuGroup( props, ref ) {
const menuContext = useContext( MenuContext );
WordPressComponentProps< GroupLabelProps, 'div', false >
>( function Group( props, ref ) {
const menuContext = useContext( Context );

if ( ! menuContext?.store ) {
throw new Error(
Expand All @@ -25,7 +25,7 @@ export const MenuGroupLabel = forwardRef<
}

return (
<Styled.MenuGroupLabel
<Styled.GroupLabel
ref={ ref }
render={
// @ts-expect-error The `children` prop is passed
Expand Down
18 changes: 7 additions & 11 deletions packages/components/src/menu/group.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,15 @@ import { forwardRef, useContext } from '@wordpress/element';
* Internal dependencies
*/
import type { WordPressComponentProps } from '../context';
import { MenuContext } from './context';
import type { MenuGroupProps } from './types';
import { Context } from './context';
import type { GroupProps } from './types';
import * as Styled from './styles';

export const MenuGroup = forwardRef<
export const Group = forwardRef<
HTMLDivElement,
WordPressComponentProps< MenuGroupProps, 'div', false >
>( function MenuGroup( props, ref ) {
const menuContext = useContext( MenuContext );
WordPressComponentProps< GroupProps, 'div', false >
>( function Group( props, ref ) {
const menuContext = useContext( Context );

if ( ! menuContext?.store ) {
throw new Error(
Expand All @@ -24,10 +24,6 @@ export const MenuGroup = forwardRef<
}

return (
<Styled.MenuGroup
ref={ ref }
{ ...props }
store={ menuContext.store }
/>
<Styled.Group ref={ ref } { ...props } store={ menuContext.store } />
);
} );
Loading

0 comments on commit 93215f7

Please sign in to comment.