v6 Responsive drawer fix (#42619)

* Fix responsive drawer close example

* Copy tweak, fix placeholder to generate CloseButton props properly

---------

Co-authored-by: Ishaan Kapur <64529428+ishaanlabs-gg@users.noreply.github.com>

diff --git a/site/src/content/docs/components/drawer.mdx b/site/src/content/docs/components/drawer.mdx
index 078cd4755021911df6b121a99b581272f7b8b57b..2d00d2667973ff52904b2dffd8f73575b38d4152 100644 (file)
--- a/site/src/content/docs/components/drawer.mdx
+++ b/site/src/content/docs/components/drawer.mdx
@@ -196,23 +196,16 @@ Add `.drawer-sheet` to render the panel flush against the viewport edge. The she
 
 Responsive drawer classes hide content outside the viewport from a specified breakpoint and down. Above that breakpoint, the contents within will behave as usual. For example, `.lg:drawer` hides content in a drawer below the `lg` breakpoint, but shows the content above the `lg` breakpoint. Responsive drawer classes are available for each breakpoint.
 
-- `.drawer`
-- `.sm:drawer`
-- `.md:drawer`
-- `.lg:drawer`
-- `.xl:drawer`
-- `.2xl:drawer`
-
 To make a responsive drawer, replace the `.drawer` base class with a responsive variant and ensure your close button has an explicit `data-bs-target`.
 
 <Example code={`<button class="btn-solid theme-primary lg:d-none" type="button" data-bs-toggle="drawer" data-bs-target="#drawerResponsive" aria-controls="drawerResponsive">Toggle drawer</button>
 
-  <div class="alert theme-info d-none lg:d-block"><p>Resize your browser to show the responsive drawer toggle.</p></div>
+  <div class="alert theme-info d-none lg:d-block mb-3"><p>Resize your browser to show the responsive drawer toggle.</p></div>
 
   <dialog class="lg:drawer drawer-end" tabindex="-1" id="drawerResponsive" aria-labelledby="drawerResponsiveLabel">
     <div class="drawer-header">
       <h5 class="drawer-title" id="drawerResponsiveLabel">Responsive drawer</h5>
-      <CloseButton dismiss="drawer" />
+      <CloseButton dismiss="drawer" target="#drawerResponsive" />
     </div>
     <div class="drawer-body">
       <p class="mb-0">This is content within an <code>.lg:drawer</code>.</p>

diff --git a/site/src/libs/placeholder.ts b/site/src/libs/placeholder.ts
index 3cf786ae3327a6645452d039d61f1953eb4e23f8..675b7bad811f7d295f54072641ff6ff73759a31b 100644 (file)
--- a/site/src/libs/placeholder.ts
+++ b/site/src/libs/placeholder.ts
@@ -58,15 +58,17 @@ export function getPlaceholder(userOptions: Partial<PlaceholderOptions>): Placeh
 
 /**
  * Renders a CloseButton component to its HTML string representation.
- * Supports optional `dismiss` and `class` attributes.
+ * Supports optional `dismiss`, `target`, and `class` attributes.
  */
 function renderCloseButtonToString(attributes: Record<string, string>): string {
   const dismiss = attributes.dismiss
+  const target = attributes.target
   const extraClass = attributes.class
   const dismissAttr = dismiss ? ` data-bs-dismiss="${dismiss}"` : ''
+  const targetAttr = target ? ` data-bs-target="${target}"` : ''
   const classValue = extraClass ? `btn-close ${extraClass}` : 'btn-close'
 
-  return `<button type="button" class="${classValue}"${dismissAttr} aria-label="Close"></button>`
+  return `<button type="button" class="${classValue}"${dismissAttr}${targetAttr} aria-label="Close"></button>`
 }
 
 /**