Align chart toolbar icon buttons and unify their disabled state

[khairul-syazwan]

Closes #2929

Download and drilldown disabled
Before:

After:

Hover on disabled drilldown
Before:

After:

Toolbar on default chart
Before:

After:

Toolbar on Patient List
Before:

After:

Each icon button in the Patient Analytics chart toolbar action group brought its own box, icon size and disabled treatment, so the row never lined up and Download rendered lighter than Filter by Selection when both were disabled.

The download button is a toolbar button nested inside a Bootstrap dropdown trigger, so Bootstrap's .btn:disabled { opacity: .65 } stacked on top of the button's own opacity: .6, giving an effective 0.39 against 0.6 for every other disabled button in the group.

• Add mriToolbarIconButton and mriToolbarIconButtonDisabled mixins so the chart, drilldown, filter summary and download buttons share one box, radius, icon size, glyph alignment and disabled treatment.
• Mark the disabled state with --color-mri-disabled-text alone instead of the token plus a per-button opacity that Bootstrap could compound.
• Suppress the hover mixin on disabled buttons, which used to turn the glyph near-white on a transparent background.
• Flatten the Bootstrap dropdown trigger wrapping the download button so it contributes no box, colour, focus ring or disabled opacity of its own.

Scoped to .chartToolbar-main-container .actionButtonGroup .iconActionButton, leaving the other toolbarButton and actionButton users unchanged.

Merge Checklist

Please cross check this list if additions / modifications needs to be done on top of your core changes and tick them off. Reviewer can as well glance through and help the developer if something is missed out.

• Automated Tests (Jasmine integration tests, Unit tests, and/or Performance tests)
• Updated Manual tests / Demo Config
• Documentation (Application guide, Admin guide, Markdown, Readme and/or Wiki)
• Verified that local development environment is working with latest changes (integrated with latest develop branch)
• following best practices in code review doc

[Copilot]

🟡 Not ready to approve

The new dropdown-trigger styling removes the only visible focus indicator for the Download control without providing a replacement, creating a keyboard accessibility regression.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

This review doesn't count toward merge requirements. Sign up for the private preview to control whether Copilot approvals count.

Pull request overview

This PR aligns the visual layout and disabled-state behavior of the Patient Analytics chart toolbar icon buttons by introducing shared SCSS mixins and neutralizing Bootstrap dropdown-trigger styling that previously compounded disabled opacity for the Download control.

Changes:

• Added shared mriToolbarIconButton / mriToolbarIconButtonDisabled mixins to unify icon-button geometry (box, radius, icon sizing/alignment) and disabled styling.
• Updated chart toolbar styling to apply the shared mixins to chart/drilldown/filter/download buttons and to standardize disabled treatment without stacked opacity.
• Flattened the Bootstrap dropdown trigger wrapper around the Download button to prevent it from contributing its own box styling and disabled opacity.

File summaries

File	Description
plugins/ui/apps/vue-mri-ui-lib/src/styles/chartToolbar.scss	Applies the new shared icon-button styling within the chart toolbar action group and neutralizes Bootstrap dropdown trigger styling for Download.
plugins/ui/apps/vue-mri-ui-lib/src/styles/_mixins.scss	Introduces shared mixins for consistent icon-button geometry and a single disabled treatment across chart toolbar actions.

Review details

• Files reviewed: 2/2 changed files
• Comments generated: 1
• Review effort level: Lite

We're testing this review assessment. Please use 👍 or 👎 to tell us if it's correct.