fix(BubbleList): bubbleList 组件添加添加 maxWidth 属性 fix: #226 #352
Conversation
WalkthroughAdds a new optional maxWidth prop to BubbleList, wires it via reactive CSS variables instead of DOM-side updates, updates styles to respect max-width, adjusts docs and Storybook args, and extends TypeScript types accordingly. Removes onMounted/watch style initialization in favor of a computed style object bound to the root element. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant Storybook as Storybook Args
participant BubbleList as BubbleList Component
participant Vue as Computed Style
participant DOM as Root Element
participant CSS as SCSS Vars
User->>Storybook: Configure maxWidth (e.g., "640px" or "none")
Storybook->>BubbleList: Pass prop maxWidth
BubbleList->>Vue: Compute elBubbleListStyleVars<br/>(--el-bubble-list-max-width = maxWidth)
Vue->>DOM: Bind :style with CSS variables
DOM->>CSS: Apply max-width via var(--el-bubble-list-max-width)
note over BubbleList,Vue: onMounted/watch removed<br/>reactive binding handles updates
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✨ Finishing touches
🧪 Generate unit tests
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: 0
🧹 Nitpick comments (8)
packages/core/src/components/BubbleList/style.scss (1)
11-12: Add CSS variable fallbacks to avoid invalid values when props are empty.Using var(--x, fallback) makes styles resilient to SSR/auto-import timing and empty-string props.
- max-width: var(--el-bubble-list-max-width); - max-height: var(--el-bubble-list-max-height); + max-width: var(--el-bubble-list-max-width, none); + max-height: var(--el-bubble-list-max-height, 100%);packages/core/src/components/BubbleList/types.d.ts (1)
17-19: Type width/height as CSSProperties to improve DX and accept numbers.This keeps ‘none’ working while enabling values like 680 (px) if you later coerce numbers.
+ import type { CSSProperties } from 'vue'; export interface BubbleListProps< T extends BubbleListItemProps = BubbleListItemProps > { list: T[]; autoScroll?: boolean; - maxWidth?: string; - maxHeight?: string; + maxWidth?: CSSProperties['maxWidth']; + maxHeight?: CSSProperties['maxHeight'];apps/docs/zh/components/bubbleList/index.md (1)
54-54: Clarify accepted formats with examples.Explicitly listing valid CSS lengths avoids confusion.
-| `maxWidth` | String | 否 | 'none' | 氣泡列表容器的最大宽度，默认值为 `none`。 | +| `maxWidth` | String | 否 | 'none' | 氣泡列表容器的最大宽度，支持任意合法 CSS 长度（如 `680px`、`42rem`、`min(90vw, 720px)`），默认 `none`。 |packages/core/src/stories/BubbleList/BubbleList.stories.ts (1)
13-13: Stories LGTM; consider adding a fixed-width variant to visually validate the prop.Add another story to showcase a constrained width:
export const FixedWidthDemo: Story = { args: { ...BubbleListDemo.args, maxWidth: '680px', }, };Also applies to: 27-27
packages/core/src/components/BubbleList/index.vue (4)
34-38: Normalize/fallback style variables to avoid empty CSS values.Prevents invalid var() resolutions if props are empty and aligns with docs’ default behavior.
-const elBubbleListStyleVars = computed(() => ({ - '--el-bubble-list-max-width': props.maxWidth, - '--el-bubble-list-max-height': props.maxHeight, - '--el-bubble-list-btn-size': `${props.btnIconSize}px` -})); +const elBubbleListStyleVars = computed(() => ({ + '--el-bubble-list-max-width': props.maxWidth || 'none', + '--el-bubble-list-max-height': props.maxHeight || '100%', + '--el-bubble-list-btn-size': `${Number(props.btnIconSize) || 24}px`, +}));
91-92: Fix lint: newline after if (antfu/if-newline).- if (!container) return; + if (!container) + return;
94-95: Fix lint: newline after if (antfu/if-newline).- if (index >= bubbles.length) return; + if (index >= bubbles.length) + return;
168-170: Address indent rule by avoiding short‑circuit and using if with newline.- default: - props.triggerIndices.includes(index) && - emits('complete', instance, index); + default: + if (props.triggerIndices.includes(index)) + emits('complete', instance, index); break;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
apps/docs/zh/components/bubbleList/index.md(1 hunks)packages/core/src/components/BubbleList/index.vue(6 hunks)packages/core/src/components/BubbleList/style.scss(1 hunks)packages/core/src/components/BubbleList/types.d.ts(1 hunks)packages/core/src/stories/BubbleList/BubbleList.stories.ts(2 hunks)
🧰 Additional context used
🪛 ESLint
packages/core/src/components/BubbleList/index.vue
[error] 91-91: Expect newline after if
(antfu/if-newline)
[error] 94-94: Expect newline after if
(antfu/if-newline)
[error] 169-169: Expected indentation of 6 spaces
(style/indent-binary-ops)
🔇 Additional comments (2)
packages/core/src/components/BubbleList/index.vue (2)
13-13: Default ‘none’ is sensible for maxWidth.
202-202: Binding CSS vars via :style is the right move—prop changes reactively update layout.
1 participant
closed #226
Summary by CodeRabbit
New Features
Documentation
Refactor