fix: double close button in docs#1717
Conversation
|
@jjagielka is attempting to deploy a commit to the Themesberg Team on Vercel. A member of the Team first needs to authorize it. |
|
Warning Rate limit exceeded@jjagielka has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 0 minutes and 35 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (1)
WalkthroughRemoved all uses and imports of CloseButton from Drawer documentation examples and the Timepicker drawer example; updated backdrop guidance and minor wording/typo fixes in the Drawer docs. No public API or runtime code was changed. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Possibly related PRs
Poem
✨ 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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![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
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/routes/docs/components/drawer.md(12 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Playwright and Lint
🔇 Additional comments (1)
src/routes/docs/components/drawer.md (1)
196-198: Header without extra close control — aligns with intentRemoving the inline CloseButton from the “New event” header prevents duplication with Drawer’s own close control. Example remains clear and functional.
| import { Drawer, CardPlaceholder, Button } from "flowbite-svelte"; | ||
| import { sineIn } from "svelte/easing"; | ||
| </script> |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
CloseButton removal across all examples — LGTM
Consistent removal of CloseButton imports/usage aligns with the PR goal and avoids the duplicate close control in Drawer examples. Remaining imports/components are appropriate per example.
To ensure no lingering references to CloseButton remain elsewhere in the docs, run:
Also applies to: 33-37, 65-69, 141-145, 185-189, 244-248, 278-288, 316-326, 351-361, 393-397, 425-429
🏁 Script executed:
#!/bin/bash
# Verify there are no leftover CloseButton usages/imports in docs
rg -n --hidden --glob 'src/**' '\bCloseButton\b'Length of output: 12557
🏁 Script executed:
#!/bin/bash
# Verify there are no lingering CloseButton references in the docs folder
rg -n --glob 'src/routes/docs/**' '\bCloseButton\b'Length of output: 1911
Remove lingering CloseButton references in documentation
The rg search in src/routes/docs/** still shows imports and usages of CloseButton. Please remove or update these occurrences to align with the PR goal:
• src/routes/docs/utilities/close-button.md
– lines 14, 22, 24, 28, 35: Remove the “CloseButton” section or mark as deprecated.
• src/routes/docs/components/sidebar.md
– imports at lines 594 & 667
– <CloseButton …> usages at lines 618, 685, 741, and 759
• src/routes/docs/forms/timepicker.md
– import at line 416
• src/routes/docs/forms/input-field.md
– import at line 287
– <CloseButton /> usage at line 316
Ensure all examples and import statements referencing CloseButton are removed or replaced in the docs.
🤖 Prompt for AI Agents
In src/routes/docs/components/drawer.md around lines 22 to 24, and across the
docs directory (specifically src/routes/docs/utilities/close-button.md lines 14,
22, 24, 28, 35; src/routes/docs/components/sidebar.md imports at lines 594 & 667
and CloseButton usages at lines 618, 685, 741, 759;
src/routes/docs/forms/timepicker.md import at line 416;
src/routes/docs/forms/input-field.md import at line 287 and usage at line 316),
remove any remaining CloseButton imports and usages or replace them with the
appropriate current component (or mark the section deprecated); update/remove
example snippets so they compile and render without CloseButton, and ensure
import lists at the top of each file no longer reference CloseButton and any
related example markup is either deleted or converted to the new API.
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
src/routes/docs/components/drawer.md (1)
22-22: Verify no lingering CloseButton references across docs
Previous review flagged remaining CloseButton imports/usages in other docs pages. Please ensure these are updated or removed to avoid inconsistencies.Run this from the repo root to confirm:
#!/bin/bash # Verify there are no lingering CloseButton references in the docs folder rg -n --glob 'src/routes/docs/**' '\bCloseButton\b' || trueAlso applies to: 33-33, 65-65, 141-141, 185-185, 196-198, 244-244, 278-278, 316-316, 351-351, 385-385, 393-393, 425-425
🧹 Nitpick comments (2)
src/routes/docs/components/drawer.md (2)
385-385: Clarify Tailwind “backdrop:” guidance
Use precise wording to reference Tailwind’s ::backdrop variant for dialog.-Use the drawer's `backdrop:xxx` class to manage its look. +Use Tailwind's `backdrop:` variant classes (e.g., `backdrop:bg-black/50`) to style the dialog backdrop.
389-389: Fix typos and grammar in non-modal description
Minor corrections for clarity and consistency (use “However” and “manage”; standardize ESC).-Drawer by default is `modal` (see `dialog`). You can set prop `modal={false}` to open `Drawer` in non-modal mode, that means with no backdrop. Note howerver, that you will need managed the `Drawer` position, z-index and `Esc` button manually. +Drawer is `modal` by default (see `dialog`). You can set `modal={false}` to open `Drawer` in non-modal mode (no backdrop). However, you will need to manage the `Drawer` position, z-index, and `ESC` key behavior manually.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/routes/docs/components/drawer.md(12 hunks)
🧰 Additional context used
🪛 LanguageTool
src/routes/docs/components/drawer.md
[grammar] ~389-~389: Ensure spelling is correct
Context: ...mode, that means with no backdrop. Note howerver, that you will need managed the `Drawer...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Playwright and Lint
🔇 Additional comments (12)
src/routes/docs/components/drawer.md (12)
22-22: CloseButton removed from setup imports — LGTM
This aligns with the PR goal and avoids duplicate close controls in examples.
33-33: CloseButton removed from default example imports — LGTM
Import list is consistent with usage shown in the example.
65-65: Navigation example imports updated — LGTM
Consistent removal of CloseButton while keeping Sidebar-related components intact.
141-141: Contact form imports updated — LGTM
All imports reflect the components used in the example; CloseButton removed.
185-185: Form elements imports updated — LGTM
Imports match the example and remove CloseButton as intended.
196-198: Header adjusted after CloseButton removal — LGTM
The heading structure reads well without an inline close control. ESC/backdrop interactions still provide closing affordances.
244-244: Left drawer imports updated — LGTM
Removal of CloseButton is consistent across examples.
278-278: Right drawer imports updated — LGTM
No stray CloseButton import remains.
316-316: Top drawer imports updated — LGTM
Imports reflect actual usage and CloseButton is removed.
351-351: Bottom drawer imports updated — LGTM
Consistent with the rest of the examples.
393-393: Non-modal example imports updated — LGTM
CloseButton removed; example still demonstrates positioning/z-index clearly.
425-425: Disabling outside click example imports updated — LGTM
Consistent removal of CloseButton across final example.
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (1)
src/routes/docs/components/drawer.md (1)
33-37: Use Svelte’s on:click binding instead of onclickPlease update all
<Button>examples insrc/routes/docs/components/drawer.mdto use Svelte’s event directive (on:click) rather than the DOMonclickattribute. We’ve identified 10 occurrences:
- src/routes/docs/components/drawer.md:40
- src/routes/docs/components/drawer.md:72
- src/routes/docs/components/drawer.md:148
- src/routes/docs/components/drawer.md:192
- src/routes/docs/components/drawer.md:251
- src/routes/docs/components/drawer.md:291
- src/routes/docs/components/drawer.md:329
- src/routes/docs/components/drawer.md:364
- src/routes/docs/components/drawer.md:400
- src/routes/docs/components/drawer.md:432
Example replacement:
- <Button onclick={() => (open = true)}>Show drawer</Button> + <Button on:click={() => (open = true)}>Show drawer</Button>Applying this change across all listed lines will ensure consistency with Svelte’s recommended syntax.
♻️ Duplicate comments (1)
src/routes/docs/components/drawer.md (1)
22-24: Verify no remaining CloseButton usage across docsThis file looks clean. To ensure the fix is complete repo-wide (past reviews flagged additional occurrences), run the search below and remove any remaining references in docs.
#!/bin/bash # Verify there are no leftover CloseButton usages/imports in docs rg -n --glob 'src/routes/docs/**' '\bCloseButton\b'Also applies to: 33-37, 65-69, 141-145, 185-189, 244-248, 278-288, 316-326, 351-361
🧹 Nitpick comments (3)
src/routes/docs/components/drawer.md (3)
385-385: Clarify backdrop usage with a concrete exampleThe guidance is correct; adding a minimal example helps readers apply it immediately.
Apply this doc tweak to include a usage hint:
-Use Tailwind's `backdrop:` variant classes (e.g., `backdrop:bg-black/50`) to style the dialog backdrop. +Use Tailwind's `backdrop:` variant classes (e.g., `backdrop:bg-black/50`) to style the dialog backdrop. For example: + +```svelte +<Drawer class="backdrop:bg-black/50"> + <!-- content --> +</Drawer> +```
389-389: Non-modal caveat: mention focus and outside-click behaviorNon-modal mode disables the modal backdrop and default ESC handling. It’s worth noting that:
- Focus isn’t trapped; keyboard users can tab to background content.
- Outside clicks typically won’t close the drawer unless you implement your own logic.
Consider expanding the note to set expectations or link to the “Disabling outside click” section and add a brief reminder on custom ESC handling if desired.
Also applies to: 404-416
393-397: Resolve import/usage inconsistency for A vs in Non-modal exampleThe example imports A but uses a native . Either drop A from the import or switch to using for consistency with other examples (e.g., the Top drawer section).
Option 1 — use in the paragraph:
- import { Drawer, CardPlaceholder, Button, A } from "flowbite-svelte"; + import { Drawer, CardPlaceholder, Button, A } from "flowbite-svelte"; @@ - <p class="mb-6 text-sm text-gray-500 dark:text-gray-400"> - Supercharge your hiring by taking advantage of our <a href="/" class="text-primary-600 dark:text-primary-500 underline hover:no-underline">limited-time sale</a> + <p class="mb-6 text-sm text-gray-500 dark:text-gray-400"> + Supercharge your hiring by taking advantage of our <A href="/" class="text-primary-600 dark:text-primary-500 underline hover:no-underline">limited-time sale</A>Option 2 — keep and remove A from import:
- import { Drawer, CardPlaceholder, Button, A } from "flowbite-svelte"; + import { Drawer, CardPlaceholder, Button } from "flowbite-svelte";Also applies to: 408-411
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/routes/docs/components/drawer.md(12 hunks)src/routes/docs/forms/timepicker.md(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- src/routes/docs/forms/timepicker.md
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Playwright and Lint
🔇 Additional comments (9)
src/routes/docs/components/drawer.md (9)
22-24: LGTM: Removed CloseButton from the setup importThe setup snippet now imports only Drawer, CardPlaceholder, and Button — aligned with the PR intent to avoid a duplicate close control.
33-37: LGTM: Default drawer import cleaned upCloseButton usage is gone from this example too. No functional changes beyond the import line — consistent with the PR scope.
65-69: LGTM: Navigation example imports adjustedImports look correct for the Sidebar stack; no stray CloseButton. Good consistency with the PR objective.
141-145: LGTM: Contact form example import cleaned upCloseButton removed here as well; the imported components match the usage in the example.
185-189: LGTM: “Form elements” example header no longer shows a second closeThe header now contains only the Info icon and title — the extra close control has been removed.
Also applies to: 196-199
244-248: LGTM: Left drawer importsImports are scoped to this example and no CloseButton remains.
278-288: LGTM: Right drawer imports and transition paramsImports are correct, and the transition parameters remain unchanged.
316-326: LGTM: Top drawer importsImports match usage and continue to exclude CloseButton.
351-361: LGTM: Bottom drawer importsConsistent cleanup here as well — no CloseButton import.
2 participants
Closes #
📑 Description
Status
✅ Checks
api-checkdirectory as requiredℹ Additional Information
Summary by CodeRabbit