2021-01-26 Meeting notes

Date

Jan 26, 2021

Participants

  • @Adam Butterworth (Deactivated)

Goals

  • Review/Approve Dropdown

  • Review/Approve Badge

  • Review/Approve ProgressBar

  • Review and feedback for Modal, Alert Dialog

  • Review/Approve Collapse

Discussion topics

Time

Item

Presenter

Notes

Time

Item

Presenter

Notes

10

Dropdown

@Eugene Kang

Dropdown https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=6275%3A13152

  • 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 https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=6703%3A52

  • 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 https://www.figma.com/file/dJr5ixCRKlXiuA4BsKxAk3/Design-System-Workspace?node-id=2475%3A12968

  • 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

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 https://www.figma.com/file/dJr5ixCRKlXiuA4BsKxAk3/Design-System-Workspace?node-id=3000%3A151

  • 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?

Action items

Decisions