Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
James-9696 wants to merge 7 commits into
base: dev
Choose a base branch
from
+98 −0
Open

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

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e36bb7b
fix(button): adapt to small screen display
James-9696 Feb 9, 2026
cb1b674
fix(button-group): adapt to small screen display
James-9696 Feb 9, 2026
a256b0d
fix(button-group): add variables
James-9696 Feb 9, 2026
2847cb8
fix: to avoid conflicts
James-9696 Feb 10, 2026
0afbeed
fix: modify review comments
James-9696 Feb 24, 2026
e86fbf2
fix: modify default button of style
James-9696 Feb 24, 2026
934e38b
fix: modify review comments
James-9696 Feb 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 37 additions & 0 deletions packages/theme/src/adaptation-index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
@import './button/adaptation.less';
@import './button-group/adaptation.less';
// @import './link/adaptation.less';
// @import './action-menu/adaptation.less';
// @import './breadcrumb/adaptation.less';
// @import './breadcrumb-item/adaptation.less';
// @import './dropdown/adaptation.less';
// @import './dropdown-item/adaptation.less';
// @import './pager/adaptation.less';
// @import './steps/adaptation.less';
// @import './steps-item/adaptation.less';
// @import './tabs/adaptation.less';
// @import './base-select/adaptation.less';
// @import './cascader/adaptation.less';
// @import './checkbox/adaptation.less';
// @import './checkbox-group/adaptation.less';
// @import './form/adaptation.less';
// @import './form-item/adaptation.less';
// @import './input/adaptation.less';
// @import './numeric/adaptation.less';
// @import './radio/adaptation.less';
// @import './radio-group/adaptation.less';
// @import './search/adaptation.less';
// @import './select/adaptation.less';
// @import './switch/adaptation.less';
// @import './grid/adaptation.less';
// @import './tag/adaptation.less';
// @import './alert/adaptation.less';
// @import './dialog-box/adaptation.less';
// @import './drawer/adaptation.less';
// @import './loading/adaptation.less';
// @import './modal/adaptation.less';
// @import './notify/adaptation.less';
// @import './progress/adaptation.less';
// @import './popover/adaptation.less';
// @import './skeleton/adaptation.less';
// @import './tooltip/adaptation.less';
35 changes: 35 additions & 0 deletions packages/theme/src/button-group/adaptation.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
/* stylelint-disable function-no-unknown */
@import '../mixins/common.less';
@import '../mixins/button-group.less';
@import '../custom.less';
@import './vars.less';

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

