bug #3345 [Toolkit] Rewrite @prop documentation to normalize Defaults to ... (Kocal)

Kocal · Kocal · commit a206359753a4 · 2026-02-17T15:10:06.000+01:00
This PR was merged into the 2.x branch. Discussion ---------- [Toolkit] Rewrite ``@prop`` documentation to normalize `Defaults to ...` | Q | A | -------------- | --- | Bug fix? | yes | New feature? | no  | Deprecations? | no  | Documentation? | no  | Issues | Fix #...  | License | MIT Related to symfony/ux.symfony.com#15 Commits ------- 521c844 [Toolkit] Rewrite ``@prop`` documentation to normalize `Defaults to ...`
diff --git a/src/Toolkit/kits/shadcn/accordion/templates/components/Accordion.html.twig b/src/Toolkit/kits/shadcn/accordion/templates/components/Accordion.html.twig
@@ -1,7 +1,7 @@
 {# @prop id string Unique identifier for the Accordion #}
-{# @prop multiple boolean Whether multiple items can be opened at once, default to `false` #}
+{# @prop multiple boolean Whether multiple items can be opened at once. Defaults to `false` #}
 {# @prop defaultValue string|array<string>|null Value(s) of the item(s) to open by default #}
-{# @prop orientation 'vertical'|'horizontal' The visual orientation, controls whether keyboard navigation uses up/down or left/right arrow keys, defaults to `vertical` #}
+{# @prop orientation 'vertical'|'horizontal' The visual orientation, controls whether keyboard navigation uses up/down or left/right arrow keys. Defaults to `vertical` #}
 {# @block content The accordion items, typically multiple `Accordion:Item` components #}
 {%- props id, multiple = false, defaultValue = null, orientation = 'vertical' -%}
 {%- set _accordion_id = id -%}
diff --git a/src/Toolkit/kits/shadcn/accordion/templates/components/Accordion/Item.html.twig b/src/Toolkit/kits/shadcn/accordion/templates/components/Accordion/Item.html.twig
@@ -1,6 +1,6 @@
 {# @prop value string Unique value for this accordion item #}
-{# @prop open boolean Whether the item is open by default, default to `false` #}
-{# @prop disabled boolean Whether the item is disabled, default to `false` #}
+{# @prop open boolean Whether the item is open by default. Defaults to `false` #}
+{# @prop disabled boolean Whether the item is disabled. Defaults to `false` #}
 {# @block content The item content, typically an `Accordion:Trigger` and `Accordion:Content` #}
 {%- props value, open = false, disabled = false -%}
 {%- set _accordion_item_is_open = open or (_accordion_default_value == value or (_accordion_default_value is iterable and value in defaultValue)) -%}
diff --git a/src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog/Action.html.twig b/src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog/Action.html.twig
@@ -1,4 +1,4 @@
-{# @prop variant 'default'|'secondary'|'destructive'|'outline'|'ghost'|'link' The button style variant, defaults to `default` #}
+{# @prop variant 'default'|'secondary'|'destructive'|'outline'|'ghost'|'link' The button style variant. Defaults to `default` #}
 {# @block content The action button label #}
 {%- props variant = 'default' -%}
 <twig:Button variant="{{ variant }}" {{ ...attributes }}>
diff --git a/src/Toolkit/kits/shadcn/alert/templates/components/Alert.html.twig b/src/Toolkit/kits/shadcn/alert/templates/components/Alert.html.twig
@@ -1,4 +1,4 @@
-{# @prop variant 'default'|'destructive' The visual style variant, defaults to `default` #}
+{# @prop variant 'default'|'destructive' The visual style variant. Defaults to `default` #}
 {# @block content The alert content, typically includes `Alert:Title` and `Alert:Description` #}
 {%- props variant = 'default' -%}
 {%- set style = html_cva(
diff --git a/src/Toolkit/kits/shadcn/avatar/templates/components/Avatar.html.twig b/src/Toolkit/kits/shadcn/avatar/templates/components/Avatar.html.twig
@@ -1,4 +1,4 @@
-{# @prop size 'default'|'sm'|'lg' The avatar size, defaults to `default` #}
+{# @prop size 'default'|'sm'|'lg' The avatar size. Defaults to `default` #}
 {# @block content The avatar content, typically an image or `Avatar:Fallback` #}
 {%- props size = 'default' -%}
 
diff --git a/src/Toolkit/kits/shadcn/badge/templates/components/Badge.html.twig b/src/Toolkit/kits/shadcn/badge/templates/components/Badge.html.twig
@@ -1,5 +1,5 @@
-{# @prop variant 'default'|'secondary'|'destructive'|'outline' The visual style variant, defaults to `default` #}
-{# @prop as 'div' The HTML tag to render, defaults to `div` #}
+{# @prop variant 'default'|'secondary'|'destructive'|'outline' The visual style variant. Defaults to `default` #}
+{# @prop as 'div' The HTML tag to render. Defaults to `div` #}
 {# @block content The badge label or content #}
 {%- props variant = 'default', as = 'div' -%}
 {%- set style = html_cva(
diff --git a/src/Toolkit/kits/shadcn/button-group/templates/components/ButtonGroup.html.twig b/src/Toolkit/kits/shadcn/button-group/templates/components/ButtonGroup.html.twig
@@ -1,4 +1,4 @@
-{# @prop orientation 'horizontal'|'vertical' The layout direction of the button group, defaults to `horizontal` #}
+{# @prop orientation 'horizontal'|'vertical' The layout direction of the button group. Defaults to `horizontal` #}
 {# @block content The grouped buttons and/or separators #}
 {%- props orientation = 'horizontal' -%}
 {%- set style = html_cva(
diff --git a/src/Toolkit/kits/shadcn/button-group/templates/components/ButtonGroup/Separator.html.twig b/src/Toolkit/kits/shadcn/button-group/templates/components/ButtonGroup/Separator.html.twig
@@ -1,4 +1,4 @@
-{# @prop orientation 'horizontal'|'vertical' The separator orientation, defaults to `vertical` #}
+{# @prop orientation 'horizontal'|'vertical' The separator orientation. Defaults to `vertical` #}
 {# @block content Optional custom separator content #}
 {%- props orientation = 'vertical' -%}
 <twig:Separator
diff --git a/src/Toolkit/kits/shadcn/button-group/templates/components/ButtonGroup/Text.html.twig b/src/Toolkit/kits/shadcn/button-group/templates/components/ButtonGroup/Text.html.twig
@@ -1,4 +1,4 @@
-{# @prop as 'div' The HTML tag to render, defaults to `div` #}
+{# @prop as 'div' The HTML tag to render. Defaults to `div` #}
 {# @block content The text content displayed in the button group #}
 {%- props as = 'div' -%}
 <{{ as }}
diff --git a/src/Toolkit/kits/shadcn/button/templates/components/Button.html.twig b/src/Toolkit/kits/shadcn/button/templates/components/Button.html.twig
@@ -1,6 +1,6 @@
-{# @prop variant 'default'|'secondary'|'destructive'|'outline'|'ghost'|'link' The visual style variant, defaults to `default` #}
-{# @prop size 'default'|'xs'|'sm'|'lg'|'icon'|'icon-xs'|'icon-sm'|'icon-lg' The button size, defaults to `default` #}
-{# @prop as 'button' The HTML tag to render, defaults to `button` #}
+{# @prop variant 'default'|'secondary'|'destructive'|'outline'|'ghost'|'link' The visual style variant. Defaults to `default` #}
+{# @prop size 'default'|'xs'|'sm'|'lg'|'icon'|'icon-xs'|'icon-sm'|'icon-lg' The button size. Defaults to `default` #}
+{# @prop as 'button' The HTML tag to render. Defaults to `button` #}
 {# @block content The button label and/or icon #}
 {%- props variant = 'default', size = 'default', as = 'button' -%}
 {%- set style = html_cva(
diff --git a/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog.html.twig b/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog.html.twig
@@ -1,4 +1,4 @@
-{# @prop open boolean Whether the dialog is open on initial render, defaults to `false` #}
+{# @prop open boolean Whether the dialog is open on initial render. Defaults to `false` #}
 {# @prop id string Unique identifier used to generate internal Dialog IDs #}
 {# @block content The dialog structure, typically includes `Dialog:Trigger` and `Dialog:Content` #}
 {%- props open = false, id -%}
diff --git a/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Content.html.twig b/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Content.html.twig
@@ -1,4 +1,4 @@
-{# @prop showCloseButton boolean Whether to display the close button in the top-right corner, defaults to `true` #}
+{# @prop showCloseButton boolean Whether to display the close button in the top-right corner. Defaults to `true` #}
 {# @block content The dialog content, typically includes `Dialog:Header` and optionally `Dialog:Footer` #}
 {%- props showCloseButton = true -%}
 
diff --git a/src/Toolkit/kits/shadcn/empty/templates/components/Empty/Media.html.twig b/src/Toolkit/kits/shadcn/empty/templates/components/Empty/Media.html.twig
@@ -1,4 +1,4 @@
-{# @prop variant 'default'|'icon' The media display style, defaults to `default` #}
+{# @prop variant 'default'|'icon' The media display style. Defaults to `default` #}
 {# @block content The visual element, typically an icon or illustration #}
 {%- props variant = 'default' -%}
 {%- set style = html_cva(
diff --git a/src/Toolkit/kits/shadcn/field/templates/components/Field.html.twig b/src/Toolkit/kits/shadcn/field/templates/components/Field.html.twig
@@ -1,4 +1,4 @@
-{# @prop orientation 'vertical'|'horizontal'|'responsive' The layout direction of the field, defaults to `vertical` #}
+{# @prop orientation 'vertical'|'horizontal'|'responsive' The layout direction of the field. Defaults to `vertical` #}
 {# @block content The field content, typically includes `Field:Label` and form input(s) #}
 {%- props orientation = 'vertical' -%}
 {%- set style = html_cva(
diff --git a/src/Toolkit/kits/shadcn/field/templates/components/Field/Error.html.twig b/src/Toolkit/kits/shadcn/field/templates/components/Field/Error.html.twig
@@ -1,4 +1,4 @@
-{# @prop errors array A list of error messages (strings or objects with a `message` property), defaults to `[]` #}
+{# @prop errors array A list of error messages (strings or objects with a `message` property). Defaults to `[]` #}
 {# @block content Custom error content, overrides the `errors` prop if provided #}
 {%- props errors = [] -%}
 {%- set slot_content -%}{%- block content %}{% endblock -%}{%- endset -%}
diff --git a/src/Toolkit/kits/shadcn/field/templates/components/Field/Legend.html.twig b/src/Toolkit/kits/shadcn/field/templates/components/Field/Legend.html.twig
@@ -1,4 +1,4 @@
-{# @prop variant 'legend'|'label' The text size variant, defaults to `legend` #}
+{# @prop variant 'legend'|'label' The text size variant. Defaults to `legend` #}
 {# @block content The legend text for a fieldset #}
 {%- props variant = 'legend' -%}
 {%- set style = html_cva(
diff --git a/src/Toolkit/kits/shadcn/input-group/templates/components/InputGroup/Addon.html.twig b/src/Toolkit/kits/shadcn/input-group/templates/components/InputGroup/Addon.html.twig
@@ -1,4 +1,4 @@
-{# @prop align 'inline-start'|'inline-end'|'block-start'|'block-end' The addon position relative to the input, defaults to `inline-start` #}
+{# @prop align 'inline-start'|'inline-end'|'block-start'|'block-end' The addon position relative to the input. Defaults to `inline-start` #}
 {# @block content The addon content, typically an icon or text #}
 {%- props align = 'inline-start' -%}
 {%- set style = html_cva(
diff --git a/src/Toolkit/kits/shadcn/input-group/templates/components/InputGroup/Button.html.twig b/src/Toolkit/kits/shadcn/input-group/templates/components/InputGroup/Button.html.twig
@@ -1,6 +1,6 @@
-{# @prop type 'button'|'submit' The button type, defaults to `button` #}
-{# @prop variant 'default'|'secondary'|'destructive'|'outline'|'ghost'|'link' The visual style variant, defaults to `ghost` #}
-{# @prop size 'default'|'sm'|'lg'|'icon'|'icon-sm'|'icon-lg' The button size, defaults to `xs` #}
+{# @prop type 'button'|'submit' The button type. Defaults to `button` #}
+{# @prop variant 'default'|'secondary'|'destructive'|'outline'|'ghost'|'link' The visual style variant. Defaults to `ghost` #}
+{# @prop size 'default'|'sm'|'lg'|'icon'|'icon-sm'|'icon-lg' The button size. Defaults to `xs` #}
 {# @block content The button label and/or icon #}
 {%- props type = 'button', variant = 'ghost', size = 'xs' -%}
 {%- set style = html_cva(
diff --git a/src/Toolkit/kits/shadcn/item/templates/components/Item.html.twig b/src/Toolkit/kits/shadcn/item/templates/components/Item.html.twig
@@ -1,6 +1,6 @@
-{# @prop variant 'default'|'outline'|'muted' The visual style variant, defaults to `default` #}
-{# @prop size 'default'|'sm' The item size, defaults to `default` #}
-{# @prop as 'div' The HTML tag to render, defaults to `div` #}
+{# @prop variant 'default'|'outline'|'muted' The visual style variant. Defaults to `default` #}
+{# @prop size 'default'|'sm' The item size. Defaults to `default` #}
+{# @prop as 'div' The HTML tag to render. Defaults to `div` #}
 {# @block content The item content, typically includes `Item:Media`, `Item:Content`, and/or `Item:Actions` #}
 {%- props variant = 'default', size = 'default', as = 'div' -%}
 {%- set style = html_cva(
diff --git a/src/Toolkit/kits/shadcn/item/templates/components/Item/Media.html.twig b/src/Toolkit/kits/shadcn/item/templates/components/Item/Media.html.twig
@@ -1,4 +1,4 @@
-{# @prop variant 'default'|'icon'|'image' The media display style, defaults to `default` #}
+{# @prop variant 'default'|'icon'|'image' The media display style. Defaults to `default` #}
 {# @block content The visual element, typically an icon or image #}
 {%- props variant = 'default' -%}
 {%- set style = html_cva(
diff --git a/src/Toolkit/kits/shadcn/item/templates/components/Item/Separator.html.twig b/src/Toolkit/kits/shadcn/item/templates/components/Item/Separator.html.twig
@@ -1,5 +1,5 @@
-{# @prop orientation 'horizontal'|'vertical' The separator orientation, defaults to `horizontal` #}
-{# @prop decorative bool Whether the separator is purely decorative (not semantic), defaults to `true` #}
+{# @prop orientation 'horizontal'|'vertical' The separator orientation. Defaults to `horizontal` #}
+{# @prop decorative bool Whether the separator is purely decorative (not semantic). Defaults to `true` #}
 {# @block content Optional custom separator content #}
 {%- props orientation = 'horizontal', decorative = true -%}
 <twig:Separator
diff --git a/src/Toolkit/kits/shadcn/pagination/templates/components/Pagination/Link.html.twig b/src/Toolkit/kits/shadcn/pagination/templates/components/Pagination/Link.html.twig
@@ -1,4 +1,4 @@
-{# @prop active boolean Whether this is the current page, defaults to `false` #}
+{# @prop active boolean Whether this is the current page. Defaults to `false` #}
 {# @block content The page number or navigation icon #}
 {%- props active = false -%}
 <twig:Button
diff --git a/src/Toolkit/kits/shadcn/progress/templates/components/Progress.html.twig b/src/Toolkit/kits/shadcn/progress/templates/components/Progress.html.twig
@@ -1,4 +1,4 @@
-{# @prop value integer The progress percentage (0-100), defaults to `0` #}
+{# @prop value integer The progress percentage (0-100). Defaults to `0` #}
 {%- props value = 0 -%}
 <div
     class="{{ 'relative h-4 w-full overflow-hidden rounded-full bg-secondary ' ~ attributes.render('class')|tailwind_merge }}"
diff --git a/src/Toolkit/kits/shadcn/separator/templates/components/Separator.html.twig b/src/Toolkit/kits/shadcn/separator/templates/components/Separator.html.twig
@@ -1,5 +1,5 @@
-{# @prop orientation 'horizontal'|'vertical' The separator orientation, defaults to `horizontal` #}
-{# @prop decorative boolean Whether the separator is purely decorative (not semantic), defaults to `true` #}
+{# @prop orientation 'horizontal'|'vertical' The separator orientation. Defaults to `horizontal` #}
+{# @prop decorative boolean Whether the separator is purely decorative (not semantic). Defaults to `true` #}
 {%- props orientation = 'horizontal', decorative = true -%}
 {%- set style = html_cva(
     base: 'shrink-0 bg-border',
diff --git a/src/Toolkit/kits/shadcn/tooltip/templates/components/Tooltip.html.twig b/src/Toolkit/kits/shadcn/tooltip/templates/components/Tooltip.html.twig
@@ -1,5 +1,5 @@
 {# @prop id string Unique identifier for the tooltip #}
-{# @prop delayDuration number Delay in milliseconds before showing the tooltip, defaults to `0` #}
+{# @prop delayDuration number Delay in milliseconds before showing the tooltip. Defaults to `0` #}
 {# @block content The tooltip structure, typically includes `Tooltip:Trigger` and `Tooltip:Content` #}
 {%- props id, delayDuration = 0 -%}
 {%- set _tooltip_id = id -%}
diff --git a/src/Toolkit/kits/shadcn/tooltip/templates/components/Tooltip/Content.html.twig b/src/Toolkit/kits/shadcn/tooltip/templates/components/Tooltip/Content.html.twig
@@ -1,5 +1,5 @@
-{# @prop side 'top'|'right'|'bottom'|'left' The preferred side to display the tooltip, defaults to `top` #}
-{# @prop sideOffset number The distance in pixels from the trigger, defaults to `0` #}
+{# @prop side 'top'|'right'|'bottom'|'left' The preferred side to display the tooltip. Defaults to `top` #}
+{# @prop sideOffset number The distance in pixels from the trigger. Defaults to `0` #}
 {# @block content The tooltip text or content #}
 {%- props side = 'top', sideOffset = 0 -%}
 

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		-{# @prop variant 'default'\|'secondary'\|'destructive'\|'outline'\|'ghost'\|'link' The button style variant, defaults to `default` #}
	`1`	+{# @prop variant 'default'\|'secondary'\|'destructive'\|'outline'\|'ghost'\|'link' The button style variant. Defaults to `default` #}
`2`	`2`	`{# @block content The action button label #}`
`3`	`3`	`{%- props variant = 'default' -%}`
`4`	`4`	`<twig:Button variant="{{ variant }}" {{ ...attributes }}>`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		-{# @prop variant 'default'\|'destructive' The visual style variant, defaults to `default` #}
	`1`	+{# @prop variant 'default'\|'destructive' The visual style variant. Defaults to `default` #}
`2`	`2`	{# @block content The alert content, typically includes `Alert:Title` and `Alert:Description` #}
`3`	`3`	`{%- props variant = 'default' -%}`
`4`	`4`	`{%- set style = html_cva(`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		-{# @prop size 'default'\|'sm'\|'lg' The avatar size, defaults to `default` #}
	`1`	+{# @prop size 'default'\|'sm'\|'lg' The avatar size. Defaults to `default` #}
`2`	`2`	{# @block content The avatar content, typically an image or `Avatar:Fallback` #}
`3`	`3`	`{%- props size = 'default' -%}`
`4`	`4`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		-{# @prop orientation 'horizontal'\|'vertical' The layout direction of the button group, defaults to `horizontal` #}
	`1`	+{# @prop orientation 'horizontal'\|'vertical' The layout direction of the button group. Defaults to `horizontal` #}
`2`	`2`	`{# @block content The grouped buttons and/or separators #}`
`3`	`3`	`{%- props orientation = 'horizontal' -%}`
`4`	`4`	`{%- set style = html_cva(`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		-{# @prop as 'div' The HTML tag to render, defaults to `div` #}
	`1`	+{# @prop as 'div' The HTML tag to render. Defaults to `div` #}
`2`	`2`	`{# @block content The text content displayed in the button group #}`
`3`	`3`	`{%- props as = 'div' -%}`
`4`	`4`	`<{{ as }}`