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 pattern for implementing carousel-like UI components.

    • useOverflowScroll

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

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

    • OverflowScroll

      • 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.

    • CardCarousel

      • Composes OverflowScroll and CardDeck to implement a carousel for Card components with custom controls as a standalone, importable component.

    • ChipCarousel

      Composes OverflowScroll and Chip (only provided as an example on the documentation website, for now)

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

      • CardCarousel

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

• Notes:

  • .