Skip to content

[Task](ui): create a dedicated tailwind token-based spacing utility #1641

@franzheidl

Description

@franzheidl

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    ui-componentsAll tasks related to juno-ui-components library

    Type

    No fields configured for Task.

    Projects

    Status

    New

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions