feat(Slideover): add size and fullscreen props #5928
Conversation
📝 WalkthroughWalkthroughThis change introduces size and fullscreen variants to the Slideover component. The Slideover.vue component now exposes Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes 🚥 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: 2
🤖 Fix all issues with AI agents
In `@docs/content/docs/2.components/slideover.md`:
- Around line 236-258: The fullscreen example's component-code block triggers
markdownlint MD007/MD018 due to the inline list-style YAML/slot lines; update
the example by converting the inline list into a proper multi-line list (avoid
compact inline list entries) and add a local MD018 disable pragma for that block
(e.g., an HTML comment like <!-- markdownlint-disable MD018 --> before the code
block and <!-- markdownlint-enable MD018 --> after) so the linter ignores the
list-indent rule; target the component-code block containing props (fullscreen,
title) and slots (default, body) when making this change.
- Around line 204-225: In the "Size example" Slideover block fix the
markdownlint issues by changing the YAML frontmatter `ignore` list to an inline
single-item form (e.g., use `ignore: ['title']` instead of a multi-line list)
and wrap the `#body` slot marker with a local MD018 disable/enable comment pair
(use `<!-- markdownlint-disable MD018 -->` before the `#body` marker and `<!--
markdownlint-enable MD018 -->` after) so the `ignore` key and the `#body` slot
marker no longer trigger MD007/MD018; update the block containing `props: size:
'lg'`, `ignore`, and the `#body` slot accordingly.
| ::component-code | ||
| --- | ||
| prettier: true | ||
| ignore: | ||
| - title | ||
| props: | ||
| size: 'lg' | ||
| title: 'Slideover with size' | ||
| slots: | ||
| default: | | ||
|
|
||
| <UButton label="Open" color="neutral" variant="subtle" /> | ||
|
|
||
| body: | | ||
|
|
||
| <Placeholder class="h-full" /> | ||
| --- | ||
|
|
||
| :u-button{label="Open" color="neutral" variant="subtle"} | ||
|
|
||
| #body | ||
| :placeholder{class="h-full"} |
There was a problem hiding this comment.
Fix markdownlint MD007/MD018 in the Size example.
markdownlint flags list indentation on ignore and the #body slot marker. Consider an inline list and a local MD018 disable so lint stays green.
✅ Suggested lint-safe tweak
@@
-ignore:
- - title
+ignore: ['title']
@@
-#body
+<!-- markdownlint-disable-next-line MD018 -->
+#body🧰 Tools
🪛 markdownlint-cli2 (0.18.1)
208-208: Unordered list indentation
Expected: 0; Actual: 2
(MD007, ul-indent)
224-224: No space after hash on atx style heading
(MD018, no-missing-space-atx)
🤖 Prompt for AI Agents
In `@docs/content/docs/2.components/slideover.md` around lines 204 - 225, In the
"Size example" Slideover block fix the markdownlint issues by changing the YAML
frontmatter `ignore` list to an inline single-item form (e.g., use `ignore:
['title']` instead of a multi-line list) and wrap the `#body` slot marker with a
local MD018 disable/enable comment pair (use `<!-- markdownlint-disable MD018
-->` before the `#body` marker and `<!-- markdownlint-enable MD018 -->` after)
so the `ignore` key and the `#body` slot marker no longer trigger MD007/MD018;
update the block containing `props: size: 'lg'`, `ignore`, and the `#body` slot
accordingly.
| ::component-code | ||
| --- | ||
| prettier: true | ||
| ignore: | ||
| - title | ||
| - fullscreen | ||
| props: | ||
| fullscreen: true | ||
| title: 'Slideover fullscreen' | ||
| slots: | ||
| default: | | ||
|
|
||
| <UButton label="Open" color="neutral" variant="subtle" /> | ||
|
|
||
| body: | | ||
|
|
||
| <Placeholder class="h-full" /> | ||
| --- | ||
|
|
||
| :u-button{label="Open" color="neutral" variant="subtle"} | ||
|
|
||
| #body | ||
| :placeholder{class="h-full"} |
There was a problem hiding this comment.
Fix markdownlint MD007/MD018 in the Fullscreen example.
Same lint warnings appear in this block; inline list + a local MD018 disable resolves them.
✅ Suggested lint-safe tweak
@@
-ignore:
- - title
- - fullscreen
+ignore: ['title', 'fullscreen']
@@
-#body
+<!-- markdownlint-disable-next-line MD018 -->
+#body🧰 Tools
🪛 markdownlint-cli2 (0.18.1)
240-240: Unordered list indentation
Expected: 0; Actual: 2
(MD007, ul-indent)
241-241: Unordered list indentation
Expected: 0; Actual: 2
(MD007, ul-indent)
257-257: No space after hash on atx style heading
(MD018, no-missing-space-atx)
🤖 Prompt for AI Agents
In `@docs/content/docs/2.components/slideover.md` around lines 236 - 258, The
fullscreen example's component-code block triggers markdownlint MD007/MD018 due
to the inline list-style YAML/slot lines; update the example by converting the
inline list into a proper multi-line list (avoid compact inline list entries)
and add a local MD018 disable pragma for that block (e.g., an HTML comment like
<!-- markdownlint-disable MD018 --> before the code block and <!--
markdownlint-enable MD018 --> after) so the linter ignores the list-indent rule;
target the component-code block containing props (fullscreen, title) and slots
(default, body) when making this change.
|
I'm not sure a |
2 participants
❓ Type of change
Add
fullscreenandsizeprops to slideover📚 Description
I added a new prop similar to Modal and Button, which adds support for different sizes and a fullscreen variant of the slideover.
It could be overwritten individually, but I work on a project that requires different "standard" sizes of slideovers based on context. With this feature, users can create an always fullscreen slideover, similar to fullscreen Modal, or set different sizes easily.
It follows standard definition so you can use variants/compound variants or just do not specify these new props at all for standard look.
📝 Checklist