Skip to content

feat(components): style properties support Boolean values#24165

Merged
btea merged 6 commits into
devfrom
feat/support-boolean-for-styleValue
Apr 28, 2026
Merged

feat(components): style properties support Boolean values#24165
btea merged 6 commits into
devfrom
feat/support-boolean-for-styleValue

Conversation

@rzzf
Copy link
Copy Markdown
Member

@rzzf rzzf commented Apr 27, 2026

fix #24102

Please make sure these boxes are checked before submitting your PR, thank you!

  • Make sure you follow contributing guide English | (中文 | Español | Français).
  • Make sure you are merging your commits to dev branch.
  • Add some descriptions and refer to relative issues for your PR.

Summary by CodeRabbit

  • Bug Fixes
    • Broadened style-related prop acceptance across many components to also accept Boolean values (in addition to String/Array/Object) and made default behavior explicit where applicable — improving consistency of styling and reducing unexpected rendering differences when style props are omitted or varied.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 27, 2026

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Apr 27, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 62b77679-226f-4e6b-9bfa-7cc647225573

📥 Commits

Reviewing files that changed from the base of the PR and between f1e6890 and 829c3d9.

📒 Files selected for processing (3)
  • packages/components/input/src/input.ts
  • packages/components/popper/src/content.ts
  • packages/components/table/src/table/defaults.ts
🚧 Files skipped from review as they are similar to previous changes (3)
  • packages/components/input/src/input.ts
  • packages/components/table/src/table/defaults.ts
  • packages/components/popper/src/content.ts

📝 Walkthrough

Walkthrough

Multiple components' style-related prop validators were changed to accept Boolean in addition to String | Array | Object; several of these props also now explicitly set default: undefined.

Changes

Cohort / File(s) Summary
Avatar
packages/components/avatar/src/avatar-group-props.ts
collapseStyle now accepts Boolean; default: undefined added.
Badge
packages/components/badge/src/badge.ts
Deprecated badgeStyle now accepts Boolean; default: undefined added.
Input / Form-like
packages/components/input/src/input.ts, packages/components/countdown/src/countdown.ts, packages/components/statistic/src/statistic.ts
inputStyle / valueStyle broadened to include Boolean; default: undefined added where applicable.
Layout / Container
packages/components/card/src/card.ts, packages/components/space/src/space.ts, packages/components/table/src/table/defaults.ts, packages/components/table-v2/src/cell.ts
Various *Style / style props expanded to accept Boolean; some now set default: undefined.
Interactive / Panels / Popper
packages/components/color-picker-panel/src/color-picker-panel.ts, packages/components/popper/src/content.ts, packages/components/roving-focus-group/src/roving-focus-group.ts
Style props widened to include Boolean; default: undefined added for several props.
Scroll / Virtualization
packages/components/scrollbar/src/scrollbar.ts, packages/components/virtual-list/src/props.ts
wrapStyle, viewStyle, and style props now accept Boolean; virtual-list style gets default: undefined.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

Suggested labels

Contribution::Community, Needs Review

Suggested reviewers

  • btea
  • Dsaquel
  • keeplearning66

Poem

🐰 I hop through props both near and far,

