Page Comparison

15-20 minutes

Building carousel-like UI components

Adam Stankiewicz

• There are several existing use cases for carousels on edx.org, the Enterprise MFEs, and maybe more?

  • Examples:

• Proposal:

  • Create a re-usable, extensible pattern for implementing carousel-like UI components.

    • useOverflowScroll (docs)

      • Encapsulates the business logic related to carousel-like UI components.

      • Ensures the overflow container element has the appropriate a11y attribute(s) and styles.

    • OverflowScroll (docs)

      • Calls the above React hook and wraps (most of) its return values in a React context such that the component’s children have access to the hook values.

    • OverflowScroll.Items

      • A helper component that ensures each child element receives the class name .pgn__overflow-scroll-item

        • Why? useOverflowScroll falls back to querying for that class name to derive the list of children elements without needing to pass a custom childQuerySelector.

    • Compose OverflowScroll with other UI components like Card, Chip, Badge, etc. to make component-specific carousels using the same underlying logic/styles/a11y.

      • CardCarousel (docs)

        • Uses OverflowScroll with CardDeck to create a Card-specific carousel component.

• Notes:

  • .