new spacing tokens + spacing docs + margin props for input components

[balzss]

INSTUI-4387
INSTUI-4367

test plan:

• read new spacing docs, check for errors and missing info
• try the new space tokens on some components (like buttons or view)
• try the new margin prop in the following components:
  • DateInput2
  • TextInput
  • NumberInput
  • ColorPicker
  • FormField
  • TextArea

[github-actions]

PR Preview Action v1.4.8
🚀 Deployed preview to https://instructure.github.io/instructure-ui/pr-preview/pr-1812/
on branch gh-pages at 2024-12-13 11:03 UTC

[balzss]

@matyasf @HerrTopi this is the first part of the spacing update. this pr adds the tokens, the guide and the margin prop for some components. in order to keep the pr normal size and make the review easier, other components will get the margin prop in other PRs

[matyasf]

we should put the full link here, so it works in IDEs

[balzss]

I can do that but then it'll link to the deployed page even when developing, I think it's better practice to only use full urls when it navigates outside the page

[matyasf]

Node uses the full links too, e.g.

But on the other hand older versions of InstUI should reference older version of our docs..

[matyasf]

Nice work, I like it so far :)

It would be good to have a visual test for all these margins. I suggest to make a large single test (like withTooltipPositioning.tsx) that has all the components with a set margin besides each other

[matyasf]

I'd also put here all components with some fixed spacing value to test that it works for all of them. something like:

<Button margin="space4">Button</Button>
<NumberInput margin="space4">NumberInput</NumberInput>
<TextInput margin="space4">TextInput</TextInput>
...

[HerrTopi]

Lgtm when the already mentioned issues are fixed.

Nice work!