RFE: Different option for multi-source navigation

[rebeccaalpert]

IFD is looking for a an overflow container rather than carousel (similar to the PatternFly horizontal nav for navigation) so they can show more cards at larger screen sizes/display modes. Thinking of showing max 3 (right now max 2). 6+ might be a different look.

This originally came from engineering. They were afraid that users might never look at #2 in a paginated card because it's hidden.

Would need breakpoints to handle different sizes/display modes. We would want to ship this layout separate from our existing sources cards so as not to break anyone else.

Timeline: no deadline

Accessibility notes/questions:

• Maybe consider a “Skip sources” button if there are more than X sources? Similar to how a horizontal nav overflow may be preceded by a “skip to content” link at the top of the page. Should look more into this, though, to ensure it doesn’t cause a worse experience
• Similar to the PF nav overflow, making sure that when focus is within a source card, that left/right arrow keys can scroll the container as well as the arrow buttons

Design kit issue: patternfly/patternfly-design-kit#891

---

Jira Issue: PF-2539

[thatblindgeye]

• Potential short term ask is to allow 2 cards to be stacked (horizontally if there's space, otherwise vertically)
• Longer term ask is either:
  • An overflow implementation (similar to our PF nav overflow) that can be scrolled
  • A drawer implementation that could be opened to reveal more information about source cards (this has been mentioned as a nice-to-have) https://rhbecky.github.io/ARH-verify-demo/

[thatblindgeye]

Acceptance criteria:

• Add a prop to indicate what layout should be used: paginated or non-paginated
• Utilize flex styling/Flex layout components for the non-paginated layout, so that source cards will auto wrap/stack when the horizontal space doesn't allow for it
  • If we use the Flex layout components, we should expose a way to pass additional flex props in
• Test the non-paginated layout in the various chatbot display modes to ensure this new layout works correctly
• Add a checkbox to existing source card example(s) to toggle the paginated and non-paginated layout

Just some additional info:

• The screenshot from Chatbot: Different option for multi-source navigation patternfly-design-kit#891 (comment) should be viewed as more a building block; we don't want exactly what's in the screenshot, it's just showing how many cards could fit in 1 row at a time/what that amount of cards in a row might look like
• Right now the ask is to display 2 cards upfront, but this could increase in the future
• For this ask, keep the default max-widths of cards (potentially as a followup, we can look into modifying card widths)