fix(button): follow core Carbon icon positioning

[emyarod]

Related Ticket(s)

#696

Description

This PR updates the button styles to more closely match the styles from core Carbon and apply them to the web component version. Confirm that all button variants (default, icon, text + icon) appear as expected (including expressive versions)

original:

updated:

core Carbon (expressive):

[ibmdotcom-bot]

Deploy preview created for Carbon Web Components - React:
https://carbon-web-components-react.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/697/index.html

Built with commit: b1b7be42102becc61f3960524be2ece693d0d2c1

[ibmdotcom-bot]

Deploy preview created for Carbon Web Components:
https://carbon-web-components.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/697/index.html

Built with commit: b1b7be42102becc61f3960524be2ece693d0d2c1

[ibmdotcom-bot]

Deploy preview created for Carbon Web Components - Vue:
https://carbon-web-components-vue.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/697/index.html

Built with commit: b1b7be42102becc61f3960524be2ece693d0d2c1

[oliviaflory]

@emyarod I noticed the ghost and ghost danger buttons have a slight issue where the icon and text overlap in the text + icon variants:

Otherwise looks great!

[emyarod]

@oliviaflory the ghost variants should be fixed now, also added a fix for the condensed icon layout!

[ibmdotcom-bot]

Deploy preview created for Carbon Web Components - Angular:
https://carbon-web-components-angular.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/697/index.html

Built with commit: b1b7be42102becc61f3960524be2ece693d0d2c1

[oliviaflory]

@emyarod thanks for correcting the overlap!

My one question is about the condensed versions of the ghost buttons

In the primary button, the regular is spaced out with ~64px between the text and icon, and the condensed seems to be ~ 4 or 8px space between text and icon

Regular

Condensed

In the ghost button version, they seem to be the same amount of space

Regular

Condensed

I can't see any knobs to change from regular to condensed in the Carbon react storybook, so I'm not sure what the expected spacing is, would you mind double checking? If this is the same as the Carbon one, lmk and I can approve!

[emyarod]

@oliviaflory the condensed sizing seems to be exclusive to carbon-web-components, it was introduced here (#468) for better support for the data table's action bar in core Carbon. If this is something we don't want to display in our storybook I can remove that option

alternatively I can make the condensed ghost button match the other condensed buttons. which option would you prefer to go with?

[shixiedesign]

Hey @emyarod @oliviaflory , looking into this a bit, it seems like Carbon react handles ghost button styles differently than Carbon web components. Is it simply that WC's ghost button styling need an update? Ideally we don't introduce new variables .

[emyarod]

@shixiedesign @oliviaflory sounds like it would be better to remove the condensed option from the storybook and keep it internal to WC then. we can also separate the work for aligning the ghost button implementations from this PR so that the downstream expressive modal work can continue in the meantime

[emyarod]

@oliviaflory @shixiedesign the ghost buttons should be resolved now. I left the icon-layout knob in Storybook, but it's specific to carbon-web-components. it just has no effect on the ghost buttons (but will have effects on the other button types)

[jeffchew]

LGTM!

[oliviaflory]

thanks @emyarod 👍