-
Notifications
You must be signed in to change notification settings - Fork 204
feat(combobox): adding new s2 migration #3683
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from 1 commit
ff02395
2949dc4
d541906
75ce502
428d391
93117b2
fb54e14
15fa122
2488a03
acd4c20
5c273ba
055803f
edebd14
611b313
d2b3cab
fd0d9b6
e009840
00e7311
844b4dd
bbc25f0
fb00afc
3ffa66d
0019491
e055d9d
976e3c2
85e0bf2
0e31748
65f0b55
f93eedb
f30be07
3303ba3
2e9ccb3
cfd51d2
817d5cf
558bf00
8befe00
f23e502
1e0aa2e
53f352d
b2874ad
f443181
bfad7aa
3daface
e1bf05b
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
- Loading branch information
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -175,34 +175,13 @@ | |
} | ||
} | ||
|
||
@media (forced-colors: active) { | ||
.spectrum-Combobox { | ||
--highcontrast-combobox-border-color-highlight: Highlight; | ||
--highcontrast-combobox-border-color-invalid: Highlight; | ||
--highcontrast-combobox-background-color-default: Canvas; | ||
--highcontrast-combobox-readonly-border-color: CanvasText; | ||
|
||
.spectrum-Combobox-button.spectrum-PickerButton--quiet { | ||
.spectrum-PickerButton-fill { | ||
forced-color-adjust: none; | ||
} | ||
|
||
.spectrum-PickerButton-icon { | ||
/* Should match foreground color of the Textfield. */ | ||
color: CanvasText; | ||
} | ||
} | ||
} | ||
} | ||
|
||
.spectrum-Combobox { | ||
position: relative; | ||
display: inline-flex; | ||
display: inline-grid; | ||
flex-flow: row nowrap; | ||
|
||
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. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Here's another thing about combobox that I'm wondering about that I sort of touched on in another comment: Should the ![]() ![]() There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @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. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @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 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think the 50% min sizing helps (textfield also has its own similar min sizing calc on the input, which helps here too) and that does match the way they're doing it in the Desktop Figma side label variants I see there, but the way I understood that I only see one instance where that's violated: XL(mobile), where the component height is 60px, so the min-width should be 60 * 2.5 = 150px but the component is just a few px shy of meeting that min-width. |
||
block-size: var(--mod-combobox-block-size, var(--spectrum-combobox-block-size)); | ||
margin-block-start: var(--mod-combobox-spacing-label-to-combobox, var(--spectrum-combobox-spacing-label-to-combobox)); | ||
|
||
border-radius: var(--mod-combobox-border-radius, var(--spectrum-combobox-border-radius)); | ||
aramos-adobe marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
@@ -329,10 +308,9 @@ | |
} | ||
} | ||
|
||
/* TEXTFIELD (wrapper) */ | ||
.spectrum-Combobox-textfield { | ||
inline-size: 100%; | ||
display: inline-flex; | ||
.spectrum-Combobox-content { | ||
display: flex; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The only potential issue I see here is if we have a longer word that doesn't break, not only is the button moving from its original position on the right side but the input seems smaller than what we'd want for the min-width: The previous combobox looks like it also breaks with a long label, but in a different way. This could definitely be a follow-up ticket if there doesn't seem to be a simple fix for this! |
||
block-size: var(--mod-combobox-block-size, var(--spectrum-combobox-block-size)); | ||
} | ||
|
||
/* TEXT INPUT */ | ||
|
@@ -403,10 +381,24 @@ | |
} | ||
} | ||
|
||
&:not(&--left).spectrum-Combobox-label { | ||
display: flex; | ||
align-items: center; | ||
justify-content: space-between; | ||
.spectrum-Combobox--sideLabel { | ||
.spectrum-Combobox-textfield { | ||
inline-size: auto; | ||
aramos-adobe marked this conversation as resolved.
Show resolved
Hide resolved
|
||
} | ||
.spectrum-Combobox-label { | ||
grid-row: 1 / span 2; | ||
grid-column: 1 / span 1; | ||
} | ||
|
||
.spectrum-Combobox-content { | ||
grid-row: 1 / span 1; | ||
grid-column: 2 / span 1; | ||
} | ||
|
||
.spectrum-Combobox-helptext { | ||
grid-row: 2 / span 1; | ||
grid-column: 2 / span 1; | ||
} | ||
} | ||
|
||
/* VALIDATION ICON */ | ||
|
@@ -427,3 +419,23 @@ | |
display: none; | ||
} | ||
} | ||
|
||
@media (forced-colors: active) { | ||
.spectrum-Combobox { | ||
--highcontrast-combobox-border-color-highlight: Highlight; | ||
--highcontrast-combobox-border-color-invalid: Highlight; | ||
--highcontrast-combobox-background-color-default: Canvas; | ||
--highcontrast-combobox-readonly-border-color: CanvasText; | ||
|
||
.spectrum-Combobox-button.spectrum-PickerButton--quiet { | ||
.spectrum-PickerButton-fill { | ||
forced-color-adjust: none; | ||
} | ||
|
||
.spectrum-PickerButton-icon { | ||
/* Should match foreground color of the Textfield. */ | ||
color: CanvasText; | ||
} | ||
} | ||
} | ||
} |
Uh oh!
There was an error while loading. Please reload this page.