feat(alert): [alert] display title when size is large in mobile-first #2765
Conversation
WalkthroughThis pull request introduces enhancements to the alert component's title visibility across different modes (PC and mobile-first). The changes include updating the Changes
Sequence DiagramsequenceDiagram
participant Component as Alert Component
participant Props as Props Configuration
participant Template as Template Rendering
Props->>Component: Set showTitle prop
Props->>Component: Set size prop
Component->>Template: Evaluate rendering conditions
Template-->>Component: Render title based on size and showTitle
Possibly related PRs
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 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 introduces a feature to display the title in alerts when the size is set to large, specifically for mobile-first mode. It adds a new property Changes
|
![petercat-assistant[bot]](https://avatars.githubusercontent.com/in/875736?s=60&v=4){kind=small}
![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/vue/src/alert/src/mobile-first.vue (1)
155-155: Add type validation for the showTitle prop.Consider adding type validation for better runtime safety:
- 'showTitle', + { + name: 'showTitle', + type: Boolean, + default: true + },
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
examples/sites/demos/apis/alert.js(1 hunks)examples/sites/demos/mobile-first/app/alert/title.vue(1 hunks)examples/sites/demos/mobile-first/app/alert/webdoc/alert.js(1 hunks)examples/sites/demos/pc/app/alert/webdoc/alert.js(1 hunks)packages/vue/src/alert/src/mobile-first.vue(3 hunks)
✅ Files skipped from review due to trivial changes (1)
- examples/sites/demos/pc/app/alert/webdoc/alert.js
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: PR E2E Test (pnpm test:e2e3)
🔇 Additional comments (3)
examples/sites/demos/mobile-first/app/alert/title.vue (1)
8-9: LGTM! Well-structured demo showcasing title visibility options.The demo effectively demonstrates three different title scenarios: property-based title, slot-based title, and hidden title using show-title=false.
packages/vue/src/alert/src/mobile-first.vue (1)
37-37: LGTM! Consistent implementation of title visibility control.The conditional rendering of titles is correctly implemented in both foldable and non-foldable sections.
Also applies to: 97-98
examples/sites/demos/apis/alert.js (1)
129-129: LGTM! Proper extension of show-title property to mobile-first mode.The show-title property is correctly extended to support mobile-first mode while maintaining existing PC mode support.
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
Release Notes
New Features
showTitleprop to control title display in mobile-first modeDocumentation
show-titleattribute functionalityBug Fixes
The changes provide more flexible title display options for the Alert component across different modes and screen sizes.