[Audit] Select

variants:

• Select
• Inline

🖼 design spec (internal link): https://ibm.ent.box.com/file/329981608564

changes:

Select:

• dev: use type tokens (currently commented-out as TODO items in code)
  • label: $label-01 ✅
  • text in field: $body-short-01 ✅
• dev: verify that we’re using spacing tokens in field & label margin
• dev: disabled label text should be $disabled-02 ✅ . verify which token/hex is being used
  • helper text should be same color as label when disabled
    • helper text type token: $label-01 ✅
    • helper text color tokens: enabled = $text-02; disabled = $disabled-02 ✅
• dev: space between label & helper text is off—should be 2px
• dev: verify error icon is there (it’s not there on website)
• ~screenshot: is this overlap in the error state an issue with the component, or its display on the website?~ yes, this is expected (we currently expect devs to apply bottom margin styles to accommodate)

Inline:

• ~dev: width should always be the content width plus padding (fluid width) to match design spec. (it will get small with short content)~ de-scoped, see comment below
• dev: disabled label using wrong color/token
  • helper text should be same color as label when disabled

React

• do an additional audit pass for react

FYI @aagonzales

[emyarod]

@aagonzales @lovemecomputer thanks for the clarification, I’ve marked the PR as ready for review

[aagonzales]

will it be sized based on the currently selected option?

This one. The select field and the open menu widths should NOT be dependent on each other.