Apply standard spacing across all components

weaveworks / ui-components

A collection of UI components that are shared across Weaveworks projects

http://weaveworks-ui-components.s3-website-us-west-2.amazonaws.com/

Apache License 2.0

30 stars 26 forks source link

Apply standard spacing across all components #424

Closed fbarl closed 5 years ago

fbarl commented 5 years ago

Follow-up on #400 - probably it makes sense starting with large sizes down to small ones:

[ ] 64px xxl
[ ] 48px xl
[ ] 32px large
[ ] 24px ~base~ medium
[ ] 16px ~small~ base
[ ] 12px small
[ ] 8px xs
[ ] 4px ~mini~ xxs

bia commented 5 years ago

I would go with xxs instead of mini to avoid confusion.

bia commented 5 years ago

We'll address #324 within the scope of this issue. cc @guyfedwards

rndstr commented 5 years ago

base

my 2c: is base being used anywhere else? this seems more like a default to me. base tells me that's the value we are basing all the others on which could be something completely different than the 'usual' value to use.

maybe we can name it medium instead to go with the sizing names of the others?

bia commented 5 years ago

@rndstr But at this point we are basing all of the other values on the base. From #432 : dsjh6wxuwaafslu

rndstr commented 5 years ago

@bia that makes totally sense then, thanks for explaining!

Should we also define them in relation to base then instead of hardcoding? https://github.com/weaveworks/ui-components/blob/e019f6c486ca968c7bf43ee3047766c6ab15713b/src/theme/spacings.js#L3-L11