fix(grid): fix date-picker input style error in filter panel #3346
Conversation
WalkthroughThe update refines CSS selectors within the grid filter styling file. Selector logic is adjusted to exclude additional input types and classes from certain styles, specifically excluding inputs with classes containing "tiny-" in addition to radio inputs. Formatting improvements are made by adding spaces around combinators and cleaning up whitespace. No style properties or values are changed, and there are no modifications to exported or public entities. Changes
Poem
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
WalkthroughThis PR addresses a styling issue in the grid's filter panel where the date-picker input style was incorrect. The changes involve modifying the CSS to ensure proper styling of input elements, particularly excluding those with certain classes. Changes
|
![petercat-assistant[bot]](https://avatars.githubusercontent.com/in/875736?s=60&v=4){kind=small}
| &:focus, | ||
| &:active { | ||
| input { | ||
| &:not([type='radio'], [class*='tiny-']) { |
There was a problem hiding this comment.
The change in selector from input:not([type='radio']) to input:not([type='radio'], [class*='tiny-']) ensures that inputs with classes containing 'tiny-' are not affected by the general styling rules, which is crucial for maintaining specific styles for those elements.
gimmyhehe
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (1)
packages/theme/src/grid/filter.less (1)
277-291: 🛠️ Refactor suggestion
⚠️ Potential issueExclude
tiny-inputs from the.filter-option__inputrule
The rule.filter-option__input > input { … }still applies to all direct child inputs—including date-picker inner inputs—causing the style issue this PR aims to fix. Update it to skip TinyVue inputs by adding a
:not()filter:-.filter-option__input > input { +.filter-option__input > input:not([class*='tiny-']) {This ensures date-picker inputs keep their own styling within the filter panel.
🧹 Nitpick comments (1)
packages/theme/src/grid/filter.less (1)
71-93: Refine input selector to skiptiny-classes
The updated rule correctly excludes both radios and any inputs whose class containstiny-, preventing unintended overrides of TinyVue components like the date-picker. Note that some very old browsers might not support multi-argument:not(). If legacy support is needed, consider chaining multiple:not():&:not([type='radio']):not([class*='tiny-']) { … }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/theme/src/grid/filter.less(4 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: PR E2E Test (pnpm test:e2e3)
🔇 Additional comments (2)
packages/theme/src/grid/filter.less (2)
15-18: Use Less’s tilde operator for prefix variables
Switching from quoted strings to~'@{css-prefix}…'ensures the@{css-prefix}interpolation isn’t wrapped in extra quotes, yielding cleaner selector generation. This aligns with Less best practices and matches patterns elsewhere in the codebase.
242-244: Standardize spacing around the adjacent-sibling combinator
Changing&+ .@{grid-radio-prefix-cls}to& + .@{grid-radio-prefix-cls}improves readability and maintains consistency with the project’s style guidelines.
PR
修复表格过滤面板中date-picker样式不正常
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