.@{button-group-prefix-cls} {
Copy link

@coderabbitai coderabbitai bot Feb 24, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# First, run the provided verification script
echo "=== Searching for @{prefix-cls} pattern in adaptation.less files ==="
rg -n '@\{[a-z-]+-prefix-cls\}' --type=less -g '*adaptation.less' -A1 -B1 | head -100

echo -e "\n=== List all adaptation.less files in the project ==="
find . -name '*adaptation.less' -type f

Repository: opentiny/tiny-vue

Length of output: 1240

🏁 Script executed:

# Check for stylelint configuration
echo "=== Stylelint configuration files ==="
find . -maxdepth 3 -type f \( -name '.stylelintrc*' -o -name 'stylelint.config.*' \) 2>/dev/null | head -20

echo -e "\n=== Check content of stylelint config in root/packages/theme ==="
for f in .stylelintrc .stylelintrc.json .stylelintrc.js stylelint.config.js; do
  if [ -f "$f" ]; then
    echo "Found: $f"
    cat "$f"
  fi
  if [ -f "packages/theme/$f" ]; then
    echo "Found: packages/theme/$f"
    head -50 "packages/theme/$f"
  fi
done

Repository: opentiny/tiny-vue

Length of output: 1249

🏁 Script executed:

# Check the specific file mentioned in the review
echo "=== Content of packages/theme/src/button-group/adaptation.less ==="
cat -n packages/theme/src/button-group/adaptation.less 2>/dev/null || echo "File not found"

Repository: opentiny/tiny-vue

Length of output: 1327

🏁 Script executed:

# Check if button/adaptation.less has any suppression comments
echo "=== Content of packages/theme/src/button/adaptation.less ==="
head -20 packages/theme/src/button/adaptation.less

Repository: opentiny/tiny-vue

Length of output: 556

🏁 Script executed:

# Search for any CssSyntaxError references or other stylelint-disable comments in theme files
echo "=== Check all stylelint-disable comments in adaptation.less files ==="
rg 'stylelint-disable' packages/theme/src/*/adaptation.less -A1 -B1

Repository: opentiny/tiny-vue

Length of output: 460

🏁 Script executed:

# Check package.json to see if there's any test/lint config for less files
echo "=== Checking if there are any lint scripts or stylelint configs ==="
grep -A5 -B5 'stylelint\|less' packages/theme/package.json 2>/dev/null || echo "Not in packages/theme"

echo -e "\n=== Root package.json lint scripts ==="
grep -A10 '"scripts"' package.json | head -20

Repository: opentiny/tiny-vue

Length of output: 2018

Add customSyntax override to packages/theme/.stylelintrc.json to properly parse LESS variable interpolation, or expand the stylelint-disable comment to include CssSyntaxError.

Both button/adaptation.less and button-group/adaptation.less use LESS variable-interpolation syntax (.@{button-group-prefix-cls}, etc.) but carry only /* stylelint-disable function-no-unknown */. The packages/theme/.stylelintrc.json extends stylelint-config-standard-scss without specifying postcss-less as the custom syntax for .less files, causing stylelint's CSS parser to throw CssSyntaxError on the interpolation syntax. This suppression comment does not suppress CssSyntaxError. Either add "customSyntax": "postcss-less" to the overrides in packages/theme/.stylelintrc.json, or update the suppression comment to include /* stylelint-disable function-no-unknown, CssSyntaxError */.

🧰 Tools
🪛 Stylelint (17.3.0)

[error] 11-11: Unknown word button-group-prefix-cls (CssSyntaxError)

(CssSyntaxError)

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@packages/theme/src/button-group/adaptation.less` at line 11, Stylelint is
throwing CssSyntaxError on LESS interpolation like .@{button-group-prefix-cls}
in files such as button-group/adaptation.less because
packages/theme/.stylelintrc.json does not set a LESS parser; either add
"customSyntax": "postcss-less" to the overrides for .less files in
packages/theme/.stylelintrc.json so postcss-less parses constructs like
.@{button-group-prefix-cls}, or keep the CSS parser and update the suppression
comment in the affected files (e.g., button/adaptation.less and
button-group/adaptation.less) to disable both function-no-unknown and
CssSyntaxError (/* stylelint-disable function-no-unknown, CssSyntaxError */) so
the interpolation no longer triggers a lint error.

.inject-ButtonGroup-vars();

@media (max-width: 820px) {
.@{group-item-prefix-cls} {
& li {
button {
&.disabled,
&[disabled] {
color: var(--tv-ButtonGroup-item-btn-adapt-disabled-text-color);
}
}
}

&__sup-icon {
background-color: var(--tv-ButtonGroup-item-adapt-icon-bg-color);
border-radius: 0 6px;
fill: #c25700;
Copy link
Member

@zzcr zzcr Feb 24, 2026

Choose a reason for hiding this comment

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

颜色值和圆角是不是都可以使用common变量呢？

Copy link
Collaborator Author

@James-9696 James-9696 Feb 24, 2026

Choose a reason for hiding this comment

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

颜色值没有基础样式变量，圆角已替换common变量

display: flex;
align-items: center;
justify-content: center;
}
}
}
}
4 changes: 4 additions & 0 deletions packages/theme/src/button-group/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,4 +73,8 @@

// 更多下拉框选项悬浮背景色
--tv-ButtonGroup-more-item-bg-color-hover: var(--tv-color-bg-hover, #f5f5f5);

// 适配小屏定义-adapt-
--tv-ButtonGroup-item-btn-adapt-disabled-text-color: var(--tv-color-text-placeholder, #808080);
--tv-ButtonGroup-item-adapt-icon-bg-color: var(--tv-color-warn-bg-light, #ffebd1);
}
17 changes: 17 additions & 0 deletions packages/theme/src/button/adaptation.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
/* stylelint-disable function-no-unknown */
@import '../custom.less';
@import './vars.less';

@button-prefix-cls: ~'@{css-prefix}button';
@svg-prefix-cls: ~'@{css-prefix}svg';

.@{button-prefix-cls} {
.inject-Button-vars();
@media (max-width: 820px) {
&.is-icon {
.tiny-svg {
fill: var(--tv-Button-icon-adapt-inverse-tint);
}
}
}
}
3 changes: 3 additions & 0 deletions packages/theme/src/button/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -383,4 +383,7 @@

// loading时，svg的右外边距
--tv-Button-margin-right-isloading-svg: var(--tv-space-sm, 4px); // loading时，svg的右外边距

// 适配小屏定义-adapt-
--tv-Button-icon-adapt-inverse-tint: var(--tv-color-icon-inverse-tint, #ffffff);
}
Loading