Add gridfield component

2026-06-10 13:22:40 +02:00
parent e4fb7250ed
commit 9f99482a93
6 changed files with 108 additions and 3 deletions
@@ -0,0 +1,42 @@
 <!doctype html>
 <html lang="de">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Styleguide – Gridfield</title>
  <link rel="stylesheet" href="../styleguide.css">
 </head>
 <body class="sg-page-gridfield">
  <h1 class="sg-main-heading">Components – Gridfield</h1>
  <section id="component-gridfield">
    <p class="sg-preview-label">Component: Gridfield</p>
    <div class="sg-gridfield-demo" data-component="gridfield">
      <div class="sg-gridfield-row" data-gridfield-state="normal">
        <p class="sg-table-label">Komponente normal</p>
        <span class="sg-label">Label</span>
        <select class="sg-interaction-element sg-pulldown" aria-label="Gridfield Pulldown">
          <option selected>Auswahl</option>
        </select>
      </div>
      <div class="sg-gridfield-row" data-gridfield-state="input">
        <p class="sg-table-label">Eingabefeld</p>
        <span class="sg-label">Label</span>
        <input class="sg-interaction-element sg-input-single-line" type="text" placeholder="Einzeiliges Eingabefeld" aria-label="Gridfield Eingabefeld">
      </div>
      <div class="sg-gridfield-row" data-gridfield-state="disabled">
        <p class="sg-table-label">form-disabled</p>
        <span class="sg-label">Label</span>
        <select class="sg-interaction-element sg-pulldown sg-pulldown--disabled" aria-label="Gridfield deaktivierter Pulldown" disabled>
          <option>Nicht verfügbar</option>
        </select>
      </div>
    </div>
  </section>
 </body>
 </html>
@@ -28,6 +28,7 @@
      <ul class="sg-index-list">
        <li><a href="./components/cards.html">Cards</a></li>
        <li><a href="./components/gridfield.html">Gridfield</a></li>
        <li><a href="./components/interactive-elements.html">Interactive Elements</a></li>
        <li><a href="./components/charts.html">Charts</a></li>
        <li><a href="./components/data-display.html">Data Display</a></li>
@@ -122,6 +122,14 @@
      <tr><td>layout-search-field-width</td><td>dimension-search-field-width</td><td>Fixe Breite des Suchfeld-Inputs.</td></tr>
    </tbody></table>
    <h3 class="sg-sub-heading sg-section-h3">Gridfield</h3>
    <table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead><tbody>
      <tr><td>layout-gridfield-label-column-width</td><td>layout-input-label-width</td><td>Breite der Label-Spalte der Gridfield-Zeile.</td></tr>
      <tr><td>layout-gridfield-column-gap</td><td>spacing-small</td><td>Horizontaler Abstand zwischen Label und Control in der Gridfield-Zeile.</td></tr>
      <tr><td>layout-gridfield-row-gap</td><td>spacing-small</td><td>Vertikaler Abstand zwischen Label und Control in gestapelten Gridfield-Zeilen.</td></tr>
      <tr><td>layout-gridfield-field-max-width</td><td>layout-input-field-max-width</td><td>Maximale Breite des Control-Bereichs im Gridfield.</td></tr>
    </tbody></table>
    <h3 class="sg-sub-heading sg-section-h3">Pulldown and Menu</h3>
    <p class="sg-table-label">Changelog (2026-05-25): Overlay-Layer vereinheitlicht; Pulldowns liegen über Scorebars (Fix Relativmodus).</p>
    <table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead><tbody>
