fix(clear-button): update clear button docs to use clear button

Author: cdransf

1st-gen/packages/button/stories/template.ts

@@ -16,6 +16,9 @@ import {
     ButtonVariants,
 } from '@spectrum-web-components/button/src/Button.js';
 
+import '@spectrum-web-components/button/sp-clear-button.js';
+import '@spectrum-web-components/button/sp-close-button.js';
+
 export interface Properties {
     staticColor?: 'white' | 'black';
     variant?: ButtonVariants;
@@ -30,6 +33,7 @@ export interface Properties {
     noWrap?: boolean;
     iconOnly?: boolean;
     label?: string;
+    componentName?: string;
 }
 
 export const Template = ({
@@ -38,14 +42,47 @@ export const Template = ({
     size,
     treatment,
     variant,
-}: Properties): TemplateResult => html`
-    <sp-button
-        ?disabled=${disabled}
-        ?pending=${pending}
-        size=${ifDefined(size)}
-        treatment=${ifDefined(treatment)}
-        variant=${ifDefined(variant)}
-    >
-        Test Button
-    </sp-button>
-`;
+    label = 'Clear',
+    quiet,
+    staticColor,
+    componentName,
+}: Properties): TemplateResult => {
+    // Render clear-button for clear-button docs
+    if (componentName === 'clear-button') {
+        return html`
+            <sp-clear-button
+                label=${label}
+                ?disabled=${!!disabled}
+                ?quiet=${!!quiet}
+                size=${ifDefined(size)}
+                static-color=${ifDefined(staticColor)}
+            ></sp-clear-button>
+        `;
+    }
+
+    // Render close-button for close-button docs
+    if (componentName === 'close-button') {
+        return html`
+            <sp-close-button
+                label=${label}
+                ?disabled=${!!disabled}
+                ?quiet=${!!quiet}
+                size=${ifDefined(size)}
+                static-color=${ifDefined(staticColor)}
+            ></sp-close-button>
+        `;
+    }
+
+    // Default: render standard button
+    return html`
+        <sp-button
+            ?disabled=${disabled}
+            ?pending=${pending}
+            size=${ifDefined(size)}
+            treatment=${ifDefined(treatment)}
+            variant=${ifDefined(variant)}
+        >
+            Test Button
+        </sp-button>
+    `;
+};

1st-gen/projects/documentation/content/_includes/partials/demo.njk

@@ -122,6 +122,8 @@
         return args;
     }
     const renderDemo = (args = {}) => {
+        // Pass componentName to Template for variant detection
+        args.componentName = '{{ componentName }}';
         render(Template(args), demo);
     };
     if (config) {