Page Comparison

10-15 minutes

Chip updates

Adam Stankiewicz

(on behalf of Jennifer Gregory)

Coming back for (final?) review of Chip component Figma spec:

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-Design-System?type=design&node-id=53755-39670&mode=dev

If decided as ready for dev, implementation issue for Raccoon Gang:

• https://github.com/openedx/paragon/issues/2645

Decision: ready for dev! Jeff/Jenn may clarify hover (selected) state, but not blocking. Will implement as is.

10 mins

Contrast checker and Accessibility page

Vladyslav Zadorozhnii

https://github.com/openedx/paragon/issues/2647
https://webaim.org/resources/contrastchecker/

Challenge: often difficult for consumers of Paragon to easily test color contrasts outside of design specific tools.

Q: Is this a useful contribution to Paragon docs site (maybe the A11y page)?

• Should we include our own custom tool or just link to existing tools?

  • Might not be worth building our own.

  • Decision: Instead, we will create new Contrast Checker page under the “Tools” section with a link to the above existing contrast checker.

5 mins

Form.Autosuggest attributes PR

Mena Hassan

• https://github.com/openedx/paragon/pull/2570

• after changing from using the element’s index to a unique UUID, this PR is now live!

• also added some React Testing Library test coverage

5 mins

Label association

Vladyslav Zadorozhnii

Anastasiia Abyzova (Deactivated)

Image Added

• What are next steps?

  • https://github.com/openedx/paragon/issues/2436

  • https://github.com/openedx/paragon/issues/2665

  • Form.Group investigation

    • Programmatically fgenewrates a control id to use between nested label and input control.

    • Allows custom controlId.

• Regarding deprecation of floating labels, we seem to agree this a direction we want to go in. We’re unsure who final decider is, but should be driven through the 2U design group.

• [concern] Might added design work with certain use cases to find alternatives to display labels vs. floating labels.

@praviola

https://www.figma.com/file/fdWLivj6C12NVbwlUTYvWi/Search-results?type=design&node-id=514-22645&mode=design&t=6ABxC3V1YIIuGU6W-0

Notes

• Similar pattern to other use cases (including a searchable Dropdown)

• Implementation will live in prospectus but if its a generic/standalone solution might be able to port it over to Paragon in a later iteration.