Create IconButton component(s)

[psirenny]

This creates a much needed IconButton component with four variants: ghost, outline, soft, and solid. @eakbulut would very much appreciate your feedback! There were some decisions made without an obvious right answer.

Zero-offset outline focus ring

I chose to make the outline variant's focus ring share the button's outline. For example:

TailwindUI's canonical outline button does the same thing; but Catalyst UI (also created by the Tailwind Team), does not 🤷. I favored reusing the outline because it's easier to implement and I thought it still looked good. But it's slightly inconsistent, because other elements focus rings are 2px offset from the component. If removing the offset is undesirable then we can implement another way.

Icon scaling

I chose to make the icon scale with the component size. This seemed to be the least brittle approach because it works with any button size. However, I don't know if it's the best approach from a visual POV. It didn't seem bad to me so I kept it. TailwindUI's examples don't scale the icon in an IconButton though. For example:

Skeleton button supports colors and icons

I chose to make the skeleton state very flexible by allowing developers to customize the color and icon. I suspect that if one is using a skeleton in the first place, that they don't know what the color or icon ought to be. Otherwise, they'd just show that. That being said, this allows them the option of having a more specific or less specific skeleton. It's probably easier to see what I mean by experimenting with Storybook's controls.

Notes:

I chose to control aspects of the component with CSS classes instead of React properties wherever possible. For example, making the button a circle is just done by passing in rounded-full. Similarly, controlling the size is done by passing in size-x.

The toggle button is very similar to this component but I'll hold off on updating it until we nail this one down.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
spear-ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 29, 2024 9:01am

[psirenny]

@eakbulut you gave the green light on this one yesterday, so I'm going to merge this in.