2022-10-12 Meeting notes

5-10 minutes

Truncate

@Vladyslav Zadorozhnii

• New/updated component: https://paragon-openedx.netlify.app/components/truncate/

• Notes:

  • Concern about communication between design + eng in terms of

  • A11y: Will screen reader be able to read entire line?

    • Should screen reader be able to read full text?

    • Majority of a11y community states that whatever is available to sighted users should be available to blind users (i.e., keep text truncated for screen readers).

    • However, Jeff thinks that are truncated (versus hidden by a “Show more”) should be full information, not just what’s visually shown.

    • Is there a tooltip (or a title attribute) to indicate full text when things are truncated?

      • Could we use our own Tooltip component here?

      • sr-only?

10-15 minutes

Bootstrap challenges with CSS variables and design tokens

@Adam Stankiewicz + Raccoon Gang

• Bootstrap does calculations with SCSS variables in its own SCSS files (e.g., $padding-x * .75); this only works when $padding-x is a value other than a CSS variable, as Dart SASS can’t do that calculation when $padding-x is a CSS variable (throws an error).

• Using calc and SCSS interpolation, we can get around the problem for now if we manually copy/duplicate the affected Bootstrap SCSS files into the Paragon codebase and no longer import from the Bootstrap file directly, so we have full control over it.

• We are on latest v4 of Bootstrap, and don’t imagine Bootstrap will have another v4 release (since v5 is latest).

• Is copying Bootstrap’s SCSS into our codebase to get around the issue with calc a viable solution?

• Notes:

  • Long term:

    • Does design tokens give us more flexibility for a future state where Bootstrap 4 is not the best thing to use? Yes!

    • What is the value of upgrading to Bootstrap V?

    • Stay aware of follow on work to update components from build time to run time, and also include fed-bom

  • We will move forward with this approach for now.

5 minutes

Can we add this meeting to the Open edX Working Group calendar?

@Adolfo Brandes

Advantages:

• More people would be aware of it.

• Would be easier to avoid scheduling conflicts.

(PWG has been added to the Open edX working group calendar - Adam)

5 minutes

Modal sizing question

@Gabriel Weinberg

What values are driving the widths of standard modal sizes? (sm, md, lg, xl). We don’t have these available in Figma today and I plan to add them. The sizes seem to have custom values. Should it correspond to Container or Responsive or some other size value that is already defined in Paragon?

https://github.com/openedx/paragon/blob/master/src/Modal/_ModalDialog.scss#L31-L47

https://github.com/openedx/paragon/blob/952c1de22b9681d99827b47bbc643fcd8d24a7db/src/Modal/_variables.scss#L41-L44

5 min

Sticky Masquerade

@Ben Warzeski (Deactivated)

• Should we be updating a pattern? Sticky in mobile.

• [Jeff] mobile concerns with sticky eating up too much screen space. Generally sticky for small viewports can be an a11y problem.

@Ben Warzeski (Deactivated)

• To encourage more alignment between organizations, we need to ensure communication is happening across the orgs.

  • e.g., If there’s a cross-cutting architectural decision made internally within 2U, that should be actively communicated to tCRIL, broader Open Source community,

  • And vice-versa e.g., if OpenCraft is proposing something, that should be effectively communicated to 2U staff.

  • “It takes a village”