feat(alert): adapt to Alert Components#4120
Conversation
WalkthroughUpdates the theme's adaptation index to enable responsive modules for several components; adds Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
packages/theme/src/alert/vars.less (1)
117-119: Variable naming may be misleading for intended usage.The variable
--tv-Alert-title-adapt-text-colorsuggests it's for the title, but inresponsive.less(line 16) it's applied to the description element (.@{alert-prefix-cls}__description). Consider either:
- Renaming to a more generic name like
--tv-Alert-content-adapt-text-coloror--tv-Alert-desc-adapt-text-color, or- Adding a separate variable for description if both title and description need different colors
♻️ Suggested rename if this variable is for description
// 适配小屏定义-adapt- --tv-Alert-title-adapt-font-size: var(--tv-font-size-md, 14px); - --tv-Alert-title-adapt-text-color: var(--tv-color-text, `#191919`); + --tv-Alert-desc-adapt-text-color: var(--tv-color-text, `#191919`);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/theme/src/alert/vars.less` around lines 117 - 119, The variable --tv-Alert-title-adapt-text-color is misnamed because responsive.less applies it to .@{alert-prefix-cls}__description; update the variable naming or add a new one: either rename --tv-Alert-title-adapt-text-color to a generic --tv-Alert-content-adapt-text-color (or --tv-Alert-desc-adapt-text-color) and update usages in responsive.less, or create a new variable --tv-Alert-desc-adapt-text-color and use that in responsive.less while keeping --tv-Alert-title-adapt-text-color for the title; ensure the chosen symbol names match across vars.less and responsive.less (e.g., --tv-Alert-desc-adapt-text-color and .@{alert-prefix-cls}__description).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/theme/src/alert/responsive.less`:
- Around line 15-17: The .@{alert-prefix-cls}__description rule is using the
title-specific variable --tv-Alert-title-adapt-text-color; confirm intent and
either (A) if description should share the title color, rename the variable in
vars.less to a generic name like --tv-Alert-adapt-text-color and update all
usages (including the title rule) to that new name, or (B) if description needs
a distinct color, add a new variable (e.g.,
--tv-Alert-description-adapt-text-color) in vars.less and change
.@{alert-prefix-cls}__description to use that new variable; update any related
references to keep naming consistent.
---
Nitpick comments:
In `@packages/theme/src/alert/vars.less`:
- Around line 117-119: The variable --tv-Alert-title-adapt-text-color is
misnamed because responsive.less applies it to
.@{alert-prefix-cls}__description; update the variable naming or add a new one:
either rename --tv-Alert-title-adapt-text-color to a generic
--tv-Alert-content-adapt-text-color (or --tv-Alert-desc-adapt-text-color) and
update usages in responsive.less, or create a new variable
--tv-Alert-desc-adapt-text-color and use that in responsive.less while keeping
--tv-Alert-title-adapt-text-color for the title; ensure the chosen symbol names
match across vars.less and responsive.less (e.g.,
--tv-Alert-desc-adapt-text-color and .@{alert-prefix-cls}__description).
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 1fb4e769-6fd8-445f-b1e8-1c79bcde0bc0
📒 Files selected for processing (3)
packages/theme/src/adaptation-index.lesspackages/theme/src/alert/responsive.lesspackages/theme/src/alert/vars.less
James-9696
changed the title
James-9696
changed the title
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/theme/src/alert/responsive.less`:
- Line 7: The root stylelint config (.stylelintrc.json) is extending
stylelint-config-standard-scss which blocks LESS interpolation like
.@{alert-prefix-cls}; update .stylelintrc.json to add an overrides entry that
targets "*.less" files and sets customSyntax to "postcss-less" so LESS files
(and constructs such as .@{alert-prefix-cls}) are parsed correctly; keep the
existing extend but add the overrides array with the files pattern and
customSyntax value.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 4b9db2ee-b292-49e9-87fc-ef30d6d4486e
📒 Files selected for processing (2)
packages/theme/src/alert/responsive.lesspackages/theme/src/alert/vars.less
| @alert-prefix-cls: ~'@{css-prefix}alert'; | ||
|
|
||
| @media screen and (max-width: 1280px) { | ||
| .@{alert-prefix-cls} { |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# 1) Locate stylelint-related configs/manifests
fd -HI '(^\\.stylelintrc|stylelint\\.config|package\\.json)$'
# 2) Check for LESS parser/customSyntax settings
rg -n --hidden -S 'customSyntax|postcss-less|stylelint'
# 3) Confirm whether LESS interpolation selectors are used elsewhere
rg -n --type-add 'less:*.less' --type less '\\.\\@\\{[^}]+\\}'Repository: opentiny/tiny-vue
Length of output: 1964
🏁 Script executed:
# Check the full stylelint configuration in packages/theme/package.json
cat -n packages/theme/package.json | grep -A 15 '"stylelint"'Repository: opentiny/tiny-vue
Length of output: 1183
🏁 Script executed:
# Check .stylelintrc.json content
cat -n .stylelintrc.jsonRepository: opentiny/tiny-vue
Length of output: 1277
🏁 Script executed:
# Verify if packages/theme/src/alert/responsive.less exists and check its content
head -20 packages/theme/src/alert/responsive.lessRepository: opentiny/tiny-vue
Length of output: 522
🏁 Script executed:
# Search for other LESS selector interpolation patterns to confirm they're valid
rg --type-add 'less:*.less' --type less '@\{' -A 1 -B 1 | head -50Repository: opentiny/tiny-vue
Length of output: 2698
🏁 Script executed:
# Check root package.json for postcss-less dependency
grep -n "postcss-less" package.jsonRepository: opentiny/tiny-vue
Length of output: 43
🏁 Script executed:
# Check if postcss-less is in packages/theme devDependencies
grep -A 50 '"devDependencies"' packages/theme/package.json | grep -n postcssRepository: opentiny/tiny-vue
Length of output: 102
Update root .stylelintrc.json to support LESS syntax parsing.
The CssSyntaxError: Unknown word alert-prefix-cls occurs because the root .stylelintrc.json extends stylelint-config-standard-scss (SCSS-only) without a customSyntax override for .less files. Although packages/theme/package.json correctly configures customSyntax: "postcss-less", the root config takes precedence in stylelint's config resolution and prevents LESS interpolation (.@{variable}) from being parsed correctly.
Add an overrides section to .stylelintrc.json:
Suggested fix
{
"extends": ["stylelint-config-standard-scss"],
"overrides": [
{
"files": ["**/*.less"],
"customSyntax": "postcss-less"
}
],
...
}🧰 Tools
🪛 Stylelint (17.4.0)
[error] 7-7: Unknown word alert-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/alert/responsive.less` at line 7, The root stylelint
config (.stylelintrc.json) is extending stylelint-config-standard-scss which
blocks LESS interpolation like .@{alert-prefix-cls}; update .stylelintrc.json to
add an overrides entry that targets "*.less" files and sets customSyntax to
"postcss-less" so LESS files (and constructs such as .@{alert-prefix-cls}) are
parsed correctly; keep the existing extend but add the overrides array with the
files pattern and customSyntax value.
github-actions
Bot
added
enhancement
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/theme/src/adaptation-index.less`:
- Line 4: Stylelint is flagging scss/double-slash-comment-empty-line-before for
inline comments like "// `@import` './action-menu/adaptation.less';" — add a
single blank line immediately above each double-slash comment occurrence (e.g.,
the "// `@import` './action-menu/adaptation.less';" and the other commented import
lines on the same file) so every "//" comment has an empty line before it;
update all listed occurrences (lines with the commented import strings)
accordingly and run the linter to confirm the violations are resolved.
- Around line 28-29: This entrypoint currently omits Alert responsive styles:
restore the Alert adaptation import by uncommenting the existing commented line
for alert adaptation (the line starting with "// `@import`
'./alert/adaptation.less';") and add an explicit import for its responsive
variant (add an `@import` './alert/responsive.less'; entry alongside `@import`
'./dialog-box/responsive.less';) so consumers who opt into adaptation-index.less
receive Alert responsive styles too.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 8b7ea4e8-a0bd-4591-99e8-d33156cd251b
📒 Files selected for processing (1)
packages/theme/src/adaptation-index.less
| @import './button-group/adaptation.less'; | ||
| // @import './link/adaptation.less'; | ||
| @import './link/responsive.less'; | ||
| // @import './action-menu/adaptation.less'; |
There was a problem hiding this comment.
Fix stylelint scss/double-slash-comment-empty-line-before violations.
Stylelint reports missing empty lines before these // comments; this will keep lint red until fixed.
🧹 Proposed lint-only fix
`@import` './link/responsive.less';
+
// `@import` './action-menu/adaptation.less';
`@import` './breadcrumb/responsive.less';
+
// `@import` './breadcrumb-item/adaptation.less';
// `@import` './dropdown/adaptation.less';
// `@import` './dropdown-item/adaptation.less';
// `@import` './pager/adaptation.less';
`@import` './steps/responsive.less';
+
// `@import` './steps-item/adaptation.less';
// `@import` './tabs/adaptation.less';
// `@import` './base-select/adaptation.less';
`@import` './cascader-node/responsive.less';
+
// `@import` './checkbox/adaptation.less';
// `@import` './checkbox-group/adaptation.less';
// `@import` './form/adaptation.less';
`@import` './form-item/responsive.less';
+
// `@import` './input/adaptation.less';
// `@import` './numeric/adaptation.less';
`@import` './radio/responsive.less';
+
// `@import` './radio-group/adaptation.less';
`@import` './search/responsive.less';
+
// `@import` './select/adaptation.less';
// `@import` './switch/adaptation.less';
// `@import` './grid/adaptation.less';
// `@import` './tag/adaptation.less';
// `@import` './alert/adaptation.less';
`@import` './dialog-box/responsive.less';
+
// `@import` './drawer/adaptation.less';
// `@import` './loading/adaptation.less';
// `@import` './modal/adaptation.less';
`@import` './notify/responsive.less';
+
// `@import` './progress/adaptation.less';
`@import` './popover/responsive.less';Also applies to: 6-6, 11-11, 15-15, 19-19, 22-22, 24-24, 30-30, 34-34
🧰 Tools
🪛 Stylelint (17.4.0)
[error] 4-4: Expected empty line before comment (scss/double-slash-comment-empty-line-before)
(scss/double-slash-comment-empty-line-before)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/theme/src/adaptation-index.less` at line 4, Stylelint is flagging
scss/double-slash-comment-empty-line-before for inline comments like "// `@import`
'./action-menu/adaptation.less';" — add a single blank line immediately above
each double-slash comment occurrence (e.g., the "// `@import`
'./action-menu/adaptation.less';" and the other commented import lines on the
same file) so every "//" comment has an empty line before it; update all listed
occurrences (lines with the commented import strings) accordingly and run the
linter to confirm the violations are resolved.
| // @import './alert/adaptation.less'; | ||
| // @import './dialog-box/adaptation.less'; | ||
| @import './dialog-box/responsive.less'; |
There was a problem hiding this comment.
Add Alert responsive import in this opt-in adaptation entry.
Line 28 still comments out Alert adaptation, and there is no @import './alert/responsive.less';. In this entrypoint, that means Alert responsive styles are not included for consumers importing adaptation-index.less.
🔧 Proposed fix
-// `@import` './alert/adaptation.less';
+@import './alert/responsive.less';
`@import` './dialog-box/responsive.less';Based on learnings: packages/theme/src/adaptation-index.less is an intentional opt-in entrypoint that users import directly for adaptive behavior.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| // @import './alert/adaptation.less'; | |
| // @import './dialog-box/adaptation.less'; | |
| @import './dialog-box/responsive.less'; | |
| // `@import` './alert/adaptation.less'; | |
| `@import` './alert/responsive.less'; | |
| `@import` './dialog-box/responsive.less'; |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/theme/src/adaptation-index.less` around lines 28 - 29, This
entrypoint currently omits Alert responsive styles: restore the Alert adaptation
import by uncommenting the existing commented line for alert adaptation (the
line starting with "// `@import` './alert/adaptation.less';") and add an explicit
import for its responsive variant (add an `@import` './alert/responsive.less';
entry alongside `@import` './dialog-box/responsive.less';) so consumers who opt
into adaptation-index.less receive Alert responsive styles too.
2 participants
PR
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
适配小屏幕显示
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
Style
New Features