bug #3158 [Toolkit][Shadcn] Update Button CSS class, remove as props (ker0x, Kocal)

This PR was merged into the 2.x branch.

Discussion
----------

[Toolkit][Shadcn] Update Button CSS class, remove as props

| Q              | A
| -------------- | ---
| Bug fix?       | yes
| New feature?   | no
| Deprecations?  | no
| Documentation? | no
| Issues         | -
| License        | MIT

This PR update the CSS class of the `Button` component according to official Shadcn documentation.

It also removes the `as` props and relies on the presence of an `href` attribute to determine which element to use.

Commits
-------

64e0078 [Toolkit][Shadcn][Button] Re-introduce `as` prop, adjust some examples
f793c08 [Toolkit][Shadcn] Update Button CSS class, remove as props

Author: Kocal

src/Toolkit/kits/shadcn/button/EXAMPLES.md

@@ -48,7 +48,7 @@
 
 ```twig {"preview":true}
 <twig:Button variant="outline" size="icon">
-    <twig:ux:icon name="lucide:chevron-right" />
+    <twig:ux:icon name="lucide:circle-fading-arrow-up" />
 </twig:Button>
 ```
 
@@ -71,9 +71,30 @@
 ## Different sizes
 
 ```twig {"preview":true}
-<div class="flex items-center gap-2">
-    <twig:Button size="sm">Small</twig:Button>
-    <twig:Button>Default</twig:Button>
-    <twig:Button size="lg">Large</twig:Button>
+<div class="flex flex-col items-start gap-8 sm:flex-row">
+    <div class="flex items-center gap-2">
+        <twig:Button size="sm" variant="outline">Small</twig:Button>
+        <twig:Button size="icon-sm" variant="outline" aria-label="Submit">
+            <twig:ux:icon name="lucide:arrow-up-right" class="size-4" />
+        </twig:Button>
+    </div>
+    <div class="flex items-center gap-2">
+        <twig:Button variant="outline">Default</twig:Button>
+        <twig:Button variant="outline" aria-label="Submit">
+            <twig:ux:icon name="lucide:arrow-up-right" class="size-4" />
+        </twig:Button>
+    </div>
+    <div class="flex items-center gap-2">
+        <twig:Button size="lg" variant="outline">Large</twig:Button>
+        <twig:Button size="icon-lg" variant="outline" aria-label="Submit">
+            <twig:ux:icon name="lucide:arrow-up-right" class="size-4" />
+        </twig:Button>
+    </div>
 </div>
 ```
+
+## As link
+
+```twig {"preview":true}
+<twig:Button href="https://example.com">Link</twig:Button>
+```

src/Toolkit/kits/shadcn/button/templates/components/Button.html.twig

