From b203b3d1f4bc3171804510682c5d1f33b85783ff Mon Sep 17 00:00:00 2001 From: Rias Date: Thu, 1 Oct 2026 10:13:11 +0200 Subject: [PATCH 1/3] Add form callout padding and grid spanning Co-authored-by: Nathaniel Hammond --- CHANGELOG.md | 2 ++ .../src/components/callout/callout.styles.ts | 8 ++------ resources/js/modules/forms/CalloutNode.vue | 8 +++++++- src/Form/Nodes/Callout.php | 11 +++++++++++ 4 files changed, 22 insertions(+), 7 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3adee70813c..637293c3d18 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -32,6 +32,8 @@ - Added the `--c-thumbnail-image-radius` custom property to ``, and its other custom properties can now be set on an ancestor. ([#19758](https://github.com/craftcms/cms/pull/19758)) - Content in ``’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. ([#19665](https://github.com/craftcms/cms/pull/19665)) +- Fixed a bug where `` boxes didn’t span all columns in grid layouts. ([#19665](https://github.com/craftcms/cms/pull/19665)) - 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. diff --git a/packages/craftcms-ui/src/components/callout/callout.styles.ts b/packages/craftcms-ui/src/components/callout/callout.styles.ts index 5016ac17912..a53e56d2793 100644 --- a/packages/craftcms-ui/src/components/callout/callout.styles.ts +++ b/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 { diff --git a/resources/js/modules/forms/CalloutNode.vue b/resources/js/modules/forms/CalloutNode.vue index dbe90703895..ccf0f86d76b 100644 --- a/resources/js/modules/forms/CalloutNode.vue +++ b/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" > diff --git a/src/Form/Nodes/Callout.php b/src/Form/Nodes/Callout.php index 5b2f012cd18..0ef300b1e89 100644 --- a/src/Form/Nodes/Callout.php +++ b/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, ]; From 106233b0b0cbc6be8d5040e7e104d6037674162c Mon Sep 17 00:00:00 2001 From: Rias Date: Thu, 1 Oct 2026 10:13:25 +0200 Subject: [PATCH 2/3] Reference callout extraction PR in changelog Co-authored-by: Nathaniel Hammond --- CHANGELOG.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 637293c3d18..186b4b95126 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -32,8 +32,8 @@ - Added the `--c-thumbnail-image-radius` custom property to ``, and its other custom properties can now be set on an ancestor. ([#19758](https://github.com/craftcms/cms/pull/19758)) - Content in ``’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. ([#19665](https://github.com/craftcms/cms/pull/19665)) -- Fixed a bug where `` boxes didn’t span all columns in grid layouts. ([#19665](https://github.com/craftcms/cms/pull/19665)) +- 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 `` 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. From e3e56286e325a54fbbfd92c9e79c0ca87db5b853 Mon Sep 17 00:00:00 2001 From: Rias Date: Thu, 1 Oct 2026 10:18:57 +0200 Subject: [PATCH 3/3] Separate Storybook cache from frontend CI Co-authored-by: Nathaniel Hammond --- .github/workflows/storybook.yml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/.github/workflows/storybook.yml b/.github/workflows/storybook.yml index 0695456fef0..1d6060ab862 100644 --- a/.github/workflows/storybook.yml +++ b/.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