The three statuses above and their possible values:
For more information see the https://openedx.atlassian.net/wiki/spaces/BPL/pages/1773502564/Component+Contribution+Process#Step-1-%E2%80%93-Start-a-component-proposal. |
A flexible, content-agnostic component for carousels where users may cycle through a row of elements that overflows its container.
Contributors | |
---|---|
Slack channel | If one exists, paste a link to the working Slack channel... |
Paragon Jira ticket | Insert a link to the Paragon ticket or epic for this component... |
Other Jira tickets | Insert links to related work... |
Design resources | Insert links to Figma or Miro design specs or explorations... |
Technical docs | Insert a link to the tech docs when they are created... |
TBD
Brainstorming based on existing known use cases for Carousel
(see screenshots below):
Default icon buttons (left/right arrows) should be overridable, if needed.
Size - should have sizing options, should have default in he implementation doc, and be overrideable. We can have variants: small, medium, large for example
Icons -
location of the arrows needs to be determined (outside or inside the carousel itself)
location of the arrows (either side of the carousel or close together)
Size
Dictating spacing within the carousel (padding) and the default icon button sizes
Should we be able to customize how many items are shown at once?
How will the width of each item factor into figuring out how many can be shown at once? E.g., a Card
is much wider than a Chip
.
Should we be able to control the left/right arrow icon button behavior?
E.g., does it scroll all the way to the next N items all at once (like the edX.org partner logo carousel) or does it scroll incrementally based on some hardcoded pixel value and show partial items (like the edX.org Chip
carousel and the Enterprise Learner Portal Card
carousel shown below) or does it scroll to the start of the next item?
Should we have an autoscroll option?
Should it be a wrap-around behavior (once you hit the end, do you go back to the beginning?)
Should we add a scrollable component?
How should this work in modal?
Variants: * Buttons vs scroll * button size * Scroll increment type * Custom button elements
examples as Nav, Main-Content, and sub-content
| ||
|
Carousel
component in ParagonWe have an existing Carousel
component in Paragon via react-bootstrap
.
Paragon documentation: https://paragon-openedx.netlify.app/components/carousel/
react-bootstrap
documentation: https://react-bootstrap.github.io/components/carousel/
It defines a top-level Carousel
component with a Carousel.Item
subcomponent that denotes each “slide” within the carousel. It also has a Carousel.Caption
sub-component to be used inside of Carousel.Item
.
The Carousel
we have today supports an optional fade
prop to have the carousel items fade in/out instead of slide.
The Carousel
component as we have it today does not seem to support the use case where you can see more than one carousel item at once and scroll left/right of the overflow with the left and right arrow icon buttons.
Carousel of partner image logos on edx.org:
Carousel of Chip
components on edx.org:
Carousel of Card
components in UI mock:
Note how these 3 use cases are not so much flipping between carousel items, but instead, scrolling through a horizontal row of content that overflows outside of its container controlled via the left/right arrow icon buttons.
What does an engineer need to know in order to build this component? TBD.
Paste a link to a Figma frame here and choose "Display as embed"...
Add rows to this table outlining individual behaviors of the component. | Descriptions of a behavior should contain any specification detail needed to build it, including animation timing. |
---|
Add rows to the table outlining focus management, semantic markup, or other a11y related specifications... |
---|
Notes from collaborator conversations or meetings regarding this component.