Regression - alignment on icons in Discount Badges

Shopify / polaris

Shopify’s design system to help us work together to build a great experience for all of our merchants.

https://polaris.shopify.com

Other

5.81k stars 1.17k forks source link

Regression - alignment on icons in Discount Badges #12468

Open iphipps opened 3 months ago

iphipps commented 3 months ago

Summary

In web admin at the discounts creation modal, the icons are misaligned

link to the react component

Expected behavior

Aligned icons

Actual behavior

misaligned icons

Steps to reproduce

[Link to sandbox]()

spin url or go to https://admin.shopify.com/store/{your store}/discounts
click the create discount button to see the icons

Are you using React components?

Yes

Polaris version number

"@shopify/polaris-icons": "9.3.0",     "@shopify/polaris-internal": "13.21.1",     "@shopify/polaris-tokens": "9.3.0",     "@shopify/polaris-viz": "14.2.0",     "@shopify/polaris-viz-core": "14.2.0",

Browser

chrome

Device

mac os

sgilroy85 commented 3 months ago

This is also affecting the Shipping Label bulk purchase page. The order cells with the globe icon and the shipping service cells with the info icon are now showing a scroll bar. If we delete the icon from the dom the scrollbar disappears.

willnguyen1312 commented 3 months ago

Hi guys, I think this is the culprit causing our layout in ShippingLabels section to be broken related to Icon's styling

https://github.com/Shopify/polaris-internal/commit/b0812db3e5f256cd47645053385673d6c697e8a3#diff-ca33e9d43e366c169d1bcc09b4fb1053f1aa766f958aacf7578bc9ed90bf262dL94

Previously, Icon's svg was using display: block instead of its default inline. The latest style doesn't work nicely 😅

https://github.com/user-attachments/assets/9c2892e9-041c-43ee-ab4b-d47c14711ef0