Changelog und Backlog
Auf dieser Seite finden Sie die geplanten und erfolgten Änderungen an KoliBri.
Changelog
Preview
- 📚 Dokumentation: Übersicht über alle Komponenten im Storybook
- 🔧 Table: Sort-Funktion auch die Sortierrichtung übergeben
- 👩🎨 Input*, Textarea: onInput prüfen
- 🌟 Image: Neue Image Komponente einfügen (_alt)
- 🔧 Table: Sortierrichtung ändern mittels aria-live optimieren
🔥 Bund-Komponenten: Aus DDD-Gründen werden alle Bund-spezifischen Komponenten mittelfristig in ein separates Paket ausgelagert werden (s. @public-ui/bund-components)
🔧 Table: Checkbox innerhalb der Table / ausgewählte Zeilen hervorheben (https://github.com/public-ui/kolibri/issues/156)
- 🔧 Pagination: Aria-Label bei Zahlen-Schalter optimieren (Schalter "1", Schalter "Seite 1")
- 🔧 Badge: Fehlersuche im Color-Handling (RangeError)
- 🔧 Table: Aufspaltung in self- und manuell-managed Table
- 🔧 Button: Kontext-Menü / Dropdown (Overlay)
- 🔧 Input: Zeichenzähler für alle Texteingabefelder
- 🔧 Checkbox: Checkbox und mit beliebigen Icon statt "Border-Häkchen"
- 🔧 Slot-Konzept: Weitere Komponenten umstellen (Input-Labels)
- 🌟 DX: Vollständig einheitliche Properties und deren Verwendung über alle Komponenten
- 👩🎨 Theming: Designer um CDN-Feature erweitern
- 👩🎨 Theming: Designer CSS-Properties und "Globales CSS" trennen
- 👩🎨 Theming: Designer Speicher-Modell ändern (Meta & Data)
- 🔧 Radio: Untersuchung des zu großen Spacing
- 🔧 Radio & SingleSelect: Zusammenführen?!
- 🔧 CheckboxGroup & MultiSelect: Zusammenführen?!
- 🔧 Tabs: Tab-Change-Callback aufrufen, sobald die Tab-Selection eine Korrektur durchführt
- 🔧 Tabs: Verhalten beim Wechsel von Tabs beobachten
- 🔧 Table: Pagination wahlweise oben oder untern oder beides
🔧 Link, ButtonLink: Zeilenumbruch innerhalb des Link-Textes -
display: inline
stattdisplay: inline-flex
👩🎨 Theming: Für eine bestmögliche Style-Anpassbarkeit müssen bei alle Conditions die die Konstruktion einer Komponente verändern, die umrahmenden HTML-Nodes um CSS-Klasse erweitert werden.
- Rola: Button, Link ?!
- Alert: Prüfen, wie man auch einen EventCallback einzeln ändern kann.
Alert & Card: Prüfen, ob
_hasCloser
undhasFooter
noch notwendig sind.
Die Dokumentation des Changelogs erfolgt zukünftig auf
1.4.2 - 03.03.2023
- 🔧 Tooltip: Entfernt die Anzeigestörung beim Ausrichten
👩🎨 Theming: Vermeide
label \{[^\}]+display: grid
im Theme-CSS.- 📚 Dokumentation: Präsentation aktualisiert
- 🔧 Storybook: Abhängigkeiten optimiert
- 👩🎨 Theming: Themes noch einmal bzgl. Basis-Styling optimiert
🔧 Basis-Styling:
:host
und!important
entfernt- 🔧 Template: Angular-JSON-Problem gelöst
1.4.1 - 28.02.2023
🔧 Theming: Basis-Styling an
:host
korrigiert- 🔧 Template: Korrektur am Preact-Template
- 👩🎨 Theming: Optimierung Basis-Styling für InputRange und alle zeilen-artigen Input-Komponenten
Mit der Version 1.4.0 werden die internen Themes ausgelagert und nur noch über interne NPM-Registries verfügbar sein. Des Weiteren haben wir die Bundes-Schriftart und die BundesSerif erweitert und die BundesSans aktualisiert.
In einem unserer Blog-Beiträge können Sie mehr über die Auslagerung der internen Themes erfahren (
Damit die Bundes-Schriftarten in Ihrem Projekt korrekt angezeigt werden, müssen Sie die Schriftarten erneut aus dem Themes-Paket in Ihren Prokekt-Assets-Verzeichnis kopieren (
Des Weiteren wurde die Alert-Komponente neu konstruiert und muss ggf. über den Theme-Designer nachgestyled werden.
Neue CSS-Properties:: Um den Einstieg zum Erstellen und Pflegen eigener Themes zu erleichtern, liefern wir zukünftig standardmäßig gelayoutete und teilweise gestylete Komponenten aus. Auf dem Basis-Styling können Sie dann im Theme-Designer aufbauen oder es vollständig zurücksetzen und die Komponenten einzeln frei gestalten.
Um die Basis-CSS-Properties wieder zu verwenden oder zu entfernen, können Sie die folgenden CSS-Regeln in Ihr Theme einbinden:
:host {
--kolibri-border-color: unset;
--kolibri-border-radius: unset;
--kolibri-border-width: unset;
--kolibri-color-error: unset;
--kolibri-color-info: unset;
--kolibri-color-success: unset;
--kolibri-color-warning: unset;
--kolibri-color-primary: unset;
--kolibri-color-secondary: unset;
--kolibri-color-normal: unset;
--kolibri-color-danger: unset;
--kolibri-color-ghost: unset;
--kolibri-color-disabled: unset;
--kolibri-color-text: unset;
--kolibri-color-visited: unset;
--kolibri-font-family: unset;
--kolibri-font-size: unset;
--kolibri-spacing: unset;
}
1.4.0 - 27.02.2023
👩🎨 Theming: Basis-Styling an
:host
gebunden (ggf. Theme-Korrektur notwendig, z.B. Table)- 🔧 Accordion: Aria-Controls hinzugefügt
- 🔧 ButtonLink, LinkButton: Role wird gespiegelt gesetzt.
- 🔧 Icon: Role bleibt immer Img.
- 🔧 Badge: Der Text eines Badge sollte nicht mehr länger als 32 Zeichen sein.
- 🌟 Dev-Tools: Alle Konsole-Ausgaben werden nur noch in der Debug-Ansicht angezeigt.
- 🚹 Dev-Tools: Labels und Aria-Labels sollten mindestens 3 lesbare Zeichen enthalten.
- 🔧 KoliBri-Factory: Optimierung des Templates zum Erstellen eigener KoliBri's
- 🌟 CLI + Templates: Neue Projekt-Templates für Stencil-App und React-Vite-App
- 🚹 Badge: Verbesserte Developer-Tool-Ausgabe bei der Kontrastprüfung
- ❗ Alert: HTML-Konstruktion wurde überarbeitet
- ❗ Details: HTML-Konstruktion wurde überarbeitet
❗ Input Smart-Button: Ggf. muss die Positionierung im eigenen Theme angepasst werden (
margin-top: -44px;
).- ❗ Tabs: HTML-Konstruktion wurde überarbeitet
- 👩🎨 Theming: Überarbeitung der Themes bzgl. der Checkbox-Varianten
❗ Input, Select: Überarbeitung des
_icon
-Property (Trennung Checkbox und Eingabefeld)Checkbox: Das die Icons für die Status
checked
,unchecked
undindeterminate
können jetzt geändert werden.🔧 Checkbox: Der Indeterminated-Status einer Checkbox wird auf
false
gesetzt, sobald die Checkbox angeklickt wird.- 🌟 Checkbox: Mittels der Checkbox kann jetzt auch ein Toogle-Button umgesetzt werden.
- 👩🎨 Fonts: Aktualisierung der BundesSans und BundesSerif (hinzugefügt)
- 🔧 Tooltip: Abhängig vom Bildschirmrand werden Tooltips automatisch ausgerichtet.
- 🚀 Theming: Performance-Optimierung im Styling
- ❗ Theming: Auslagerung interner Themes
- 🔧 Accordion: Initiale Auszeichnung für den Expanded-Status optimiert
1.3.1 - 30.01.2023
- 🌟 Adapter: Vaadin-Generator optimiert (Draft)
- 👩🎨 Theme: Zoll Design System v2 hinzugefügt (Draft)
- 🔧 Aria-Label: Aria-Label- und Label-Management für leere Labels im Expert-Slot optimiert
- 🚹 Tooltip: Sichtbar solange das Element fokussiert oder die Maus über dem Element oder dem Tooltip ist.
Mit der Version 1.3.0 wurde offenen Datentypen bei Option
und SelectOption
auf den Type string
begrenzt.
Der W3C-Standard sieht standardmäßig nur Strings als Werte für Formulareingabefelder (button
, input
, select
und textarea
) vor. Diese Einschränkung ist darin begründet, dass die Werte der Formulareingabefelder in der URL als Query-Parameter übermittelt werden können. Da die URL nur Strings als Werte erlaubt, ist es notwendig, dass auch die Formulareingabefelder nur Strings als Werte akzeptieren.
Aus Sicht eines Developers ist es natürlich sehr unpraktisch, wenn man nur Strings als Werte für Formulareingabefelder verwenden kann. Deshalb haben sich die Frameworks wie Angular, React und Vue.js dazu entschieden, die Einschränkung des W3C-Standards zu umgehen. Sie erlauben es, dass man auch andere Datentypen als Werte für Formulareingabefelder verwendet. Die Frameworks übernehmen dabei die Verantwortung, dass die Werte der Formulareingabefelder als Strings in der URL übermittelt werden.
Um die Developer Experience (DX) zukünftig wieder zu verbessern, wir sich KoliBri an der W3C-konformen Implementierung orientieren und hier auf die valueAs*
-Methoden einzelner Formularfeldtypen zurückgreifen.
1.3.0 - 27.01.2023
- 🔧 Part: @part und part= abbauen
- 🌟 Adapter: Vaadin-Generator hinzugefügt (Draft)
- 🌟 Adapter: Support für Vue hinzugefügt + Create-KoliBri
- 👩🎨 Button, LinkButton: Breite der Schaltflächen lässt sich wieder von außen steuern
🔧 Nav:
aria-current
wird jetzt an der richtigen Stelle gesetzt- 🔧 Link, ButtonLink: Ausrichtung der Icons optimiert
- 🔧 Framework: Upgrade des Webcomponent-Framework
- 👩🎨 Themes: Optimierung aller Themes nach Änderungen an Komponenten-Konstruktion (Badge, Tabs)
- 👩🎨 Icon-Fonts: Theme-Default sind Codicon, Font-Awesome (free) und Icofont
- 🔧 I18n: Translationservice fertigstellen (i18next)
- 👩🎨 Badge: Konstruktion für das Styling des Smart-Buttons optimieren.
🔧 Tabs: Fehlerbehebung bei
_aria-selected
- 👩🎨 Theming: Optimierung des Themings der Webcomponents
1.1.18 - 13.01.2023
- 🔧 Nav: Behebt den Anzeigefehler in der Navigation, beim Ein- und Ausklappen
1.1.16 - 09.01.2023
🔧 Select: Das Property
_size
wird jetzt korrekt gesetzt.❗ Styling: Styling via Properties abbauen (@deprecated
_fill
,_part
,_selector
,_stealth
,_underline
und_useCase
)- 🔧 Link, ButtonLink: Optimierung der Anzeige des Tooltips im Bild- und Icon-Only-Modus
🔧 LinkButton: Ist semantisch ein Link und hat daher auch ein
_target
-Property🔧 Tabs:
_on
-Property vom Tab-Typ entfernt (not implemented)- 🔧 Table: Optimierung der Sortierungsanzeige (Pfeilrichtungen)
- 🔧 Table: Optimierung des Renderings
- 🔧 Table: Style-Korrektur im MAPZ-Theme (Border)
🔧 Nav: Fehlerbehebung beim Aufklappen von Untermenü's
❗ Link: Umsetzung des
bei allen Button- und Link-Komponenten Auch wenn jetzt das Property
_label
erforderlich ist, funktionieren alle per Slot eingefügten Link-Texte weiterhin. Wir empfehlen in Zukunft wie vorgesehen das _label-Property anstatt den Slot zu verwenden. Mit dem nächsten Major-Release werden wir die Abwärtskompatibilität bei der Link-Komponente (unamed-Slot) entfernen.
🌟 Website: Umstellung der Homepage von KoliBri (
) 🌟 Fokus: Alle interaktiven Komponenten (Button, Link, Input usw.) sind jetzt von außen fokussierbar (
focus()
).
1.1.15 - 20.12.2022
- 🔧 Table: Wenn die Tabelle leer ist, dann wird die Pagination ausgeblendet.
- 🚹 Table: Verbesserung der Auszeichnung bei leeren Tabellen
- 🔧 Select: Single-Select wählt automatisch den ersten Wert in der Liste aus.
- 🚹 Tabs: Optimierung der Barrierefreiheit (Axe)
- 🔧 Version: Icon gefixed
- 🌟 Badge: Der Badge wurde um einen Smart-Button, wie bei den Inputs, erweitert.
- 🌟 Meta-Konfiguration: Einführung eines "Experimental mode" zum Ausprobieren neuer Funktionalitäten
- 🔧 Textarea: Überflüssiges Aria-Hidden entfernt
- 🔧 Radio: Verbesserung der Value-Zuordnung (boolean, number, string, Array und Object)
- 🔧 Dev-Tools: Verbesserung der Consolen-Hinweise bei Validierungsfehlern
- 🔧 Breadcrumb & Details: Identifier für Font-Awesome korrigiert
- 🚹 Abbr: Verbesserung der Screenreader-Unterstützung
- 🔧 CLI: KoiBri-Library-Template optimiert
1.1.14 - 06.12.2022
❗ Themes: Theme der Hansestadt Hamburg "umgezogen" (
) - 🔧 Table: Fix Validierung von JSON
- 🚹 Cheat Sheet: Optimierung der Barrierefreiheit
- 📚 Publiccode: Überarbeitung der publiccode.yml
1.1.13 - 05.12.2022
- 🔧 Form-Events: Event-Handling für Submit optimiert (target: HTMLFormElement)
- 🔧 Dev-Tools: Verbesserung der Consolen-Hinweise bei Validierungsfehlern
- 🔧 Register: Fehler bei der impliziten Theme-Erkennung ohne data-Attribute behoben
- 🔧 Table: TabIndex für das seitliche Scrollen hinzugefügt (AXE)
- 🔧 Tooltips: Positionierung des Tooltips optimiert (in Scroll-Zones)
🌟 Angular: Versionsspezifische Adapter notwendig (wir unterstützen v11, v12, v13, v14 und v15)
- @public-ui/angular-v11
- @public-ui/angular-v12
- @public-ui/angular-v13
- @public-ui/angular-v14
- @public-ui/angular-v15
- @public-ui/angular-v16
- @public-ui/angular-v17
- @public-ui/angular (@deprecated)
- 🌟 Designer: Der Designer kann jetzt auch als PWA lokal installiert werden.
- 🌟 Storybook: Das Storybook kann jetzt auch als PWA lokal installiert werden.
- 🌟 Tabs: Anordnung der Tabs auch seitlich möglich (_tabsAlign)
- 🔧 Table: Fix Icon-Identifier für Auf- und Absortieren
- 📚 Cheat Sheet: Einbindung des Cheat Sheet ins Storybook
- ❗ Tabs: Tab-Inhalt war nach Seitenwechseln weg
1.1.12 - 22.11.2022
- 🔧 Table & Pagination: Fix Property-Reflection für _pagination
- 🔧 Template: Fehler in Angular-Template behoben
- 🔧 Textarea: Fehler beim initialen Zählen der eingebenen Zeichen behoben
- 🔧 CI-Pipeline: Continuous Integration optimiert
- 🔧 Icons: Weitere Identifier von Icons korrigiert
- 🚹 Logo: Alternativtext verkürzt
1.1.11 - 21.11.2022
- 👩🎨 Theming: Theme-Methode optimiert (Handling für "übergreifendes CSS")
- 🔧 Inputs, Select, Textarea: Alert der Fehlermeldungen standardmäßig aktiv
- ❗ InputCheckbox: Umbenennung des Property _type (@deprecated) in _variant (Semantik)
🔧 Pagination: Äußere Sprung-Buttons zur ersten oder letzten Seite immer aktiv, außer die aktive Seite ist entweder am Anfang oder Ende
🌟 Themes
- 🔧 DESY-Theme optimiert (noch nicht BITV-getestet)
🌟 Select: Multi-Select erlaubt keine Auswahl (
) 🌟 Angular-Adapter Upgrade (
)
- 🔧 InputDate, InputNumber: Validierung und Mapping von _max, _min, und _value optimiert (ISO, Float-Values)
- 🔧 Table: Überflüssige Aria-Auszeichnung (aria-readonly) entfernt
- 🔧 Nav, Table: Icon-Identifier ergänzt
- 📚 Cheat Sheet: Generator-Script zum Erzeugen und Synchronisieren eines Cheat-Sheet für die Entwicklung
Mit der Version 1.1.10 wurde die harte Kopplung an die Icofonts aufgelöst und vollständig auf das flexible Icon-Font-Konzept umgestellt.
- Alle internen Icons wurden von Icofont auf Font-Awesome (free) umgestellt
Alle Komponent-Properties mit dem Typ
Icofont
wurden auf den TypKoliBriIconProp
umgestelltAngaben für
_icon
in den Apps müssen den Prefixicofont-
erhalten, wenn alles so bleiben soll.Das Property
_icon-align
bzw._iconAlign
wurde alsdeprecated
markiert und wird mit dem nächsten Major-Release entfernt.
Der neue Icon-Typ für alle Komponenten ermöglicht eine höhere Flexiblität. Es ist u.a. möglich gleichzeitig Icons in allen Hauptrichtungen einzufügen und hierbei auch deren Styling zu beeinflussen. Mehr zur konkreten Typ-Definitionen ist im
Die Migration gestaltet sich sehr einfach, da nur folgende zwei Stellen ggf. angepassen werden müssen.
Es müssen alle Icofont-Identifier beim
_icon
-Property einfach um den Prefixicofont-
ergänzt werden.Regex:
_icons="([^"]+)"
oder_icon=\{'([^"]+)'\}"
Replacement:
_icons="icofont-$1"
An den Stellen wo das veraltete Property
_icon-align
bzw._iconAlign
verwendet wurde muss auf den neuen Icon-Typ umgestellt werden. Die Änderung erfolgt einfach durch die Verwendung des neuen_icon
-Properties.
1.1.10 - 11.11.2022
- 🔥 Badge, Link, Nav, Tabs: Alle Icofont and Font-Awesome spezifischen Typen entfernen (KoliBriIconProp)
- 🔧 Font Awesome: Wechseln von Icofont auf Font Awesome bei allen Default-internen Icons
🌟 Button: Zusätzlichen SPAN-Tag hinzugefügt, um den sichbaren Button kleiner darstellen zu können, obwohl die Klickfläche weiterhin mindestens 44x44px groß bleibt.
- 🔧 Fix Form-Submit und -Reset-Propagation (KolButton, KolButtonLink)
- 🔧 Button, LinkButton: Custom-Variante optimiert (entweder-oder)
🌟 CLI: Weitere Framework-Integrationen als Templates hinzugefügt
- Astro
- Next.js
- Preact
- Theme (zum Erstellen eigener Theme-Pakete)
- 🌟 Nav + Link: Einführung der Aria-Current-Auszeichnung
- 🌟 ButtonLink & LinkButton: Neue Komponenten - Button als Link oder Link als Button
- 🌟 Textarea: Textarea verlängert sich nach unten automatisch, je nach Textlänge
- 🌟 InputDate: Neue Komponente für Datum, Zeit, Wochen, Monat und lokales Datum
- 🌟 Tab-Index: Neues Property für Button, ButtonLink, Link und LinkButton
🔥 InputNumber: Gemäß neuer
beinhaltet InputNumber nicht mehr die Datumstypen (ℹ️ wird erst mit Major-Release entfernt). - 🔥 Nicht required Properties erlauben null und damit das Zurücksetzen auf den Detault-Value.
- 🌟 "Expert"-Slot eingefügt, um mehr Flexibilität mit Eigenverantwortung zu erhalten
📚 Dokumentation:
eingefügt 📚 Dokumentation:
eingefügt - 🔧 Storybook: Das Umschalten des Themes funktioniert jetzt ohne manuelles Neuladen
- 🔥 Packaging: Veraltete Theme-CSS-Dateien entfernt (aus Release 1.0)
🔥 Packaging: Aufbauseite (www/) ist für die Wiederverwendung nicht relevant und wird nicht mehr mitverpackt
- 👩🎨 Theming: BMF-, DESY- und MAPZ-Theme an Änderungen angepasst
1.1.9 - 13.10.2022
🔥 ESM: Build-Optimierung aller Pakete für SSG und SSR (ℹ️
) 🌟 CLI: Templates für weitere Framework-Integrationen
- Angular
- SolidJS
- Statische HTML-Seite
- 🌟 Designer-Projekt ins Mono-Repository aufgenommen
- 🔧 DevOps: Auto-Dependency-Pipeline hinzugefügt
- 🔧 DevOps: Auto-Sync zu Open CoDE
1.1.8 - 07.10.2022
- 🔧 Fix: Fehlender Import im React-Template behoben (create-kolibri)
Mit der Version 1.1.7 wird KoliBri Open Source veröffentlicht.
Da der Package-Alias "@kolibri" in der
Des Weiteren wurde in diesem Zuge die umgezogene Input-Adapter-Komponente (KolInputAdapterLeanup) für das Form-Handling als veraltet (deprecated) gesetzt. Die identische Komponente ( LeanInputAdapter) wird jetzt von leanûp selbst bereitgestellt.
Neue Pakete installieren
@leanup/kolibri-components
@leanup/kolibri-react
(nur für React)
Register erweitern
import { defineCustomElements as kolibri } from '@public-ui/components/dist/loader';
import { defineCustomElements as leanup } from '@leanup/kolibri-components/dist/loader';
register(…, [kolibri, leanup], {…
Komponente umbenennen
kol-input-adapter-leanup
inlean-input-adapter
oderKolInputAdapterLeanup
inLeanInputAdapter
Importe entfernen und hinzufügen (nur React)
Hinzufügen:
import { LeanInputAdapter } from '@leanup/kolibri-react';
Entfernen:
import { LeanInputAdapter } from '@public-ui/react';
1.1.7 - 30.09.2022
- 🌟 KoliBri-Logo: Farbattribut hinzugefügt (_color)
- 🌟 Adapter: Vue-Adapter hinzugefügt (⚠️ experimentell)
- 👩🎨 Font: Roboto-Dateien für Theme MAPZ hinzugefügt (⚠️ Assets aus Theme-Paket neu in Projekte übernehmen!)
- 🔥 Open Source: Es sind die Hinweise zur Open Source-Freigabe zu beachten (s.o.)!
- 🌟 KolModal: Schließen mit ESC
🔥 CSR: Der ToasterService ist nur client-seitig relevant und muss mit dem
Document
instanziiert werden.- 🌟 SSR: Entkopplung vom Window und Document für Server-Side-Rendering
- 🌟 Designer ist jetzt im Care-Package enthalten
- 🔧 InputText: Search-Event-Handling optimiert
- 🌟 Textarea: Textlänge-Anzeige auch bei initialem Text
- 🔧 Table: Backend-seitige Pagination - Lösungsweg in Dokumentation beschrieben
- 🔥 Pagination: Property _count ersatzlos entfernt
- 🔥 LeanInputAdapter: Migrationsanleitung in Komponente enthalten - Logik wurde entfernt
1.1.6 - 12.09.2022
- 📚 Dokumentation: Theme-Schalter erweitert und optimiert
- 👩🎨 InputText: Search Reset leer Werte
- 👩🎨 Desy-Theme (GZD): Initiale Umsetzung
👩🎨 Font: BundesSans Web-Dateien für Theme BMF aktualisiert (⚠️ Assets aus Theme-Paket neu in Projekte übernehmen!)
1.1.5 - 29.08.2022
- 🌟 Toaster: Einführung eines Toast-Services
- 👩🎨 Nav: Darstellung letzter Link optimiert
- 👩🎨 Breadcrumb: Darstellung Homepage (_iconOnly) optimiert
- 🔧 RadioInput: Value Weiterleitung gefixed
- 🔧 Table: Pagination mit Seitenlänge gefixed
- 🌟 Alert & Toast: Schließen-Schalter eingeführt
- 🌟 Adapter: Angular- und Solid-Adapter zum Care-Package hinzugefügt
1.1.4 - 01.08.2022
🔧 Console:
console.log
's entfernt
1.1.3 - 29.07.2022
- 🔧 SemVer: Keine funktionale Änderung / Versionierung behoben
1.1.2 - 29.07.2022
- 🔧 Radio & Select: Fehlersuche bei Auswahl der ersten Option
🔥 Leanup-Adapter: Aus DDD-Gründen wird die LeanInputAdapter- durch die LeanInputAdapter-Komponente ersetzt (s. @leanup/kolibri-components)
- 🌟 Table: Das Lesen und Setzen der Seitenlänge von Außen ermöglichen.
🔥 Pagination: Anstatt die Anzahl der Schalte muss jetzt die Anzahl der verwalteten Einträge angegeben werden. (
_count
ist deprecated)- 🌟 Pagination: Wurde um ein optionales Auswahlfeld für die angezeigten Elemente pro Seite erweitert.
- 🌟 Select: SelectOptions unterstützen mehr Typen als Value
- 🔧 Pagination: Pfeile optional abschaltbar machen.
- 🔧 Storybook: Transformation React-TSX zu WC-TSX Stories (Properties: Camel-Case -> Kebab-Case, Stories)
- 🔧 Table: Entfernung der zusätzlichen Role-Auszeichnung
- 🔧 Table: Dokumentation zur Debatte um Pagination und Role-Auszeichnung
- 🔧 Icon: Bei der Kontext-freien Darstellung (aria-label leer) wird jetzt aria-hidden=true gesetzt.
- 🔧 Umstellung des primären Package Managers von npm auf pnpm.
- 📚 Dokumention des Architekturkonzepts und überarbeitung aller README's
- 👩🎨 Nxt-Theme: Verbesserung
1.1.1 - 28.06.2022
- 🔧 Register: Fehlerbehebung beim Registrieren der Komponenten, Themes und Translations
1.1.0 - 28.06.2022
- 🚹 BITV-Tests: Vollständiger Retest des BMF- und MAPZ-Themes inkl. Komponenten
- 👩🎨 Themes: Verbesserungen an dem BMF- und MAPZ-Theme
- 🔧 Tabs: Schließen-Schalter entfernt
🌟 Theming: Globale CSS-Properties des jeweiligen Themes werden jetzt unter der CSS-Klasse (Theme-Name) im Dokument head hinzugefügt und können somit kontrolliert für eigenen CSS-Styling wiederverwendet werden.
🌟 VSCode: Schema-Datei für Custom Elements (https://code.visualstudio.com/api/extension-guides/custom-data-extension)
- 🌟 Alert, Toast: Neuer Typ "default" (grau) hinzugefügt (❗ ist jetzt Default)
- 🔧 Textarea: Fehlerbehebung am Zeichenzähler
- 🌟 Input*, Select, Textarea: Möglichkeit einen separaten Hinweistext anzugeben.
- 🔧 Modularisierung: Kernfunktionen in Core-Module verschieben (s. React-Integration)
🌟 Placeholder: Der Placeholder wird während des Fokussierens ausgeblendet. Das unterbindet das doppelte Vorlesen eines "Labels".
1.0.17 - 17.06.2022
- 🔧 Modularisierung: Import-Pfade optimiert - Reduziert die Dependency-Einträge in der package.json.
- 🔧 Modularisierung: Auflösung des separaten Modules @public-ui/schema pro UI-Lib
- 🌟 Inputs, Select, Textarea: Screenreader liest Fehlermeldung nur bei onBlur und onFocus
1.0.16 - 14.06.2022
🔧 Modularisierung: Einführung @public-ui/core, @public-ui/schema und @public-ui/themes (s. React-Integration)
- 👩🎨 Table: Responsive Pagination
- 🔧 Tooltip: Tooltips werden überall angezeigt
- 🔧 Pagination: Verbesserung des Renderings
- 🔧 Theme BMF & MAPZ hinsichtlich Barrierefreiheit optimiert
- 🔧 Select: Verbesserung der Change-Detection - Reflect Properties _touched und _value
- ❗ Card: Property _headline wurde in _heading umbenannt (Vereinheitlichung)
- ❗ Logo: Property _abbr wurde in _org umbenannt (Semantik)
- 🌟 Select: neues Property _height zum Höhen-Anpassung des Multiselects
- 🔧 Button + Links + InputRadio: IDs sind wieder unique / Verwendung ohne Shadow-Root
- 🔧 Textarea: Value-Handling von Textarea behoben
- 🌟 Internationalisierung für Deutsch und Englisch vorbereitet
- 🌟 Register: Das Registrieren von Themes wurde vollständig entkoppelt (s. React-Integration)
- 🌟 Themeing: Auslagerung der Styleguides/Themes in separate entkoppelte NPM-Pakete
- 🌟 Button, Input*: Propagate onSubmit zum KolForm, Form
- 🌟 Multilanguage: Properties und Sprachdateien eingefügt
- 🔧 Radio & Select: Verbesserung des List-Value-Sync
- 🔧 InputRadio: Fehlerbehebung des Renderings der Inputs > 1
- 🌟 Bundle-Size: Treeshaking optimiert (https://webpack.js.org/guides/tree-shaking/)
- 🌟 Button: neues Property type hinzugefügt (button, reset, submit)
- 🔧 InputRadio: Rendering muss optimiert werden. (HTML-Nodes)
- 🌟 Symbol: Komponente zur barrierefreien Darstellung von Sonderzeichen
- 🔧 Pagination: Anzeige bei keine Seiten verbessert
- 🔧 Pagination: Ausgewählter Button ist jetzt stylebar
- 🌟 Button & Link: neues Property _aria-current
- 🌟 Link: neues Property _aria-selected
- 🌟 Form: neues erforderliches Property _on für onSubmit hinzugefügt
🌟 Form: onSubmit, wenn "Enter" im Formular gedrückt wird (input-email, input-number, input-password oder input-text)
- 🔧 React Refs: Pilotierung von React forwardRef
- 🔧 Accordion: Screenreader für Auf- und Zuklappen optimiert
- 🌟 Table & Pagination: Ermöglicht auch das Setzen des _count von Außen
- 🌟 Table: Sortierrichtung von Außen angeben
1.0.15 - 10.05.2022
- 🔧 Textarea: CharacterCounter wird angezeigt
- 🔧 Select: Fix Values-List-Sync
- 🔧 Theming: Register-Funktion optimiert
- 🔧 Table: Fehlerbehebung Pagination onClick-Propagation
1.0.14 - 05.05.2022
- 🔧 Nav*: Sicherstellung eindeutiger aria-label
- 🌟 Button: Neue Property accesskey
- 🔧 ReactAdapter: Utils Methoden getRoot und render für React 18
- 🔧 InputRadio: Synchronisation Optionen und Value mindestens eine Option gewählt
- 🔧 InputCheckbox: Initiales Setzen des Value-State verbessert
- 🔧 Select: Synchronisation Optionen und Value mindestens eine Option gewählt
- 🔧 Fehlerbehebung: Pagination in der Tabelle bei Seitenlänge ändern
🌟 Styling: Es gibt globale CSS-Styles die für initial gelten und die Unterstützung von assistiven Werkzeugen sicherstellen soll.
- 🔧 Styleguide BMF: Input*, Select, Textarea, Nav, Table, Tabs überarbeitet
- 🔧 Styleguide MAPZ: InputRange, Nav, Table überarbeitet
- 🔧 Textarea: Abstand zwischen Textarea und Fehlermeldung zu groß (behoben)
- 🔧 Table: Fehlerbehebung _data-Binding (Array, String)
- 🔧 Input*, Select, Textarea: Optimierung des Markups und Layoutings (u.a. gap bei _hideLabel)
- 🔧 Table + Pagination: Ausgewählte Seite setzen
- 🔧 Input + Icon: Validierungsfunktion optimiert
- 🚹 Progress: Pending-Animation widerspricht der Semantik, wird daher nicht umgesetzt
- 🚹 Spin: Beliebige Animation - Risiko für nicht barrierefreie Animationen, wird daher nicht umgesetzt
- 🌟 Toast: Optimierung der Toast-Benachrichtigung (hasCloser, show, showDuration)
- 🌟 Input*: Hinzufügen eines optionalen Buttons (smartButton, Passwort anzeigen/ausblenden)
- 🌟 Theming: Sicherer Theming-Prozess zum Registrieren von auditierten KoliBri-Themes
- 🌟 Card: Header-Slot hinzugefügt
- 🔧 Modal + Toast: Optimierung des Z-Index (Toast vor Modal)
- 🔧 Table: Aria-Live-Feature abgeschalten / Optimierung des Vorlesens
- 👩🎨 Input*, Select und Textarea: Label ausblendbar, wenn nicht Eingabe erforderlich (required, Sternchen)
- 👩🎨 Input-Text: Icons links oder/und rechts im Eingabefeld
- 👩🎨 Input-Text: Redesign, Label, Input und Fehler beliebige Reihenfolge
- 🔧 Tabs: Event-Callbacks Typo verbessert
- 👩🎨 Style: MAPZoll Theme vollständig überarbeitet
- 🔥 Property _nested ersatzlos entfernt
- 🌟 Pagination: Erweiterung der Properties um _variant, _customClass und tooltopAlign.
🔥 Global KoliBri-Style aus der Lib und Demo entfernt, weil diese Datei nicht erforderlich ist. (kolibri.css)
- 🔧 Tabs: Optimierung des Stylings
1.0.13 - 01.04.2022
- 🌟 Nav: Es ist jetzt auch möglich den Tooltip in alle Richtungen auszurichten.
🔥 Badge: Die Badges haben eine verbesserte Farbverarbeitung und erwarten jetzt auch valide CSS-Farbcodes. Bitte verwendet bei HEX-Schreibweise den führende #.
- 🔧 Tabs: Fokus- und Selected-Style verbessert
- 🔧 Table: Anzahl angezeigter Einträge nicht begrenzen ohne Pagination
- 🌟 Button: Property _customClass hinzugefügt
- 🌟 Button + Link: Verbesserung des Icon-Handlings (top, right, bottom, left)
- 🔧 Alert: Property _variant (card, card-icon, msg, msq-icon) hinzugefügt
- 🔧 Textarea: Property _row (Zeilen) hinzugefügt
- 🔧 Textarea: Property _resize (both, horizontal, vertical, none) hinzugefügt
- 🔧 Tooltip: Optimierung der Links-Ausrichtung
- 🔧 Badge: Optimierung der Color-Contrast-Algorithmus
- 🌟 Theming: Verbesserung des Theme-Algorithmus
1.0.12 - 15.03.2022
- 🔧 Fix: Verbesserung und Fehlerbehebung an der neuen Theme-Engine
1.0.11 - 14.03.2022
- 🔥 Framework: Auto-DefineCustomElements deaktiviert für Verwendung mit Vite und SSR. (s. Get Started React)
- 🔧 Checkbox: Fehlerbehebung Checked-Wert lässt sich nicht ändern
- 🔧 Button/Tooltip: Tooltips wurden nicht mehr beim Button angezeigt
- 🔧 InputAdapter: Separates Property für das Debouncing
- 🔧 Table: Fehlerbehebung der Sortierreihenfolge (aria-sort)
- 🌟 Theming: Verbesserung des Theming-Hooks
- 🔧 InputAdapter: Fehlerbehebung beim Rerendern, wenn sich der Wert ändert
- 🌟 InputFile: Value ist jetzt vom Typ FileList und beinhaltet die Referenzen auf die Datei(en).
- 🔧 Table: Verbesserung des Status-Textes unter der Tabelle
1.0.10 - 03.03.2022
- 🌟 Table: Pagination als separate Komponente
- 🔧 Pagination: Redesign für viele Seiten
- 🔧 Nav: Optimierung der Animation beim Auf- und Zuklappen
- 🔧 Accordion: Tabbar im geschlossenen Zustand behoben
- 🔧 Table: Auf- und abwärts sorttieren für jede Spalte
- 🔧 Accordion: Fix onClick-Callback
1.0.9 - 28.02.2022
- 🔧 Select, Option: Styling behoben
- 🔧 Input-Adapter: Required-Handling behoben
- 🔧 Link: Fehlerbehebung beim Setzen des _on-Properties
- 🔥 Input-Adapter: Label-Handling geändert
🌟 Theme-Modus: KoliBri unterstützt jetzt ein innovativen Theme-Modus mit mehr Flexiblität und härterer Kapselung
- 🔥 Modal: Schließen-Button out-of-the-box (rechts oben in der Ecke) wurde entfernt
- 🌟 LinkGroup: Property _list-style-type und _orientation eingeführt
- 🌟 Table: Return Typ void für Render-Funktion
- 🌟 Table: Problem mit der Pagination gefixed
- 🌟 Accordion: Callback beim Auf- und Zuklappen
- 🌟 Framework-Adapter werden jetzt als CJS-, ESM- und UMD-Pakete ausgeliefert
- 🔧 Verbesserung der Formular-Synchronisation (debounce am InputAdapter nicht mehr im Control)
- 🔧 Verbesserung der CSS-Properties
- 📚 Verbessertes Styleguide-Handling im Storybook
- 👩🎨 Änderbarkeit des Separator-Icons in der Breadcrumb-Komponente
- ❗ Refactoring Interfaces, Types and Enums / Clean Code
1.0.8 - 14.01.2022
- 🌟 Button: Separates Aria-Label Property einführen
🔧 Verbesserung der Input-Adapter-Komponente bzgl. des Event-Handlings (_on am KolInputAdapter anstatt am KolInput verwenden)
- 🔧 Verbesserung der Scroll-Funktion (Neuer Parameter: parentNode)
- 🔧 Verbesserung des Data-Flow der Select-Komponente
- 🌟 Verbesserung bei der Integration von Themes (import im JS/TS)
- 🌟 Verbesserung der Autovervollständigung für die Entwicklung (font-awesome, icofont)
🌟 KoliBri für andere Frameworks (
und ) - 👩🎨 Umsetzung eines weiteren Styleguides auf Basis der KoliBri-Komponenten
- ❗ Refactoring der Tests
- 📚 Dokumentation verbessert
1.0.7 - 17.12.2021
👩🎨
font-size
ist bei Tooltip immer1rem
unabhängig von der Größe des Referenz-Elements❗ Value beim der
Select
-Komponente wurde auf ein Liste (Array) umgestellt, um die Funktionalität der Mehrfachauswahl umzusetzen. () - 📚 Dokumentation verbessert
1.0.6 - 15.12.2021
- 👩🎨 Übernahme erster Farbedefinitionen in das BMF-Theme
- 🚹 Verbesserungen an der Modal- und der Table-Komponente
- 👩🎨 Öffnen- und Schließen-Icon des Accordions lässt sich mittels CSS ändern
❗ Die Properties
_id
und_name
sind nicht mehr zwingend erforderlich bei den Eingabefeldern. Es wird aber ein Developer-Hinweis ausgegeben, da die ID für die E2E-Tests und der Name für das Autocomplete des Browsers relevant ist.🔧 Type-Handling in KolTable verbessert (
render
,sort
,_data
)👩🎨 Optische Verbesserung bei
readonly
unddisabled
bei allen Eingabefeldern- 📚 Dokumentation verbessert
1.0.5 - 13.12.2021
🚹❗ Problematisches und teilweise funktionslose
autofocus
-Property aus allen Eingabefeldern entfernt🔝 Statische Code-Prüfung (
eslint-plugin-jsx-a11y
) erweitert und Quellcode verbessert❗ Nicht implementierte
_info
-,_success
- und_warning
-Properties aus allen Eingabefeldern entfernt👩🎨
overflow-hidden
bei Accordion und Card optimiert, um das Abschneiden des Fokus-Rahmens zu vermeiden- 🔝 Projektabhängigkeiten wurden aktualisiert
- 👩🎨 Äußerer Abstand 1 bei Button und Link verbesserte Fokus-Outline
- 📚 Dokumentation verbessert
1.0.4 - 10.12.2021
- 👩🎨 Styling-Part für den Select-Knoten hinzugefügt
- 🌟 Optgroup's sind jetzt mit der Select-Komponente möglich
🔧 Export der Typen
Option
undOptgroup
🔧 Initiales
_selected
bei den Tabs repariert- ❗ Verbesserung der Render-Funktion von der Tabelle
- 📚 BITV-Test-Stories ins Storybook übernommen
- 📚 Dokumentation verbessert
1.0.3 - 09.12.2021
- 🔧 Pagination bei Tabellen repariert
- 🌟 Bereitstellung von KoliBri als Download
- 📚 Dokumentation verbessert
1.0.2 - 08.12.2021
- 🔧 Form-Beispiele im Storybook repariert
- 🔧 Fehler mit der Icofont im Storybook repariert
- 🔧 Style-Editor im Storybook repariert
- 🔧 Fehler beim Label-Handling bei den Komponenten InputRadioGroup und InputRadio behoben
- 📚 Dokumentation verbessert
1.0.1 - 07.12.2021
- ❗ Die Komponenten InputRadioGroup und InputRadio sind zur Komponente InputRadio zusammengeführt worden
- 🔧 Probleme beim Rendern von InputRadio's wurden durch das Refactoring behoben
- 🔧 Fehlender Mandatory/Required-Status in den Komponenten Select und Textarea behoben
- 📚 Dokumentation verbessert
1.0.0 - 06.12.2021
- 🌟 Dieses Release stellt das initiale Release von KoliBri dar.
Backlog
Komponenten
- Accordion-Gruppe (im Fokus, v1.2)
- Avatar
- Carousel
- Cookie-Banner
- Dialog (im Fokus, v1.2)
- Dropdown (im Fokus, v1.2)
- Drag & Drop / Upload-Area
- Image (im Fokus, v1.2)
- Listbox (im Fokus, v1.2)
- Timeline
- Tree (im Fokus, v1.2)
Funktionalitäten
Table
- Kopf-Zeilen und Spalten fixieren (sticky)
- Checkboxen
- Dark-Mode (Themes)