2 posts tagged with "neuerungen"

WIP: Dieser Artikel wird immer wieder entwicklungsbegleitend aktualisiert.

Die wichtigsten Änderungen sind:

• Verbesserungen
• Refactorings
  • Vereinheitlichung von Properties der Komponenten (siehe -Konzept)
    • _alignment vom Popover in _align umbenannt
    • Typ Alignment wurde intern in Align umbenannt
    • _label wird in Version 2 folgende Properties ersetzen:
      • _aria-label von Breadcrumb, Button, ButtonLink, Icon, Link, LinkButton, Modal, Nav, SkipNav, SplitButton, Symbol und Tabs
      • _caption von Quote und Table
      • _heading von Accordion, Alert, Card und Toast
      • _headline von Card
      • _quote von Quote (?)
      • _summary von Details
      • _symbol von Symbol
      • _title von Abbr
    • Properties, die zukünftig nicht mehr benötigt werden
      • _has-footer von Card
      • _height_ von Select
      • _icon-align ...
      • _part ...
      • _show-dropdown ...
• Expert-Slot
  • Alle Inputs-, Select- und Textarea-Komponenten haben nun einen Expert-Slot und das _label ist Pflicht. Wenn das _label="" leer bleibt, dann wird das Label über den Slot, wie gewohnt angezeigt.
  • Code-Replacement - am besten einzeln ersetzen:
    • (<Kol(Button|Button|Link|Heading|Input[^>]+|Link|LinkButton|Select|Textarea))>(\n?\t*)([^\n]+)[^<]+<\/Kol(Button|Button|Link|Heading|Input[^>]+|Link|LinkButton|Select|Textarea)> -> $1 _label="$5" />
• Theming
• Dokumentation
• Adapter
  • Vaadin: Optimierungen am Code-Generator
  • JSF: Verbesserung für statische/klassische Formulare (experimental)

Release 1.5 will be released soon and will bring numerous new components, improvements and simplified theming.

The most important changes are:

• New components

  • Image
  • Popover
  • Split button
  • ToggleButton (see InputCheckbox)
  • Quote

• Improvements

  • Performance

    • Performance was affected by the oversized CSS definitions in the icon component. The background are the many icon selectors in the icon fonts. However, only a fraction of these CSS definitions are really needed for a design system. For the components we went with the lightweight Visual Studio Code (Codicon) icon font and removed Iconont and Font-Awesome by default (can be upgraded again). Thus, this release brings with it a significant performance improvement when rendering the components.

  • Assets (Fonts and Icons)

    • Icon font versions have been updated
    • Assets have been split across themes where relevant. As a result, the KoliBri artifact (NPM package) can be reduced in size and thus downloaded and installed faster.
    • By storing a postinstall script, the assets can be automatically copied to the public/assets folder after each installation of the KoliBri packages.

       // 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",
        …
       }
      
    • Then do a npm i (pnpm i) to automatically copy all assets to the public/assets folder.
    • So that the assets do not have to be checked in, they can be excluded in the .gitignore file.

      # .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
      
    • More icon fonts have been used in themes:
      • Microsoft Codicons
      • Google Material Icons
      • Google Material Symbols
      • Tabler Icons

• Refactorings

• We refactored a few components to extend functionality and improve maintainability.

• Accordions

  • The header of the accordion is now implemented using KoliBri heading, button and span.
  • Accordions can now be opened and closed with animation.

• Alert

  • The construction of the alerts has been revised to allow full flexibility for the design.

• Heading

• The heading component was provided with an expert slot.

  • Inputs, Select and Textarea
    • The construction of all input fields has been revised to improve designability and maintainability.
  • Nav
    • Expandable submenus now have a separate expand button. In this way, the actual menu item can be used independently of the opening and closing.
    • Menu items can now be links, buttons or plain text.
  • Table Pagination is now always at the top of the DOM to allow faster navigation for blind users. For sighted users, the pagination can be displayed either above or below the table via the theming.
  • Tabs
    • The tabs now use the KoliBri button component.
  • Tooltip

• The tooltip is only intended for internal use in KoliBri components. To improve the designability, the tooltip is now provided without a shadow root. If the component is used outside of KoliBri, the styling must be added to the CSS styling of the project (website, app).

  • All relevant themes have been revised with regard to refactorings

• Adapter

  • Added new adapter for Angular 16

• KoliBri CLI

  • Templates
    • The templates have been revised and updated.
    • Angular template updated to version 16

• Expert slot

  • The Expert slot can be used to paste any HTML instead of the text label at your own risk.

  • When introducing an expert slot, the property _label usually becomes mandatory. Either the label contains a text that is then displayed without a slot. Or it is empty and the Expert slot is activated.

    <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: The heading now allows you to insert any content in expert mode. The required property _label was introduced for this purpose. Leaving the property empty (_label="") activates the expert slot.

• Theming

  • Basic styling: We have reduced the CSS on the components to the essentials. The styling primarily only contains layout definitions without colors, distances and tokens. This makes creating your own themes much easier.
  • All of our themes have been adapted to the new basic styling definitions and have been significantly simplified as a result.
  • New themes
    • Theme of the European Commission
    • European Union theme
    • Theme for the new version of the Customs Design System (v2)
    • Theme of the federal style guide (federal government)
    • Theme of the Federal Central Tax Office (WIP)
    • Theme of the Free State of Thuringia (for demo purposes)

• Documentation

  • Code examples
    • There is an example application () with numerous code examples.
    • Code samples have been expanded and updated
    • Example application can be checked out and started locally (is in the KoliBri repository).
    • Code examples are now displayed in the documentation.
    • Code Examples includes a handout view for theme presentations.
  • Texts
    • The texts have been revised and updated.
    • The texts have been translated into English.

• Live Editor (beta): All components can now be reconfigured live. The changes are displayed directly on the component in the viewer next to it.

• Functionalities

  • The link now allows specifying a filename for the download link.
  • The progress can now also display the progress as readable text and have a label.