2023-10-04 Meeting notes

5-10 minutes

Color Picker

Brian Smith

https://github.com/openedx/paragon/pull/2646#issuecomment-1731921395

Notes:

• [Jeff] we shouldnt have rounding errors here.

• [Jeff] constrain input to be valid (only typing the characters that can be used for hex, and must be 6 characters, or 3)

• [Brian] underlying component has rounding error built in and we can’t completely avoid it

• [Brian] default should be #fff

5-10 min

Utility functions to embed in the Paragon

Vladyslav Zadorozhnii

On the previous discussions there was a decision that utility function related to any of Paragon components can be added to the Paragon repo.

Notes:

• Some util functions are generic / not really related to Paragon design system itself. In these cases, the util functions should likely live in @edx/frontend-platform/utils.

• Is the util function specific to design system? If, yes, include in Paragon.

• Form Validation functions?

• Vlad to share out in FWG Slack to solicit more feedback / additional util function ideas.
  

5-10 min

Guides > Accessibility page

Jeff Witt (Deactivated)

See https://docs.google.com/document/d/1LaSj3--yovsr4YIl-5P-sOv2zwek3myIyWqGoJRPEGU/edit?usp=sharing

Notes:

• Intended to be a standalone “Accessibility” page under the “Guides” section on the docs site.

• May want to bring other details from the PWG principles.

Design Tokens status update

Felipe Montoya

What is the status of DT project and how will it impact the next Open edX release (Redwood in particular)

Notes:

• Some MFEs have already been updated but there is more work to be done, cutting over from alpha to beta

• RG is making incremental progress on design tokens CLI and other related bug fixes.

• [Brian] willing to take on the coordination of the work between Q and R releases

  • Concerns: peer dependency.

• Adam Stankiewicz

  • Create beta cutover

  • Cheatsheet of “what’s left”

    • Design tokens for Paragon contributors

    • Example for consumers

    • Vladyslav Zadorozhnii to send open design-tokens PRs from other repos.

• Brian/Adam to work together to get the “what’s left” cheatsheet over the line.

• [Jeff] is there a story to help with CSS translations

• [Adam] tokens in theory we could extend the tokens framework to transform json tokens into whatever CSS properties we need, but it outside of the core paragon (this is more of a 2U/edX issue right now).

Frontastic??

Jeff Witt (Deactivated)
Adam Stankiewicz
David Joy (Deactivated)

Adapt Paragon for Frontastic use?
Or style Frontastic using Paragon CSS?

Notes:

• Frontastic comes with off-the-shelf UI component but a11y and style consistency may be a concern.

  • Could copy/paste style properties but this may be a maintenance concern long-term.

  • Could use design tokens to expose CSS variables using the same style properties in Paragon.

  • Could use design tokens to generate custom CSS class names using the same style properties in Paragon.

• Frontastic also supports custom integrated components that can supply its data but still rely on Paragon components.

• Design wants to stay synched to how this work develops, if we need to change the way we think about anything or how we use components in Figma

Competition

Jeff Witt (Deactivated)

What alternatives might we consider?

Notes:

• We have already planned our way out of using Bootstrap to support runtime theming more broadly

• Having more than 1 LMS will always have inconsistency in the UI

• Maintainability across 2U systems

• Most DS’s don’t have the level of feature support that ours does today (ie DataTable)

• General consensus from this group is that Paragon is still the right thing to use because we would be reinventing the same solutions we’ve already created, even if we buy the most robust new design system/component library

• We have some heavy duty customizations in components today, and consider web components in rearchitecting, wrapping react components into web components

• Adobe spectrum system

• Tailwind vs Bootstrap theyre very different from eachother

  • tailwind.config.js to modify values vs. Bootstra' SCSS variable overrides

  • Design tokens could possibly generate tailwind.config.js.

• Should there be a Product Management / business voice in this conversation?

• We can’t make a decision about this within 2U/edX in a vacuum; Open edX likely would remain on Paragon if 2U/edX decided to move against it (which would still introduce brand inconsistencies).