Page Comparison

Adam Stankiewicz

Related to: https://github.com/openedx/paragon/issues/2996

The Dropdown component as spec’d in Figma includes a similar pattern of including an optional search input to filter its options.

• Not accounted for

• within the implementation of Dropdown shipped to consumers.

• Given several known use cases for a similar pattern (i.e., both in SelectMenu and Dropdown), it might be worth adding built-in support for this use case?

Next steps:

• Reach back out to issue author to verify the use case of using SelectMenu on its own without integrating with Dropdown.

  • If so, then maybe adding the filtering just to SelectMenu would be reasonable.

    • Auto-centering of the items, and how that relates to having the optional input field.

Adam Stankiewicz

Ryan Ebke

Related to: https://github.com/openedx/paragon/issues/2997

[inform] 2U Storefront team is proposing an additional sub-component to Card, as highlighted below (right side), to contain text and actions.

Image Added

Next steps:

• Questions for UX:

  • Supported color variants on (optional) banner

  • Should banner overlay the Card.ImageCap rather than pushing the Card.ImageCap down?

    • This would simplify some styles concerns around the border radius (i.e., conditional on having the banner present).

    • Overlaid with absolute positioning and a transparency/opacity mask such that the image src in Card.ImageCap

    • Do we really want to move the logo image fully inside of Card.ImageCap, covering the contents of the background image?

      • What are the unintended consequences?

        • Q: Has there been any user research to understand how important the images (e.g., does seeing image impact search conversions, etc.)?

          • There is merit to quickly recognizing familiar content based on the image.

      • Is there a need to make it configurable by consumers depending on the use case (preferred)?

    • Any design constraints (e.g., max number of icons, no text, etc.)?

  • Possible overlap with https://github.com/openedx/paragon/issues/2881 around the “Compare” checkbox and the DataTable card view selections.

    • Next steps: We should ensure we’re intentional about possibly having two different patterns for checkboxes inline with cards.