Condensed container component

[janhassel]

Summary

Related: #6202, #7704, #10616

This issue is to further discuss the addition of a utility component which would locally override spacing tokens to support condensed UI zones like sidebars based on a discussion with @tw15egan and @aagonzales.

---

In situations where many components (especially form elements) are placed in a narrow container such as a sidebar, the need for more condensed components has been identified. The current sm size or proposed xs size variants do not fully cover this use case as the horizontal space / padding inside the components is critical.

The idea @tw15egan, @aagonzales and I came up with is to offer a utility component that locally overrides the spacing token scale to only affect its children.
This would mean that (theoretically) no additional prop or individual component work would be needed and all components should adapt correctly and consistently.

:root {
  --cds-spacing-05: 1rem;
}

.cds--condensed-zone {
  --cds-spacing-05: 0.5rem; // can be hardcoded or dynamically calculated with a predefined factor
}

Any component using spacing-05 (like for padding-left and padding-right) would then render as a narrow / condensed variant. Obviously, the entire spacing scale should be redefined instead of just individual values.

This utility component should only be used in contexts with no alignment to other components, meaning that it should not be used in the main area of a UI for example but only in something like a slide-in or slide-over sidebar. In this context all components should be children of the utility component to achieve consistency and alignment within the zone. This needs to be clearly stated in the design guidance / documentation.

The type scale would also likely need to be adjusted a bit.

Justification

No response

Desired UX and success metrics

No response

Required functionality

No response

Specific timeline issues / requests

No response

Available extra resources

Our UX Engineering team will be able to support the development of this enhancement

Code of Conduct

• I agree to follow this project's Code of Conduct

[thyhmdo]

This will require more research and visual/design work for this proposal