2023-05-10 Meeting notes

@Adam Stankiewicz

feat: add `enableEqualColumnHeights` prop to `CardGrid` and `CardDeck` by adamstankiewicz · Pull Request #2287 · openedx/paragon

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

Open

After

Open

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

feat: add `actions` prop to `Card.Status` and resolve few `Card`-related style issues by adamstankiewicz · Pull Request #2272 · openedx/paragon

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?

  • Fully not on radar.

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

    • Assertive means “Flush the screen reader queue, and read this now!”

    • The last element with “assertive” on the page will take precedence, which may not be intentional/expected.

Notes:

• home.edx.org will replace Alert with Card.Status.

• Are there other patterns where we override the icon color in Alert and Card.Status?

  • If we do need to support this more broadly, let’s make the component actually support this.

  • For the home.edx.org case right now is a one-off.

Brand Icons

@Gabriel Weinberg

Bootstrap Icons seems to have the largest and most easily implemented set of brand icons to use in Paragon
Bootstrap Icons

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?

Notes:

• Allowlist for only the social icons

• Separate page for social icons

• GitHub - couetilc/react-social-icons: svg social icons in react do we need color coded icons?

• Maybe fork Bootstrap icons and remove all the ones except social media ones
  
  

Show and tell: BlueprintJS

@Gabriel Weinberg

Blueprint - A React-based UI toolkit for the web

Notes:

• Version switcher

• Darkmode switcher

• “Edit this page” github link

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

Notes:

• Possible to set up on on closed source repo?

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