refactor: update input components css to use bem styles and mixins #7180

Makko74 · 2024-12-10T20:12:12Z

ref #7178

The A11y and PO reviews will only take place after all other DoD steps have been completed by the Developer:

Meaningful pull request title for the release notes
Pull request is linked to an issue and all changes relate to the issue
Tests to protect this code implemented (if applicable)
Manual test performed successfully (if applicable)
Documentation or migration has been updated (if applicable)

Refs: #7178

…m styling checkbox and radio Refs: #7178

Refs: #7178

…ng/7178-convert-input-scss-to-bem Refs: #7178

github-actions · 2024-12-16T23:30:46Z

Netlify Draft Deployment
URL: https://67934376d3acb7b0464b05d1--kolibri-public-ui.netlify.app
Logs: https://app.netlify.com/sites/kolibri-public-ui/deploys/67934376d3acb7b0464b05d1

laske185 · 2025-01-10T08:40:12Z

Inputs allgemein:
Sobald man in den Root klickt, wird das Element fokussiert. Das macht bei Textfeldern den Effekt, dass man an beliebiger Stelle in die Nähe klickt und dann den Fokus auf das Input setzt. Extrem ist es bei Checkboxen. Nervig aber auch bei Input-File, da dort ein Dialog aufgeht, nur weil man auf den Hint oder die Message geklickt hat.

Die Labels, Messages, Hints sind nicht mehr selektierbar, sodass man den Text kopieren kann.

Radio-Buttons:
Bei der Navigation mit Tab wird meistens das zweite Element fokussiert. Der Fokus bleibt dann auch immer auf diesem Element hängen. Wählt man einen anderen Eintrag mit den Pfeiltasten aus, bleibt der Fokus auf dem Element. Ab dann ist man nicht mehr in der Lage, mit den Pfeiltasten ein anderes Element auszuwählen.
Klickt man mit der Maus auf das erste Element, wird dieses ausgewählt, der Fokus aber sofort auf das zweite gesetzt.

TBD;

…ng/7178-convert-input-scss-to-bem * 'develop' of github.com:public-ui/kolibri: (181 commits) Fix E2E test split button Fix handling of minus sign in number input Fix split-button test Update all snapshots$ $ Refs: #7036 BEM Refactoring split-button chore: release 3.0.0-rc.2 review changes removed media for -bottom test update refactor itz added pagination modifier Update all snapshots$ $ Refs: #7036 update default theme test update review changes refactor bem for standart, ecl fixed sort fixed header align review changes Remove deprecated-annotations for ariaControls and ariaExpanded ...

sdvg · 2025-01-14T06:56:31Z

@laske185 Das dürften beides Nebeneffekte von delegatedFocus sein, die ich so auch auf develop reproduzieren kann. Siehe auch: #6869 (comment)

Refs: #7178

…ng/7178-convert-input-scss-to-bem * 'develop' of github.com:public-ui/kolibri: Rename draft themes to "in progress" Remove theme itzbund Update kolibri.config Implement attribute migrations Remove debug information Fix typo

Refs: #7178

$ Refs: #7178

sdvg · 2025-01-16T07:22:33Z

Es gibt folgende Abweichungen in den Snapshots, die ich als Verbesserungen oder irrelevant sehen und demnach beibehalten würde:

Allgemein:
- Ornamente nehmen etwas mehr Platz ein durch Umstellung von Flex auf Grid
- Hint-Texte werden wieder kursiv dargestellt
- Messages sind wieder an der richteigen Position
Radio: Abstände leicht angepasst bzw. ungewollte Abstände durch UA-Styles auf Label entfernt und Zentrierung verbessert
Checkbox Button: Ecken wieder abgerundet, Layout-Fix bei langen Labels
Checkbox Switch: Indeterminate-State ist jetzt blau, analog zu den normalen Checkboxen

Refs: #7178

…ng/7178-convert-input-scss-to-bem * 'develop' of github.com:public-ui/kolibri: Introduce new environment variable KOLIBRI_VISUAL_TESTS_EXPECT_TIMEOUT

Refs: #7178

$ Refs: #7178

Refs: #7178

…css-to-bem' into refactoring/7178-convert-input-scss-to-bem * origin/refactoring/7178-convert-input-scss-to-bem: Update all snapshots$ $ Refs: #7178

