Skip to content

feat: enhance table stateless sort button#8078

Merged
cbraehmig merged 3 commits intodevelopfrom
feature/implementiere-ticket-#8000-v3
Jul 21, 2025
Merged

feat: enhance table stateless sort button#8078
cbraehmig merged 3 commits intodevelopfrom
feature/implementiere-ticket-#8000-v3

Conversation

@deleonio
Copy link
Copy Markdown
Contributor

This pull request introduces support for localized UI texts in the KolTableStateless component and updates its functionality to handle sorting interactions. The most significant changes include adding translation support, implementing sorting behavior, and updating tests and snapshots to reflect these changes.

Localization Support:

  • packages/components/AGENTS.md: Added guidelines for storing UI texts in language files (src/locales/en.ts and src/locales/de.ts) and using the translate() helper for efficient text translation and caching.

Sorting Functionality:

  • packages/components/src/components/table-stateless/component.tsx: Added a translateSort property to cache the translation for the sorting label (kol-sort) and updated the _ariaDescription property of the sort button to use this translation. [1] [2]
  • packages/components/src/locales/en.ts and packages/components/src/locales/de.ts: Added the sort translation key for English and German locales. [1] [2]

Tests and Snapshots:

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Jul 19, 2025

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Jul 19, 2025

Hydration Benchmark Report (vs Baseline)

✅ Top 5 Improvements (Best Speedups)

Component Current Baseline Δ% Result
kol-skip-nav 19.8ms 23.6ms -16.1%
kol-heading 18.2ms 21.5ms -15.3%
kol-form 30.4ms 35.6ms -14.6%
kol-input-radio 49.5ms 56.5ms -12.4%
kol-abbr 17.4ms 19.8ms -12.1%

🔻 Flop 5 Regressions (Worst Slowdowns)

Component Current Baseline Δ% Result
kol-drawer 44.2ms 25.6ms +72.7% 🔻
kol-card 30.1ms 22.6ms +33.2% 🔻
kol-tree 30.7ms 26.5ms +15.8% 🔻
kol-link-button 60.9ms 56.5ms +7.8%
kol-accordion 140.2ms 131ms +7%
📋 Show all results
Component Current Baseline Δ% Result
kol-abbr 17.4ms 19.8ms -12.1%
kol-accordion 140.2ms 131ms +7%
kol-alert 111.7ms 105.9ms +5.5%
kol-avatar 25.9ms 26.9ms -3.7%
kol-badge 63.4ms 70.1ms -9.6%
kol-breadcrumb 94.7ms 97.6ms -3%
kol-button 60.8ms 63ms -3.5%
kol-button-link 52.6ms 50.7ms +3.7%
kol-card 30.1ms 22.6ms +33.2% 🔻
kol-details 129.3ms 134.9ms -4.2%
kol-drawer 44.2ms 25.6ms +72.7% 🔻
kol-form 30.4ms 35.6ms -14.6%
kol-heading 18.2ms 21.5ms -15.3%
kol-icon 67ms 65.1ms +2.9%
kol-image 18.8ms 19.3ms -2.6%
kol-input-checkbox 140.5ms 141.3ms -0.6%
kol-input-color 79.2ms 81.9ms -3.3%
kol-input-date 67.2ms 70.3ms -4.4%
kol-input-email 60.5ms 62.5ms -3.2%
kol-input-file 94.5ms 93.7ms +0.9%
kol-input-number 59.9ms 56.1ms +6.8%
kol-input-password 50.2ms 51.6ms -2.7%
kol-input-radio 49.5ms 56.5ms -12.4%
kol-input-text 61.1ms 59.3ms +3%
kol-link 48.6ms 49.8ms -2.4%
kol-link-button 60.9ms 56.5ms +7.8%
kol-modal 20.4ms 20.5ms -0.5%
kol-nav 32.5ms 33.9ms -4.1%
kol-pagination 430.5ms 423.8ms +1.6%
kol-popover-button 70.3ms 71.3ms -1.4%
kol-progress 29.2ms 32.8ms -11%
kol-quote 19.7ms 19ms +3.7%
kol-select 113.5ms 117.1ms -3.1%
kol-skip-nav 19.8ms 23.6ms -16.1%
kol-spin 23.3ms 24.2ms -3.7%
kol-split-button 167.4ms 174.7ms -4.2%
kol-table-stateful 367.7ms 374.7ms -1.9%
kol-table-stateless 384.6ms 437ms -12%
kol-tabs 29.3ms 32.3ms -9.3%
kol-textarea 52.5ms 54.1ms -3%
kol-toolbar 33.8ms 36ms -6.1%
kol-tree 30.7ms 26.5ms +15.8% 🔻
kol-tree-item 66.7ms 64ms +4.2%
kol-version 147.3ms 154.8ms -4.8%

@deleonio deleonio force-pushed the feature/implementiere-ticket-#8000-v3 branch from 4252bfa to 32f8714 Compare July 19, 2025 14:03
@deleonio deleonio force-pushed the feature/implementiere-ticket-#8000-v3 branch from 32f8714 to 512ef5a Compare July 19, 2025 14:06
@deleonio deleonio marked this pull request as draft July 21, 2025 04:28
@deleonio deleonio requested review from cbraehmig and Copilot July 21, 2025 04:28
@deleonio deleonio linked an issue Jul 21, 2025 that may be closed by this pull request
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull Request Overview

This pull request enhances the KolTableStateless component by adding localization support for sorting functionality and implementing proper translation handling. The changes introduce a standardized approach for UI text management across English and German locales.

  • Added translation keys for sorting functionality in both English and German locale files
  • Implemented translation caching in the table component using the translate() helper
  • Updated component to use localized aria descriptions for sort buttons
  • Established guidelines for consistent UI text management in components

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

File Description
packages/components/src/locales/en.ts Added English translation key for sort functionality
packages/components/src/locales/de.ts Added German translation key for sort functionality
packages/components/src/components/table-stateless/component.tsx Implemented translation caching and applied localized aria description to sort button
packages/components/AGENTS.md Added comprehensive guidelines for UI text localization and translation handling

Comment thread packages/components/src/components/table-stateless/component.tsx
@deleonio deleonio marked this pull request as ready for review July 21, 2025 11:27
@cbraehmig cbraehmig merged commit 32ac986 into develop Jul 21, 2025
14 of 16 checks passed
@cbraehmig cbraehmig deleted the feature/implementiere-ticket-#8000-v3 branch July 21, 2025 12:22
@publicuibot publicuibot bot locked and limited conversation to collaborators Jul 21, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Featurerequest: Sortierschalter in TableStateless genauer beschreiben

3 participants