Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
2 tasks done
m4olivei opened this issue Apr 2, 2024 · 2 comments
Open
2 tasks done

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

m4olivei opened this issue Apr 2, 2024 · 2 comments
Labels
adopter: AEM used when component or pattern will be used by this adopter bug Something isn't working dev Needs some dev work owner: Innovation Team used when the engineering work will be done by Hybrid Cloud with DDS engineers as consultants

Comments

@m4olivei
Copy link
Contributor

m4olivei commented Apr 2, 2024 •
edited

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.

image

image

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
@m4olivei m4olivei added bug Something isn't working dev Needs some dev work owner: Innovation Team used when the engineering work will be done by Hybrid Cloud with DDS engineers as consultants labels Apr 2, 2024
@m4olivei
Copy link
Contributor Author

m4olivei commented Apr 2, 2024

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

@m4olivei m4olivei changed the title [Leadspace RTL]: The gradeint on Lead space component should be mirrored in RTL [Leadspace RTL]: The gradient on Lead space component should be mirrored in RTL Apr 2, 2024
@andy-blum andy-blum added the adopter: AEM used when component or pattern will be used by this adopter label Apr 2, 2024
@andy-blum
Copy link
Member

andy-blum commented Apr 4, 2024 •
edited

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!

Screenshot 2024-04-04 at 3 03 43 PM

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

@andy-blum andy-blum mentioned this issue Apr 4, 2024
Merged
kodiakhq bot pushed a commit that referenced this issue Apr 19, 2024
@andy-blum
fix(leadspace): be explicit about svg closing tags (#11696)
b20cd09 
### Related Ticket(s)

Closes #11690 

https://jsw.ibm.com/browse/ADCMS-4848

### Description

Updates leadspace background gradient stops to use explicit closing tabs. Previously gradient stops were authored as self-closing tabs which seem to render as nested stops

<img width="766" alt="Screenshot 2024-04-04 at 3 03 43 PM" src="https://github.com/carbon-design-system/carbon-for-ibm-dotcom/assets/25532785/70bb9e47-b9a0-4c13-93d7-fb4639c263ad">

### Testing Instructions

Replace the tagged releases in [this codepen](https://codepen.io/andy-blum/pen/oNOEgxN/c58d6ab48ee80510e0c8124a535e7e5e) with the preview CDN URLs

### Changelog

**Changed**

- Fixes a bug where leadspace gradients don't render correctly
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
adopter: AEM used when component or pattern will be used by this adopter bug Something isn't working dev Needs some dev work owner: Innovation Team used when the engineering work will be done by Hybrid Cloud with DDS engineers as consultants
Projects
Carbon for IBM.com
Status: No status
Milestone
No milestone
Development

No branches or pull requests
2 participants
@m4olivei @andy-blum