feat(colorslider): S2 migration #3424
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| --- | ||
| "@spectrum-css/colorslider": minor | ||
| --- | ||
|
|
||
| # S2 colorslider migration | ||
|
|
||
| This migrates the `colorslider` component to S2. Custom properties have been remapped per the design spec. | ||
|
|
||
| | Before | After | | ||
| | ------------------------- | -------------------------- | | ||
| | `--spectrum-gray-900-rgb` | `--spectrum-gray-1000-rgb` | |
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -19,18 +19,20 @@ export default { | |
| component: "ColorSlider", | ||
| argTypes: { | ||
| colorHandleStyle: { table: { disable: true } }, | ||
| isDisabled, | ||
| isFocused: { | ||
| ...isFocused, | ||
| if: { arg: "isDisabled", truthy: false }, | ||
| }, | ||
| color: { | ||
cdransf marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| name: "Color", | ||
| description: | ||
| "Supports standard color input or any valid input for the <code>background</code> property such as, <code>linear-gradient(red, blue)</code>.", | ||
| type: { name: "string", required: true }, | ||
| table: { | ||
| type: { summary: "string" }, | ||
| }, | ||
| control: "color", | ||
| }, | ||
| selectedColor: { | ||
| name: "Selected color", | ||
|
|
@@ -40,12 +42,19 @@ export default { | |
| control: "color", | ||
| }, | ||
| gradientType: { | ||
| name: "Color type", | ||
| description: | ||
| "The color can be defined in the markup using CSS or with an image.", | ||
| options: ["color", "image"], | ||
| control: { type: "select" }, | ||
| table: { disable: true }, | ||
| }, | ||
| vertical: { | ||
| name: "Vertical", | ||
| description: "The orientation of the component.", | ||
| type: { name: "boolean" }, | ||
| control: "boolean", | ||
| }, | ||
|
Comment on lines
+52
to
+57
There was a problem hiding this comment. Ooof, I'm still seeing that funny gradient when the vertical control is used: I don't have ideas off the top of my head on how we handle this, since it would need to be one gradient for horizontal and another for vertical... although I'm sure we've run into a similar issue before... any thoughts? There was a problem hiding this comment. I talked to @jawinn about this and the thinking at the time was that, since we've moved the color control to a string that the onus would then be on the user to change that direction. We could couple the two, I can investigate that a bit more and see what we'd need to do it. 😃 There was a problem hiding this comment. I think that's fine. We could add a little blurb in the Color control description about the gradient direction, maybe saying that the direction would need to be changed for the vertical variant. Not sure I feel strongly about that though, so I'll leave that up to you! |
||
| }, | ||
| args: { | ||
| rootClass: "spectrum-ColorSlider", | ||
|
|
@@ -70,8 +79,8 @@ export default { | |
| */ | ||
| export const Default = ColorSliderGroup.bind({}); | ||
| Default.args = { | ||
| color: | ||
| "linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)", | ||
| }; | ||
|
|
||
| // ********* VRT ONLY ********* // | ||
|
|
@@ -81,7 +90,7 @@ WithForcedColors.tags = ["!autodocs", "!dev"]; | |
| WithForcedColors.parameters = { | ||
| chromatic: { | ||
| forcedColors: "active", | ||
| modes: disableDefaultModes, | ||
| }, | ||
| }; | ||
|
|
||
|
|
@@ -92,6 +101,8 @@ WithForcedColors.parameters = { | |
| export const Vertical = Template.bind({}); | ||
| Vertical.args = { | ||
| vertical: true, | ||
| color: | ||
| "linear-gradient(to bottom, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)", | ||
| }; | ||
| Vertical.tags = ["!dev"]; | ||
| Vertical.parameters = { | ||
|
|
@@ -100,7 +111,7 @@ Vertical.parameters = { | |
|
|
||
| export const Alpha = Template.bind({}); | ||
| Alpha.args = { | ||
| color: "linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%)", | ||
| selectedColor: "rgba(0, 0, 0, 1)", | ||
| }; | ||
| Alpha.tags = ["!dev"]; | ||
|
|
||
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
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
Oops, something went wrong.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Alpha
It looks like the Alpha story is still using the
gradientStopsarg that renamed, so it's not displaying correctly:Prod:
Vertical
The Vertical story also still needs an update for its story in our docs, and the VRT tests file config. The gradient should be in the
to bottomdirection for these instances where we set the arg value, though we talked about not needing any complicated logic if someone is manually flipping the vertical control on the Default story:There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Got it! I renamed and updated that arg and updated the gradient direction in the tests you highlighted. ✨