-
Notifications
You must be signed in to change notification settings - Fork 229
fix(number-field): sp-number-field UI fixes for validation and width #5326
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 all commits
4b186c2
e712995
2110b37
07a656f
504e10b
7c9fab7
1c9768e
b7b06cf
72fda69
de04cb9
0860c6e
2c82648
93c8d56
c729f0b
0d27b13
8fc16ba
68fb75a
c5e9490
60d8375
86e9256
88f2105
60ff0ef
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
--- | ||
'@spectrum-web-components/number-field': patch | ||
'@spectrum-web-components/textfield': patch | ||
--- | ||
|
||
The changes included resolve UI issues with number-field by proxy of textfield. The validation icons in number-field no longer overlap the infield buttons. The width of the number-field now calculates accurately and can be modified via `--mod-stepper-width` token as it was before. |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -10,11 +10,38 @@ OF ANY KIND, either express or implied. See the License for the specific languag | |
governing permissions and limitations under the License. | ||
*/ | ||
|
||
@import url('@spectrum-web-components/infield-button/src/infield-button.css'); | ||
@import url('./spectrum-number-field.css'); | ||
@import url('./number-field-overrides.css'); | ||
|
||
:host { | ||
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. NIT: @caseyisonit do you want to make a note about the PR that removed this and why it is being added back in? 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. Yes! great callout! This block was removed in a fast-follow but broke the default sizing or number field along with removing the modifiable width on number-field. This is not delivered from CSS and thus needs to remain in our stylesheet. |
||
inline-size: var( | ||
--mod-stepper-width, | ||
calc( | ||
var(--mod-stepper-height, var(--spectrum-stepper-height)) * | ||
var( | ||
--mod-stepper-min-width-multiplier, | ||
var(--spectrum-text-field-minimum-width-multiplier) | ||
) + | ||
var( | ||
--mod-stepper-button-width, | ||
var(--spectrum-stepper-button-width) | ||
) + | ||
var( | ||
--mod-stepper-border-width, | ||
var(--spectrum-stepper-border-width) | ||
) * 2 | ||
) | ||
); | ||
} | ||
|
||
#textfield { | ||
inline-size: 100%; | ||
} | ||
|
||
.input { | ||
font-variant-numeric: tabular-nums; | ||
line-height: var(--spectrum-textfield-height); | ||
} | ||
|
||
:host([readonly]) .buttons { | ||
|
@@ -53,9 +80,86 @@ governing permissions and limitations under the License. | |
); | ||
} | ||
|
||
:host([invalid]:not([hide-stepper])) #textfield .icon { | ||
--mod-textfield-icon-spacing-inline-end-invalid: calc( | ||
var(--system-infield-button-top-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. wasn't sure if there was a better token to use for the width of the stepper buttons to use in the calc |
||
var(--spectrum-textfield-icon-spacing-inline-end-invalid) | ||
); | ||
} | ||
|
||
:host([valid]:not([hide-stepper])) #textfield .icon { | ||
--mod-textfield-icon-spacing-inline-end-valid: calc( | ||
var(--system-infield-button-top-width) + | ||
var(--spectrum-textfield-icon-spacing-inline-end-valid) | ||
); | ||
} | ||
|
||
:host(:not([hide-stepper])) #textfield { | ||
--mod-stepper-width: calc( | ||
var(--spectrum-stepper-height) * | ||
var( | ||
--mod-stepper-min-width-multiplier, | ||
var(--spectrum-text-field-minimum-width-multiplier) | ||
) + var(--spectrum-stepper-button-width) * 2 + | ||
var( | ||
--mod-stepper-border-width, | ||
var(--spectrum-stepper-border-width) | ||
) * 2 | ||
); | ||
} | ||
|
||
:host([invalid]) .input { | ||
padding-inline-end: calc( | ||
caseyisonit marked this conversation as resolved.
Show resolved
Hide resolved
|
||
var( | ||
--mod-textfield-icon-spacing-inline-start-valid, | ||
var(--spectrum-textfield-icon-spacing-inline-start-valid) | ||
) + | ||
var( | ||
--mod-textfield-icon-size-valid, | ||
var(--spectrum-textfield-icon-size-valid) | ||
) + | ||
var( | ||
--mod-textfield-icon-spacing-inline-end-valid, | ||
var(--spectrum-textfield-icon-spacing-inline-end-valid) | ||
) - | ||
var( | ||
--mod-textfield-border-width, | ||
var(--spectrum-textfield-border-width) | ||
caseyisonit marked this conversation as resolved.
Show resolved
Hide resolved
|
||
) | ||
); | ||
} | ||
|
||
:host([focused]:not([disabled])) #textfield:hover { | ||
--mod-stepper-buttons-border-color-focus-hover: var( | ||
--mod-stepper-border-color-focus-hover, | ||
var(--spectrum-stepper-border-color-focus-hover) | ||
); | ||
} | ||
|
||
:host([invalid]:not([hide-stepper])) #textfield .icon { | ||
--mod-textfield-icon-spacing-inline-end-invalid: calc( | ||
var(--spectrum-infield-button-width) + | ||
var(--spectrum-textfield-icon-spacing-inline-end-invalid) | ||
); | ||
} | ||
|
||
:host([valid]:not([hide-stepper])) #textfield .icon { | ||
--mod-textfield-icon-spacing-inline-end-valid: calc( | ||
var(--spectrum-infield-button-width) + | ||
var(--spectrum-textfield-icon-spacing-inline-end-valid) | ||
); | ||
} | ||
|
||
:host(:not([hide-stepper])) { | ||
--mod-stepper-width: calc( | ||
var(--spectrum-textfield-height) * | ||
var( | ||
--mod-stepper-min-width-multiplier, | ||
var(--spectrum-text-field-minimum-width-multiplier) | ||
) + var(--spectrum-infield-button-width) * 2 + | ||
var( | ||
--mod-stepper-border-width, | ||
var(--spectrum-stepper-border-width) | ||
) * 2 | ||
); | ||
} |
Uh oh!
There was an error while loading. Please reload this page.