Make button icon strokes inherit currentColor

[nightcityblade]

• Breaking change? No; no migration is required.

No.

What changes did you make? (Give an overview)

Button-contained SVG elements that define a stroke now use currentColor. This makes the broker configuration Save and Cancel icons follow the button text color instead of retaining their hard-coded light strokes.

Added a regression assertion for the shared button style.

Is there anything you'd like reviewers to focus on?

The selector only targets SVG descendants that already have a stroke attribute, so fill-only icons keep their existing styling.

How Has This Been Tested? (put an "x" (case-sensitive!) next to an item)

• No need to
• Manually (please, describe, if necessary)
• Unit checks
• Integration checks
• Covered by existing automation

• pnpm exec jest src/components/common/Button/__tests__/Button.spec.tsx --runInBand --silent (6 passed)
• pnpm exec jest src/components/Brokers/Broker/Configs/TableComponents/InputCell/__test__/InputCellEditMode.spec.tsx --runInBand --silent (3 passed)
• pnpm exec eslint src/components/common/Button/Button.styled.ts src/components/common/Button/__tests__/Button.spec.tsx --max-warnings=0
• pnpm exec prettier --check src/components/common/Button/Button.styled.ts src/components/common/Button/__tests__/Button.spec.tsx
• pnpm tsc

Checklist (put an "x" (case-sensitive!) next to all the items, otherwise the build will fail)

• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas — N/A: no hard-to-understand code was added
• I have made corresponding changes to the documentation (e.g. ENVIRONMENT VARIABLES) — N/A: no configuration or documentation behavior changed
• My changes generate no new warnings (e.g. Sonar is happy)
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged — N/A: no dependent changes

Check out Contributing and Code of Conduct

A picture of a cute animal (not mandatory but encouraged)

N/A

Fixes #372

Summary by CodeRabbit

• Bug Fixes

  • Improved button icons so SVG strokes inherit the button’s current color, ensuring consistent icon styling.

• Tests

  • Added coverage confirming direct and nested SVG icon strokes use the button’s current color.

[kapybro]

AI Summary

Button icon strokes now use currentColor to inherit the button's text color instead of retaining hard-coded values, fixing visual inconsistencies in Save and Cancel icons. The change only affects SVG elements with existing stroke attributes, preserving fill-only icon styling, and includes a regression test.

[coderabbitai]

📝 Walkthrough

Walkthrough

StyledButton now applies currentColor to SVG elements and descendants with stroke attributes. A Button test verifies direct and nested SVG stroke styling.

Changes

Button SVG color

Layer / File(s)	Summary
SVG stroke color styling and validation frontend/src/components/common/Button/Button.styled.ts, frontend/src/components/common/Button/__tests__/Button.spec.tsx	StyledButton sets SVG strokes with stroke attributes to currentColor. The Button test verifies direct and nested SVG elements.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Poem

A rabbit sees the icons glow,
Their strokes match the text below.
Direct or nested, colors flow,
currentColor makes the styling show.
Hop, hop—the button’s ready to go!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The shared button styling fixes incorrect Save and Cancel icon colors, and the regression test supports issue #372.
Out of Scope Changes check	✅ Passed	All changes support the icon color fix and its regression coverage; no unrelated code changes are present.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main change: button icon strokes inherit the button text color.

✨ Finishing Touches 💡 1

🛠️ Fix failing CI checks 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

Hi nightcityblade! 👋

Welcome, and thank you for opening your first PR in the repo!

Please wait for triaging by our maintainers.

Please take a look at our contributing guide.

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@frontend/src/components/common/Button/__tests__/Button.spec.tsx`:
- Around line 43-50: Update the test case “uses the button text color for icon
strokes” to render the Button with an SVG icon fixture whose root element has a
stroke attribute, then assert the matching svg[stroke] selector rule so the
regression test exercises actual stroked SVG markup.

In `@frontend/src/components/common/Button/Button.styled.ts`:
- Around line 60-62: Update the selector in the styled component to use `&
svg[stroke]` so SVG root elements carrying a stroke attribute receive `stroke:
currentColor`; retain a descendant selector only if nested stroked elements also
need the same behavior.

🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 179c4863-38b2-4b8a-9478-37854c26fd88

📥 Commits

Reviewing files that changed from the base of the PR and between ab8c9ce and c312034.

📒 Files selected for processing (2)

• frontend/src/components/common/Button/Button.styled.ts
• frontend/src/components/common/Button/__tests__/Button.spec.tsx

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

[nightcityblade]

CI follow-up: the build, tests, lint, CodeQL, SonarCloud, and patch coverage checks all pass. The three failures are repository dependency audits reporting existing advisories, while this PR changes only the Button styling and its regression test and does not touch dependency manifests or lockfiles. The latest main-branch CVE workflow is also failing on commit d3f2ac8: https://github.com/kafbat/kafka-ui/actions/runs/31404896188. I have kept unrelated dependency remediation out of this approved UI fix.