I tuck Booleans into every style jar.
No noisy warnings left in view,
A tiny hop, a tidy cue. ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name Status Explanation Resolution
Description check ❓ Inconclusive The PR description references the linked issue (#24102) but lacks detailed explanation of the changes and implementation approach beyond the checklist template. Add a brief description explaining what changes were made and why Boolean support for style properties resolves the issue.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The PR title clearly and accurately summarizes the main change: enabling style properties across multiple components to accept Boolean values.
Linked Issues check ✅ Passed The code changes successfully address the issue by adding Boolean to the type validators for style properties across 13 components, aligning runtime validation with the StyleValue TypeScript type definition.
Out of Scope Changes check ✅ Passed All changes are narrowly scoped to adding Boolean support to style property validators across components, with no unrelated modifications.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/support-boolean-for-styleValue

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

Comment @coderabbitai help to get the list of available commands and usage tips.

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented Apr 27, 2026

Open in StackBlitz

pnpm add https://pkg.pr.new/element-plus@24165
npm i https://pkg.pr.new/element-plus@24165
yarn add https://pkg.pr.new/[email protected]

commit: 829c3d9

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 27, 2026

Size Change: +186 B (+0.01%)

Total Size: 1.49 MB

📦 View Changed
Filename Size Change
dist/element-plus/dist/index.full.js 439 kB +48 B (+0.01%)
dist/element-plus/dist/index.full.min.js 290 kB +45 B (+0.02%)
dist/element-plus/dist/index.full.min.mjs 282 kB +53 B (+0.02%)
dist/element-plus/dist/index.full.mjs 429 kB +40 B (+0.01%)
ℹ️ View Unchanged
Filename Size
dist/element-plus/dist/index.css 47.3 kB

compressed-size-action

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 27, 2026

Coverage Report

Status Category Percentage Covered / Total
🔵 Lines 86.28% 18677 / 21646
🔵 Statements 85.12% 19556 / 22974
🔵 Functions 84.64% 4957 / 5856
🔵 Branches 75.74% 10891 / 14379
File Coverage
File Stmts Branches Functions Lines Uncovered Lines
Changed Files
packages/components/avatar/src/avatar-group-props.ts 100% 100% 100% 100%
packages/components/badge/src/badge.ts 50% 100% 0% 50% 105
packages/components/card/src/card.ts 100% 100% 100% 100%
packages/components/color-picker-panel/src/color-picker-panel.ts 100% 50% 100% 100%
packages/components/countdown/src/countdown.ts 100% 100% 100% 100%
packages/components/input/src/input.ts 84.21% 100% 81.25% 84.21% 209-344, 388
packages/components/popper/src/content.ts 93.75% 100% 85.71% 93.75% 79
packages/components/roving-focus-group/src/roving-focus-group.ts 100% 100% 100% 100%
packages/components/scrollbar/src/scrollbar.ts 100% 100% 100% 100%
packages/components/space/src/space.ts 86.48% 75.67% 90.9% 91.42% 135-139, 142, 190, 192, 249
packages/components/statistic/src/statistic.ts 100% 100% 100% 100%
packages/components/table/src/table/defaults.ts 66.66% 100% 66.66% 66.66% 219
packages/components/virtual-list/src/props.ts 100% 100% 100% 100%
Generated in workflow #2653 for commit 829c3d9 by the Vitest Coverage Report Action

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 4

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)
packages/components/popper/src/content.ts (1)

124-148: ⚠️ Potential issue | 🟠 Major

Reorder Boolean to last; also set default: undefined for popperStyle.

Two issues with these changes:

  1. Ordering (both style and popperStyle): [Boolean, String, Array, Object] activates Vue's Boolean casting rule, so an empty-string value or shorthand attribute usage would be coerced to true (not a valid StyleValue). Move Boolean to the end of the union.

  2. Implicit Boolean default on popperStyle (Line 146): unlike style, popperStyle was not given an explicit default: undefined. Because Boolean is now in the type list, Vue treats an absent prop as false rather than undefined, changing the runtime value the component sees when the consumer doesn't pass popperStyle. Setting default: undefined (matching style above and popperContentPropsDefaults.popperStyle at Line 194) restores prior behavior.

