{sourceCopy}
Just shipped a new feature! 🚀
', +}); + +const freeformTextPost = make({ + id: 'glass-freeform-text', + title: 'A text-only markdown post', + source: mockSquadSource, + type: PostType.Freeform, + image: undefined, + contentHtml: + 'This freeform post has no cover image, so the glass bar floats over the bottom of the text — which blurs through the glass.
', +}); + +const pollPost = make({ + id: 'glass-poll', + title: 'What is your favorite programming language for 2024?', + source: mockSquadSource, + type: PostType.Poll, + pollOptions: [ + { id: 'opt-1', text: 'JavaScript', order: 1, numVotes: 45 }, + { id: 'opt-2', text: 'Python', order: 2, numVotes: 32 }, + { id: 'opt-3', text: 'TypeScript', order: 3, numVotes: 28 }, + ], + endsAt: '2026-01-22T10:30:00.000Z', + numPollVotes: 105, +}); + +const heroPost = make({ + id: 'glass-hero', + title: 'The breakthrough that is reshaping how teams ship software in 2024', + summary: + 'A deep look at the tooling shift moving teams from manual release trains to fully automated, observable delivery pipelines.', + numUpvotes: 842, + numComments: 96, + hero: { significance: 'major' }, +}); + +const actionHandlers = { + onPostClick: fn(), + onPostAuxClick: fn(), + onUpvoteClick: fn(), + onDownvoteClick: fn(), + onCommentClick: fn(), + onBookmarkClick: fn(), + onCopyLinkClick: fn(), + onShare: fn(), + onReadArticleClick: fn(), +}; + +const gridContainerStyle = { + '--num-cards': 3, + '--feed-gap': '2rem', +} as React.CSSProperties; + +const GlassActionsGrid = () => ( +
+ One iOS-26-style liquid-glass pill holds the real action buttons at all
+ times. At rest it hugs only the actions with engagement — upvote is
+ always shown (even at zero) as the affordance, comments only when there
+ are any; hover a card and the same pill stretches to
+ full width while the remaining actions materialize inside it (no
+ cross-fade, the anchored icons never move). Expansion is suppressed
+ while the feed is scrolling, so cards expand on a resting hover but never
+ as they pass under the cursor mid-scroll. On touch devices the full bar
+ is always shown. Gated by the{' '}
+ feed_card_glass_actions{' '}
+ GrowthBook flag (on by default in this mock-up). Toggle Storybook's
+ light/dark theme to see both.
+
+ Every post type gets the floating bar. Shared-to-squad, collection and + image freeform cards float it over their cover image; the text-only + markdown post floats it over the bottom of the content (which blurs + through the glass); the poll reserves a little space at the bottom so it + never covers the vote options. (Storybook force-enables the separate + shared-post-preview experiment, so the share card here shows its preview + layout with the inline bar; with that experiment off — the default — a + shared-to-squad post uses the cover image and gets the glass bar.) +
++ The wide hero card keeps its bar on the content (left) side — not over + the cover image — and shrinks to the same glass height, so a row mixing + a hero with regular cards lines up at one (shorter) height instead of + the hero forcing the row taller. +
+