feat(combobox): adding new s2 migration #3683
Conversation
🦋 Changeset detectedLatest commit: cfd51d2 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
There was a problem hiding this comment.
Remaining comments which cannot be posted as a review comment to avoid GitHub Rate Limit
markdownlint-fix
[markdownlint-fix] reported by reviewdog 🐶
spectrum-css/components/checkbox/dist/metadata.json
Lines 195 to 197 in a986db0
[markdownlint-fix] reported by reviewdog 🐶
[markdownlint-fix] reported by reviewdog 🐶
spectrum-css/components/checkbox/dist/metadata.json
Lines 202 to 205 in a986db0
[markdownlint-fix] reported by reviewdog 🐶
[markdownlint-fix] reported by reviewdog 🐶
[markdownlint-fix] reported by reviewdog 🐶
File metricsSummaryTotal size: 1.40 MB*
File change detailscombobox
helptext
* An ASCII character in UTF-8 is 8 bits or 1 byte. |
|
🚀 Deployed on https://pr-3683--spectrum-css.netlify.app |
a986db0 to
ff02395
Compare
7e8269c to
4ce8d19
Compare
…hub.com/adobe/spectrum-css into aramos-adobe/css769-combox-s2-migration
There was a problem hiding this comment.
This is an excellent start! I left several comments in the code, but here are some other considerations that didn't fit:
- I did notice that there were autocomplete colors in the design spec, even though we can't (or shouldn't) implement any autocomplete functionality here, we probably should make sure we have the autocomplete styles in here, even if just with a selector like
.spectrum-Combobox-input[autocomplete]. It looks like the textfield template has an autocomplete attribute that can be placed on the textfield input, so we could probably pass that arg to textfield from combobox once it's set up, and also wire up a Storybook control for it. - I think there might be a tiny design bug in the block spacing for the progress circle, I'll Slack you so that I can send screenshots and explain. This wasn't a part of the code you touched. (In fact there were several things I called out here that aren't related to changes you made but seemed like they've been wrong for awhile.)
- Last thing: I saw this interaction error in Storybook, I don't think it's a huge issue, could be a follow up ticket if anything? (There is a
role="presentation"so I'm not sure what it's complaining about)
There was a problem hiding this comment.
This is looking great! I don't have access to the Figma Token Spec to give this a full review yet but I did just have a couple questions for myself. I also had my build fail in my PR after I rebased with the main spectrum-two branch. It looks it was missing a few metadata.json files.
|
|
||
| ### New mods | ||
|
|
||
| `--mod-combobox-line-height-cjk` |
There was a problem hiding this comment.
This question is for future me, @castastrophe had mentioned to me that we were discontinuing use of mods. Are certain there scenarios like this that we will continue to support them?
There was a problem hiding this comment.
@saashapina @castastrophe I'm not entirely sure - I think that might be a web component related thing. But mods are still helpful for passthroughs between each component.
| fieldLabelText: "Select location", | ||
| value: "Ballard", | ||
| }; | ||
| Default.args = {}; |
There was a problem hiding this comment.
Also a question for my future reference, do we still need to define an empty object here if there are no args?
There was a problem hiding this comment.
@saashapina I don't need this at all actually! I can remove it
…hub.com/adobe/spectrum-css into aramos-adobe/css769-combox-s2-migration
| isDisabled, | ||
| isReadOnly, | ||
| value, | ||
| ...args, | ||
| ...passthrough, | ||
| }, context), | ||
| content, | ||
| popoverWidth: size === "s" ? 140 : size === "l" ? 191 : size === "xl" ? 192 : 166, // default value is "m" |
There was a problem hiding this comment.
I think it's valid that you're removing this but I looked into this for a bit and I'm having a hard time understanding why it was here to begin with. It looks like popoverWidth is used to control the width of the popover and align it with the popover width, but only if it's in certain popover positions. I would have thought it'd control the popover's width in combobox, but it seems like the popover position is such that it doesn't need the width (seems like we only use it in bottom-start position, which doesn't look at the width).
| autocomplete: { | ||
| table: { | ||
| disable: true, | ||
| }, |
There was a problem hiding this comment.
Is there a way to access autocomplete styles?
There was a problem hiding this comment.
Even with &:autofill selector added the styles won't change.
| } | ||
| } | ||
|
|
||
| .spectrum-Combobox { | ||
| position: relative; | ||
| display: inline-flex; | ||
| flex-flow: row nowrap; | ||
| display: inline-grid; | ||
|
|
||
| inline-size: var(--mod-combobox-inline-size, var(--spectrum-combobox-inline-size)); | ||
| min-inline-size: var(--mod-combobox-min-inline-size, var(--spectrum-combobox-min-inline-size)); |
There was a problem hiding this comment.
Here's another thing about combobox that I'm wondering about that I sort of touched on in another comment: Should the min-inline-size be set on .spectrum-Combobox or on .spectrum-Combobox-input? When we have a side label the input tends to shrink a lot, in this case it's about 78.5px. Since the minimum width token is a multiplier (2.5 * the height, which is 32px), it looks like for this particular size the combobox should be a minimum of 80px. Which it is, if we're talking about the field label + input width, but the input is smaller. I know this is how it was before, but was that what was intended?
There was a problem hiding this comment.
@rise-erpelding Looking at the component a little closer in Figma, it looks like side label and the input are half of the combobox in width.
There was a problem hiding this comment.
@aramos-adobe I placed a min inline size of 50% for both label and the content (parent containing the inputs). I have seen any weird movements yet in the button. I did place a position: relative on the .spectrum-Combobox-content to keep the button at the end of it.
| } | ||
|
|
||
| /* TEXT INPUT */ | ||
| .spectrum-Combobox-input { | ||
| padding-block-start: calc(var(--mod-combobox-spacing-block-start-edge-to-text, var(--spectrum-combobox-spacing-block-start-edge-to-text)) - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width))); | ||
| padding-block-end: calc(var(--mod-combobox-spacing-block-end-edge-to-text, var(--spectrum-combobox-spacing-block-end-edge-to-text)) - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width))); | ||
| background-color: var(--highcontrast-combobox-background-color-default, var(--mod-combobox-textfield-background-color, var(--spectrum-combobox-background-color-default))); | ||
| padding-inline-start: calc(var(--mod-combobox-spacing-inline-start-edge-to-text, var(--spectrum-combobox-spacing-inline-start-edge-to-text)) - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width))); |
There was a problem hiding this comment.
Is there a reason why we subtract the border-width here? It looks like inline edge to start should start at the inside of the border instead of outside of it.
Firefox
| } | ||
|
|
||
| const popoverHeight = size === "s" ? 106 : size === "l" ? 170 : size === "xl" ? 229 : 142; // default value is "m" | ||
| const adjustedPopoverHeight = showFieldLabel ? popoverHeight : popoverHeight + 32; // Subtract label height when no label | ||
|
|
There was a problem hiding this comment.
I also noticed on the invalid tests when the combobox is expanded on size small there is a little bit of overlap with the fields below it, I'm not sure if its related to these changes or if this was an existing bug.
Medium
Large
Combobox S2 Migration
The new combo box is coming in with more pronounced corner radius, thicker outline, and the use of the infield button nested inside. The quiet styling has also been deprecated.
New tokens
--spectrum-combobox-font-weight--spectrum-combobox-line-height-cjk--spectrum-combobox-spacing-alert-icon-to-text--spectrum-combobox-spacing-to-help-textNew mods
--mod-combobox-line-height-cjk--mod-combobox-popover-animation-distance--mod-combobox-spacing-alert-icon-to-text--mod-combobox-spacing-to-help-text--mod-combobox-textfield-background-colorHow and where has this been tested?
Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.
Validation steps
Regression testing
Validate:
Screenshots
S1
S2
To-do list