Revisit button component layout logic (& potentially layout system logic across the whole Design System)

neighbour-hoods / design-system-components

Storybook and UI component library for the Neighbourhoods design system.

0 stars 0 forks source link

Revisit button component layout logic (& potentially layout system logic across the whole Design System) #21

Closed pospi closed 10 months ago

pospi commented 12 months ago

[ ] Not sure that the 'sizes' should have anything to do with widths; and probably the default should be "auto" that scales to fit content because any font sizing changes or long text will break layout (as in the CreateOrJoinNH view implemented in #12)
[ ] The elements are sized to fixed dimensions in pixels. I don't think we should be using px as a unit for anything. ems are ideal, but would also settle for rem and viewport-relative sizings for layout elements.
- if there is agreement about this then we should take a pass and clean this up for all components

nick-stebbings commented 11 months ago

@pospi @adaburrows Will using rem instead of px make copying the designs more difficult? Have used px so far in everything as design tokens from figma are using that for spacing, although they actually leave out the unit in the token, the values would have to change on the design side first.

e.g. --nh-spacing-lg: 16; is without unit but is obviously meant to be px and not rem

The stuff about buttons makes sense. Will make some stories for the button sizes and play around with different defaults/text sizes

pospi commented 11 months ago

shrugs maybe mildly. You can probably change the default units in Figma somehow? Not sure.

But regardless, the math is generally pretty simple. For various accessibility reasons it's usually best to set a 16px base font size over the whole document and use that as your baseline; so in most cases you can just divide everything by 16 and use em units. Using text scaling to upsize entire components isn't something done often, so if you stick to applying font sizes to font-based leaf DOM nodes like paragraph and heading tags then you avoid the pixel size of your base em unit changing.

adaburrows commented 10 months ago

If things need to be relative to the root font size, use rem. If they need to be relative to the parent node font size, use em. If you just want pixel perfect absolute sizing, use px. Need to split a screen in half? Use percentages with no margins to size the two panes. Other than that, for a while it was considered good practice to use em/rem. Doesn't really matter too much to me, but I'm not a professional designer. I just used to make themes for various sites according to design practices in vogue in 2008. After I started being a software engineer full time, all of that got deferred to the designers.