Refs: #7178

laske185

Bis jetzt nicht fertig. Aber schau mal nach dem Layout im 400 % zoom. Danke

...es/default/snapshots/theme-default/snapshot-for-scenarios-static-form-zoom-firefox-linux.png

Refs: #7178

packages/components/src/components/input-range/shadow.tsx

$ Refs: #7178

...ame-transformer/snapshots/theme-default/snapshot-for-input-date-basic-zoom-firefox-linux.png

...me-transformer/snapshots/theme-default/snapshot-for-input-email-basic-zoom-firefox-linux.png

...mer/snapshots/theme-default/snapshot-for-input-password-show-password-zoom-firefox-linux.png

packages/components/src/components/input-range/shadow.tsx

...me-transformer/snapshots/theme-default/snapshot-for-input-range-basic-zoom-firefox-linux.png

...ts/theme-default/snapshot-for-scenarios-disabled-interactive-scenario-zoom-firefox-linux.png

.../themes/default/snapshots/theme-default/snapshot-for-input-checkbox-button-firefox-linux.png

.../themes/default/snapshots/theme-default/snapshot-for-input-date-basic-zoom-firefox-linux.png

...ult/snapshots/theme-default/snapshot-for-input-password-show-password-zoom-firefox-linux.png

...themes/default/snapshots/theme-default/snapshot-for-input-range-basic-zoom-firefox-linux.png

...ag-name-transformer/snapshots/theme-default/snapshot-for-input-range-basic-firefox-linux.png

laske185 · 2025-01-22T12:22:50Z

@sdvg wir können wo es für dich passt auch neue Tickets machen und die findings dann separat bearbeiten.

…ng/7178-convert-input-scss-to-bem * 'develop' of github.com:public-ui/kolibri: Update all snapshots$ $ Refs: #6899 delete modal from controlled.tsx delete modal in the sample remove _modal Fix test Remove modal property in Drawer

sdvg · 2025-01-23T09:09:56Z

@sdvg wir können wo es für dich passt auch neue Tickets machen und die findings dann separat bearbeiten.

@laske185 Habe die noch offenen Punkte jetzt durchgeschaut. Die würde ich tatsächlich gerne in einem neuen Ticket machen, weil sie sich teilweise mit der Anpassung der Sample App (einspaltig) erledigen sollten. Die ganzen 400% Zoom-Themen würde ich vorschlagen in einem Ticket zusammenzufassen.

laske185

Nachdem die Snapshots aktualisiert sind kann gemergt werden. Für offene Themen sind neue Issues angelegt.

$ Refs: #7178

refactor: update input components css to use bem styles and mixins

700397a

Refs: #7178

deleonio added the v3 Here are issues that need to be resolved for version 3. label Dec 10, 2024

Makko74 added 3 commits December 12, 2024 18:33

feat: add FieldControl and FieldControlStateWrapper components and be…

e2e3b9c

…m styling checkbox and radio Refs: #7178

feat: reactoring and update sccs in input components to use bem styles

f9b9cc0

Refs: #7178

Merge branch 'refactoring/7032-field-input-components' into refactori…

461ada2

…ng/7178-convert-input-scss-to-bem Refs: #7178

Base automatically changed from refactoring/7032-field-input-components to develop December 17, 2024 09:04

Makko74 linked an issue Dec 17, 2024 that may be closed by this pull request

BEM Refactoring für Input Components #7178

Closed

laske185 marked this pull request as ready for review January 13, 2025 08:46

sdvg added 6 commits January 14, 2025 13:29

Fix typo

52e3d94

Refs: #7178

Fix minor styling issues

39d0be0

Refs: #7178

Fix select styles

1b4a1c0

Refs: #7178

Fix missing accessKey

fbe86fb

Refs: #7178

Fix typo

0ccf4ef

Refs: #7178

Hide badges from radio options

380325f

Refs: #7178

sdvg mentioned this pull request Jan 15, 2025

Update sample app cases for inputs #7244

Merged

5 tasks

sdvg and others added 4 commits January 15, 2025 16:30

Fix missing shortKey badge

4252b70

Refs: #7178

Remove opacity for messages on disabled fields

c3c67e0

Refs: #7178

Update all snapshots$

0327155

$ Refs: #7178

sdvg added 6 commits January 16, 2025 09:28

