NavigableContainer: convert to TypeScript#49377
Merged
Conversation
kienstra
commented
Apr 1, 2023
kienstra
commented
Apr 1, 2023
kienstra
commented
Apr 1, 2023
kienstra
commented
Apr 1, 2023
|
Size Change: +41 B (0%) Total Size: 1.37 MB
ℹ️ View Unchanged
|
kienstra
commented
Apr 1, 2023
kienstra
commented
Apr 1, 2023
packages/components/src/navigable-container/stories/navigable-menu.tsx
Outdated
Show resolved
Hide resolved
kienstra
commented
Apr 1, 2023
packages/components/src/navigable-container/test/navigable-menu.tsx
Outdated
Show resolved
Hide resolved
|
Flaky tests detected in eb8b909. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4710317571
|
kienstra
commented
Apr 1, 2023
packages/components/src/navigable-container/test/tababble-container.tsx
Outdated
Show resolved
Hide resolved
kienstra
commented
Apr 1, 2023
kienstra
commented
Apr 1, 2023
kienstra
commented
Apr 1, 2023
kienstra
commented
Apr 1, 2023
kienstra
commented
Apr 1, 2023
Contributor
Contributor
Author
|
Hi @ciampo, |
ciampo
reviewed
Apr 5, 2023
Contributor
ciampo
left a comment
There was a problem hiding this comment.
Great work so far! This PR is already in quite a good spot :)
I've focused on reading the code so far — in the next rounds I'll take a closer look and run the code too.
| const { onlyBrowserTabstops } = this.props; | ||
| const finder = onlyBrowserTabstops ? focus.tabbable : focus.focusable; | ||
| const focusables = finder.find( this.container ); | ||
| const focusables = finder.find( this.container ) as HTMLElement[]; |
Contributor
There was a problem hiding this comment.
finder.find returns an Element[]. Not something for this PR, but it would be interesting to understand if the return type could be safely narrowed to HTMLElement[]
packages/components/src/navigable-container/stories/navigable-menu.tsx
Outdated
Show resolved
Hide resolved
packages/components/src/navigable-container/test/tababble-container.tsx
Outdated
Show resolved
Hide resolved
packages/components/src/navigable-container/test/tababble-container.tsx
Outdated
Show resolved
Hide resolved
packages/components/src/navigable-container/test/navigable-menu.tsx
Outdated
Show resolved
Hide resolved
Contributor
Author
|
@ciampo, |
ciampo
reviewed
Apr 15, 2023
Contributor
ciampo
left a comment
There was a problem hiding this comment.
We still need to tweak the Storybook settings:
- probably disable
childrencontrols - remove other unnecessary controls, since the same info can be inferred from the TypeScript types
- add
parametersto enable controls and docs
Proposed diff
diff --git a/packages/components/src/navigable-container/stories/navigable-menu.tsx b/packages/components/src/navigable-container/stories/navigable-menu.tsx
index 0c433e01fd..5f8ee2e4e5 100644
--- a/packages/components/src/navigable-container/stories/navigable-menu.tsx
+++ b/packages/components/src/navigable-container/stories/navigable-menu.tsx
@@ -13,11 +13,13 @@ const meta: ComponentMeta< typeof NavigableMenu > = {
component: NavigableMenu,
argTypes: {
children: { control: { type: null } },
- onNavigate: { action: 'onNavigate' },
- orientation: {
- options: [ 'horizontal', 'vertical' ],
- control: { type: 'radio' },
+ },
+ parameters: {
+ actions: { argTypesRegex: '^on.*' },
+ controls: {
+ expanded: true,
},
+ docs: { source: { state: 'open' } },
},
};
export default meta;
diff --git a/packages/components/src/navigable-container/stories/tabbable-container.tsx b/packages/components/src/navigable-container/stories/tabbable-container.tsx
index 8b9221ea54..b517019e29 100644
--- a/packages/components/src/navigable-container/stories/tabbable-container.tsx
+++ b/packages/components/src/navigable-container/stories/tabbable-container.tsx
@@ -12,11 +12,14 @@ const meta: ComponentMeta< typeof TabbableContainer > = {
title: 'Components/TabbableContainer',
component: TabbableContainer,
argTypes: {
- children: { type: undefined },
- cycle: {
- type: 'boolean',
+ children: { control: { type: null } },
+ },
+ parameters: {
+ actions: { argTypesRegex: '^on.*' },
+ controls: {
+ expanded: true,
},
- onNavigate: { action: 'onNavigate' },
+ docs: { source: { state: 'open' } },
},
};
export default meta;
ciampo
reviewed
Apr 15, 2023
ciampo
reviewed
Apr 15, 2023
kienstra
added a commit
that referenced
this pull request
Apr 15, 2023
…ontainer/container.tsx Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>
…ontainer/stories/navigable-menu.tsx Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>
…ontainer/container.tsx Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>
…ontainer/container.tsx Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>
7dc3c71 to
a8b6bf5
Compare
Contributor
|
cc @chad1008 |
Contributor
Author
|
Oh all good! Thanks for your great reviews as always! |
23 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What?
Convert
NavigableContainercomponents to TypeSccriptWhy?
As part of #35744
How?
Mainly by adding types
Testing Instructions
npm run storybook:devNavigableMenuandTabbableContainerTesting Instructions for Keyboard
npm run storybook:devNavigableMenuandTabbableContainerScreenshots or screencast
See above