Note

• Ich achte beim Erstellen des Issues darauf, dass ich keine fachlichen und unternehmensinternen Details preisgegebe.

Hilfreicher Hinweis

Die Themes-Datei (node_modules/@public-ui/themes/dist/index.mjs) ist derzeit 2,1 MB groß, und ist nicht tree shakeable da alle Themes in einer Datei enthalten sind. Bitte die Themes in einzelne Dateien aufsplitten.

Note

• Ich achte beim Erstellen des Issues darauf, dass ich keine fachlichen und unternehmensinternen Details preisgegebe.

Fehlermeldung

Beschreibung des Fehlers

Eine klare und prägnante Beschreibung des Fehlers.

Reproduktion

Nutzen Sie die CodeSandbox, um ein reproduzierbares Beispiel zu erstellen.

• Link zu CodeSandbox: '...'

Schritte zum Reproduzieren des Verhaltens:

• Gehe zu '...'
• Klicke auf '....'
• Scrollen Sie nach unten zu '....'
• Siehe Fehler

Erwartetes Verhalten

Eine klare und prägnante Beschreibung dessen, was Sie erwartet haben.

Screenshots

Fügen Sie gegebenenfalls Screenshots hinzu, um Ihr Problem zu erläutern.

Desktop (bitte vervollständigen Sie die folgenden Informationen):

• Betriebssystem: [z.B. iOS]
• Browser [z.B. Chrom, Safari]
• Version [z.B. 22]

Smartphone (bitte ergänzen Sie folgende Angaben):

• Gerät: [z.B. iPhone 6]
• Betriebssystem: [z.B. iOS8.1]
• Browser [z.B. Aktienbrowser, Safari]
• Version [z.B. 22]

Zusätzlicher Kontext

Fügen Sie hier einen beliebigen anderen Kontext zum Problem hinzu.

Note

• Ich achte beim Erstellen des Issues darauf, dass ich keine fachlichen und unternehmensinternen Details preisgegebe.

Wir können aus der component.d.ts ein Cheat Sheet generieren und es um eine Hand voll Beispielen und der Register ergänzen.

• geoutet werden
• 3 kleine Einstiegsbeipiele - inline hinzufügen / Register
• Einfache Seite im Storybook (HTML)

unjs/unbuild#130

Die Zeichenanzahl bei der Textarea und Text-Input Komponente wird nicht mehr angezeigt. Wunsch:

Neben dem Label auf der rechten Seite:

Anzeige erst nach Klick in das Feld:

Button in Input: Tooltip wird gestapelt angezeigt wenn Tooltip im Hochformat

Opened by @simonhesse

Funktion: Über die Toggle Badge soll das An- und Abwählen von Funktionen ermöglicht werden. Mit Klick ist es aktiviert und mit erneutem Klick wieder deaktiviert

CSS-Styles:
height: 32px;
width: 171px;
left: 26px;
top: 38px;
border-radius: 5px;
padding: 4px 12px 4px 8px;

• https://github.com/publiccodeyml/publiccode.yml
• https://publiccode-editor.developers.italia.it/
• https://gitlab.opencode.de/ig-bvc/konformitaetstest/-/blob/main/publiccode.yml

<KolButton type="submit" .../> triggert nicht den Submit der umliegenden Form, wenn nicht Leanup verwendet wird. Wir bauen unsere Formulare z.B. mit react-hook-form und der Form submit sollte hier genauso getriggert werden. Mit der Version 1.1.1 hat es noch funktioniert

Gleiches gilt auch beim Betätigen der Enter-Taste innerhalb eines Inputfeldes.

Bei Bedarf kann ich eine Codesandbox bereitstellen.

Opened by @Chrisdo82

Note

• Ich achte beim Erstellen des Issues darauf, dass ich keine fachlichen und unternehmensinternen Details preisgegebe.

Das Attribute _type wird bei den Inputs vom HTML-Attribute type abgeleitet. Lediglich beim KolInputCheckbox haben wir es für die Variante verwendet.

Um die Semantik zu wahren werden wir das Attribute für die Varianten checkbox oder switch auf das Attribut _variant verschieben. Das Attribut _type wird dann an der Komponente irrelevant (deprecated).

