Layout paddings and margins

[Fercas123]

Area

UI Components

The problem

When implementing layout components, we've come across the constant need to implement a class just to add paddings and margins that come from a theme level variable.

The solution

Layout components could have a default multiplier of 0 to keep the margin and padding off, but allow for easy implementation trough variables.

Alternatives and examples

for flex implementation:

...
/* Default variables applied to the root element */
.saltFlexLayout {
  --flexLayout-gap-multiplier: var(--flexLayout-gap-density-multiplier, 3);
  ++ --flexLayout-margin-multiplier: var(--flexLayout-margin-density-multiplier, 0);
  ++ --flexLayout-padding-multiplier: var(--flexLayout-padding-density-multiplier, 0);
  --flexLayout-layout-display: flex;
  --flexLayout-direction: row;
  --flexLayout-wrap: nowrap;
  --flexLayout-justify: flex-start;
  --flexLayout-align: stretch;
  --flexLayout-separator: var(--salt-size-border);
  --flexLayout-gap: calc(var(--salt-size-unit) * var(--flexLayout-gap-multiplier));
  ++ --flexLayout-margin: calc(var(--salt-spacing-100) * var(--flexLayout-margin-multiplier));
  ++ --flexLayout-padding: calc(var(--salt-spacing-100) * var(--flexLayout-padding-multiplier));
}

/* Style applied to the root element */
.saltFlexLayout {
  gap: var(--flexLayout-gap);
  ++ margin: var(--flexLayout-margin);
  ++ padding: var(--flexLayout-padding);
  ...

Are you a JPMorgan Chase & Co. employee?

• I am an employee of JPMorgan Chase & Co.

[Fercas123]

@bhoppers2008 tagging you for visibility

[bhoppers2008]

Sprint goal: PR review
@Fercas123 has PR up for review + support from design.

[mark-tate]

Tecno goal: will be released to Core in next release
Reviewers: stakeholder review required by EOS, ask MTK
Mark to review

[mark-tate]

2 ticks away..
Kris and I will review by next standup

[mark-tate]

example improvement to be added by EOS

[mark-tate]

examples updated and new review required

Grid changes blocked then by this change