2023-08-09 Meeting notes

 Date

Aug 9, 2023

 Participants

  • @Gabriel Weinberg

 Goals

  •  

 Discussion topics

Time

Item

Presenter

Notes

Time

Item

Presenter

Notes

5-10 mins

Autosuggest outside clicks

@Brian Smith


  • 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

https://github.com/openedx/paragon/issues/2435

PR: https://github.com/openedx/paragon/pull/2513

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

Several styles are changed to achieve this:


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

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

 Action items

 Decisions