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

[Bug]: the icon inside IconButton with kind prop danger--ghost is not aligned to center #16841

Closed
2 tasks done
Gururajj77 opened this issue Jun 21, 2024 · 3 comments · Fixed by #16923
Closed
2 tasks done

[Bug]: the icon inside IconButton with kind prop danger--ghost is not aligned to center #16841

Gururajj77 opened this issue Jun 21, 2024 · 3 comments · Fixed by #16923
Labels
afrohacks See https://ibm.biz/afrohacks-hackathon component: button hacktoberfest See https://hacktoberfest.com/ needs: community contribution Due to roadmap and resource availability, we are looking for outside contributions on this issue. role: dev 🤖 severity: 4 https://ibm.biz/carbon-severity type: bug 🐛

Comments

@Gururajj77
Copy link
Contributor

Package

@carbon/react

Browser

No response

Package version

v11.60.1

React version

v18

Description

The icon inside the IconButton is not center aligned when the danger--ghost is used with kind prop

Reproduction/example

https://react.carbondesignsystem.com/?path=/story/components-button--icon-button&args=kind:danger--ghost;tooltipAlignment:center;tooltipPosition:bottom

Steps to reproduce

Go to the above storybook link and hover on the IconButton.

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
@Gururajj77
Copy link
Contributor Author

the user has managed to fix it using below css, this might help:

.cds--btn--danger--ghost {
  -webkit-padding-end: unset;
  padding-inline-end: unset;
}

@Gururajj77 Gururajj77 changed the title [Bug]: the icon inside IconButton with kind prop danger--ghost is not aligned to center [Bug]: the icon inside IconButton with kind prop danger--ghost is not aligned to center Jun 21, 2024
@alisonjoseph
Copy link
Member

This isn't a supported variant combination per design docs.
https://carbondesignsystem.com/components/button/usage/#danger-button-variations
https://ibm-studios.slack.com/archives/C0M053VPT/p1692220573334289

@Gururajj77 Gururajj77 closed this as not planned Won't fix, can't repro, duplicate, stale Jun 21, 2024
@Gururajj77 Gururajj77 reopened this Jun 21, 2024
@Gururajj77 Gururajj77 added severity: 4 https://ibm.biz/carbon-severity and removed severity: 3 https://ibm.biz/carbon-severity labels Jun 21, 2024
@guidari guidari added needs: community contribution Due to roadmap and resource availability, we are looking for outside contributions on this issue. hacktoberfest See https://hacktoberfest.com/ afrohacks See https://ibm.biz/afrohacks-hackathon labels Jun 21, 2024
This was referenced Jul 8, 2024
Closed
Merged
@tay1orjones
Copy link
Member

Related #14300

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
afrohacks See https://ibm.biz/afrohacks-hackathon component: button hacktoberfest See https://hacktoberfest.com/ needs: community contribution Due to roadmap and resource availability, we are looking for outside contributions on this issue. role: dev 🤖 severity: 4 https://ibm.biz/carbon-severity type: bug 🐛
Projects
Design System
Archived in project
Milestone
No milestone
5 participants
@alisonjoseph @tay1orjones @sstrubberg @guidari @Gururajj77