2021-01-19 Meeting notes

10

Eugene Kang

Re-review of fills

• Check that we need Warning border. if so make sure it is 3:1 contrast

• Warning icon colorN

No comments or concerns. Good as defined now.

10

Bronwyn Hawkins (Deactivated)

Popovers and tooltips

Lael: how are these different from what exists?

Semantic colors are what’s new
LB: Seems like these can be a variant of the current Popover

Ange: let’s update example text to match microcopy guide (sentence case

Tooltip:

Adam: let’s clarify color usage (dark or light)

Ange: we need the 4 positions

Jeff: onclick vs on hover? Do tooltips allow links? – No it’s only text. Jeff/Marco: Add description for usage. Popovers okay for links inside, and tooltips not. Generally you don’t put interactive things inside stuff that only opens on hover.

Ange: what about character count and wrapping. – Bronwyn: we’ll add a max width. Popovers (480), Tooltips (300). Bronwyn will add size guidelines.
AB/MM: Let it wrap even if it looks terrible, because we’re not always in control of the string

• Discuss Help Text component

10

Bronwyn Hawkins (Deactivated)

Checkboxes and radio buttons

Jeff: wcag requirement for size is going down to 26px in case that changes your design

Lael: Disabled contrast, looks hard too see. - AB: this doesn’t have to meet standards because it’s disabled

Ange: what about animation?
AB: I think I don’t want us to spend time on things that are not critical/contributing to productivity? The question is then, when do we add this? But I think now might not be a good time.
JW: indeterminate, do we need this? – LB: we use it in Tables right now.

10

Bronwyn Hawkins (Deactivated)

Search field
Mashup of two components we have already, replaced with icon if you don’t use a button

Is there a clear button for search fields with content entered in them? (Consensus: let’s add this)

10

Adam Butterworth (Deactivated)

Breadcrumbs Breadcrumbs
This is work that Hillary did.
Use the muted version of our link for standalone link
Update to chevron everywhere

AS: On a technical note, let’s be sure it’s compatible with React-Router