fix(button,button-group): adapting the button component to small screens

[James-9696]

PR

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our Commit Message Guidelines
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Documentation content changes
• Other... Please describe:

What is the current behavior?

Issue Number: N/A

What is the new behavior?

Does this PR introduce a breaking change?

• Yes
• No

Other information

Summary by CodeRabbit

• New Features
  • Added responsive styling adaptations for Button and ButtonGroup components when viewed on smaller screens (below 820px width), including enhanced styling for button states and icon displays on mobile and tablet devices.

[coderabbitai]

Walkthrough

Introduces a new adaptation theming system for the button and button-group components, including responsive styles optimized for narrow viewports (max-width 820px), a central index file to aggregate adaptation assets, and new CSS variables to support mobile-specific styling configurations.

Changes

Cohort / File(s)	Summary
Adaptation Theme Index packages/theme/src/adaptation-index.less	Central hub that aggregates and imports adaptation styles for button and button-group components, with commented-out placeholders for additional component adaptations.
Button Component Adaptation packages/theme/src/button/adaptation.less, packages/theme/src/button/vars.less	New adaptation stylesheet with media query targeting small screens to adjust button icon fill color; adds CSS variable --tv-Button-icon-adapt-inverse-tint for inverse tint theming.
Button Group Component Adaptation packages/theme/src/button-group/adaptation.less, packages/theme/src/button-group/vars.less	New adaptation stylesheet with responsive styles for button group items and icons on narrow viewports; introduces two CSS variables for disabled state text color and icon background color.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

🐰 Hopping through the code so bright,
New adaptation styles take flight!
Small screens get buttons dressed with care,
CSS variables dancing everywhere,
Mobile magic in the air! ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title 'fix(button,button-group): adapting the button component to small screens' accurately summarizes the main changes: introducing responsive/adaptation styles for button and button-group components on small screens.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix-btn-adp-style

---

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 and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@packages/theme/src/button/adaptation.less`:
- Line 6: Replace the hardcoded selector ".tiny-svg" with the configured
variable so the CSS-prefix is respected: use the Less class interpolation
.@{svg-prefix-cls} (since `@svg-prefix-cls` is defined as ~'@{css-prefix}svg')
wherever ".tiny-svg" appears (e.g., in the selector on line with .tiny-svg) so
the selector changes with the css-prefix setting.

🧹 Nitpick comments (2)

packages/theme/src/button-group/adaptation.less (2)

25-32: Hardcoded fill: #c25700`` breaks the design-token convention.

Every other color in the adaptation files is driven by a CSS variable, but this icon fill is hardcoded. If the theme is customized, this color won't adapt. Consider introducing a CSS variable (e.g., --tv-ButtonGroup-item-adapt-icon-fill-color) in vars.less and referencing it here.

The same applies to the hardcoded border-radius: 0 6px on line 27—consider using a token for consistency.

♻️ Proposed refactor

In vars.less, add:

  --tv-ButtonGroup-item-adapt-icon-bg-color: var(--tv-color-warn-bg-light, `#ffebd1`);
+ --tv-ButtonGroup-item-adapt-icon-fill-color: `#c25700`;

Then in this file:

      &__sup-icon {
        background-color: var(--tv-ButtonGroup-item-adapt-icon-bg-color);
-       border-radius: 0 6px;
-       fill: `#c25700`;
+       border-radius: 0 var(--tv-ButtonGroup-border-radius, 6px);
+       fill: var(--tv-ButtonGroup-item-adapt-icon-fill-color);
        display: flex;
        align-items: center;
        justify-content: center;
      }

---

9-9: Unused variable @button-group-popover-prefix-cls.

This LESS variable is defined but never referenced in the file. Remove it to keep the file clean.

🧹 Proposed fix

-@button-group-popover-prefix-cls: ~'@{css-prefix}group-item__more-popover';

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

@svg-prefix-cls is defined but unused; hardcoded .tiny-svg on line 12 should use it.

The variable is declared to respect a configurable css-prefix, but line 12 bypasses it with a literal class name. If the prefix changes, this selector will silently break.

🐛 Proposed fix

      &.is-icon {
-       .tiny-svg {
+       .@{svg-prefix-cls} {
          fill: var(--tv-Button-icon-adapt-inverse-tint);
        }
      }

Also applies to: 12-12

🤖 Prompt for AI Agents

In `@packages/theme/src/button/adaptation.less` at line 6, Replace the hardcoded
selector ".tiny-svg" with the configured variable so the CSS-prefix is
respected: use the Less class interpolation .@{svg-prefix-cls} (since
`@svg-prefix-cls` is defined as ~'@{css-prefix}svg') wherever ".tiny-svg" appears
(e.g., in the selector on line with .tiny-svg) so the selector changes with the
css-prefix setting.