Follow ariakit best practices #54696
Merged
Conversation
This file contains 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
ciampo
added
[Type] Enhancement
ciampo
commented
Sep 21, 2023
packages/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx
Outdated
Show resolved
Hide resolved
brookewp
reviewed
Sep 21, 2023
| @@ -3,7 +3,7 @@ | |||
| */ | |||
| import type { ForwardedRef } from 'react'; | |||
| // eslint-disable-next-line no-restricted-imports | |||
There was a problem hiding this comment.
We should be able to remove this ESlint comment?
There was a problem hiding this comment.
Good observation! Actually that comment is correct, because we normally folks shouldn't be able to import directly from ariakit (they should use the library through the @wordpress/components package) — or at least, this was the deal with reakit, and I believe that at least for now, we should apply to ariakit too.
I went ahead and updated the ESLint config to disallow ariakit imports, and consequently added more "disable" comments where needed in the components package.
brookewp
reviewed
Sep 21, 2023
packages/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx
Show resolved
Hide resolved
ciampo
force-pushed
the
refactor/ariakit-best-practices
branch
from
9406f6a to
78bd548
Compare
|
Size Change: +5 B (0%) Total Size: 1.62 MB
ℹ️ View Unchanged
|
diegohaz
approved these changes
Sep 22, 2023
There was a problem hiding this comment.
This looks good to me 👍🏽
I'll just mention that, in terms of bundling for production, there's no difference between the various methods of importing Ariakit. All of these are equivalent:
import * as Ariakit from "@ariakit/react";
import { Checkbox } from "@ariakit/react";
import * as Ariakit from "@ariakit/react/checkbox";
import { Checkbox } from "@ariakit/react/checkbox";In fact, Checkbox and Ariakit.Checkbox will be identical in all these instances (Checkbox === Ariakit.Checkbox). Therefore, the style you choose doesn't really matter in this situation.
Except for: the namespace import offers the benefit of name scoping, and importing from a specific path (@ariakit/react/checkbox) might potentially be faster during development. But I haven't verified this yet, and even if it's true, I expect the difference to be negligible.
bph
added
the
[Focus] Accessibility (a11y)
|
Warning: Type of PR label error To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.
Read more about Type labels in Gutenberg. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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?
Refactor the code to follow ariakit best practices
Why?
We should aim at using third-party dependencies the way they are intended.
While working on #54612 I stumbled upon some console warning — this PR aims at fixing them so that when we upgrade to a more recent version of ariakit, those warnings will be gone.
How?
renderprop instead of theasprop (which has been deprecated in one of the latest release) (docs)import * as Ariakit from '@ariakit/react'statement for all imports, instead of importing the specific sub-folder (docs)Testing Instructions
No changes are expected at runtime, all affected components should continue to work as previously.
All tests keep passing.