fix(button): center icon inside danger ghost icon only buttons

[AliAldobyan]

Closes #16841

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

Changelog

Removed

• removed "padding-inline-end" in _button.scss file line 286

Testing / Reviewing

1- Go to react storybook.
2- Click on Button Component.
3- Choose Icon Button.
4- Choose danger--ghost as the button kind.

Recording is attached.

Screen.Recording.2024-07-08.at.3.41.46.PM.mov

[github-actions]

All contributors have signed the DCO.
_{Posted by the DCO Assistant Lite bot.}

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Name	Link
🔨 Latest commit	a013e60
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/66edc7f9faa0520008319fbe
😎 Deploy Preview	https://deploy-preview-16923--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	a013e60
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/66edc7f914ff4d0007d43bad
😎 Deploy Preview	https://deploy-preview-16923--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[AliAldobyan]

I have read the DCO document and I hereby sign the DCO.

[tay1orjones]

Hey thanks for taking a look at this!

Removing this style causes the button to inherit the padding styling from the general button styles, which does not match the spec. Ghost buttons should not have additional padding like the other buttons.

This PR:

What's correct in prod right now:

You'll need to target a different selector to apply the proper modifications necessary. It could go after this selector in the icon-only styling block

carbon/packages/styles/scss/components/button/_button.scss

Lines 173 to 176 in c8b452a

	&.#{$prefix}--btn--ghost .#{$prefix}--btn__icon,
	&.#{$prefix}--btn--danger--ghost .#{$prefix}--btn__icon {
	margin: 0;
	}

[AliAldobyan]

Thank you @tay1orjones for your review, I have applied the modifications by adding

&.#{$prefix}--btn--danger--ghost { padding-inline-end: calc( layout.density('padding-inline') - convert.to-rem(16px) ); }

[AliAldobyan]

Hello @tay1orjones @alisonjoseph , Can you review the latest update please.

Regards.

[tay1orjones]

There is a slight upward pixel shift of the vertical icon alignment when comparing with the primary kind

2024-08-12.at.14.20.10-MAIN-Google.Chrome.mp4

[AliAldobyan]

There is a slight upward pixel shift of the vertical icon alignment when comparing with the primary kind

2024-08-12.at.14.20.10-MAIN-Google.Chrome.mp4

There is a slight upward pixel shift of the vertical icon alignment when comparing with the primary kind has been fixed.

Screen.Recording.2024-08-19.at.12.15.23.PM.mov

[tay1orjones]

Looks great! Sorry for the delay in review