2022-12-14 Paragon Meeting notes

2 minutes

[inform] Fixed styles for SVG icons from Material UI

@Adam Stankiewicz

• An issue was raised where our SVG icons from Material UI (majority of Paragon icons) weren’t properly inheriting colors from its parent (i.e., the Material UI icons were always black, even on hover/focus states).

• This issue is now resolved in v20.21.3

  • Thanks @Connor Haugh for the initial report/investigation and Raccoon Gang for the implemented fix.

• Demo

Notes:

10 minutes

Button utility variants

@Adam Stankiewicz

@Viktor Rusakov

• [context] In the ongoing design tokens / CSS variables work, we’ve realized that due to how many permutations of each button variant we have (e.g., regular, regular outline, inverse, inverse outline) + the stock Bootstrap button variants (e.g., info, success, etc.).

  • We’re wondering if we could simplify the theming implementations for buttons by removing default Bootstrap variants that we don’t intend to use in our designs.

• From the design pattern POV, when do/should we use the utility buttons?

  • Are there any we definitely don’t use or shouldn’t use that could be removed?

  • Variants:

    • Success

    • Outline Success

    • Danger

    • Outline Danger

    • Link

    • Light

    • Outline Light

    • Dark

    • Outline Dark

Notes:

• Decision: we’ll keep these all as there are valid design use cases for them.

• [Jeff]: Was Outline Light meant to represent disabled state?

• 3:1 or better contrast for the button edges, typical contrast rules for the text

• There are some contexts where we disable, can we have a number, with enhanced state information

• Should disabled with enhanced state be an extension of the stateful button component?

• Design also should avoid disabled state until we can explore the design and documentation further, but does rely on clean error handling that needs to be addressed in design as well.

• Validation on submit vs. on form input field blur.

• Is progressive disclosure on forms a best practice? (E.g., showing other input fields based on selection of some other field like a checkbox).

•  

multiselect design considerations

@Ben Schenerman

https://github.com/openedx/paragon/issues/1527#issuecomment-1351630117

1. selected values grouped at top of menu, or in default sort order in the list?

2. selected values displayed inside the box, or outside? (related a11y/ux consideration)

3. which actions are available on the right in the box? (technically out of scope, but related)

Notes:

• Nice work on sorting selections at the top of the activated menu

• WCAG 2.1, dont make me rotate the screen or make things appear only in wider viewports

• Favoring the chips inside the box

• [aside] Should we (and how) do usability testing on more complex components like Multiselect, e.g. to inform design decisions?

  • Moderated (time intensive)

  • Unmoderated (lighter lift)

  • Look at Hotjar screen recordings for existing components.

  • Userzoom/Hotjar can support testing for various screen/device/viewport widths.

• https://paragon-openedx.netlify.app/components/menu/

  • Is this using the existing Menu (sub)components?

• @Jeff Witt (Deactivated) will help QA for a11y,.

Open edX conference

@Feanil Patel

Open edX conference topics—please add for paragon and start to discuss

Topics can be added here:

• https://sessionize.com/2023-open-edx-conference

Wied audiance of instance users, devs, educators, leadership

Types of talks:

• tutorials (interactive, technical)

• session talks w/ q and a

• lightning talks

This is the submission we added last year (not accepted):

Open

Pitch “This is for everyone”

What does it mean for the audience

For workshops, can carve out time for a11y with Jeff

Can we get feedback from Open edX community (work with Adolfo) on what topics would be of most value/interest to the community?

• How do I theming (e.g., are there other topics that Paragon is a subset of?)

Do we need a design oriented tutorial/workshop at OEC?

Maybe as part of the tutorial, build a quick SPA with Paragon?