🔧 Suggested fix
   style: {
-    type: definePropType<StyleValue>([Boolean, String, Array, Object]),
+    type: definePropType<StyleValue>([String, Array, Object, Boolean]),
     default: undefined,
   },
   ...
   popperStyle: {
-    type: definePropType<StyleValue>([Boolean, String, Array, Object]),
+    type: definePropType<StyleValue>([String, Array, Object, Boolean]),
+    default: undefined,
   },
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/components/popper/src/content.ts` around lines 124 - 148, The prop
definitions for style and popperStyle are currently ordering Boolean first and
missing an explicit default for popperStyle; update both prop definitions (the
style and popperStyle props in this file where definePropType<StyleValue> is
used) to put Boolean at the end of the type union (e.g., [String, Array, Object,
Boolean]) to avoid Vue's Boolean casting, and add default: undefined to the
popperStyle prop to match style and the existing
popperContentPropsDefaults.popperStyle so the prop value is undefined when not
provided.
packages/components/scrollbar/src/scrollbar.ts (1)

120-144: ⚠️ Potential issue | 🟠 Major

Move Boolean to the end of the type unions.

Same Vue Boolean-casting concern as elsewhere in this PR — with Boolean listed before String, any empty-string value or shorthand attribute (<el-scrollbar wrap-style />) on wrapStyle / viewStyle will now be coerced to true, which is not a valid StyleValue and is a behavioral regression relative to before this PR. Reordering Boolean to the tail of the union keeps the original string behavior while still allowing false.

Also worth double-checking: these two props keep default: '' rather than the default: undefined used elsewhere in this PR — that's fine for the casting issue (defaults aren't re-cast), but the ordering still matters for explicit consumer-supplied values.

🔧 Suggested ordering
   wrapStyle: {
-    type: definePropType<StyleValue>([Boolean, String, Object, Array]),
+    type: definePropType<StyleValue>([String, Object, Array, Boolean]),
     default: '',
   },
   ...
   viewStyle: {
-    type: [Boolean, String, Array, Object],
+    type: [String, Array, Object, Boolean],
     default: '',
   },
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/components/scrollbar/src/scrollbar.ts` around lines 120 - 144, The
prop type unions for wrapStyle and viewStyle currently list Boolean before
String which causes Vue to coerce empty-string/shorthand attributes to true;
update the type arrays in the wrapStyle and viewStyle prop definitions (the
definePropType<StyleValue>(...) and the viewStyle prop's type) to place Boolean
at the end of the union (e.g., [String, Object, Array, Boolean] or [Boolean,
String, Array, Object] → move Boolean last) while keeping the existing default:
'' so explicit empty-string behavior is preserved.
🧹 Nitpick comments (1)
packages/components/space/src/space.ts (1)

56-59: Optional: consider unifying default values for style props across the PR.

Across this PR, the new/updated style props use a mix of default: '', default: () => ({}), default: () => mutable({} as const), and default: undefined. Functionally all are valid StyleValues, but a single convention (likely default: undefined, as adopted in badge, virtual-list, statistic, and color-picker-panel) would be easier to reason about and reduce churn for downstream ExtractPublicPropTypes consumers. Non-blocking; defer if backward-compat is a concern.

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

In `@packages/components/space/src/space.ts` around lines 56 - 59, The style prop
in the Space component (property name: style, defined with
definePropType<StyleValue>) currently uses default: '' — change its default to
undefined to match the convention used elsewhere (e.g., badge, virtual-list,
statistic, color-picker-panel) so ExtractPublicPropTypes consumers see a
consistent default for StyleValue; update the prop definition for style in
space.ts accordingly.
🤖 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/components/avatar/src/avatar-group-props.ts`:
- Around line 71-74: The collapseStyle prop's type union currently lists Boolean
before String which causes Vue to coerce empty/shorthand attributes into true;
update the type array for collapseStyle in avatar-group-props.ts (the
definePropType<StyleValue> for collapseStyle) so Boolean is placed last (e.g.,
[String, Array, Object, Boolean]) to preserve normal string handling and prevent
unwanted boolean coercion.

In `@packages/components/countdown/src/countdown.ts`:
- Around line 68-71: The prop definition for valueStyle currently uses
definePropType<StyleValue>([Boolean, String, Object, Array]) which causes Vue to
cast empty-string props to true; update the union order for valueStyle to put
Boolean last (e.g. [String, Object, Array, Boolean]) so string values (including
empty string) are preserved while still allowing false, adjusting the valueStyle
prop definition in the countdown component accordingly.

In `@packages/components/roving-focus-group/src/roving-focus-group.ts`:
- Around line 12-15: The prop declaration for style uses
definePropType<StyleValue> with types [Boolean, String, Array, Object] which
causes Vue to coerce string values to Boolean; change the type order in the
style prop so Boolean is last (e.g., [String, Array, Object, Boolean]) to avoid
unintended Boolean casting; update the style prop definition where
definePropType<StyleValue> is used to reflect this new ordering.

In `@packages/components/table-v2/src/cell.ts`:
- Around line 13-16: The style prop definition uses
definePropType<StyleValue>([Boolean, String, Array, Object]) which causes
empty-string/shorthand attributes to be cast to true; update the union ordering
so Boolean is last (e.g., [String, Array, Object, Boolean]) in the
definePropType call for the style prop to prevent unintended boolean casting
while keeping StyleValue typings intact.

---

Outside diff comments:
In `@packages/components/popper/src/content.ts`:
- Around line 124-148: The prop definitions for style and popperStyle are
currently ordering Boolean first and missing an explicit default for
popperStyle; update both prop definitions (the style and popperStyle props in
this file where definePropType<StyleValue> is used) to put Boolean at the end of
the type union (e.g., [String, Array, Object, Boolean]) to avoid Vue's Boolean
casting, and add default: undefined to the popperStyle prop to match style and
the existing popperContentPropsDefaults.popperStyle so the prop value is
undefined when not provided.

In `@packages/components/scrollbar/src/scrollbar.ts`:
- Around line 120-144: The prop type unions for wrapStyle and viewStyle
currently list Boolean before String which causes Vue to coerce
empty-string/shorthand attributes to true; update the type arrays in the
wrapStyle and viewStyle prop definitions (the definePropType<StyleValue>(...)
and the viewStyle prop's type) to place Boolean at the end of the union (e.g.,
[String, Object, Array, Boolean] or [Boolean, String, Array, Object] → move
Boolean last) while keeping the existing default: '' so explicit empty-string
behavior is preserved.

---

Nitpick comments:
In `@packages/components/space/src/space.ts`:
- Around line 56-59: The style prop in the Space component (property name:
style, defined with definePropType<StyleValue>) currently uses default: '' —
change its default to undefined to match the convention used elsewhere (e.g.,
badge, virtual-list, statistic, color-picker-panel) so ExtractPublicPropTypes
consumers see a consistent default for StyleValue; update the prop definition
for style in space.ts accordingly.
🪄 Autofix (Beta)

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: defaults

Review profile: CHILL

Plan: Pro

Run ID: 07c1c392-6d65-42c1-8245-f78d64b24d08

📥 Commits

Reviewing files that changed from the base of the PR and between a4250dd and c56cfdb.

📒 Files selected for processing (14)
  • packages/components/avatar/src/avatar-group-props.ts
  • packages/components/badge/src/badge.ts
  • packages/components/card/src/card.ts
  • packages/components/color-picker-panel/src/color-picker-panel.ts
  • packages/components/countdown/src/countdown.ts
  • packages/components/input/src/input.ts
  • packages/components/popper/src/content.ts
  • packages/components/roving-focus-group/src/roving-focus-group.ts
  • packages/components/scrollbar/src/scrollbar.ts
  • packages/components/space/src/space.ts
  • packages/components/statistic/src/statistic.ts
  • packages/components/table-v2/src/cell.ts
  • packages/components/table/src/table/defaults.ts
  • packages/components/virtual-list/src/props.ts

Comment thread packages/components/avatar/src/avatar-group-props.ts
Comment thread packages/components/countdown/src/countdown.ts
Comment thread packages/components/roving-focus-group/src/roving-focus-group.ts
Comment thread packages/components/table-v2/src/cell.ts