Add FloatingActionButton component#59
Merged
Merged
Conversation
…itions, and extended-label mode Introduces a new FloatingActionButton component (Material-style FAB) for pinned primary actions. Supports five color variants (primary, secondary, destructive, outline, brand), three sizes, four fixed positions plus a static mode, and an extended layout when a label is provided. Includes a Storybook story showcasing all variants, sizes, an extended showcase, and a pinned-to-container example.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…precated forwardRef React 19 supports passing `ref` directly through component props, making `forwardRef` unnecessary. Refactored FloatingActionButton to accept `ref` as a prop and dropped the `forwardRef` wrapper, matching the pattern already used elsewhere in the package (e.g. Banner).
…yground container The interactive playground claimed the FAB was "rendered inside this container" but the FAB uses position: fixed, so it actually anchored to the Storybook viewport instead. Updated the playground wrapper to act as a stand-in viewport: it now has overflow-hidden, and when a non-static position is selected the FAB is overridden to position: absolute so it pins to the demo box's corners. Reworded the description to accurately explain the behavior (fixed in real apps, absolute here for visualization).
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.
Summary
Introduces a new
FloatingActionButtoncomponent to the UI library with comprehensive styling variants, sizes, and positioning options. The component supports both icon-only and extended (icon + label) layouts.Changes
New Component:
FloatingActionButtonwith the following features:primary,secondary,destructive,outline,brandsm,default,lgbottom-right,bottom-left,top-right,top-left,staticlabelprop is providediconproparia-labelsupportasChildprop for composing with Link components via Radix SlotStorybook Stories: Comprehensive story file with:
Exports: Updated
src/components/ui/index.tsto export the new component and typesVersion Bump: Updated package.json from
0.55.0to0.56.0Implementation Details
class-variance-authority(cva) for variant management with compound variants for extended layout sizingSlotcomponent for flexible composition"use client"directive and explicit return typeshttps://claude.ai/code/session_012VroEKSgkYF7cKQu9g66cr