Page Comparison

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