search

carbon-design-system / carbon

A design system built by IBM
https://www.carbondesignsystem.com
Apache License 2.0
7.72k stars 1.79k forks source link

[Bug]: Tabs Component Left Slide Arrow on Small Screens has Transparent Background #15924

Open zacharydmoore opened 6 months ago

zacharydmoore commented 6 months ago

Package

@carbon/react

Browser

Chrome

Package version

1.52.0

React version

v16.14.0

Description

The Tabs component's left slide arrow (used when there is a small screen and long tabs) has a transparent background now causing the arrow to bleed into text that is now shown.

Reproduction/example

https://stackblitz.com/edit/github-pkl5n9?file=src%2FApp.jsx

Steps to reproduce

Navigate to Tabs component in Carbon Design System storybook. Shrink browser window until slider arrows begin to show. Press arrow until both left and right show (middle of tabs) Screenshot 2024-03-08 at 8 18 27 AM

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Application/PAL

No response

Code of Conduct

wood-doug commented 4 months ago

Setting z-index to 1 in .cds--tabs .cds--tab--overflow-nav-button--previous seems to address this.