2023-08-09 Meeting notes

5-10 mins

Autosuggest outside clicks

@Brian Smith

• Autosuggest: use something other than `state.dropDownItems.length > 0` to filter document clicks · Issue #2510 · openedx/paragon

• Do we want to do larger refactor/replace Form.Autosuggest?

5-10 mins

Bubble component changes (WIP)

Jon F

Notes:

• Increased font weight, monospaced numbers, pill shape instead of oval, two sizes instead of one (16x16, and 24x24), additional colors

• Are we interested in adding these changes to the component?

• Background color of the light version might be too light, consider a slightly darker border color, but also if it’s not clickable the a11y risk is lower.

• Consider adding a small variant that does not allow a number or icon

  • [Adam] Bubble supports this today, though not the explicit sizes.

@Jon F Alternative suggestion for Bubble sizes:

• Update Badge component spec to include the bubble notification with icon or monospace font, leveraging the pill shaped badge.

• Consider if pill shaped badge needs more than 1 size variant (single digit numbers and icons will be very slightly rectangular)

• Bubble component spec (figma and docsite) should be updated to a version that has no text inside, making it a true circle

• Any time a notification or alert needs to include a number or icon, it should use the pill shaped badge

5-10 mins

Disable browser autocomplete

@Mena Hassan @Cindy Nguyen

Form.Autosuggest Accessibility - Trivial fixes · Issue #2435 · openedx/paragon

PR: fix: disable browser autocomplete and edit dropdown items elements by httpsmenahassan · Pull Request #2513 · openedx/paragon

5 min

Vertical tabs

@Vladyslav Zadorozhnii

There is an idea of extending Tabs with variant="vertical".
There is not many changes to make to support vertical variant

Designer’s idea

Open

Several styles are changed to achieve this:

Open

• Defer implementation of vertical tabs variant until/when there’s more design direction and use cases documented.

5-10 min

a11y documentation

Matthew Lepage

TL;DR; getting a11y focused docs into the Paragon documentation website.

Revisit this topic next week at the beginning of the meeting

• component usage (best component for the job)

• best practice for consuming specific components

• note: Will need to explore how to fit in a11y docs into component template pages' design.

  • Revisit this UI mockParagon Design System

• Where do designers get their info from?

  • Docs site?

  • Figma?

• Plan to bring to UX team for further discussion, too.

• [Adam] We will get the “Edit this page” CTA in place, too to accelerate this work.