feat: pfe-tabs horizontal overflow scrolling

[kylebuch8]

Closes #1013

Description

Adds horizontal scrolling capabilities to horizontal tabs. This feature adds a left arrow and a right arrow when the tabs are too large for its container. This feature uses a ResizeObserver to respond to changes in the size of the component and will add the scrolling capability once the tabs are too large. This change also impacts pfe-content-set in that when the component renders tabs, they will have the scrolling feature if the tabs are too large.

Related issues

#1013

Preview

• Horizontal scrolling demo
• Tabs demo
• Tabs in pfe-content-set Scroll to the "The pfe-content-set comes with a mutation observer so that you may dynamically add headers and panels." section and continue to click the "Add Header & Panel" button until the tabs are too big for the container

Testing instructions

• [ ] pfe-tabs
  1. Go to https://deploy-preview-1698--patternfly-elements.netlify.app/elements/pfe-tabs/demo/horizontal-scroll.html
  2. The first tab set should have a horizontal scroll bar
  3. Scroll all the way to the right
  4. Make sure that the right arrow on the side of the tabs is disabled and the left arrow is enabled
  5. Scroll all the way to the left
  6. Make sure the left arrow is disabled and the right arrow is enabled
  7. Scroll to the middle
  8. Make sure both the left arrow and the right arrow are enabled
  9. Scroll all the way to the left
  10. Click the right arrow
  11. Make sure that the previously hidden content is now visible
  12. Click the right arrow until it scrolls all the way to the right.
  13. Click the left arrow
  14. Make sure the previously hidden content is now visible
  15. Click the left arrow until is scrolls all the way to the left
  16. Resize the screen and make sure that the left and right arrows are added to tab sets that are too large for the container
  17. Make the screen larger and make sure the arrows are now longer visible when the tab set is small enough to fit inside its container
• [ ] pfe-content-set
  1. Go to https://deploy-preview-1698--patternfly-elements.netlify.app/elements/pfe-content-set/demo/
  2. Scroll to the "The pfe-content-set comes with a mutation observer so that you may dynamically add headers and panels." section and continue to click the "Add Header & Panel" button until the tabs are too big for the container
  3. Make sure the left and right arrows appear when the tabs are too large for its container

Browser requirements

Your component should work in all of the following environments:

• [ ] Latest 2 versions of Edge
• [ ] Internet Explorer 11 (should be useable, not pixel perfect. There should be a horiztonal scroll bar when the tabs are too large for the container)
• [ ] Latest 2 versions of Firefox (one on Mac OS, one of Windows OS)
• [ ] Firefox 78 (or latest version for Red Hat Enterprise Linux distribution)
• [ ] Latest 2 versions of Chrome (one on Mac OS, one of Windows OS)
• [ ] Latest 2 versions of Safari
• [ ] Android mobile device (such as the Galaxy S9)
• [ ] Apple mobile device (such as the iPhone X)
• [ ] Apple tablet device (such as the iPhone Pro)

Ready-for-merge Checklist

• [ ] Expected files: all files in this pull request are related to one request or issue (no stragglers or scope-creep).
• [ ] Tests have been updated to cover these changes.
• [ ] Browser testing passed.
• [ ] Changelog updated.
• [ ] Documentation (README.md, WHY.md, etc.) updated or added.
• [ ] Link to the demo recording:
• [ ] Approved by designer.

Merging

Please squash when merging and ensure your commit message uses conventional commit formatting.

Be sure to share your updates with the [email protected] mailing list!

[netlify[bot]]

✔️ Deploy Preview for patternfly-elements ready!

🔨 Explore the source changes: 2af3c5d2ddb6a784c598fdd4c7d6d578ab91653d

🔍 Inspect the deploy log: https://app.netlify.com/sites/patternfly-elements/deploys/61f9ac745f4a9200081bc821

😎 Browse the preview: https://deploy-preview-1698--patternfly-elements.netlify.app

[kylebuch8]

@coreyvickery Can I get a design review?

[coreyvickery]

@kylebuch8 The styling looks good to me, but I'm still seeing the scroll bar. Is that still being discussed to keep or remove?

[kylebuch8]

@coreyvickery - Here's the latest with the scrollbar hidden. https://deploy-preview-1698--patternfly-elements.netlify.app/elements/pfe-tabs/demo/horizontal-scroll.html

[kelsS]

Hey @kylebuch8 I tested the colors and they are passing with Lighthouse and WAVE. So LGTM.

[kylebuch8]

Need to add the ability to scroll the active tab into view on page load if a selected-index is provided.

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: 2af3c5d2ddb6a784c598fdd4c7d6d578ab91653d

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[bennypowers]

@kylebuch8 is this still relevant to pfe 2?

[bennypowers]

PFv4 has this feature, so we should implement it as part of tabs 1:1 https://www.patternfly.org/v4/components/tabs#default-overflow

[zeroedin]

Superseded by pfe-tabs 1:1 #2099 which includes horizontal overflow scrolling