Ankündigung Release 1.5

Das Release 1.5 wird bald veröffentlicht und bringt zahlreiche neue Komponenten, Verbesserungen und ein vereinfachtes Theming mit.

Die wichtigsten Änderungen sind:

• Neue Komponenten

  • Image
  • Popover
  • SplitButton
  • ToggleButton (s. InputCheckbox)
  • Quote

• Verbesserungen

  • Performance

    • Die Performance wurde durch die überdimensionierten CSS-Definitionen in der Icon-Komponente beeinträchtigt. Hintergrund sind die vielen Icon-Selectoren in den Icon-Fonts. Für ein Design System wird jedoch nur ein Bruchteil dieser CSS-Definitionen wirklich benötigt. Für die Komponenten haben wir uns für die schlanke Icon-Font von Visual Studio Code (Codicon) entschieden und Icofont und Font-Awesome standardmäßig entfernt (kann wieder nachgerüstet werden). Somit bringt dieses Release eine erhebliche Performance-Verbesserung beim Rendern der Komponenten mit sich.

  • Assets (Fonts und Icons)

    • Versionen der Icon-Fonts wurden aktualisiert
    • Assets wurden auf die Themes aufgeteilt, wo sie relevant sind. Dadurch können die KoliBri-Artefakt (NPM-Paket) verkleinert und somit schneller heruntergeladen und installiert werden.
    • Durch das Hinterlegen eines Postinstall-Scripts können die Assets nach jeder Installation der KoliBri-Pakete automatisch in den public/assets-Ordner kopiert werden.

       // package.json
       "scripts": {
        …
        "postinstall": "npm-run-all postinstall:*",
        "postinstall:components-assets": "cpy \"node_modules/@public-ui/components/assets/**/*\" public/assets --dot",
        "postinstall:themes-assets": "cpy \"node_modules/@public-ui/themes/assets/**/*\" public/assets --dot",
       },
       "devDependencies": {
        "cpy-cli": "^4.2.0",
        "npm-run-all": "^4.1.5",
        …
       }
    • Anschließend einem npm i (pnpm i) ausführen, damit alle Assets automatisch in den public/assets-Ordner kopiert werden.
    • Damit die Assets nicht mit eingecheckt werden müssen, kann man sie in der .gitignore-Datei ausschließen.

      # .gitignore
      /public/assets/bundes/
      /public/assets/codicons/
      /public/assets/fontawesome-free/
      /public/assets/icofont/
      /public/assets/kreon/
      /public/assets/material-icons/
      /public/assets/material-symbols/
      /public/assets/noto-sans/
      /public/assets/roboto/
      /public/assets/tabler-icons/
      /public/assets/kolibri.ico
    • Weitere Icon-Fonts wurden in Themes verwendet:
      • Microsoft Codicons
      • Google Material Icons
      • Google Material Symbols
      • Tabler Icons

• Refactorings

  • Ein paar Komponenten haben wir refactored, um die Funktionalitäten zu erweitern und die Wartbarkeit zu verbessern.
  • Accordion
    • Der Header des Accordions wird jetzt mittels KoliBri-Heading, -Button und -Span umgesetzt.
    • Accordions lassen sich jetzt auch animiert auf- und zuklappen.
  • Alert
    • Die Konstruktion der Alerts wurde überarbeitet, um die volle Flexibilität für die Gestaltung zu ermöglichen.
  • Heading
    • Die Heading-Komponente wurde mit einem Expert-Slot versehen.
  • Inputs, Select und Textarea
    • Die Konstruktion aller Eingabefelder wurde überarbeitet, um die Gestaltbarkeit und Wartbarkeit zu verbessern.
  • Nav
    • Aufklappbare Untermenüs haben jetzt einen separaten Expand-Button. So kann der eigentliche Menüpunkt unabhängig vom Auf- und Zuklappen verwendet werden.
    • Menüpunkte können jetzt Links, Buttons oder auch reiner Text sein.
  • Table Die Pagination befindet sich jetzt im DOM immer oben, um den blinden Nutzenden eine schnellere Navigation zu ermöglichen. Für sehende Nutzende kann die Pagination über das Theming entweder über oder unter der Tabelle angezeigt werden.
  • Tabs
    • Die Tabs verwenden jetzt die KoliBri-Button-Komponente.
  • Tooltip
    • Der Tooltip ist nur für die interne Verwendung in KoliBri-Komponenten gedacht. Um die Gestaltbarkeit zu verbessern, wird der Tooltip jetzt ohne Shadow-Root bereitgestellt. Sollte die Komponente außerhalb von KoliBri verwendet werden, muss das Styling in das CSS-Styling des Projekts (Webseite, App) hinzugefügt werden.
  • Alle relevante Themes wurden bzgl. der Refactorings überarbeitet

