Changelog
Fluid 2.1: Theme provider changes
Fluid 2.1 introduces a refactor to the FluidProvider component, making it polymorphic and eliminating internal reliance on React.cloneElement.
Polymorphic FluidProviderBreaking
The FluidProvider component is now polymorphic and renders as an HTML <body> element by default. This means you should no longer wrap a <body> tag inside <FluidProvider>. Instead, place <FluidProvider> directly inside your <html> element in your root layout.
1
2
3
4
5
6
7
8
9
import { FluidProvider } from '@infinityfx/fluid';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return <html>
<FluidProvider>
{children}
</FluidProvider>
</html>;
}
If your framework or setup does not allow manually rendering a <body> tag, you can use the as prop to render FluidProvider as a different element, such as a <div>.
1
2
3
4
5
6
7
import { FluidProvider } from '@infinityfx/fluid';
export default function App() {
return <FluidProvider as="div">
Hello world!
</FluidProvider>;
}
Introducing Fluid 2.0
Fluid 2.0 introduces powerful new components like Card, Gradient, TimeField, Dial and Empty, complete refactors of core UI elements such as Interactable, Modal, Indicator, and Ticker, alongside an updated theming engine with utility class support. Below is a complete guide to all new features, refactored APIs, and breaking changes when upgrading from v1.5.0 to v2.0.0.
Theming & config changes
Theme color changesBreaking
Fluid 2.0 changes the way certain fore- and background colors are defined and used. There is now a new surface color palette entry, which replaces the now removed fg entry. In addition a new highlight color has also been introduced, which applies to interactable elements.
1
2
3
4
5
6
7
8
9
10
module.exports = {
theme: {
palettes: {
light: {
surface: ['#ffffff', '#f2edeb', '#ede6e4'],
highlight: ['#f7f7f7', '#c7c7c7', '#414141']
}
}
}
};
New config optionNew
Your fluid.config.(m)js file now supports a includeUtilityClasses option, which when set to true will include color and shadow CSS utility classes in your bundle. The color classes are synonyms of the colors defined in the currently active palette/theme and come in both a text and background color variant.
1
2
<div className="cl-primary-100" /> {/* Applies to the (text) color attribute */}
<div className="bg-primary-100" /> {/* Applies to the background-color attribute */}
Additionally the classes() utility function includes type-hinting and autocomplete for these CSS classes when includeUtilityClasses = true.
1
<div className={classes('bg-surface-100', 'cl-text-100')} />New components
GradientNew
Allows for easy definition of beautiful gradients, with support for mesh gradients and the addition of noise. The Gradient component includes support for linear, radial and mesh gradients. Additionally type="mesh" gradients can have a warping effect applied to further dial in your desired look.
EmptyNew
Displays an empty state container for communicating zero-data or initial setup states. Supports a title, message, custom icon, and optional action buttons as children.
CardNew
Introduced Card, a versatile composable container component that replaces the now removed Frame component. It features subcomponents including CardContent, CardHeader, and CardBackdrop for flexible section layout, elevation, and backdrop fading.
DialNew
Displays an infinite circular number input. Allows for adjusting rows and rowHeight, as well as, setting min, max and step values.
TimeFieldNew
An input component designed for selecting or entering time values in a 24-hour or 12-hour format.
Updated components
Frame replaced by CardBreaking
The Frame component has been removed in favor of the new Card component, which is able to handle all the functionality that Frame did and more.
Halo refactored to InteractableNewBreaking
Replaced the overlay highlighting component Halo with Interactable. Interactable serves as the core overlay highlighting component, handling hover, focus, active states, and ripple click animations across interactive elements.
The new Interactable component now works as a polymorphic component, meaning the component itself renders as the highlight container. By default it will render as an HTML button element, however, this can be customized using the new as prop. In addition to this, some of the old Halo props have been renamed:
hover has been replaced by noHover.
color has been renamed to highlightColor.
target has been renamed to interactTarget and is now able to take in an HTMLElement type directly.
Modal reworkBreaking
Split the monolithic Modal component into separate subcomponents for modular design flexibility. Close button controls, titles, and layout structures are now handled by ModalContent instead of the root component.
1
2
3
4
5
6
7
8
9
10
import { ModalRoot, ModalContent, ModalFooter } from '@infinityfx/fluid';
<ModalRoot>
<ModalContent title="Modal Title">
Modal body content.
</ModalContent>
<ModalFooter>
<Button>Close</Button>
</ModalFooter>
</ModalRoot>
Indicator reworkBreaking
Similarly to the Modal component, the Indicator component has been split into IndicatorRoot and IndicatorBadge. This enables correct relative container positioning for badge labels.
1
2
3
4
5
6
import { IndicatorRoot, IndicatorBadge } from '@infinityfx/fluid';
<IndicatorRoot position="top">
<Avatar src="..." />
<IndicatorBadge>Online</IndicatorBadge>
</IndicatorRoot>
The content prop has been removed; badge content must now be passed directly as standard React children.
Toggle multi-state supportBreaking
Reworked the Toggle component to support cycling through two or more states sequentially. Passing multiple elements in children will configure the toggle as a multi-state switch. Additionally added a new transition prop, which allows switching from the default 'slide' animation, to a 'morph' animation.
To support the new multi-cycling, the old checkedContent prop has been removed.
Button variants & icon supportBreaking
Reworked the variant styling options and icon padding scaling. The variant option 'light' has been renamed to 'inverted', and a new 'muted' variant style has been introduced.
Button polymorphic renderingNew
Additionally, the button now features automated padding scaling using the hasIcon prop when icons are present.
The Button component also exposes a new as prop, allowing it to render as different elements or components.
Accordion redesignBreaking
The variant option 'isolated' has been renamed to 'neutral'. Furthermore, both the 'minimal' and 'neutral' variants have been slightly redesigned.
Ticker reworkNewBreaking
Updated the Ticker component with new animation options and prop adjustments:
The content for Ticker must now be passed through the value prop instead of children.
Added a new fadeEdges prop to apply a subtle fade effect along the top and bottom edges.
Added a new interpolateNumbers prop to animate intermediate numbers between transitions.
Added a new lineHeight prop for controlling line height.
The align prop has been removed.
Miscellaneous
Subcomponent export structureBreaking
Restructured component entrypoints to export subcomponents flatly rather than namespace them on a compound default export object. This change affects the Accordion, ActionMenu, Combobox, Indicator, Modal, NavigationMenu, Popover and Sidebar components.
1
2
3
4
5
6
7
8
9
10
11
12
13
// --- Old ---
import { Popover } from '@infinityfx/fluid';
<Popover.Root>
...
</Popover.Root>
// --- New ---
import { PopoverRoot, PopoverContent, PopoverTrigger } from '@infinityfx/fluid';
<PopoverRoot>
...
</PopoverRoot>
Calendar redesign
Updated the Calendar component to improve the year selection flow, which now utilizes the new Dial component.
Table redesign & minimal variantNew
Redesigned the Table component, introducing a new 'minimal' variant style alongside support for the maxColumnWidth property.
Textarea changesNew
Added support for auto-growing heights based on text content via resize="auto".
Added a new 'minimal' variant style.
Scrollarea changesBreaking
Standardized direction properties of the Scrollarea component, replacing the horizontal boolean prop with a new direction="vertical" | "horizontal" prop.
Scrollbars now have a minimum size, ensuring the interactable area doesn't become too small for large scrollable areas.
Scrollarea now supports keyboard interaction using arrow keys.
Updated animation timings
All component transitions and animations have been slightly tweaked and calibrated to feel faster and more responsive.
Inverted variant for menus and tooltipsNew
Menu-based components, such as ActionMenu, and Tooltips now support an 'inverted' variant style, offering high-contrast dark/inverted presentation overlays.