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.
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']
}
}
}
};
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')} />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.
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.
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.
Card body content goes here.
Displays an infinite circular number input. Allows for adjusting rows and rowHeight, as well as, setting min, max and step values.
An input component designed for selecting or entering time values in a 24-hour or 12-hour format.
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.
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 a 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.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>
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.
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. Addditionally 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.
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.
Additionally, the button now features automated padding scaling using the hasIcon prop when icons are present.
The Button component also exposes an a new as prop, allowing it to render as different elements or components.
The variant option 'isolated' has been renamed to 'neutral'. Furthermore, both the 'minimal' and 'neutral' variants have been slightly redesigned.
Updated the Ticker component with new animation options and prop adjustments:
Ticker must now be passed through the value prop instead of children.fadeEdges prop to apply a subtle fade effect along the top and bottom edges.interpolateNumbers prop to animate intermediate numbers between transitions.lineHeight prop for controlling line height.align prop has been removed.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>
Updated the Calendar component to improve the year selection flow, which now utilizes the new Dial component.
Redesigned the Table component, introducing a new 'minimal' variant style alongside support for the maxColumnWidth property.
Added support for auto-growing heights based on text content via resize="auto".
Added a new 'minimal' variant style.
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.
All component transitions and animations have been slightly tweaked and calibrated to feel faster and more responsive.
Menu-based components, such as ActionMenu, and Tooltips now support an 'inverted' variant style, offering high-contrast dark/inverted presentation overlays.