• Adapter

  • Neuer Adapter für Angular 16 hinzugefügt

• KoliBri-CLI

  • Templates
    • Die Templates wurden überarbeitet und aktualisiert.
    • Angular-Template auf Version 16 aktualisiert

• Expert-Slot

  • Der Expert-Slot kann verwendet werden, um beliebiges HTML anstatt des Text-Labels auf eigene Verantwortung einfügen zu können.
  • Bei der Einführung eines Expert-Slots, wird in der Regel das Property _label Pflicht. Entweder enthält das Label einen Text, der dann ohne Slot angezeigt wird. Oder es ist leer und der Expert-Slot wird aktiviert.

    <kol-heading _label="Inhalt einer H4-Überschrift" _level="4"></kol-heading>
    <kol-heading _label="" _level="4">
     <span slot="expert"> Inhalt einer H4-Überschrift … </span>
    </kol-heading>
  • Heading: Die Heading ermöglicht jetzt das Einfügen beliebiger Inhalte im Expert-Modus. Hierzu wurde das erforderliche Property _label eingeführt. Lässt man das Property leer (_label=""), wird er Expert-Slot aktiviert.

• Theming

  • Basis-Styling: Wir haben das CSS auf den Komponenten auf das Wesentliche reduziert. Das Styling beinhaltet primär nur noch Layout-Definitionen ohne Farben, Abstände und Tokens. Somit kann das Erstellen von eigenen Themes deutlich vereinfacht werden.
  • Alle unsere Themes wurden bezüglich der neuen Basis-Styling-Definitionen angepasst und konnten dadurch deutlich vereinfacht werden.
  • Neue Themes
    • Theme der Europäischen Kommission
    • Theme der Europäischen Union
    • Theme für die neue Version des Design System Zoll (v2)
    • Theme des Bundes Styleguides (Bundesregierung)
    • Theme des Bundeszentralamt für Steuern (WIP)
    • Theme des Freistaats Thüringen (für Demozwecke)

• Dokumentation

  • Code-Beispiele
    • Es gibt eine Beispiel-Anwendung () mit zahlreichen Code-Beispielen.
    • Code-Beispiele wurden erweitert und aktualisiert
    • Beispiel-Anwendung kann ausgecheckt und lokal gestartet werden (ist im KoliBri-Repository).
    • Code-Bespiele werden jetzt in der Dokumentation angezeigt.
    • Code-Beispiele beinhaltet eine Handout-Sicht für Präsentationen von Themes.
  • Texte
    • Die Texte wurde überarbeitet und aktualisiert.
    • Die Texte wurde auf Englisch übersetzt.
  • Live-Editor (beta): Alle Komponenten können jetzt live umkonfiguriert werden. Die Änderungen werden daneben im Viewer direkt auf der Komponente angezeigt.

• Funktionalitäten

  • Der Link ermöglicht jetzt die Angabe eines Dateinames für den Download-Link.
  • Der Progress kann jetzt auch den Fortschritt als lesbaren Text anzeigen und eine Bezeichnung haben.