@@ -136,7 +144,6 @@
      <tr><td>layout-pulldown-panel-form-mobile-width</td><td>90%</td><td>Zielbreite für Pulldown-Panels mit Formularinhalt auf Mobile; wird durch die Viewport-Kappe begrenzt.</td></tr>
      <tr><td>layer-pulldown-panel</td><td>dimension-layer-pulldown-panel</td><td>Layer-Stufe geöffneter Pulldown-Ausklappfelder über übrigen Seiteninhalten.</td></tr>
      <tr><td>layout-multiselect-pulldown-panel-desktop-width</td><td>dimension-multiselect-pulldown-panel-desktop-width</td><td>Semantische Obergrenze für die Panelbreite geöffneter Pulldowns; das Panel darf über Triggerbreite wachsen, bleibt aber durch diese Breite und die Viewport-Kappe begrenzt.</td></tr>
      <tr><td>layout-multiselect-pulldown-panel-mobile-width</td><td>dimension-multiselect-pulldown-panel-mobile-width</td><td>Reservierter semantischer Alias für feste Mobile-Breite im Multiselektions-Pulldown; aktuell nicht aktiv genutzt, da das Panel inhaltsbasiert mit Viewport-Kappe skaliert.</td></tr>
      <tr><td>surface-menu-panel-portal</td><td>color-light-grey</td><td>Fläche des Sandwich-Menü-Panels für große und kleine Variante.</td></tr>
      <tr><td>text-menu-link-portal</td><td>color-font-dark</td><td>Linktextfarbe im Sandwich-Menü für große und kleine Variante.</td></tr>
      <tr><td>text-activatable-remove</td><td>text-control-default</td><td>Zeichenfarbe des Schließen-Kontrollfelds für aktive Filterzeilen innerhalb geöffneter Pulldown-Panel-Formbereiche.</td></tr>
@@ -2,6 +2,7 @@
@import "./styles/02-base.css";
@import "./styles/03-typography-helpers.css";
@import "./styles/10-components-interactive-elements.css";
@import "./styles/11-components-gridfield.css";
@import "./styles/20-patterns-portal-header.css";
@import "./styles/21-patterns-options-row.css";
@import "./styles/22-patterns-object-card.css";
@@ -77,11 +77,14 @@
  --layout-pulldown-panel-form-mobile-width: 90%;
  --layer-pulldown-panel: var(--dimension-layer-pulldown-panel);
  --layout-multiselect-pulldown-panel-desktop-width: var(--dimension-multiselect-pulldown-panel-desktop-width);
  --layout-multiselect-pulldown-panel-mobile-width: var(--dimension-multiselect-pulldown-panel-mobile-width);
  --layout-multiselect-pulldown-label-column-width-fallback: max-content;
  --layout-input-label-width: var(--dimension-input-label-width);
  --layout-input-field-desktop-width: var(--dimension-input-field-desktop-width);
  --layout-input-field-max-width: var(--dimension-input-field-max-width);
  --layout-gridfield-label-column-width: var(--layout-input-label-width);
  --layout-gridfield-column-gap: var(--spacing-small);
  --layout-gridfield-row-gap: var(--spacing-small);
  --layout-gridfield-field-max-width: var(--layout-input-field-max-width);
  --layout-form-input-field-max-width: calc(var(--layout-input-field-max-width) + 100px);
  --layout-search-field-width: var(--dimension-search-field-width);
  --layout-mode-toggle-local-height: var(--compact-interaction-height);
@@ -277,7 +280,6 @@
  --dimension-search-field-width: 15.3rem;
  --dimension-layer-pulldown-panel: 40;
  --dimension-multiselect-pulldown-panel-desktop-width: 500px;
  --dimension-multiselect-pulldown-panel-mobile-width: 80vw;
  --dimension-options-row-mode-toggle-width: 7rem;
  --dimension-options-row-help-panel-width: 16rem;
  --dimension-card-list-drawer-width: 40%;
@@ -0,0 +1,52 @@
 /* ========================================================= */
 /* Components: Gridfield                                     */
 /* ========================================================= */
    .sg-gridfield-demo {
      display: inline-flex;
      flex-direction: column;
      gap: var(--spacing-small);
      width: fit-content;
      padding: var(--spacing-large);
      border-radius: var(--radius-card);
      background: var(--surface-form-preview);
    }
    .sg-gridfield-row {
      display: grid;
      grid-template-columns: var(--layout-gridfield-label-column-width) minmax(0, 1fr);
      column-gap: var(--layout-gridfield-column-gap);
      align-items: center;
      width: 100%;
      max-width: var(--layout-gridfield-field-max-width);
    }
    .sg-gridfield-row .sg-label {
      min-width: 0;
      margin: 0;
      line-height: 1;
      color: var(--text-control-default);
    }
    .sg-gridfield-row .sg-interaction-element,
    .sg-gridfield-row .sg-pulldown-demo,
    .sg-gridfield-row .sg-pulldown {
      width: 100%;
      min-width: 0;
      max-width: 100%;
    }
    @media (max-width: 48rem) {
      .sg-gridfield-demo {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }
      .sg-gridfield-row {
        grid-template-columns: 1fr;
        row-gap: var(--layout-gridfield-row-gap);
        align-items: start;
        max-width: 100%;
      }
    }