Action Buttons displaying tiny icons

[deloreyj]

🐛 Bug Report

When used on a site that sets box-sizing with the univeral box sizing with inheritance approach, the icons inside of action buttons appear tiny.

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

🤔 Expected Behavior

Icons should appear normal size regardless of global box sizing rules

😯 Current Behavior

Icon appears tiny inside action button

💁 Possible Solution

It appears to be happening because the inside the action button does not define a box-sizing rule, which typically works because it expects the default content-box. One solution would be to add a style rule like the following to prevent the svg from inheriting

.ActionButton svg {
  box-sizing: initial
}

or

.ActionButton svg {
  box-sizing: unset
}

🔦 Context

Magento runs react-spectrum UI inside the Magento shell and the shell CSS causes this bug in all our apps

💻 Code Sample

https://github.com/deloreyj/spectrum-action-button/tree/master

🧢 Your Company/Team

Adobe Magento

[evargast]

Just dropping a comment here to follow this thread. Stumbled upon the same situation just now! :)

[devongovett]

@deloreyj I cloned your report into a code sandbox and the issue doesn't seem to occur. https://codesandbox.io/s/eloquent-wildflower-9jsn7 I did have to change @mage-catfish/react-script to the normal react-scripts though. Perhaps something in that?

@evargast do you have an example?

[evargast]

@devongovett

Sure thing!

You can reproduce it on storybook (npm run storybook) or just standalone (npm run start)
https://github.com/evargast/tiny-icons

Live Storybook for it: https://evargast.github.io/tiny-icons/

[devongovett]

Ah, so setting * { box-sizing: border-box } seems to break it. I think I missed that in the original issue. I suppose we could override in Spectrum CSS to set box-sizing: content-box on the icon, but I imagine that isn't the only place we'd need to do that. Is there a reason why you're setting it on every element rather than individual elements in your own components?

[deloreyj]

The specific answer is we don't own the html template that our react spectrum app gets rendered inside.

More generally, it's fairly common practice for sites built pre flex/grid to set box-sizing to border-box globally to make layout more intuitive. If I thought this bug would be isolated to a weird decision made in the Magento codebase (of which there are many), I'd have just patched it and moved on. But I suspect a lot of sites with legacy baggage may run into this issue.

[devongovett]

👍 makes sense. We can patch this in the button css here:

react-spectrum/packages/@adobe/spectrum-css-temp/components/button/index.css

Lines 100 to 107 in 49ce140

	.spectrum-Icon {
	max-block-size: 100%;
	flex-shrink: 0;
	order: 0; /* always be before the label, regardless of DOM order */
	transition: background var(--spectrum-global-animation-duration-100) ease-out,
	fill var(--spectrum-global-animation-duration-100) ease-out;
	}

Feel free to submit a PR to help move this along! 🙇

[deloreyj]

Will do, thanks for the direction!