Add delete confirmation overlay pattern with tokens and docs

2026-05-28 08:51:04 +02:00
parent 9e16eb5480
commit bf7a6675fb
6 changed files with 170 additions and 0 deletions
@@ -49,6 +49,7 @@
        <li><a href="./patterns/formular-mit-abschnitten.html">Formular mit Abschnitten</a></li>
        <li><a href="./patterns/multiselektions-pulldown.html">Multiselektions-Pulldown</a></li>
        <li><a href="./patterns/text-layouts.html">Text Layouts</a></li>
+        <li><a href="./patterns/delete-confirmation-overlay.html">Delete Confirmation Overlay</a></li>
      </ul>
    </section>

@@ -0,0 +1,78 @@
+<!doctype html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Styleguide – Pattern Delete Confirmation Overlay</title>
+  <link rel="stylesheet" href="../styleguide.css">
+</head>
+<body>
+
+  <h1 class="sg-main-heading">Pattern – Delete Confirmation Overlay</h1>
+
+  <section id="pattern-delete-confirmation-overlay" class="sg-delete-confirmation-pattern">
+    <p class="sg-preview-label">Pattern: Löschbestätigung mit Overlay</p>
+
+    <div class="sg-delete-confirmation-pattern__stage" data-pattern="delete-confirmation-overlay">
+      <article class="sg-card sg-object-card sg-delete-confirmation-pattern__target" aria-label="Zu löschendes Objekt">
+        <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header">
+          <div class="sg-strong">Alcon Inc.</div>
+        </header>
+        <div class="sg-card-segment sg-card-segment--body sg-object-card__content">
+          <p class="sg-body">Dieses Objekt wird als Ziel für die Löschbestätigung abgedunkelt, solange das schwebende Fenster sichtbar ist.</p>
+        </div>
+      </article>
+
+      <article class="sg-card sg-delete-confirmation-pattern__floating-card" aria-label="Löschbestätigung" role="dialog" aria-modal="true" aria-labelledby="delete-confirmation-title">
+        <div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">
+          <p class="sg-body sg-delete-confirmation-pattern__text" id="delete-confirmation-title">Möchtest du Alcon Inc. wirklich löschen?</p>
+          <p class="sg-body sg-delete-confirmation-pattern__text">Du kannst das nicht rückgängig machen. Bestätige durch Eingabe von <span class="sg-delete-confirmation-pattern__code">DELETE</span>.</p>
+
+          <label class="sg-labeled-input-row sg-delete-confirmation-pattern__input-row">
+            <span class="sg-label">Bestätigung</span>
+            <input
+              class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
+              type="text"
+              placeholder="DELETE"
+              aria-label="Löschbestätigung durch DELETE"
+              data-delete-confirmation-input
+            >
+          </label>
+
+          <div class="sg-delete-confirmation-pattern__actions">
+            <button class="sg-interaction-element sg-button sg-button--active" type="button">Abbrechen</button>
+            <button
+              class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive"
+              type="button"
+              disabled
+              aria-disabled="true"
+              data-delete-confirmation-submit
+            >
+              Löschen
+            </button>
+          </div>
+        </div>
+      </article>
+    </div>
+  </section>
+
+  <script>
+    const confirmationInput = document.querySelector('[data-delete-confirmation-input]');
+    const confirmationSubmitButton = document.querySelector('[data-delete-confirmation-submit]');
+
+    if (confirmationInput && confirmationSubmitButton) {
+      const updateDeleteConfirmationState = () => {
+        const isValid = confirmationInput.value === 'DELETE';
+
+        confirmationSubmitButton.disabled = !isValid;
+        confirmationSubmitButton.setAttribute('aria-disabled', String(!isValid));
+        confirmationSubmitButton.classList.toggle('sg-button--process-inactive', !isValid);
+      };
+
+      confirmationInput.addEventListener('input', updateDeleteConfirmationState);
+      updateDeleteConfirmationState();
+    }
+  </script>
+
+</body>
+</html>
@@ -91,6 +91,20 @@
    <table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck im Pattern</th></tr></thead><tbody>
      <tr><td>layout-multiselect-pulldown-label-column-width-fallback</td><td>max-content</td><td>Fallback-Breite der gemeinsamen Labelspalte im Panel, bis die längste Labelbreite per Pattern-Logik ermittelt wurde.</td></tr>
    </tbody></table>
