Page Comparison

Ben Warzeski (Deactivated)

When is it ok to design using custom sizes vs. standard Paragon sizes?

E.g., Modal has “xs”, “sm”, “md”, “lg”, etc.

Standard sizes/styles should get us ~99% the way there; also feels like a design smell that should be avoided.

Docs site best practices, do’s & don’ts could be added/improved.

Figma needs modal update with various pre-made sizes, “xs”, “sm”, etc.

More intentional communication from design about when (and why) designs are outside of the design system.

How can we better catch design “stale”-ness?

Adam Stankiewicz

• AlertModal title

  • Only accepts a string (e.g., if we wanted to use ` Truncate` component, it’s not currently possible., but has implications for the aria-label…

  • Line-height on the styled modal title doesn’t match h4 font-size.

Decisions:

• Change AlertModal heading to be styled as an h3 not an an h4

  • Keep h2 element semantically

• Add $heading-level-N-line-height SCSS variable (design tokens) in both Open edX theme and edX.org themes.

Notes:

• "<h3 aria-level=2>" is equivalent to <h2> semantically

  • TIL 🎉

Ben/All

Missing multi-select menu design Figma spec

• Should it include (optional) checkboxes/etc.?