[Leadspace RTL]: The gradient on Lead space component should be mirrored in RTL

m4olivei commented 3 months ago

Description

Anytime a gradient is used in the Leadspace in RTL, it's direction is incorrect, such that the text is hard to read against an image background, or the video is obscured by the mostly opaque side of the gradient.

Browser

No response

Carbon for IBM.com version

latest

Severity

Severity 2 = Aspects of design is broken, and impedes users in a significant way, but there is a way to complete their tasks. Affects major functionality, has a workaround.

Application/website

https://ibm.com

Package

@carbon/ibmdotcom-web-components

CodeSandbox example

https://carbon-design-system.github.io/carbon-for-ibm-dotcom/next/web-components/?path=/story/components-lead-space--tall-with-image

Steps to reproduce the issue (if applicable)

Navigate to any Lead space story that uses a gradient. Not sure if there is a publically hosted RTL version of the Storybook. Locally I've been:

Checkout the main branch locally
yarn build-storybook:rtl
Start a server for storybook-static-rtl/index.html
Browse to the Lead space > Tall with image Story

Release date (if applicable)

No response

Code of Conduct

[X] I agree to follow this project's Code of Conduct
[X] I checked the current issues for duplicate issues

m4olivei commented 3 months ago

Note that this is an issue in both v1 and v2, and we'll need to fix it for both.

andy-blum commented 3 months ago

Worth noting this does not appear to be an issue with the CDN URLs. Perhaps it's a storybook-only issue?

Edited to use tagged CDN releases and the problem appears!

https://cdpn.io/pen/debug/oNOEgxN/c58d6ab48ee80510e0c8124a535e7e5e

carbon-design-system / carbon-for-ibm-dotcom