[render preview] [Feature] Add Bubble component#445
Merged
Conversation
Port the shadcn Bubble component: a chat bubble surface with 7 variants (default, secondary, muted, tinted, outline, ghost, destructive), start/end alignment, grouping, and edge-anchored reactions. - Translates shadcn's cn-bubble-* CSS layer to real Tailwind v4 utilities and RubyUI theme tokens (no custom CSS shipped). - BubbleContent is polymorphic via as: (:div/:a/:button) for link/button bubbles — the idiomatic Phlex equivalent of shadcn's asChild. - No JS. Composes with Tooltip/Popover (docs examples included). Docs page, route, controller, menu entry and site_files updated.
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
djalmaaraujo
added a commit
that referenced
this pull request
Jun 30, 2026
Port the shadcn Message component: the higher-level chat layout that pairs an avatar with bubbles, headers, and footers. Built on top of Bubble (#445). - 6 parts: Message (align start/end), MessageGroup, MessageAvatar, MessageContent, MessageHeader, MessageFooter. - Reuses the existing Avatar and the new Bubble components — no new primitives. Bubble alignment inside a message is driven by Message via group-data-[align=end]/message; Bubble itself is unchanged. - Translates shadcn's cn-message-* CSS layer to Tailwind v4 utilities. - dependencies.yml: message depends on Avatar + Bubble. Closes #444. Docs page, route, controller, menu entry and site_files updated.
Collapse the duplicated [&_button]/[&_a] pairs into [&:is(button,a)] selectors targeting the content element itself (the polymorphic as: :button/:a case), matching the variant hover selectors. Halves the class string with identical behavior.
djalmaaraujo
added a commit
that referenced
this pull request
Jun 30, 2026
Port the shadcn Message component: the higher-level chat layout that pairs an avatar with bubbles, headers, and footers. Built on top of Bubble (#445). - 6 parts: Message (align start/end), MessageGroup, MessageAvatar, MessageContent, MessageHeader, MessageFooter. - Reuses the existing Avatar and the new Bubble components — no new primitives. Bubble alignment inside a message is driven by Message via group-data-[align=end]/message; Bubble itself is unchanged. - Translates shadcn's cn-message-* CSS layer to Tailwind v4 utilities. - dependencies.yml: message depends on Avatar + Bubble. Closes #444. Docs page, route, controller, menu entry and site_files updated.
djalmaaraujo
changed the title
djalmaaraujo
requested a deployment
to
feat/bubble-component - web-1 PR #445
Render
In progress
djalmaaraujo
temporarily deployed
to
feat/bubble-component - web-1 PR #445
Render
Destroyed
djalmaaraujo
added a commit
that referenced
this pull request
Jun 30, 2026
Port the shadcn Message component: the higher-level chat layout that pairs an avatar with bubbles, headers, and footers. Built on top of Bubble (#445). - 6 parts: Message (align start/end), MessageGroup, MessageAvatar, MessageContent, MessageHeader, MessageFooter. - Reuses the existing Avatar and the new Bubble components — no new primitives. Bubble alignment inside a message is driven by Message via group-data-[align=end]/message; Bubble itself is unchanged. - Translates shadcn's cn-message-* CSS layer to Tailwind v4 utilities. - dependencies.yml: message depends on Avatar + Bubble. Closes #444. Docs page, route, controller, menu entry and site_files updated.
cirdes
approved these changes
Jun 30, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Ports the shadcn Bubble component to RubyUI — a chat bubble surface for conversational content.
Reference:
apps/v4/registry/bases/radix/ui/bubble.tsxWhat's included
Bubble— root,variant:(default, secondary, muted, tinted, outline, ghost, destructive) andalign:(start/end)BubbleContent— content wrapper; polymorphic viaas:(:divdefault,:a,:button) for link/button bubbles — the idiomatic Phlex equivalent of shadcn'sasChildBubbleReactions— edge-anchored reactions pill,side:(top/bottom) +align:(start/end)BubbleGroup— stacks bubbles with tight spacingNotes
cn-bubble-*CSS layer. This port translates every rule to real Tailwind v4 utilities + RubyUI theme tokens, so no custom CSS is shipped.dependencies.ymlentry (Bubble has no gem/JS/component deps, like Avatar/Card).Testing
cd gem && bundle exec rake→ tests + StandardRB green./docs/bubble: all 7 variants, alignment, reactions (top/bottom × start/end), group, link/button hover states, and Tooltip/Popover integration verified visually.Screenshots
Add before/after screenshots of
/docs/bubble.Summary by cubic
Add a chat Bubble component to RubyUI for conversational UIs with 7 variants, alignment, grouping, reactions, docs, tests, and
mcpregistry entries. Built with Tailwind v4 utilities and RubyUI tokens—no custom CSS or JS.New Features
RubyUI::Bubblewith variants: default, secondary, muted, tinted, outline, ghost, destructive;align: :start|:end.RubyUI::BubbleContentpolymorphic viaas: :div|:a|:buttonfor link/button bubbles.RubyUI::BubbleReactionspill anchored to the bubble edge;side: :top|:bottom,align: :start|:end.RubyUI::BubbleGroupto stack bubbles with tight spacing./docs/bubblewith examples and Tooltip/Popover integration; routes, menu, sitemap, and LLMs maps updated.mcpregistry to include Bubble metadata and examples.Bug Fixes
BubbleContentinteractive selectors to&:is(button,a)to match variant hover rules and reduce class noise without changing behavior.Written for commit 1ae9145. Summary will update on new commits.