@@ -1,29 +1,31 @@
 {# @prop variant 'default'|'secondary'|'destructive'|'outline'|'ghost'|'link' The variant, default to `default` #}
-{# @prop size 'default'|'sm'|'lg'|'icon' The size, default to `default` #}
+{# @prop size 'default'|'sm'|'lg'|'icon'|'icon-sm'|'icon-lg' The size, default to `default` #}
 {# @prop as 'button' The HTML tag to use, default to `button` #}
 {# @block content The default block #}
 {%- props variant = 'default', size = 'default', as = 'button' -%}
 {%- set style = html_cva(
-    base: 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+    base: "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
     variants: {
         variant: {
             default: 'bg-primary text-primary-foreground hover:bg-primary/90',
             secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-            destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-            outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-            ghost: 'hover:bg-accent hover:text-accent-foreground',
+            destructive: 'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+            outline: 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+            ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
             link: 'text-primary underline-offset-4 hover:underline',
         },
         size: {
-            default: 'h-10 px-4 py-2',
-            sm: 'h-9 rounded-md px-3',
-            lg: 'h-11 rounded-md px-8',
-            icon: 'h-10 w-10',
+            default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+            sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+            lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+            icon: 'size-9',
+            'icon-sm': 'size-8',
+            'icon-lg': 'size-10',
         },
     },
 ) -%}
-
 <{{ as }}
+    data-slot="button"
     class="{{ style.apply({variant: variant, size: size}, attributes.render('class'))|tailwind_merge }}"
     {{ attributes }}
 >

src/Toolkit/kits/shadcn/pagination/templates/components/Pagination/Link.html.twig

@@ -2,10 +2,10 @@
 {# @block content The default block #}
 {%- props active = false -%}
 <twig:Button
-    as="a"
     variant="{{ active ? 'outline' : 'ghost' }}"
     size="icon"
     aria-current="{{ active ? 'page' : false }}"
+    href="#"
     {{ ...attributes.without('class') }}
 >
     {{- block(outerBlocks.content) -}}

src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component alert-dialog, code 1__1.html

@@ -24,7 +24,7 @@
 ```
 - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
 <div data-controller="alert-dialog" aria-labelledby="alert-dialog-delete_account-title" aria-describedby="alert-dialog-delete_account-description">
-    <button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2" data-action="click-&gt;alert-dialog#open" data-alert-dialog-target="trigger" aria-haspopup="dialog" aria-expanded="false">Open</button>
+    <button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2 has-[&gt;svg]:px-3" data-action="click-&gt;alert-dialog#open" data-alert-dialog-target="trigger" aria-haspopup="dialog" aria-expanded="false">Open</button>
         <dialog id="alert-dialog-delete_account" class="fixed inset-0 size-auto max-h-none max-w-none overflow-y-auto bg-transparent backdrop:bg-transparent " data-alert-dialog-target="dialog" data-action="keydown.esc-&gt;alert-dialog#close:prevent">
     <div data-alert-dialog-target="overlay" data-transition-enter="transition ease-out duration-100" data-transition-enter-start="transform opacity-0" data-transition-enter-end="transform opacity-100" data-transition-leave="transition ease-in duration-75" data-transition-leave-start="transform opacity-100" data-transition-leave-end="transform opacity-0" class="hidden fixed inset-0 z-50 bg-black/50"></div>
 
@@ -35,8 +35,8 @@
                 and remove your data from our servers.
             </p>
         </header>
-        <footer class="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end "><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2" data-action="click-&gt;alert-dialog#close">Cancel</button>
-            <button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2">Continue</button>
+        <footer class="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end "><button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[&gt;svg]:px-3" data-action="click-&gt;alert-dialog#close">Cancel</button>
+            <button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2 has-[&gt;svg]:px-3">Continue</button>
         </footer>
     </div>
     </section>

src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component alert-dialog, code 2__1.html

@@ -24,7 +24,7 @@
 ```
 - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
 <div data-controller="alert-dialog" aria-labelledby="alert-dialog-delete_account-title" aria-describedby="alert-dialog-delete_account-description">
-    <button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2" data-action="click-&gt;alert-dialog#open" data-alert-dialog-target="trigger" aria-haspopup="dialog" aria-expanded="true">Open</button>
+    <button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2 has-[&gt;svg]:px-3" data-action="click-&gt;alert-dialog#open" data-alert-dialog-target="trigger" aria-haspopup="dialog" aria-expanded="true">Open</button>
         <dialog id="alert-dialog-delete_account" open class="fixed inset-0 size-auto max-h-none max-w-none overflow-y-auto bg-transparent backdrop:bg-transparent " data-alert-dialog-target="dialog" data-action="keydown.esc-&gt;alert-dialog#close:prevent">
     <div data-alert-dialog-target="overlay" data-transition-enter="transition ease-out duration-100" data-transition-enter-start="transform opacity-0" data-transition-enter-end="transform opacity-100" data-transition-leave="transition ease-in duration-75" data-transition-leave-start="transform opacity-100" data-transition-leave-end="transform opacity-0" class=" fixed inset-0 z-50 bg-black/50"></div>
 
@@ -35,8 +35,8 @@
                 and remove your data from our servers.
             </p>
         </header>
-        <footer class="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end "><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2" data-action="click-&gt;alert-dialog#close">Cancel</button>
-            <button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2">Continue</button>
+        <footer class="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end "><button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[&gt;svg]:px-3" data-action="click-&gt;alert-dialog#close">Cancel</button>
+            <button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2 has-[&gt;svg]:px-3">Continue</button>
         </footer>
     </div>
     </section>

src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component button, code 10__1.html

@@ -8,5 +8,5 @@
 </twig:Button>
 ```
 - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
-<button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2" disabled><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="animate-spin" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg> Please wait
+<button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2 has-[&gt;svg]:px-3" disabled><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="animate-spin" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg> Please wait
 </button>