Update Jest snapshot

50088ea

Refs: #7178

Rename style to global

21f3228

Refs: #7178

Unify mixin style

fc14b7d

Refs: #7178

Refactor color

1c53547

Refs: #7178

Refactor scss

c6b438f

Refs: #7178

Update components

597451a

Refs: #7178

sdvg and others added 12 commits January 17, 2025 11:45

Refactor theme checkbox

e9eb017

Refs: #7178

Refactor base styles

529a1b9

Refs: #7178

Refactor base styles

9bb09a6

Refs: #7178

Merge branch 'develop' of github.com:public-ui/kolibri into refactori…

b24574c

…ng/7178-convert-input-scss-to-bem * 'develop' of github.com:public-ui/kolibri: Introduce new environment variable KOLIBRI_VISUAL_TESTS_EXPECT_TIMEOUT

Add missing tooltip styles

007602e

Refs: #7178

Fix combobox and single-select focus styles

eb4a2b7

Refs: #7178

Refactor

c0b3a76

Refs: #7178

Update all snapshots$

31b5a58

$ Refs: #7178

Refactor default theme styles

20ee66e

Refs: #7178

Merge remote-tracking branch 'origin/refactoring/7178-convert-input-s…

222376f

…css-to-bem' into refactoring/7178-convert-input-scss-to-bem * origin/refactoring/7178-convert-input-scss-to-bem: Update all snapshots$ $ Refs: #7178

Fix error messages

53f9a25

Refs: #7178

Cleanup EU themes

1897d0f

Refs: #7178

laske185 requested changes Jan 22, 2025

View reviewed changes

...es/default/snapshots/theme-default/snapshot-for-scenarios-static-form-zoom-firefox-linux.png Outdated Show resolved Hide resolved

KolInputRange: Fix width calculation for number input

a682975

Refs: #7178

sdvg reviewed Jan 22, 2025

View reviewed changes

packages/components/src/components/input-range/shadow.tsx Show resolved Hide resolved

Update all snapshots$

62fe56e

$ Refs: #7178

laske185 requested changes Jan 22, 2025

View reviewed changes

...ag-name-transformer/snapshots/theme-default/snapshot-for-input-range-basic-firefox-linux.png Outdated Show resolved Hide resolved

This was referenced Jan 24, 2025

400 % Zoom Probleme beheben #7280

Open

Unterschiedliche Breite des Nummerfeldes im Range #7281

Open

laske185 previously approved these changes Jan 24, 2025

View reviewed changes

Update all snapshots$

5cfb819

$ Refs: #7178

publicuibot bot dismissed laske185’s stale review via 5cfb819 January 24, 2025 07:35

laske185 approved these changes Jan 24, 2025

View reviewed changes

sdvg merged commit 186a6ab into develop Jan 24, 2025
9 checks passed

sdvg deleted the refactoring/7178-convert-input-scss-to-bem branch January 24, 2025 10:25

github-actions bot locked and limited conversation to collaborators Jan 24, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: update input components css to use bem styles and mixins #7180

refactor: update input components css to use bem styles and mixins #7180

Makko74 commented Dec 10, 2024 •

edited by sdvg

Loading

github-actions bot commented Dec 16, 2024 •

edited

Loading

laske185 commented Jan 10, 2025

sdvg commented Jan 14, 2025

sdvg commented Jan 16, 2025

laske185 left a comment

laske185 commented Jan 22, 2025

sdvg commented Jan 23, 2025 •

edited

Loading

laske185 left a comment

refactor: update input components css to use bem styles and mixins #7180

refactor: update input components css to use bem styles and mixins #7180

Conversation

Makko74 commented Dec 10, 2024 • edited by sdvg Loading

github-actions bot commented Dec 16, 2024 • edited Loading

laske185 commented Jan 10, 2025

sdvg commented Jan 14, 2025

sdvg commented Jan 16, 2025

laske185 left a comment

Choose a reason for hiding this comment

laske185 commented Jan 22, 2025

sdvg commented Jan 23, 2025 • edited Loading

laske185 left a comment

Choose a reason for hiding this comment

Makko74 commented Dec 10, 2024 •

edited by sdvg

Loading

github-actions bot commented Dec 16, 2024 •

edited

Loading

sdvg commented Jan 23, 2025 •

edited

Loading