2021-01-26 Meeting notes

10

Dropdown

@Eugene Kang

Dropdown Paragon Design System

• Dropdown toggle utilizes the Button

  • Tertiary buttons may not be as obvious of a click target for a dropdown toggle

• What happens if text in dropdown items gets too long?

  • Truncation with ellipsis at overflow point? Is a tooltip needed in this case then?

  • Maybe just support wrapping and/or fix the text in the menu vs solving for poor usage?

  • @Adam Butterworth (Deactivated) to file follow-up ticket

• Dropdown trigger should handle IconButtons as well, but we should ensure we use an appropriate icon that indicates its an expandable click target

• a11y focus management

  • @Jeff Witt (Deactivated) to check on focus behavior between deprecated dropdown vs. current dropdown

5

Badge

Adam for @Jon F

Badge Paragon Design System

• If the badge contains a clickable icon (e.g., an “X” for multi-select), what is the click target - the whole badge vs. just the clickable icon

  • Slight preference for entire click badge as click target for usability.

• What is the right name for this?

  • Badge vs. chip vs. tags vs. ???

• If there’s a badge with only an icon, is the click target large enough?

  • We think there is!

• Colors look nice!

  • Are there any variants / updates needed to support badges on a dark background?

5

ProgressBar

@Adam Butterworth (Deactivated)

ProgressBar Design System Workspace

• Ignored stacked ProgressBar (for now) to simplify (just not documented)

• If there’s no use case for this yet, should we remove it from the library?

  • There are some potential use cases (e.g., Programs)

  • Might be more use cases down the road

• Only style changes to existing Progressbar

  • They are now thinner

• Round progress circle might be helpful to have in Paragon one day (used on website today)

  • +1 from Ben

• For small values, does the text run off the shaded region?

  • For some contexts the unshaded region borders might need to be "visible" (3:1 contrast)

• Pulling labels outside of the bar is not currently possible in current implementation

15

Modal

Adam for @Gabriel Weinberg (Deactivated)

Modal (Alert Dialog version: Alert Modalarchived )

Want feedback on:

• error handling, if there are any strong viewpoints of other ways to do it.

  • Pattern used in Admin Portal today is to use a danger Alert at the top of the modal body.

  • Error messaging shouldn't move the action buttons around erroneously.

• Also i think a modal should always use a heading and a body i would rather require both, and write a guideline not to be repetitive or redundant when writing heading and body for alerts dialogs

  • if the heading and body are optional, we would require at least one of them, but we could run into issues where some modals have headings, some use body, some use both, so there would be an inconsistency

  • Check in with @Ange Romanska (Deactivated) for proposed use cases but likely don’t enforce that both must be there

    • Still TBD if header or body should be required if only providing one

10

Collapsible

Adam for @Kevin McGrath (Deactivated)

Collapsible Design System Workspace

• Should there be a border around the collapsible click target? Does this need to flexible?

  • If not, it might be more of a CollapsibleSection component besides Collapsible?

    • Collapsible is mainly meant for content vs. section dividers.

    • CollapsibleSection can be proposed on its own for Enterprise/dashboard needs.

• What icons best indicate collapse/expand?

  • +/- vs. chevrons?