2022-10-12 Meeting notes

 Date

Oct 12, 2022

 Participants

  • @Gabriel Weinberg

 Goals

  •  

 Discussion topics

Time

Item

Presenter

Notes

Time

Item

Presenter

Notes

 

 

 

5-10 minutes

Truncate

@Vladyslav Zadorozhnii


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

$modal-xl: 1140px !default; $modal-lg: 800px !default; $modal-md: 500px !default; $modal-sm: 400px !default;

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”

    • Open edX discussions

 Action items

@Adam Stankiewicz to file issue regarding follow-ups after Truncate discussion.
@Adam Stankiewicz write documentation for Bootstrap 4 duplication of code.

 Decisions