Background
Many of our components internally use some kind of spacing, some even expose spacing-related props so users can customize select spacing properties to their needs.
Currently, these are implemented on a per-component basis, and the underlying logic or rationale may or may not be based on the tailwind spacing scale.
Task
Design and implement a universal spacing utility based on the tailwind spacing scale, and identify and refactor existing components that implement their own spacing logic to use it (Stack, Divider, …?).
Caller components should request a numeric spacing value from the tailwind scale and optionally a spacing property and direction; the utility should return the respective tailwind class.
Pseudocode example:
spacingClass(2, padding? direction? ) // -> returns "jn:py-2"
Goals/Requirements
- provide predictable and consistent, tailwind-compliant spacing for the components in our Design System
- support all spacing strategies/properties, such as
margin, padding, gap, with their respective single- or multi-direction modifiers, so callers can internally make a decision what property to use, but still expose only the prop for a numeric value, thus keeping the spacing property an internal implementation detail users do not have to worry about
- make sure the provided classes "survive" tailwind's JIT-mechanism
- provides
jn:-prefixed classes
Background
Many of our components internally use some kind of spacing, some even expose spacing-related props so users can customize select spacing properties to their needs.
Currently, these are implemented on a per-component basis, and the underlying logic or rationale may or may not be based on the tailwind spacing scale.
Task
Design and implement a universal spacing utility based on the tailwind spacing scale, and identify and refactor existing components that implement their own spacing logic to use it (
Stack,Divider, …?).Caller components should request a numeric spacing value from the tailwind scale and optionally a spacing property and direction; the utility should return the respective tailwind class.
Pseudocode example:
Goals/Requirements
margin,padding,gap, with their respective single- or multi-direction modifiers, so callers can internally make a decision what property to use, but still expose only the prop for a numeric value, thus keeping the spacing property an internal implementation detail users do not have to worry aboutjn:-prefixed classes