pfe-tabs overflow scrolling

[dcaryll]

Overflow scroll button

Applied to the Horizontal component when labels are too long and get cut off. There's no specific breakpoint for when a Scroll button appears, it depends on the number of labels and the character count of each label.

Quick links

• Horizontal, light context
• Horizontal, dark context
• Interactivity

Styles and interactions

Horizontal, light context

https://xd.adobe.com/spec/3e62e93c-8338-4f31-5040-3b81f0ed5c71-4853/screen/d334e6a9-c875-4ed3-90da-2cd9f60a31a2/Open-Tabs-horizontal-overflow-light-theme

Angle or arrow styles

• Default and Focus: #151515
• Hover and Active/Pressed: #06c
• Disabled: #d2d2d2
• Pipe/divider: #d2d2d2

Button BG styles

• Adopts whatever the BG color is that the component is placed on

Default

Focus

• The Scroll button can't be focused, only each individual Tab in the tab order instead

Hover

Active/Pressed

Horizontal, dark context

https://xd.adobe.com/spec/3e62e93c-8338-4f31-5040-3b81f0ed5c71-4853/screen/68c6d18d-354c-4a2d-9f6f-228c28b25fd0/Open-Tabs-horizontal-overflow-dark-theme

Angle or arrow styles

• Default and Focus: #fff
• Hover and Active/Pressed: #73bcf7
• Disabled: #6a6e73
• Pipe/divider: #6a6e73

Default

Focus

• The Scroll button can't be focused, only each individual Tab in the tab order instead

Hover

Active/Pressed

Interactivity

Default state

• Text labels or Tabs are organized from left to right
• When Overflow buttons appear, the left button is disabled and the right button is active

Active/Pressed

• When the right Overflow button is clicked on or pressed, text labels or Tabs move from right to left
• When the left Overflow button is clicked on or pressed, text labels or Tabs move from left to right

Tab order

• As a user presses the Tab key, the focus indicator will move from left to right outlining all Tabs until it reaches the end of the tab order where the Overflow button will become disabled

[dcaryll]

@kylebuch8 created this as a placeholder where we can add the details.

[coreyvickery]

@diwanshi Ready, please reach out to me with any questions.

cc @kylebuch8

[kylebuch8]

@coreyvickery - I have a couple of questions for you.

1. Should will allow the text to wrap on tabs?

2. I feel like the left and right arrows on a mobile view occupy a lot of horizontal space making it only possible to see a little more than two tabs at once. Do you think we should change things for mobile?

[kylebuch8]

@coreyvickery For reference, on mobile, if I remove the left and right arrows and prevent the text from wrapping, here's how things would look.

[coreyvickery]

@kylebuch8 I don't know if I like the look of wrapping tab labels and scrolling. Isn't the whole point of scrolling to be a solution for long tab labels so they don't have to break?

[kylebuch8]

@coreyvickery Here's a preview link to what I've got going on. https://deploy-preview-1698--patternfly-elements.netlify.app/elements/pfe-tabs/demo/horizontal-scroll.html

I've prevented text wrap on the tabs. But you'll notice when you go down to a mobile size, sometimes you only see 1.5 to 2 tabs because of the arrows.

Let me know what you think.

[coreyvickery]

@kylebuch8 I think I'm okay with there being only one or two tabs visible on mobile because that layout is very thin anyways, it starts to look better when the layout gets wider. Is this replacing pfe-content-set?

On a related note, the visible scroll bar is killing me. Is it a red flag if we were to hide that? PatternFly seems to be doing something similar and you can still scroll through the tabs with your mouse and each tab with your keyboard.

https://www.patternfly.org/v4/components/tabs#default-overflow

[kylebuch8]

@coreyvickery Cool. Thanks for the comment.

As for replacing pfe-content-set, I think that component still serves a purpose because sometimes it's nice to be able to see all of the content options at once as an accordion where scrollable tabs might inadvertently hide content.

@kelsS Can you weigh in on hiding the scrollbar? I know the scrollbar provides some accessibility benefits as well as a visual affordance to show that there is more content. But with the arrows that we're adding to the right and the left, is the scrollbar still needed?

[kelsS]

Hi @kylebuch8 I think we are okay to remove the scrollbar since we are providing a comparable experience. That being said we need to ensure that the contrast of those arrows meets AA standards, extra care needs to be taken with the contrast of the arrows when they are disabled because you have reached the end of the content on either side since there will be no scroll bar to indicate that.

[kylebuch8]

@kelsS Thanks. That helps.

@coreyvickery Can you make the necessary color adjustments to the disabled arrow so they are AA compliant? Once you have the hex values, let me know what they are.

[coreyvickery]

@kylebuch8 @kelsS How do we feel about these options?

Light theme

Wind variant

Earth variant

The disabled overflow button arrow in the light theme is #6a6e73 with a contrast of 5.13.

Dark theme

Wind variant

Earth variant

The disabled overflow button arrow in the dark theme is #8a8d90 with a contrast of 5.47.

---

Hover state

Light theme

Dark theme

I pulled these styles from PatternFly. Are we okay with only a color change for the button arrow hover state? It might be hard to see the change if a user has color blindness. Maybe we can add a subtle background shift or something that doesn't depend on color only.