Carbon: [Audit] Number input

Created on 27 Feb 2019 · 5Comments · Source: carbon-design-system/carbon

[ ] make hover area of the carets bigger (32px x 20px)
[ ] focus state should not change icon color:
[ ] double check tokens:
[ ] make sure background color should be $ui-01. This should fix light mobile variant's button color:
Current:

Should be:

Source

shixiedesign

All 5 comments

make hover area of the carets bigger (32px x 20px)

could you show me how this would look with the error state styles also applied? (:focus around the arrow buttons + error icon + :focus around the input field). I pushed up a draft PR so you can view what it looks like currently on the netlify link https://github.com/IBM/carbon-components/pull/1967

focus state should not change icon color

originally the focus state did not change icon color, and after further investigation it looks like a recent PR we accepted introduced this change https://github.com/IBM/carbon-components/pull/1781. I'm not sure how we are handling theming, but it looks like there is a color token conflict here

make sure background color should be $ui-01. This should fix light mobile variant's button color

it looks like the button background color was set to $ui-01 and the input field background color was $field-02, following the guidelines here. If I set both background color values to $ui-01 it looks identical to the normal variant. Is this because we are not applying themes in our test environment (which the netlify link mirrors)

the label type token change will most likely be addressed as part of the Form component audit

emyarod on 1 Mar 2019

originally the focus state did not change icon color, and after further investigation it looks like a recent PR we accepted introduced this change #1781.

Just looked at this PR with Anna, she confirmed that she didn't catch that change so it's an error. We still wanna keep the icon Gray100 on Focus. We don't have it in the system anywhere else to change icon colors. @emyarod I'm still checking on your other comments. Will get back to you shortly!

shixiedesign on 5 Mar 2019

👍1

could you show me how this would look with the error state styles also applied?

Designers all agreed to increase focus border on the carets to 2px! Unfortunately we can't do much about icon being so close to that corner...it's a temporary state so let's just leave it as is. See below image:

it looks like the button background color was set to $ui-01 and the input field background color was $field-02

Right I made a mistake with the token assignment! Sorry! Hopefully below image & table helps (pls note the changes are in teal color) :

| --- | button background | input field background |
| --- | --- | --- |
| Default desktop | NA | $field-01 |
| Light desktop | NA | $field-02 |
| Default mobile variant | $ui-01 | $field-01 |
| Light mobile variant | $ui-02 | $field-02 |