Das Konzept muss überarbeitet werden: https://public-ui.github.io/?path=/docs/accessibility--page

Für das dynamische Laden von JavaScript-Dateien (ESM) müssen die Pakete speziell gebundled werden. Mit dem Release 1.1.9 ist vorgesehen, neue Bundles hierfür bereitzustellen.

Note

• Ich achte beim Erstellen des Issues darauf, dass ich keine fachlichen und unternehmensinternen Details preisgegebe.

Fehlermeldung

z.B.

Funktion: Anzeige des gesetzten Filters + Aktion "Entfernen"

Fokusrahmen innerhalb der Klickfläche von 44px:

Fokusrahmen außerhalb der Klickfläche von 44px:

Anzeige Filterung:
height: 32px;
width: 99px;
left: 0px;
top: 0px;
padding: 4px 8px 4px 12px;
border-radius: 5px 0px 0px 5px;

"Close"-Button:
height: 32px;
width: 32px;
left: 26px;
top: 33.242919921875px;
padding: 4px;
border-radius: 0px 5px 5px 0px;

Sichtbare Klickfläche bei 32x32px, tatsächliche Klickfläche muss bei 44x44px sein.

Note

• Ich achte beim Erstellen des Issues darauf, dass ich keine fachlichen und unternehmensinternen Details preisgegebe.

Reproduktion

Max Date eines Datum-Kalenders

• disabled Style?!

v1.1.10

Dokumentation erweitern

Note

• Ich achte beim Erstellen des Issues darauf, dass ich keine fachlichen und unternehmensinternen Details preisgegebe.

Hilfeanfrage

Ist es möglich für Buttons custom Images bzw. Icons zu benutzen?

Note

• Ich achte beim Erstellen des Issues darauf, dass ich keine fachlichen und unternehmensinternen Details preisgegebe.

Hilfreicher Hinweis

Beim Radio gibt es mehrere Unterkomponenten mit Slots. Prüfen, ob diese korrekt befüllt werden. (Großer Abstand zu sehen)

refs werden derzeit nicht forwarded. Das z.B. funktioniert derzeit nicht:

<KolButton ref={ref} ... />

Erwartetes Verhalten wäre, dass das ref an das button Element durchgereicht werden würde. Bei Bedarf kann ich noch ein detaillierteres Beispiel liefern

Opened by @Chrisdo82

Note

• Ich achte beim Erstellen des Issues darauf, dass ich keine fachlichen und unternehmensinternen Details preisgegebe.

Featureanfrage

Bezieht sich Ihre Feature-Anfrage auf ein Problem? Bitte beschreiben.

