Page Comparison

5 minutes

Checkbox Sizes

Kaleb Davenport

• We’re working on making the filters on edX.org vertical and are running into space constraints. What is the best approach to shrinking each checkbox input?

Notes:

• There are concerns about going smaller than 24x24px for the hit area of the checkbox

• Try reducing padding between checkboxes before making the checkbox smaller

10 minutes

Accessibility considerations for Expandable Input Groups

Harper Wentz

• Some of our filtering options on edx.org have as many as 100 options. For example the Partner field could have many Schools and Companies that offer learning products. We want to ask what is the best approach for making these lists accessible?

• If we display the partners with the most results (instead of displaying them in alphabetical order) how should we indicate this to screen readers?

Notes:

• We should what auditors will do, a blind user for instance will click on the “show more”, should be an explicit click on the “show more”

10 minutes

vertical variant for Stepper

Vladyslav Zadorozhnii

In the 2U MFE Studio project there is a task to rewrite this component to React.

Image Added

And they wanted to use stepper but there is no vertical variant for this. Should we customize stepper component to support vertical variant?
Something like this:

Image Added

Notes:

• Disabled should use low contrast text

• Should not use color alone to represent state

• Needs some design thinking for the component

• Some pushback on the component usage/use case, consider stateful functionality

2 min

[inform] Form.Autosuggest accessibility

Max Frank

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

• Test with Safari

• Looks like a good fit for intern stuff

Tailwind CSS?

Notes:

• Some folks like Tailwind over Bootstrap

• Is there a route to using something other than Bootstrap

• Tailwind is an approach using utility classes and our design tokens project is a way for paragon to move towards it

• The conversation should be how not to be dependent on bootstrap, instead of making it more tailwind specifically

• https://tailwindcss.com/

• Concern over conflicting CSS classes, javascript, and other resources driven by bootstrap

• We have a fragmented experience already today

• What are the advantages that Tailwind provides?

  • We could create utility classes that tailwind uses

  • Flexbox?

  • https://www.incentius.com/blog-posts/pros-and-cons-of-using-tailwind-css/

  • https://blog.logrocket.com/bem-vs-smacss-comparing-css-methodologies/

  • https://encircletechnologies.com/blog/advantages-of-tailwind-css/

  • Robust set of utility classes

• What are the complaints associated with Bootstrap at 2U?

  • personal preference?

• Discovery for tailwind, maybe utility classes

  • Get into RG backlog/sprints

• How do we support it on the design side? How to support in Figma

• Level of top down support