rux-button icon-only - no change in icon size with size prop
NicDominguez opened this issue · 2 comments
Describe the bug
When using rux-button as an icon only button I would expect the icon size to grow with the size prop. It does not appear to respond to the size prop except to shift position as the container grows.
To Reproduce
Can see issue in Astro storybook
https://astro-components.netlify.app/?path=/story/components-button--borderless&args=borderless:false;iconOnly:true;icon:more-vert;disabled:false;size:large;type:button
Current behavior
Icon does not change in size at all in response to the prop. Use of shadow parts is necessary for changing size but that introduces issues with positioning inside the button container.
Expected behavior
When in icon-only mode have the icon scale with the size prop.
Screenshots
size=small
size=medium
size=large
CodeSandbox
Environment (please complete the following information):
- Browser [chrome]
- @astrouxds/astro-web-components version [7.0.1]
- Framework, if applicable (React/MUI Box (as a wrapper))
- Framework wrapper version, if applicable (@astrouxds/react)
Additional context
This may be intended functionality but I find it unintuitive if the size property is really just padding and the internal text/icon does not scale with the padding.
Hey Nick, this is currently the intended behavior for sizing in Astro adjusting padding only. The topic has been broached before, but hadn’t been a priority for investigating further. Aside from it being unintuitive are there other problems it’s causing?
I worked with Nic on this one and he found a workaround with the icon shadow part. The difficulty was figuring out MUI syntax to access the part
I believe this is working as intended now that the shadow part is being accessed. Case closed