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.

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

[c4d-button-cta]: CTA icon is out of alignment #11959

Closed
2 tasks done
andy-blum opened this issue Aug 2, 2024 · 0 comments · Fixed by #11966
Closed
2 tasks done

[c4d-button-cta]: CTA icon is out of alignment #11959

andy-blum opened this issue Aug 2, 2024 · 0 comments · Fixed by #11966
Assignees
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 package: web components Work necessary for the IBM.com Library web components package severity 3 Affects minor functionality, has a workaround

Comments

@andy-blum
Copy link
Member

Description

The icon in the button-cta isn't aligned properly. It appears that the SVG icon is absolutely positioned and transformed.

Screenshot 2024-08-02 at 2 46 55 PM Screenshot 2024-08-02 at 2 47 33 PM

Component(s) impacted

c4d-button-cta

Browser

Firefox

Carbon for IBM.com version

2.11.1

Severity

Severity 3 = The problem is visible or noticeable to users but does not impede the usability or functionality. Affects minor functionality, has a workaround.

Application/website

ibm.com

Package

@carbon/ibmdotcom-web-components

CodeSandbox example

https://www.ibm.com/standards/carbon/web-components/iframe.html?knob-CTA%20style%20(cta-style)=button&knob-CTA%20type%20(cta-type)=local&knob-Copy%20(copy):=Lorem%20ipsum%20dolor%20sit%20amet&knob-Content%20link%20href%20(href)=https://www.example.com&id=components-cta--default&viewMode=story

Steps to reproduce the issue (if applicable)

No response

Release date (if applicable)

No response

Code of Conduct

@andy-blum andy-blum added bug Something isn't working severity 3 Affects minor functionality, has a workaround dev Needs some dev work package: web components Work necessary for the IBM.com Library web components package adopter: AEM used when component or pattern will be used by this adopter owner: Innovation Team used when the engineering work will be done by Hybrid Cloud with DDS engineers as consultants labels Aug 2, 2024
@m4olivei m4olivei self-assigned this Aug 5, 2024
kodiakhq bot pushed a commit that referenced this issue Aug 7, 2024
### Related Ticket(s)

Closes #11959

### Description

Fixes an icon alignment issue in the `<c4d-button-cta>` component by removing style overrides that interfered with, or were already covered by extending `c4d-button`.

### Changelog

**Changed**

- Fix button-cta styles to correct icon alignment

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
@kodiakhq kodiakhq bot closed this as completed in #11966 Aug 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
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 package: web components Work necessary for the IBM.com Library web components package severity 3 Affects minor functionality, has a workaround
Projects
Status: Done
Development

Successfully merging a pull request may close this issue.

2 participants