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.

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

Menu: use ariakit types #68206

Open
wants to merge 4 commits into
base: trunk
Choose a base branch
from
Open

Menu: use ariakit types #68206

wants to merge 4 commits into from

Conversation

ciampo
Copy link
Contributor

@ciampo ciampo commented Dec 20, 2024

What?

Refactor Menu's types to re-use ariakit's types, and enhance prop descriptions.

Why?

  • Aligning with how other ariakit-based components declare their prop types
  • Better clarity when reading docs about Menu's props

How?

Importing and using type definitions from @ariakit/react

Next steps

  • MIgrate Menu to auto-generated README
  • move open-related props to popover component
  • consider changing default modality, and add any extra props to MenuPopoverProps (eg. portal, preventBodyScroll ...)

Testing Instructions

  • Make sure project builds without any TS error
  • Compare the generated prop types in Storybook between this PR and trunk
  • Smoke test component usages in Storybook and in the editor

Copy link

github-actions bot commented Dec 20, 2024

Flaky tests detected in bfc6593.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/12455409108
📝 Reported issues:

@ciampo ciampo force-pushed the feat/menu-ariakit-types branch from 9c9c85f to a6d5fc1 Compare December 20, 2024 17:51
@ciampo ciampo force-pushed the feat/menu-ariakit-types branch from a6d5fc1 to bfc6593 Compare December 22, 2024 15:14
* @ignore
*/
store?: Ariakit.MenuItemProps[ 'store' ];
}

export interface MenuCheckboxItemProps
extends Omit< MenuItemProps, 'prefix' | 'hideOnClick' > {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed the extends syntax so that each component uses the correct ariakit types (ie. Menu.Item uses Ariakit.MenuItemProps, Menu.CheckboxItem uses Ariakit.MenuItemCheckboxProps, and Menu.RadioItem uses Ariakit.MenuItemRadioProps

*
* @default false
*/
hideOnClick?: boolean;
disabled?: Ariakit.MenuItemRadioProps[ 'disabled' ];
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added an explicit false value for the disabled prop — this is also reflected in the code when destructuring props

@ciampo ciampo requested a review from a team December 22, 2024 15:17
@ciampo ciampo self-assigned this Dec 22, 2024
@ciampo ciampo added [Type] Code Quality Issues or PRs that relate to code quality [Package] Components /packages/components labels Dec 22, 2024
@ciampo ciampo marked this pull request as ready for review December 22, 2024 15:17
@ciampo ciampo requested a review from ajitbohra as a code owner December 22, 2024 15:17
Copy link

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: ciampo <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] Components /packages/components [Type] Code Quality Issues or PRs that relate to code quality
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant