[6.x] Add form callout padding and grid spanning

.github/workflows/storybook.yml

@@ -57,10 +57,10 @@ jobs:
 
       - name: Compute cache key
         id: cache-key
-        # Keep this in sync with .github/workflows/js-ci.yml so the built assets
-        # and generated files are shared between the two workflows.
+        # Keep this separate from frontend CI so deployment jobs do not race
+        # another workflow saving the same cache.
         run: |
-          echo "value=js-ci-v4-${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml', 'pnpm-workspace.yaml', 'composer.lock', 'package.json', 'packages/*/package.json', 'packages/craftcms-ui/src/**', 'packages/craftcms-ui/tsconfig*.json', 'packages/craftcms-ui/vite.config.*', 'packages/craftcms-ui/tsdown.config.*', 'packages/craftcms-garnish/src/**', 'packages/craftcms-garnish/tsconfig*.json', 'packages/craftcms-garnish/vite.config.*', 'routes/**/*.php', 'src/**/*.php', 'workbench/**/*.php') }}" >> "$GITHUB_OUTPUT"
+          echo "value=storybook-v1-${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml', 'pnpm-workspace.yaml', 'composer.lock', 'package.json', 'packages/*/package.json', 'packages/craftcms-ui/src/**', 'packages/craftcms-ui/tsconfig*.json', 'packages/craftcms-ui/vite.config.*', 'packages/craftcms-ui/tsdown.config.*', 'packages/craftcms-garnish/src/**', 'packages/craftcms-garnish/tsconfig*.json', 'packages/craftcms-garnish/vite.config.*', 'routes/**/*.php', 'src/**/*.php', 'workbench/**/*.php') }}" >> "$GITHUB_OUTPUT"
 
       - name: Restore install + build + generated cache
         id: cache

CHANGELOG.md

@@ -32,6 +32,8 @@
 - Added the `--c-thumbnail-image-radius` custom property to `<craft-thumbnail>`, and its other custom properties can now be set on an ancestor. ([#19758](https://github.com/craftcms/cms/pull/19758))
 - Content in `<craft-chip>`’s `prefix` slot no longer replaces its thumbnail, icon, and status; it’s shown before them. ([#19758](https://github.com/craftcms/cms/pull/19758))
 - Migrated the reassign entries, replace relations, and replace references modals to the Form API. ([#19589](https://github.com/craftcms/cms/pull/19589))
+- Added `CraftCms\Cms\Form\Nodes\Callout::padding()`, supported by PHP and Vue form rendering. ([#19773](https://github.com/craftcms/cms/pull/19773))
+- Fixed a bug where `<craft-callout>` boxes didn’t span all columns in grid layouts. ([#19773](https://github.com/craftcms/cms/pull/19773))
 - Restored Score sorting for element index searches and preserved previous sort fields as tie-breakers. ([#19731](https://github.com/craftcms/cms/pull/19731))
 - Fixed a bug where the Edit and View bulk actions did nothing on element indexes. ([#19747](https://github.com/craftcms/cms/pull/19747))
 - Fixed a bug where visually-hidden labels, headings, and status messages were visible on some control panel pages.

packages/craftcms-ui/src/components/callout/callout.styles.ts

@@ -7,12 +7,6 @@ export default css`
 
   .callout {
     --_radius: var(--c-callout-radius, var(--c-radius-md));
-    /*
-      The two axes are declared separately so the padding attribute can write
-      either one on its own. These fallbacks are what a callout with no padding
-      renders with; the inline gap to the text is finished by the padding on
-      the icon, title, and description.
-    */
     --_callout-padding-block: var(
       --c-callout-padding-block,
       var(--c-spacing-sm)
@@ -28,6 +22,8 @@ export default css`
     padding-block: var(--_callout-padding-block);
     padding-inline: var(--_callout-padding-inline);
     border: 1px solid transparent;
+    /* The display: contents host cannot take a grid span, so its rendered box does. */
+    grid-column: 1 / -1;
   }
 
   .callout--title {

resources/js/modules/forms/CalloutNode.vue

@@ -9,6 +9,7 @@
       html: string;
       variant: string;
       appearance?: string;
+      padding?: string | number;
       icon?: string;
       dismissible: boolean;
       width: number;
@@ -35,7 +36,12 @@
     :class="`width-${node.props.width}`"
     :data-form-node="node.uid"
     :variant="node.props.variant"
-    v-bind="node.props.appearance ? {appearance: node.props.appearance} : {}"
+    v-bind="{
+      ...(node.props.appearance ? {appearance: node.props.appearance} : {}),
+      ...(node.props.padding !== undefined
+        ? {padding: node.props.padding}
+        : {}),
+    }"
     :icon="node.props.icon"
     :data-dismissible="node.props.dismissible || undefined"
   >

src/Form/Nodes/Callout.php

@@ -23,6 +23,8 @@ class Callout implements Node
 
     private ?string $appearance = null;
 
+    private string|int|null $padding = null;
+
     private ?string $icon = null;
 
     private bool $dismissible = false;
@@ -40,6 +42,7 @@ public static function renderHtml(NodePayload $node, FormPayload $payload, FormH
             ->variant($node->props['variant'])
             ->appearance($node->props['appearance'] ?? null)
             ->icon($node->props['icon'] ?? null)
+            ->padding($node->props['padding'] ?? null)
             ->content(new HtmlString($node->props['html']))
             ->attributes([
                 'class' => ["width-{$node->props['width']}"],
@@ -68,6 +71,13 @@ public function appearance(?string $appearance): static
         return $this;
     }
 
+    public function padding(string|int|null $padding): static
+    {
+        $this->padding = $padding;
+
+        return $this;
+    }
+
     public function icon(?string $icon): static
     {
         $this->icon = $icon;
@@ -108,6 +118,7 @@ public function props(): array
                 'appearance' => $this->appearance,
                 'icon' => $this->icon,
             ], fn (?string $value): bool => $value !== null),
+            ...($this->padding !== null ? ['padding' => $this->padding] : []),
             'dismissible' => $this->dismissible,
             'width' => $this->width,
         ];