Skip to content

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

Merged
sdvg merged 45 commits intodevelopfrom
refactoring/7178-convert-input-scss-to-bem
Jan 24, 2025
Merged

refactor: update input components css to use bem styles and mixins#7180
sdvg merged 45 commits intodevelopfrom
refactoring/7178-convert-input-scss-to-bem

Conversation

@Makko74
Copy link
Copy Markdown
Contributor

@Makko74 Makko74 commented Dec 10, 2024 •
edited by sdvg
Loading

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)

@deleonio deleonio added the v3 label Dec 10, 2024
@github-actions
Copy link
Copy Markdown
Contributor

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

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

Base automatically changed from refactoring/7032-field-input-components to develop December 17, 2024 09:04
@Makko74 Makko74 linked an issue Dec 17, 2024 that may be closed by this pull request
BEM Refactoring für Input Components #7178
Closed
@laske185
Copy link
Copy Markdown
Contributor

laske185 commented Jan 10, 2025

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.
image

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;

@laske185 laske185 marked this pull request as ready for review January 13, 2025 08:46
@sdvg
Merge branch 'develop' of github.com:public-ui/kolibri into refactori…
9ba7f9b 
…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
Copy link
Copy Markdown
Contributor

sdvg commented Jan 14, 2025

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

@sdvg sdvg mentioned this pull request Jan 15, 2025
Merged
5 tasks
sdvg and others added 4 commits January 15, 2025 16:30
@sdvg
Merge branch 'develop' of github.com:public-ui/kolibri into refactori…
cf6b938 
…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
@sdvg
Fix missing shortKey badge
4252b70 
Refs: #7178
@sdvg
Remove opacity for messages on disabled fields
c3c67e0 
Refs: #7178
@sdvg @publicuibot
Update all snapshots$
0327155 
$
Refs: #7178
@sdvg
Copy link
Copy Markdown
Contributor

sdvg commented Jan 16, 2025

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

sdvg and others added 11 commits January 17, 2025 11:46
@sdvg
Refactor base styles
529a1b9 
Refs: #7178
@sdvg
Refactor base styles
9bb09a6 
Refs: #7178
@sdvg
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
@sdvg
Add missing tooltip styles
007602e 
Refs: #7178
@sdvg
Fix combobox and single-select focus styles
eb4a2b7 
Refs: #7178
@sdvg
Refactor
c0b3a76 
Refs: #7178
@sdvg @publicuibot
Update all snapshots$
31b5a58 
$
Refs: #7178
@sdvg
Refactor default theme styles
20ee66e 
Refs: #7178
@sdvg
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
@sdvg
Fix error messages
53f9a25 
Refs: #7178
@sdvg
Cleanup EU themes
1897d0f 
Refs: #7178
laske185
laske185 requested changes Jan 22, 2025
View reviewed changes
Copy link
Copy Markdown
Contributor

@laske185 laske185 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Comment thread ...es/default/snapshots/theme-default/snapshot-for-scenarios-static-form-zoom-firefox-linux.png
sdvg
sdvg reviewed Jan 22, 2025
View reviewed changes
Comment thread packages/components/src/components/input-range/shadow.tsx
laske185
laske185 requested changes Jan 22, 2025
View reviewed changes
Comment thread ...ame-transformer/snapshots/theme-default/snapshot-for-input-date-basic-zoom-firefox-linux.png
Comment thread ...me-transformer/snapshots/theme-default/snapshot-for-input-email-basic-zoom-firefox-linux.png
Comment thread ...mer/snapshots/theme-default/snapshot-for-input-password-show-password-zoom-firefox-linux.png
Comment thread packages/components/src/components/input-range/shadow.tsx
Comment thread ...me-transformer/snapshots/theme-default/snapshot-for-input-range-basic-zoom-firefox-linux.png
Comment thread ...ts/theme-default/snapshot-for-scenarios-disabled-interactive-scenario-zoom-firefox-linux.png
Comment thread .../themes/default/snapshots/theme-default/snapshot-for-input-checkbox-button-firefox-linux.png
Comment thread .../themes/default/snapshots/theme-default/snapshot-for-input-date-basic-zoom-firefox-linux.png
Comment thread ...ult/snapshots/theme-default/snapshot-for-input-password-show-password-zoom-firefox-linux.png
Comment thread ...themes/default/snapshots/theme-default/snapshot-for-input-range-basic-zoom-firefox-linux.png
@laske185
Copy link
Copy Markdown
Contributor

laske185 commented Jan 22, 2025

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

@sdvg
Merge branch 'develop' of github.com:public-ui/kolibri into refactori…
5f1df38 
…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
Copy link
Copy Markdown
Contributor

sdvg commented Jan 23, 2025 •
edited
Loading

@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.

This was referenced Jan 24, 2025
Closed
Open
laske185
laske185 previously approved these changes Jan 24, 2025
View reviewed changes
Copy link
Copy Markdown
Contributor

@laske185 laske185 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@sdvg sdvg merged commit 186a6ab into develop Jan 24, 2025
@sdvg sdvg deleted the refactoring/7178-convert-input-scss-to-bem branch January 24, 2025 10:25
@github-actions github-actions bot locked and limited conversation to collaborators Jan 24, 2025
@deleonio deleonio removed the v3 label Jun 11, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

@laske185 laske185 laske185 approved these changes

+1 more reviewer

@sdvg sdvg sdvg left review comments

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

BEM Refactoring für Input Components

4 participants

@Makko74 @laske185 @sdvg @deleonio
⚡