Skip to content

Determine what default sizing means for components

The following discussion from !2452 (merged) should be addressed:

  • @tauriedavis started a discussion: (+4 comments)

    Should sm be the default size? Its 16px, so this aligns with the line height of our UI text. That is likely why its most often used

  • @jeldergl

    If we change it would we have to audit all uses?

    This brings up a great question of how we define defaults. Should the default be agnostic of how it's used in the product? Should it always be the smallest size? Should it depend on the component?

    • Avatars use 1 as the default, which I think is 64 export const avatarSizeOptions = [96, 64, 48, 32, 24, 16];. The array is listed in reverse order of what I'd expect.
    • Modals use the md as default.
    • Icon default size is 16, which is from the middle of the available options export const glIconSizes = '8 12 14 16 24 32 48 72'.
    • Labels use default: '', where default is the 24px size, but it's never called medium, there are only default and small options.

    So my initial take was consistency, but as you can see there isn't such a thing, and based on the different needs I think that's maybe okay 🤷.

    I would say that the sm badge is my least favorite because it has barely any padding for icons and if it was made to be the default I'd want to explore that further.