FormFileUpload: Add lint rule for 40px size prop usage #64585
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
mirka
commented
Aug 16, 2024
| { | ||
| // Falsy `__next40pxDefaultSize` without a `render` prop. | ||
| selector: | ||
| 'JSXOpeningElement[name.name="FormFileUpload"]:not(:has(JSXAttribute[name.name="__next40pxDefaultSize"][value.expression.value!=false])):not(:has(JSXAttribute[name.name="render"]))', |
There was a problem hiding this comment.
Custom rule different from the others because FormFileUpload can take a render prop.
Comment on lines
+494
to
+504
| render={ ( { openFileDialog } ) => ( | ||
| <Button | ||
| onClick={ openFileDialog } | ||
| variant="primary" | ||
| className={ clsx( | ||
| 'block-editor-media-placeholder__button', | ||
| 'block-editor-media-placeholder__upload-button' | ||
| ) } | ||
| > | ||
| { __( 'Upload' ) } | ||
| </Button> |
There was a problem hiding this comment.
I moved this to an explicit render prop, so the upsizing can be resolved along with the other Button components surrounding it.
The resulting output should remain the same. This is the render prop logic in FormFileUpload:
gutenberg/packages/components/src/form-file-upload/index.tsx
Lines 43 to 49 in 68dd5ce
An instance of MediaPlaceholder, with other buttons:
Comment on lines
+13
to
+18
| /** | ||
| * Start opting into the larger default height that will become the default size in a future version. | ||
| * | ||
| * @default false | ||
| */ | ||
| __next40pxDefaultSize?: boolean; |
There was a problem hiding this comment.
This was passed through as rest props to the underlying Button, but adding it here so it shows up explicitly in Storybook.
|
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 If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
28 tasks
|
Size Change: +8 B (0%) Total Size: 1.77 MB
ℹ️ View Unchanged
|
ciampo
approved these changes
Aug 17, 2024
Will be done when we start logging deprecation warnings 👍 |
bph
pushed a commit
to bph/gutenberg
that referenced
this pull request
Aug 31, 2024
* FormFileUpload: Document `__next40pxDefaultSize` prop * Switch to explicit Button in MediaPlaceholder * Add lint rule Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: ciampo <mciampini@git.wordpress.org>
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.
Part of #63871
What?
Add a lint rule to prevent people from introducing new usages of FormFileUpload that do not adhere to the new default size.
Testing Instructions
The lint error should trigger for violations as expected.