Skip to content

[Toolkit][Shadcn] Add attachment recipe - #3869

Open
ker0x wants to merge 1 commit into
symfony:3.xfrom
ker0x:feat/toolkit-shadcn-attachment
Open

ker0x wants to merge 1 commit into
symfony:3.xfrom
ker0x:feat/toolkit-shadcn-attachment

Conversation

@ker0x

@ker0x ker0x commented Sep 14, 2026

Copy link
Copy Markdown
Contributor
Q A
Bug fix? no
New feature? yes
Deprecations? no
Documentation? yes
Issues Part of #3233
License MIT

Adds the attachment recipe to the Shadcn kit, porting Shadcn's Attachment component: a file or image attachment with media, metadata, upload state and actions.

It ships the root component plus Media, Content, Title, Description, Actions, Action, Trigger and Group sub-components. No Stimulus controller — the component is purely presentational upstream.

<twig:Attachment state="uploading">
    <twig:Attachment:Media>
        <twig:Spinner />
    </twig:Attachment:Media>
    <twig:Attachment:Content>
        <twig:Attachment:Title>sales-dashboard.pdf</twig:Attachment:Title>
        <twig:Attachment:Description>Uploading · 64%</twig:Attachment:Description>
    </twig:Attachment:Content>
    <twig:Attachment:Actions>
        <twig:Attachment:Action aria-label="Cancel upload">
            <twig:ux:icon name="lucide:x" />
        </twig:Attachment:Action>
    </twig:Attachment:Actions>
</twig:Attachment>

All 6 upstream examples are reused as live-preview blocks in the recipe README.md (hero, Image, States, Sizes, Group, Trigger), plus the RTL section.

Notes for reviewers

Upstream paths moved. apps/v4/styles/radix-nova/ui/ no longer exists and ui-rtl/ is gone entirely. Classes here come from registry/new-york-v4/ui/attachment.tsx, which I verified is the flattened equivalent of registry/bases/radix/ui/attachment.tsx plus its cn-attachment* classes expanded from registry/styles/style-nova.css.

Three upstream utilities are substituted. shimmer, scroll-fade-x and scrollbar-none are defined in packages/shadcn/src/tailwind.css, which the kit does not ship — the kit pins shadcn/dist/tailwind.css 4.6.0, which defines none of the three. Following the scroll-area precedent of substituting stock Tailwind:

Upstream Here Why
scrollbar-none no-scrollbar The pinned 4.6.0 baseline does define this one
shimmer animate-pulse on the title while uploading/processing The original needs @property, @keyframes and background-clip: text
scroll-fade-x omitted The scroll-driven original needs keyframes absent from the baseline; a static mask would clip the edge cards when unscrolled

Happy to revisit if you'd rather bump the pinned shadcn CSS package instead — that's a kit-wide change so I kept it out of this PR.

Attachment:Trigger takes an as prop (like Button and Item) rather than exposing an attachment_trigger_attrs bag, since it carries no behaviour of its own — it is a positioned overlay. It composes with Dialog:Trigger as <twig:Attachment:Trigger {{ ...dialog_trigger_attrs }} />, which the Trigger example exercises. type="button" is only emitted when it actually renders a <button>.

Also adds 5 lucide icon fixtures (file-code, file-search, file-text, file-warning, table) needed by the examples.

Checks

  • bin/ux-toolkit-kit-lint --fail-on-warning kits/shadcn clean
  • twig-cs-fixer, oxfmt --check, php-cs-fixer check clean
  • Snapshots regenerated and committed; no orphans
  • Full Toolkit suite green apart from a pre-existing common/post-link snapshot failure (an attribute-quoting difference on PHP 8.5, fails identically on a clean 3.x)

Ports Shadcn's Attachment component: root plus Media, Content, Title,
Description, Actions, Action, Trigger and Group sub-components. No Stimulus
controller, the component is purely presentational upstream.

Classes are taken from registry/new-york-v4/ui/attachment.tsx, which is the
flattened equivalent of registry/bases/radix plus its cn-attachment* classes
expanded from style-nova.css.

Three upstream utilities are defined in packages/shadcn/src/tailwind.css, which
the kit does not ship, so they are substituted (following the scroll-area
precedent of using stock Tailwind instead):

 * scrollbar-none -> no-scrollbar, which the pinned shadcn 4.6.0 baseline does
   define
 * shimmer -> animate-pulse on the title while uploading/processing
 * scroll-fade-x -> omitted; the scroll-driven original needs keyframes absent
   from the baseline, and a static mask would clip the edge cards when unscrolled
@ker0x
ker0x requested a review from Kocal as a code owner September 14, 2026 00:04
@carsonbot carsonbot added Status: Needs Review Needs to be reviewed Documentation Improvements or additions to documentation Feature New Feature Toolkit labels Sep 14, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Documentation Improvements or additions to documentation Feature New Feature Status: Needs Review Needs to be reviewed Toolkit

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants