UISeeds - Button Component

[jaredcwhite]

Copied over from https://github.com/bloom-housing/bloom/issues/3336

(Audit Link) (Notion Docs Link)

Design Spec https://www.figma.com/file/SsYt5YsgbmOPbwr5Qk2RKB/bloom-core-library?type=design&node-id=3303-10456&t=tdoCIOYsnlmcWDg9-0

zeroheight https://exygy.zeroheight.com/styleguide/s/100882/p/7607be-button/b/93a6d7

Spec notes as of May 10:

The dual cases of Button using <button> or using <a href> under the hood will now be handled by this single Button components. The separate Link component will not handle links which visually appear button-like.

---

Previously:

• Link / Button would be different components, so for the time being, let's just focus on the Button MVP flavors - the bordered / themed flavors and expanding from there

[slowbot]

@jaredcwhite updated docs to reflect "text button" and "link button" variants

[slowbot]

@jaredcwhite Looks like we had a disconnect on the "text button" variant

• the intention here was for a button that is fully styled as a link (no padding), maybe this is a sub-variant? https://www.figma.com/file/SsYt5YsgbmOPbwr5Qk2RKB/bloom-core-library?type=design&node-id=3303%3A10459&mode=design&t=eXgjehptYY4jhbU6-1 https://polaris.shopify.com/components/actions/button
• also the name of the variant that I propose is "text button" https://shoelace.style/components/button#text-buttons
• the proposed sizes here are small and medium, rather than small and large
• what is your order of operations with doing the zeroheight docs? I would expect to see them at the same time as this issue

[jaredcwhite]

Yeah once the PR is merged, the PR author (aka me) should go update zeroheight, which I forgot. Oops, will fix.

Regarding your other feedback, I'm confused what you're asking me to change? The variant prop to text rather than borderless-text? The font sizes are all the same as the other button variants (sm, md, lg), but I can make large equal medium for text buttons if there shouldn't be large.

Regarding padding, I thought these might be placed inline alongside other buttons so they'd need the same padding/dimensions (and I think that's how Shoelace works). But if not, I can remove the padding.

[slowbot]

1. I suggest renaming the variant
2. We don't use the large link size anywhere in the app
3. I would remove the padding for now, the use cases I see don't use it

[jaredcwhite]

@slowbot All right, this should be resolved now in #58. Let me know if that looks good to you.

[slowbot]

Looks to me! @jaredcwhite