frontend: Set theme spacing

[septum]

Description

• Set the theme spacing
• Create and export a ThemeSpacing enum

Testing Performed

Manual testing

[jdslaugh]

What do these represent?

[septum]

I was going for generic names for the spacing variants as using something like PageGutter could be self-descriptive, but the value could be repeated somewhere else.

[jdslaugh]

Do these map to something already? Curious why some are given a value while the others aren't. I haven't looked at the spacing variants for mui so maybe it's explained there.

[septum]

Not really a map, these values, which are in order 0, 0.5, 1, 2, 3 and 4, are used as a multiplier of the scaling factor to produce a value, so this enum is just a giving them a name.

It's expected to apply the enum members as following examples:

<Grid
- spacing={2}
+ spacing={ThemeSpacing.Base}
>
  <Component />
 </Grid>

const StyledComponent = styled(Component)(({ theme }: { theme: Theme }) => ({
- margin: "24px",
+ margin: theme.spacing(ThemeSpacing.Medium),
}));

There's an example in MUI's docs talking about the custom spacing.

[jecr]

Just to get a clearer idea, how would this be used in the field?, does this replace the values the current theme.spacing outputs?

[septum]

Just to get a clearer idea, how would this be used in the field?, does this replace the values the current theme.spacing outputs?

Copy-pasting the example from above, it's expected to be used as the following examples:

<Grid
- spacing={2}
+ spacing={ThemeSpacing.Base}
>
  <Component />
 </Grid>

const StyledComponent = styled(Component)(({ theme }: { theme: Theme }) => ({
- margin: "24px",
+ margin: theme.spacing(ThemeSpacing.Medium),
}));

[jecr]

Thanks for the usage example 🙌
So, just a thought, would it be a good idea to include the spacing options as properties of the theme object?

[septum]

I was going with that approach at first, but after discovering the theme.spacing method, I wanted to take advantage of what it could be done with it, like the multiple arity.

[jecr]

Gotcha, I think they can coexist, something like theme.spacing(theme.standardSpacing.medium) and in that standardSpacing you pretty much do the same you already have
I can see the naming and having to access the properties in theme twice a bit cumbersome 😅 though
What I do like about this is centralising everything in theme

[septum]

Agreed, I think centralizing it would improve its DevEx.

Maybe we could add a new function to be used instead of spacing(), or come up with a different naming strategy for the spacing to make it concise?

[jecr]

Something like theme.clutchSpacing.medium?, it is still long 😆 but yeah, that sounds easy to use

[septum]

I think the clutch prefix makes sense, so I turned that into an object in b40fc87. It ended up like:

theme.spacing(theme.clutch.spacing.md);

I was aiming to create something that only relies on the variant being the functions themselves, but that would require ugly workarounds, like creating the theme twice. Also, using this was unstable, even with arrow functions.

Should we settle for this?

cc @jdslaugh

[jdslaugh]

Yeah I think this is a good way to go for the time being.