Bei Jest ist ESM leider noch experimental (https://jestjs.io/docs/ecmascript-modules). Alle Tests mit Jest schlagen mit der Version 1.1.9 nun leider fehl.

Beschreiben Sie die gewünschte Lösung

Den Build so anpassen, das cjs weiterhin mit ausgeliefert wird.

Featureanfrage

Bezieht sich Ihre Feature-Anfrage auf ein Problem? Bitte beschreiben.

In der Nav-Komponente ist für Screenreader nicht erkennbar, welches der Menüpunkte zur Zeit ausgewählt ist. Für Sehende ist dieser farblich hinterlegt, für Screenreader-NutzerInnen kann hier das aria-current Attribut gesetzt werden.

Beschreiben Sie die gewünschte Lösung

Das aria-current Attribut wird automatisch korrekt gesetzt, wenn ein Menüpunkt ausgewählt wird.

Beschreiben Sie Alternativen, die Sie in Betracht gezogen haben

• Die Menü-Elemente aus dem DOM fischen und das Attribut selbst setzen

Zusätzlicher Kontext

Wurde im Zuge eines BitV-Tests bemängelt.

Description
Multiselect Felder (KolSelect mit mit _multiple) haben immer den ersten Wert vorausgewählt. Dies war ursprünglich einmal nicht so und lässt sich auch mit Übergabe einer leeren Wertemenge nicht ändern.

To Reproduce
Tritt sowohl mit als auch ohne LeanInputAdapter auf. MinBsp.:

export const MinTstMultiSelect = () => {
  const [list, setList] = useState([
    { label: 'Herr', value: 'Herr' },
    { label: 'Frau', value: 'Frau' },
  ]);
  return (
   <KolForm slot="content">
      <KolSelect 
        _list={list} 
        _multiple 
        _size={3} 
        _id={'test'} 
        _name={'test'} 
        //_value={[]}   <-- bewirkt nichts
        >
      </KolSelect>
    </KolForm>
  );
};

Expected behavior
Beim initialen Laden sollten Multiselect Felder per Default keinen Wert ausgewählt haben.

Screenshots

Desktop (please complete the following information):

• Browser Chrome, Firefox, ...
• Version 1.1.9

Note

• Ich achte beim Erstellen des Issues darauf, dass ich keine fachlichen und unternehmensinternen Details preisgegebe.

Hilfreicher Hinweis

Der Sortierbutton im BMF ist meist weit weg von Header-Label - es fehlt auch etwas Struktur-in der Table.

Ohne Border (BMF):

Mit Border (MAPZ):

Oder näher zuordnen:

Aktuell lässt sich das Alert nicht schließen. Bitte "Close"-Funktion hinzufügen. Siehe:

Featureanfrage

Bezieht sich Ihre Feature-Anfrage auf ein Problem? Bitte beschreiben.

Wir haben in der Egebnismenge von Suchabfragen Tabellen mit sehr vielen Spalten, sodass idR nicht der gesamte Inhalt sichtbar ist und horizontal gescrollt werden muss.

Beschreiben Sie die gewünschte Lösung

Sobald in eine Zeile geklickt wird, soll diese als "aktive" Zeile gehighlightet werden. D.h. diese bekommt z.B. eine andere Hintergrundfarbe/Outline/... als die anderen Zeilen.

Beschreiben Sie Alternativen, die Sie in Betracht gezogen haben

Zeilen durch Checkbox-Spalte selektierbar machen. Siehe folgendes AntD Beispiel: https://codepen.io/pen?&editors=001&prefill_data_id=2caf7670-4c18-43a8-b837-dd82b57bab32

Zusätzlicher Kontext

AntD Beispiel:

Hilfeanfrage

https://www.erikkroes.nl/blog/accessibility/the-guide-to-accessible-web-components-draft/#what-is-shadow-dom-and-light-dom

⚠️ Achten Sie beim Erstellen von Tickets stets darauf, dass die technischen Fokus adressiert werden und keine fachlichen und unternehmensinternen Details preisgegeben werden.

Fehlermeldung

Beschreibung des Fehlers

Eine klare und prägnante Beschreibung des Fehlers.

Reproduktion

Schritte zum Reproduzieren des Verhaltens:

• Gehe zu '...'
• Klicke auf '....'
• Scrollen Sie nach unten zu '....'
• Siehe Fehler

Erwartetes Verhalten

Eine klare und prägnante Beschreibung dessen, was Sie erwartet haben.

Screenshots

Fügen Sie gegebenenfalls Screenshots hinzu, um Ihr Problem zu erläutern.

Desktop (bitte vervollständigen Sie die folgenden Informationen):

• Betriebssystem: [z.B. iOS]
• Browser [z.B. Chrom, Safari]
• Version [z.B. 22]

Smartphone (bitte ergänzen Sie folgende Angaben):

• Gerät: [z.B. iPhone 6]
• Betriebssystem: [z.B. iOS8.1]
• Browser [z.B. Aktienbrowser, Safari]
• Version [z.B. 22]

Zusätzlicher Kontext

Fügen Sie hier einen beliebigen anderen Kontext zum Problem hinzu.

Seit dem letzten Firefox update ist es bei unserem Arbeitgeber möglich, das HTML5 Element zu nutzen. Dieses könnte eure selbst geschriebene Komponente ablösen, da diese von haus aus alles mitbringt.

Anbei noch ein Link zur Erklärung des Tags und eine Übersicht der Browserverfügbarkeit
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog?retiredLocale=de
https://caniuse.com/dialog

Note

• Ich achte beim Erstellen des Issues darauf, dass ich keine fachlichen und unternehmensinternen Details preisgegebe.

Hilfreicher Hinweis

Verbesserungsvorschlag: Logo ITZBund. Bundesadler mit Flaggenstab und Schriftzug Informationstechnikzentrum Bund

Das Datumsfeld soll durch Maxima in seinen gültigen Werten einschränkbar sein. Beim Setzen der Werte sollte die ungültigen Daten bereits nicht auswählbar sein.
Per Default soll der 31.12.9999 als Maximum gesetzt sein, um fünf- oder sechsstellige Jahreszahl zu verhindern.

Neue Eigenschaften am Feld

Is your feature request related to a problem? Please describe.
Wir haben MultiSelect Felder mit vielen Einträgen und es kommt häufig vor, dass der User sämtliche Werte auswählen/deselektieren möchte.

Describe the solution you'd like
Die KolSelect Props um ein "_selectAll" Flag erweitern, welches an erster Stelle einen zusätzlichen Eintrag "Alle auswählen" mit Checkbox (o.ä. hervorgehoben) einblendet.

Mögliche Darstellung:

https://i.stack.imgur.com/wb9Sd.png

Note

• Ich achte beim Erstellen des Issues darauf, dass ich keine fachlichen und unternehmensinternen Details preisgegebe.

Featureanfrage

Wir warten auf StencilJs ionic-team/stencil#3488

Finalisierung des Translation-Service.

• Implementierung
• Dokumentation
• Konfiguration i18next-like

Aktuell hat der Ghost-Button einen weißen Hintergrund. Besser wäre ein transparenter, damit dieser auch auf farbigem Hintergrund Verwendung finden kann.

Featureanfrage

Bezieht sich Ihre Feature-Anfrage auf ein Problem? Bitte beschreiben.

Wir haben in der Egebnismenge von Suchabfragen Tabellen mit sehr vielen Spalten, sodass idR nicht der gesamte Inhalt sichtbar ist und horizontal gescrollt werden muss. Die User haben unterschiedliche Priorisierungen bei der Reihenfolge der Spalten, bzw. würde diese je nach Ergebnismenge gerne umsortieren können.

Beschreiben Sie die gewünschte Lösung

Die Spaltenreihenfolge der KolTable Komponente via Drag&Drop sortierbar machen.

Fehlermeldung

Beschreibung des Fehlers.

Die InputRadio-Komponente wird mit überflüssigen Abständen dargestellt. Diese entstehen durch leere div Elemente, die zwischen den Radio-Optionen eingefügt werden.

Reproduktion

Das Problem tritt bei jeder InputRadio-Komponente auf, die wir einsetzen. Diese werden immer aus Listen etc. dynamisch generiert:

Erwartetes Verhalten

InputRadio-Komponenten werden mit normalen Abständen dargestellt.

Screenshots

Umgebung

• Desktop
• Windows 10
• Chrome Version 100.0.4896.75
• Kolibri und Kolibri-React Version 1.1.6-rc.11

Weiterer Kontext

Ich habe dieses Problem bereits im Entwickler-Meeting angesprochen, weiß aber nicht, ob schon eine Lösung in Arbeit ist oder in Betracht gezogen wird. Ich wäre auch bereit, selbst einen PR mit einer Lösung zu erstellen.

Fertigstellen und Überarbeiten des Internationalisierungskonzepts: https://public-ui.github.io/?path=/docs/konzepte-internationalisierung--page

Note

• Ich achte beim Erstellen des Issues darauf, dass ich keine fachlichen und unternehmensinternen Details preisgegebe.

Hilfreicher Hinweis

Evaluation Tool: https://github.com/amzn/style-dictionary

Fehlermeldung

Beschreibung des Fehlers

Wenn bei der Anzeige von Zeichen (hasCounter) in einem Text-Feld (KolTextarea) ein Wert/Text initial geladen, wird trotzdem "0/xxx" angezeigt. Also steht im Counter initial immer eine Null, auch wenn bereits Text (mit einer Zeichenanzahl > 0) vorliegt.
Erst mit Bearbeiten des Textes wird die richtige Anzahl von Zeichen angezeigt, d.h. wir müssen in das Textfeld klicken und eine Taste drücken, damit der Counter sich aktualisiert.

Reproduktion

        <LeanInputAdapter _control={textCtrl}>
          <KolTextarea
            _id="text"
            _name="text"
            _placeholder="max. 4000 Zeichen"
            _rows={8}
            _maxLength={4000}
            _hasCounter={mode !== Mode.READONLY}
            _readOnly={
              mode === Mode.READONLY ||
              textbaustein.status !== Status.IN_BEARBEITUNG
            }
            _touched={touched}
          >
            Text
          </KolTextarea>
        </LeanInputAdapter>

Erwartetes Verhalten

Wir würden erwarten, dass sich der Counter auch schon beim initialen Laden/Anzeigen bereits auf den aktuellen Wert (Anzahl der Zeichen) setzt.

Screenshots

Habe einen Screenshot angehangen, wie der Counter initial aussieht:

Und ein Screenshot, wenn man im Textfeld ein Zeichen hinzugefügt hat:

Zusätzlicher Kontext

Aktuell verwenden wir KoliBri Version 1.1.10 - in älteren Versionen war es aber auch schon so.

Note

• Ich achte beim Erstellen des Issues darauf, dass ich keine fachlichen und unternehmensinternen Details preisgegebe.

Featureanfrage

Bezieht sich Ihre Feature-Anfrage auf ein Problem? Bitte beschreiben.

Nein

Beschreiben Sie die gewünschte Lösung

Wir würden es toll finden wenn die Tabs Komponente auch Vertikal platziert werden könnte. Für eine Vertikale Platzierung würden wir auch bevorzugen, die Option zu haben nur Icons, ohne Text, zu verwenden.

Beschreiben Sie Alternativen, die Sie in Betracht gezogen haben

Keine

Zusätzlicher Kontext

Beispiel von Vertikalen Tabs.

Das Icon ist aktuell mittig platziert. Es sollte oben links ausgerichtet sein, sodass das Icon immer neben der Überschrift oder dem Text steht.

Komponente umbenennen
kol-input-adapter-leanup in lean-input-adapter oder
LeanInputAdapter in LeanInputAdapter
Importe entfernen und hinzufügen (nur React)
Hinzufügen: import { LeanInputAdapter } from '@leanup/kolibri-react';
Entfernen: import { LeanInputAdapter } from '@public-ui/react';

Anzeige der verfügbaren Zeichen für jedes Eingabefeld ermöglichen (nicht nur bei der Textarea)
Aktuelle Umsetzung in Kolibri:

Anzeige erst bei Fokkussierung
Anzeige über dem Eingabefeld oben rechts, neben dem Titel?
Wunsch UX/UI:

(Wunsch bei Maximaleingabe: fett)
Zunächst auch schon ohne rötliche Einfärbung sehr hilfreich.

Opened by @simonhesse

Test-Konzept überarbeiten und wieder in die Dokumentation integrieren werden.

Note

• Ich achte beim Erstellen des Issues darauf, dass ich keine fachlichen und unternehmensinternen Details preisgegebe.

Hilfreicher Hinweis

• Langen Texten
• vielen Spalten
• Bearbeitung in der Spalte

⚠️ Achten Sie beim Erstellen von Tickets stets darauf, dass die technischen Fokus adressiert werden und keine fachlichen und unternehmensinternen Details preisgegeben werden.

Da werden doch dann die Fehlermeldungen nicht vorgelesen.

Immer zum Rand springen erlauben, außer die erste oder letzte Seite ist gewählt.

Fehlermeldung

Beschreibung des Fehlers

Nachdem via npm init kolibri@latest my-kolibri-app eine Angular erstellt wurde, startet diese nicht.

• Es fehlt die Datei "logo.angular.png"
  -"zone.js": "^0.12.0" muss als Dependency in der package.json hinterlegt werden

Erwartetes Verhalten

Die App startet nach der Grundeinrichtung

Desktop (bitte vervollständigen Sie die folgenden Informationen):

• Windows 11
• Chrome