Page Comparison

Adam Stankiewicz

https://github.com/openedx/paragon/pull/2287

Proposes to add disableEqualHeight option to support use cases where consumers may want the grid behavior of CardGrid, but without forcing all the cards in the grid to be equal height.

Before

After

Deploy Previews:

• CardGrid: https://deploy-preview-2287--paragon-openedx.netlify.app/components/card/#cardgrid

• CardDeck:

  https://deploy-preview-2287--paragon-openedx.netlify.app/components/card/#carddeck

Notes:

• Possible naming change to an affirmative name, have the default be true, have it say “EqualHeight = True by default. and then disable as the optional switch.

• Good to go, consider prop renaming but it’s not blocking feedback

Card.Status updates

Adam Stankiewicz

Mike Brown

https://github.com/openedx/paragon/pull/2272

1. Shows a skeleton when the Card is in a loading state.

2. Optional actions prop.

3. Other miscellaneous Card style fixes.

Notes:

• consistent prop names for actions

Card.Statususage and accessibility (a11y)

Adam Stankiewicz

home.edx.org (frontend-app-learner-dashboard)

Uses an Alert component instead of Card.Status to display these messages like “You are not eligible for a certificate.”

• Wondering if this might be because Card.Status wasn’t usable for some reason in this context?

• Is the aria-live="assertive" on this messaging in the learner dashboard intentional?

  • If so, should Card.Status be acting like an alert with the aria-live="assertive". Perhaps opt-in?

Brand Icons

Gabriel Weinberg

Bootstrap Icons seems to have the largest and most easily implemented set of brand icons to use in Paragon
https://icons.getbootstrap.com/

For design documentation in Figma, they need to be resized from 16x16 to 24x24, which is a small manual task.

Ready to adopt Bootstrap Icons for Paragon?

Show and tell: BlueprintJS

Gabriel Weinberg

https://blueprintjs.com/

Usage Insights on components' pages

Viktor Rusakov

Each component page now has its own Usage Insight table, which contains only usages of the component and its subcomponents. Alert component example

Icons in the Playground

Viktor Rusakov

Our initial release of the Playground did not have any Paragon icons available. We have recently added all of them to the Playground, so now each icon can be used. See example