Implement onyx grid centering util classes

[JoCa96]

Why?

As a UI developer, I often need to center elements. E.g. searchbars like these:

They can be centered currently by combining using the onyx-grid-span-full class together with some custom CSS:

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--onyx-grid-gutter);

But as this doesn't align with the surrounding grid and is not intuitive to use, onyx should provide a solution out-of-the-box.

Acceptance criteria

• There is a set of new classes to center elements exclusively (=> without other elements in the same row)
• Docs are extended to explain how it has to be used (especially that a wrapper element is necessary)
• There are tests the ensure correct behaviour, especially with surrounding elements
• Edgecases are covered:
  • the span amount is equal or higher then the grid column amount => The element spans all columns and must not grow the column amount

Implementation details

Centered elements should not share their row with other elements.
Unfortunately it doesn't seem to be possible to achieve this without a wrapper element, as we need an (pseudo-)element to block the columns before the centered content.

PoC

/**
 * centered elements can only have a even number of columns, so `i` is always a multitude of 2
 */
.onyx-grid-span-#{$i}-center-wrapper {
  display: grid; /** display: contents; might also work, then no subgrid is necessary */
  grid-column: 1/-1; /** span full width */
  grid-template-columns: subgrid;

  &::after,
  &::before {
    content: ' ';
  }

  &::before {
    grid-column: span calc((var(--onyx-grid-columns) - $i) / 2)
  }

  &>* {
    grid-column: span 4;
    background-color: red;
  }

  &::after {
    grid-column: span calc((var(--onyx-grid-columns) - $i) / 2)
  }
}

Reference implementations

DEV handover checklist

Storybook

DEV handover done with: @ADD_DEV_NAME_HERE

Testing

• covered by visual screenshot tests
• covered by functional tests (Playwright or unit test)

Documentation

• "New" badge in Storybook is added, see storybook-addon-tag-badges
• auto-generated Storybook code snippets are checked
• component status has been updated in the docs overview
• updated version is released
• updated documentation is deployed

Other

• follow-up tickets were created if necessary (add links below)

UX handover checklist

UX handover done with: @ADD_UX_NAME_HERE

Naming is aligned with Figma

• component name
• which support components are used and how they are named
• all property names and types

Documentation

• Storybook category is aligned with Figma
• Storybook examples are checked

Other

• follow-up tickets were created if necessary (add links below)