2022-03-16 Meeting notes

 Date

Mar 16, 2022

 Participants

  • @Gabriel Weinberg

  • @Adam Stankiewicz

  • @Ben Warzeski (Deactivated)

  • @Michael Leary

  • @Jon F

  • @Jeff Witt (Deactivated)

  • @Yevhen Simonov

 Goals

  •  

 Discussion topics

Time

Item

Presenter

Notes

Time

Item

Presenter

Notes

15 min

Focus state and shadow

@Yevhen Simonov

Design notes:

  • Consistent focus states across components/elements

  • 2px border with 2px space in between

  • Dropdown items doesn’t need the 2px spacing between the outline and the element, but the target should have the outline

  • Checkbox

    • “Double focus” on unchecked checkboxes is fine for now; we’re shooting for consistency here.

  • Radio

    • “Double focus” on unchecked checkboxes is fine for now; we’re shooting for consistency here.

    • JeffW: Could also use a filled circle vs. inset fill…try this

    • Create Focus state on dark variant

  • Pagination

    • Focus state next to active number, focus outline is overlapping the filled button.

    • Fine for now (“it’s progress” ) ^^

  • Do focus states need to be part of the drag-and-drop Figma library?

    • GabeW: not so much.

    • JeffW: maybe just in Paragon component specs, but not for product squads.

  • Explore adding focus state variant with updated focus state for all components in Figma library

  • Shadows

    • Adding directions to shadows in each level

    • Add “elevation” to “Level {1-5}”

    • JeffW: where do we use these shadows?

      • Are shadows being used as focus state?

        • Ideally no, should ideally use consistent focus styles used elsewhere.

        • Hover states don’t have contrast requirements.

5 min

Product Tour dismiss button

@Gabriel Weinberg

  • Adding 2nd button as an optional variant for final frame and single frame Product Tour instances.

  • Any discussion or questions about this?

 

Decision: ProductTour will support optional “Dismiss” button when it’s the only checkpoint in the tour. Similarly, allow optional “Dismiss” button on last checkpoint.

2-4 mins

New components

@Adam Stankiewicz

(Can be deferred async, if needed) Quick demo of 2 new components to be aware of:

  • Stack

    • Utility component to make spacing UI elements vertically/horizontally more efficient.

    • Needs a Figma Layout Component

    • BenW: Can there be clear documentation with caveats in use, etc.

      • For example, wrapping behavior, etc.

  • Sticky

    • Make content sticky to the top/bottom of viewport or container.

5 min

Meeting calendar invite

@Gabriel Weinberg

Meeting invite. Working correctly?

  • Not quite for engineering.

    • At least for @Adam Stankiewicz, all the Engineering Calendar events still show as private/busy.

    • Meet URL is in the #paragon-working-group channel topic in Slack for now.

    • Raccoon Gang?

 

5 min

Docsite update

@Gabriel Weinberg

Show proposed update to Spacing page and Starter templates

 Action items

@Yevhen Simonov
Create dark mode focus state for Radio
Try filled in circle for selected Radio
@Gabriel Weinberg create Paragon tasks for layout components in Figma

 Decisions