+
+    <h3 class="sg-sub-heading sg-section-h3">Delete Confirmation Overlay</h3>
+    <table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck im Pattern</th></tr></thead><tbody>
+      <tr><td>surface-delete-confirmation-overlay</td><td>color-light-grey</td><td>Hintergrundfläche des schwebenden Bestätigungsfensters.</td></tr>
+      <tr><td>text-delete-confirmation-overlay</td><td>color-font-dark</td><td>Textfarbe im Bestätigungsfenster.</td></tr>
+      <tr><td>layout-delete-confirmation-target-max-width</td><td>35rem</td><td>Maximalbreite der abgedunkelten Ziel-Card in der Pattern-Demo.</td></tr>
+      <tr><td>layout-delete-confirmation-overlay-max-width</td><td>28rem</td><td>Maximalbreite des schwebenden Bestätigungsfensters.</td></tr>
+      <tr><td>layout-delete-confirmation-overlay-offset-block-start</td><td>spacing-large</td><td>Abstand des Overlays von der oberen Kante des Zielobjekts.</td></tr>
+      <tr><td>layout-delete-confirmation-content-gap</td><td>spacing-small</td><td>Vertikaler Abstand zwischen den Inhaltsblöcken im Overlay.</td></tr>
+      <tr><td>layout-delete-confirmation-actions-gap</td><td>spacing-small</td><td>Horizontaler Abstand zwischen Abbrechen- und Löschen-Button.</td></tr>
+      <tr><td>layout-delete-confirmation-label-width</td><td>dimension-input-label-width</td><td>Label-Spaltenbreite der einzeiligen Bestätigungseingabe.</td></tr>
+      <tr><td>layout-delete-confirmation-target-dim-factor</td><td>0.6</td><td>Helligkeitsfaktor zur Abdunkelung des zu löschenden Objekts.</td></tr>
+      <tr><td>layer-delete-confirmation-overlay</td><td>50</td><td>Z-Index-Layer des schwebenden Bestätigungsfensters.</td></tr>
+    </tbody></table>
  </section>

 </body>
@@ -9,6 +9,7 @@
@import "./styles/24-patterns-navigation-card.css";
@import "./styles/25-patterns-form-sections.css";
@import "./styles/26-patterns-vsf-list-card.css";
+@import "./styles/27-patterns-delete-confirmation.css";
@import "./styles/30-layouts-card-list-page.css";
@import "./styles/31-patterns-text-layouts.css";
@import "./styles/32-patterns-card-group-keyboard-nav.css";
@@ -197,6 +197,16 @@
  --text-align-text-layout-column-left: left;
  --text-align-text-layout-column-center: center;
  --text-align-text-layout-column-right: right;
+  --surface-delete-confirmation-overlay: var(--color-light-grey);
+  --text-delete-confirmation-overlay: var(--color-font-dark);
+  --layout-delete-confirmation-target-max-width: 35rem;
+  --layout-delete-confirmation-overlay-max-width: 28rem;
+  --layout-delete-confirmation-overlay-offset-block-start: var(--spacing-large);
+  --layout-delete-confirmation-content-gap: var(--spacing-small);
+  --layout-delete-confirmation-actions-gap: var(--spacing-small);
+  --layout-delete-confirmation-label-width: var(--dimension-input-label-width);
+  --layout-delete-confirmation-target-dim-factor: 0.6;
+  --layer-delete-confirmation-overlay: 50;

  /* Typography */
  --font-family-base: "Open Sans", sans-serif;
@@ -0,0 +1,66 @@
+/* ========================================================= */
+/* Patterns: Delete Confirmation Overlay                     */
+/* ========================================================= */
+
+.sg-delete-confirmation-pattern {
+  width: 100%;
+  max-width: var(--layout-delete-confirmation-target-max-width);
+}
+
+.sg-delete-confirmation-pattern__stage {
+  position: relative;
+}
+
+.sg-delete-confirmation-pattern__target {
+  filter: brightness(var(--layout-delete-confirmation-target-dim-factor));
+}
+
+.sg-delete-confirmation-pattern__floating-card {
+  position: absolute;
+  top: var(--layout-delete-confirmation-overlay-offset-block-start);
+  left: 50%;
+  transform: translateX(-50%);
+  width: min(100%, var(--layout-delete-confirmation-overlay-max-width));
+  z-index: var(--layer-delete-confirmation-overlay);
+  box-shadow: var(--shadow-overlay);
+}
+
+.sg-delete-confirmation-pattern__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--layout-delete-confirmation-content-gap);
+  background: var(--surface-delete-confirmation-overlay);
+}
+
+.sg-delete-confirmation-pattern__text {
+  margin: 0;
+  color: var(--text-delete-confirmation-overlay);
+}
+
+.sg-delete-confirmation-pattern__code {
+  font-weight: var(--font-weight-semibold);
+}
+
+.sg-delete-confirmation-pattern__input-row {
+  margin: 0;
+}
+
+.sg-delete-confirmation-pattern__input-row .sg-label {
+  min-width: var(--layout-delete-confirmation-label-width);
+}
+
+.sg-delete-confirmation-pattern__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--layout-delete-confirmation-actions-gap);
+}
+
+@media (max-width: 48rem) {
+  .sg-delete-confirmation-pattern__floating-card {
+    width: 100%;
+  }
+
+  .sg-delete-confirmation-pattern__actions {
+    flex-wrap: wrap;
+  }
+}