GradientPicker: refactor to TypeScript #48316
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
tomdevisser
added
[Type] Code Quality
chad1008
force-pushed
the
refactor/GradientPicker-typescript
branch
from
c43ea5c to
3b8ccb4
Compare
chad1008
force-pushed
the
refactor/GradientPicker-typescript
branch
from
3b8ccb4 to
82cc0fe
Compare
|
Size Change: +7 B (0%) Total Size: 1.34 MB
ℹ️ View Unchanged
|
chad1008
commented
Mar 17, 2023
| /** Start opting into the new margin-free styles that will become the default in a future version. */ | ||
| __nextHasNoMargin = false, | ||
| className, | ||
| gradients, | ||
| gradients = [], |
There was a problem hiding this comment.
gradients was previously listed as optional in the README file, but if it's omitted, the component breaks. Instead, we can default it to an empty array which shouldn't cause any problems.
chad1008
commented
Mar 17, 2023
chad1008
force-pushed
the
refactor/GradientPicker-typescript
branch
from
8af1f9e to
51085b7
Compare
chad1008
commented
Mar 17, 2023
chad1008
force-pushed
the
refactor/GradientPicker-typescript
branch
from
51085b7 to
638f840
Compare
chad1008
force-pushed
the
refactor/GradientPicker-typescript
branch
from
d446753 to
91eee49
Compare
|
Investigating test failures... |
|
Okay I see what's happening. After some testing, I think we should defer to @ciampo, I know we ran into a similar mismatch when reviewing the Proposed change:diff --git a/packages/components/src/palette-edit/types.ts b/packages/components/src/palette-edit/types.ts
index d5e0384c32..a918d1e874 100644
--- a/packages/components/src/palette-edit/types.ts
+++ b/packages/components/src/palette-edit/types.ts
@@ -7,6 +7,7 @@ import type { Key, MouseEventHandler } from 'react';
* Internal dependencies
*/
import type { HeadingSize } from '../heading/types';
+import type { GradientObject } from '../gradient-picker/types';
export type Color = {
color: string;
@@ -15,12 +16,7 @@ export type Color = {
gradient?: never;
};
-export type Gradient = {
- gradient?: string;
- name: string;
- slug: string;
- color?: never;
-};
+export type Gradient = GradientObject & { color?: never };
export type PaletteElement = Color | Gradient;
The If that works for you, I'm happy to include it in this PR, or as a separate PR that can be merged ahead of this one. |
ciampo
reviewed
Mar 20, 2023
There was a problem hiding this comment.
I know we ran into a similar mismatch when reviewing the
CustomGradientPickerchanges, and avoided altering PaletteEdit, so I wanted your feedback before pushing changes you might want to roll back.
What part of the CustomGradientPicker PR review are you referring to, in particular? I don't seem to be able to find that conversation
After some testing, I think we should defer to GradientPicker here. Passing a gradient object without a gradient string will result in a swatch that's either empty black or an ugly checkerboard, depending on selection state. Requiring the gradient value satisfies TypeScript without any side effects I can see.
This makes sense to me. A few reflections:
- would it be better, instead, to just make the
gradientprop inPaletteEditrequired, instead of importingGradientPicker's types? - alternatively, if we import
GradientPicker's type for theGradientobject, should we also importColorPalette's types for theColorobject?
That would be this comment, which you responded to inline recommending a change in
At first I was all for also importing from |
|
Thanks as always @ciampo. All current feedback should be addressed 👍 |
|
Flaky tests detected in 8b48b23. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4492358660
|
Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>
ciampo
force-pushed
the
refactor/GradientPicker-typescript
branch
from
b2be4b1 to
8b48b23
Compare
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
GradientPickercomponent to TypeScriptPart of #35744
Why?
The refactor to TypeScript has many benefits (auto-generated docs, static linting and error prevention, better IDE experience). See #35744 for more details
How?
Followed the steps in the TypeScript migration guide
Testing Instructions