Add delete confirmation overlay pattern with tokens and docs
This commit is contained in:
@@ -49,6 +49,7 @@
|
|||||||
<li><a href="./patterns/formular-mit-abschnitten.html">Formular mit Abschnitten</a></li>
|
<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/multiselektions-pulldown.html">Multiselektions-Pulldown</a></li>
|
||||||
<li><a href="./patterns/text-layouts.html">Text Layouts</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>
|
</ul>
|
||||||
</section>
|
</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>
|
<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>
|
<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>
|
</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>
|
</section>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@@ -9,6 +9,7 @@
|
|||||||
@import "./styles/24-patterns-navigation-card.css";
|
@import "./styles/24-patterns-navigation-card.css";
|
||||||
@import "./styles/25-patterns-form-sections.css";
|
@import "./styles/25-patterns-form-sections.css";
|
||||||
@import "./styles/26-patterns-vsf-list-card.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/30-layouts-card-list-page.css";
|
||||||
@import "./styles/31-patterns-text-layouts.css";
|
@import "./styles/31-patterns-text-layouts.css";
|
||||||
@import "./styles/32-patterns-card-group-keyboard-nav.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-left: left;
|
||||||
--text-align-text-layout-column-center: center;
|
--text-align-text-layout-column-center: center;
|
||||||
--text-align-text-layout-column-right: right;
|
--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 */
|
/* Typography */
|
||||||
--font-family-base: "Open Sans", sans-serif;
|
--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;
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user