Verbessere eine Komponentenbibliothek für Designer- und Entwickler:innen • Aggregata

Die Texte in diesem Artikel wurden teilweise mit Hilfe künstlicher Intelligenz erarbeitet und von uns korrigiert und überarbeitet. Für die Generierung wurden folgende Dienste verwendet:

Google Gemini DeepL Write DeepL Translate

Wie wir maschinelles Lernen bei der Erstellung unserer Artikel einsetzen

Wo wir aufgehört haben

Im vorherigen Artikel haben wir unsere Button-Komponente durch die Implementierung von Design-Tokens und Farbvarianten erweitert. Wir haben ein System von primitiven und semantischen Token erstellt, das es uns ermöglicht, Farben konsistent über Design und Entwicklung hinweg zu verwalten.

In diesem Artikel werden wir die Button-Komponente verbessern, indem wir Interaktionszustände hinzufügen. Diese Änderung wird unsere Designanforderungen erweitern und sicherstellen, dass unsere Komponente eine bessere Benutzererfahrung bietet.

Neue Anforderung: Zustände

:hover: Visuelles Feedback beim Überfahren des Buttons
:focus: Deutliche Anzeige, wenn der Button fokussiert ist
:active: Visuelles Feedback beim Klicken des Buttons
:disabled: Unterscheidbare Darstellung, wenn der Button deaktiviert ist

Erweiterung der Button-Komponente

Zuerst aktualisieren wir unsere Button-Komponente, um den neuen Zustand disabled zu unterstützen und sie für die Implementierung der Interaktionszustände vorzubereiten. Wir fügen eine neue Eigenschaft ‘disabled’ hinzu und stellen sicher, dass sie sowohl an die Haupt- als auch an die Selector-Komponente korrekt übergeben wird.

components/Button.vue

<script setup lang="ts">
import Icon from './Icon.vue';

defineOptions({ inheritAttrs: false });

const {
  variant = 'bold',
  color = 'brand',
  is = 'button',
  selector = false,
  disabled = false,
} = defineProps<{
  variant?: 'bold' | 'subtle' | 'outline' | 'ghost';
  color?: 'brand' | 'neutral' | 'informative' | 'successful' | 'cautionary' | 'destructive';
  is?: string;
  selector?: boolean;
  disabled?: boolean;
}>();
</script>

<template>
  <div :class="['button', variant, color]" :aria-disabled="disabled">
    <component class="center" :is v-bind="$attrs" :disabled>
      <slot />
    </component>
    <span class="separator" v-if="selector" aria-hidden="true"></span>
    <button v-if="selector" class="selector" :disabled aria-label="Optionen umschalten">
      <Suspense>
        <Icon variant="NavArrowDown" />
      </Suspense>
    </button>
  </div>
</template>

<!-- ... -->

Hinzufügen von Interaktionszuständen

Um unsere Interaktionszustände zu implementieren, definieren wir zunächst semantische Token für unsere Zustandsfarben. Diese werden konsistent für alle Varianten und Farben der Buttons verwendet, um visuelles Feedback für verschiedene Interaktionen zu geben, und werden auch global für andere Komponenten verfügbar sein.

css/semantics.css

:root {
  /* ... */

  --color-state-hover: rgb(from var(--primitive-zinc-950) r g b / 0.04);
  --color-state-focus: rgb(from var(--primitive-zinc-950) r g b / 0.08);
  --color-state-active: rgb(from var(--primitive-zinc-950) r g b / 0.12);
}

Implementierung von Zuständen mit Farben und Varianten

Nun aktualisieren wir die Stile unserer Button-Komponente, um alle Interaktionszustände verarbeiten zu können. Wir verwenden ein Pseudo-Element, um Zustandsüberlagerungen anzuwenden, die konsistent für alle unsere Farben und Varianten funktionieren.

components/Button.vue

<style scoped lang="scss">
.button {
  overflow: hidden;
  position: relative;
  display: inline-flex;
  gap: 0.25rem;
  line-height: 1rem;
  padding: 0.25rem;
  align-items: center;
  border-radius: 0.75rem;
  transition: filter 150ms ease-in-out;

  /* Zustandsüberlagerung */
  &::before {
    content: '';
    display: block;
    inset: 0;
    mix-blend-mode: color-burn;
    pointer-events: none;
    position: absolute;
    transition: background-color 150ms ease-in-out;
  }

  /* Interaktionszustände */
  &:hover:not([aria-disabled="true"])::before {
    background: var(--color-state-hover);
  }

  &:focus-within:not([aria-disabled="true"])::before {
    background: var(--color-state-focus);
  }

  &:active:not([aria-disabled="true"])::before {
    background: var(--color-state-active);
  }

  /* Deaktivierter Zustand */
  &[aria-disabled="true"] {
    filter: grayscale(0.25) opacity(0.75);
    pointer-events: none;
  }
}

// ...
</style>

Aktualisierung der Dokumentation

Zuletzt aktualisieren wir die Dokumentation, um die neuen Interaktionszustände zu präsentieren und den Zugriff auf die neue Eigenschaft und den Zustand disabled zu ermöglichen. Da wir bereits Autodocs verwenden, können wir die neue Eigenschaft disabled einfach zu jeder Story der Komponente hinzufügen.

stories/Button.stories.ts

// ...

export const Bold: Story = {
    args: {
        variant: 'bold',
        color: 'brand',
        is: 'button',
        selector: true,
        disabled: false,
        default: 'Bold Button',
    },
};

export const Subtle: Story = {
    args: {
        variant: 'subtle',
        color: 'brand',
        is: 'button',
        selector: true,
        disabled: false,
        default: 'Subtle Button',
    },
};

export const Outline: Story = {
    args: {
        variant: 'outline',
        color: 'brand',
        is: 'button',
        selector: true,
        disabled: false,
        default: 'Outline Button',
    },
};

export const Ghost: Story = {
    args: {
        variant: 'ghost',
        color: 'brand',
        is: 'button',
        selector: true,
        disabled: false,
        default: 'Ghost Button',
    },
};

TL;DR

Wir haben unsere Button-Komponente in der Komponentenbibliothek durch das Hinzufügen von Interaktionszuständen und Zugänglichkeitsfunktionen verbessert. Die konsistente Implementierung von Hover-, Fokus-, Aktiv- und Deaktiviert-Zuständen in allen Varianten und Farben führt zu einer robusteren, benutzerfreundlicheren und zugänglicheren Komponente.