Skip to content

Dimension tools: Add icons for block spacing and min. height #62618

@jasmussen

Description

@jasmussen

The current dimensions panel has icons for padding and margin stepped controls, but not for block spacing and min-height controls. This causes misalignment of the controls, making it less scannable. Additionally, in case of width-based controls, or axial gap configuration, an icon denoting the orientation can help anchor the feature.

Here's a design proposal that adds icons for block spacing and min-height, shown before and after:

before and after

Beyond lining up vertically, this also unifies the controls so that in the future, axial controls (row-gap or column-gap vs. just gap) could be added to the block spacing control. To that end, here are potential icon designs that would work for axial gap configurations:

dimensions-icons

Figma.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Design SystemIssues related to the system of combining components according to best practices.Needs Design FeedbackNeeds general design feedback.[Feature] Design ToolsTools that impact the appearance of blocks both to expand the number of tools and improve the experi[Type] EnhancementA suggestion for improvement.

    Type

    No type
    No fields configured for issues without a type.

    Projects

    Status

    🏗️ In Progress

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions