Skip to content

feat: enhance UX with improved icon transitions and button interactions#5344

Open
SteKoe wants to merge 4 commits intomasterfrom
chore/ux-enhancements
Open

feat: enhance UX with improved icon transitions and button interactions#5344
SteKoe wants to merge 4 commits intomasterfrom
chore/ux-enhancements

Conversation

@SteKoe
Copy link
Copy Markdown
Contributor

@SteKoe SteKoe commented May 8, 2026

After having talked to our UX experts, we introduce this first batch of small UX and UI enhancements. This pull request is focusing on button consistency, layout adjustments, icon updates, and improved accessibility. The changes enhance the visual appearance and usability of buttons and input fields, streamline the grouping of actions, and update iconography for better clarity.

Component Refactor and Feature Enhancements:

  • sba-button.vue: Refactored to allow the as prop to accept strings, objects, or functions, enabling rendering as custom components or anchors, not just <button> or <a>. The click event is now only emitted for button-like elements, and additional classes and attributes are passed correctly. Improved accessibility and styling by adding cursor-pointer and adjusting padding for the smallest size. [1] [2] [3] [4]
  • sba-button.spec.ts: Added comprehensive tests for the new sba-button behavior, covering rendering, slot content, as prop variations, attribute forwarding, class application, and event emission.

UI/UX and Styling Improvements:

  • ApplicationListItemAction.vue: Actions now pass a size prop for smaller buttons in compact views and use the correct icon and title translation. The journal action uses faScroll instead of faHistory, and all actions consistently pass icon size. [1] [2] [3]
  • InstancesList.vue: List items now show a pointer cursor on hover for better affordance.
  • sba-accordion.vue and index.css: Fixed CSS class for transitions and removed unused rotate utility classes. Added deep styling for header buttons to ensure pointer cursor. [1] [2] [3]

Internationalization:

  • Added "Open instance details" translation (instances.open_details) to all supported languages for improved accessibility and localization. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10]

Layout and Structure:

  • index.vue: Improved layout structure in the applications view for better alignment and responsiveness, separating the filter input from the stats and action buttons. [1] [2] [3] [4]

These changes collectively make the UI components more flexible, maintainable, and accessible, while also improving the overall user experience.

@SteKoe SteKoe requested a review from a team as a code owner May 8, 2026 08:22
@SteKoe
Copy link
Copy Markdown
Contributor Author

SteKoe commented May 8, 2026

cursor-pointer-instance-list cursor-pointer-details

@cdprete
Copy link
Copy Markdown
Contributor

cdprete commented May 9, 2026

What's the job of that hamburger icon on the top right? Does it give access to the language switch and the help/about button?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants