diff --git a/packages/sdk/src/features/json-form/controls/dynamic-conditions-control/dynamic-conditions-control.tsx b/packages/sdk/src/features/json-form/controls/dynamic-conditions-control/dynamic-conditions-control.tsx
index 99beb7c6f..4dcc0855c 100644
--- a/packages/sdk/src/features/json-form/controls/dynamic-conditions-control/dynamic-conditions-control.tsx
+++ b/packages/sdk/src/features/json-form/controls/dynamic-conditions-control/dynamic-conditions-control.tsx
@@ -44,9 +44,14 @@ function DynamicConditionsControl(props: DynamicConditionsControlProps) {
{t('title')}
-
-
+
diff --git a/packages/sdk/src/features/json-form/controls/dynamic-conditions-control/dynamic-conditions-form-field/conditions-form-field.tsx b/packages/sdk/src/features/json-form/controls/dynamic-conditions-control/dynamic-conditions-form-field/conditions-form-field.tsx
index b79c8153e..068936934 100644
--- a/packages/sdk/src/features/json-form/controls/dynamic-conditions-control/dynamic-conditions-form-field/conditions-form-field.tsx
+++ b/packages/sdk/src/features/json-form/controls/dynamic-conditions-control/dynamic-conditions-form-field/conditions-form-field.tsx
@@ -91,9 +91,12 @@ export function ConditionsFormField(props: ConditionsFormFieldProps) {
[styles['container-error']]: shouldShowValidation && (!condition.x || !condition.y),
})}
>
-
{}} tooltip={t('tooltips.menu')}>
-
+
{}}
+ tooltip={t('tooltips.menu')}
+ prefixIcon={
-
-
+
);
diff --git a/packages/sdk/src/features/palette/components/header/palette-header.tsx b/packages/sdk/src/features/palette/components/header/palette-header.tsx
index a4ad59477..f6fc7ccae 100644
--- a/packages/sdk/src/features/palette/components/header/palette-header.tsx
+++ b/packages/sdk/src/features/palette/components/header/palette-header.tsx
@@ -17,12 +17,12 @@ export function PaletteHeader({ onClick, isSidebarExpanded }: PaletteHeaderProps
{t('palette.nodesLibrary')}
-
+ prefixIcon={
);
}
diff --git a/packages/sdk/src/features/properties-bar/components/header/properties-bar-header.tsx b/packages/sdk/src/features/properties-bar/components/header/properties-bar-header.tsx
index 059c7a0e9..3fb0a2c23 100644
--- a/packages/sdk/src/features/properties-bar/components/header/properties-bar-header.tsx
+++ b/packages/sdk/src/features/properties-bar/components/header/properties-bar-header.tsx
@@ -27,21 +27,24 @@ export function PropertiesBarHeader({
return (
-
+ prefixIcon={
}
+ />
{header}
{name &&
{name}
}
{onDotsClick && (
-
-
+
}
+ />
)}
);
diff --git a/packages/sdk/src/features/variables/components/dynamic-typed-variable-or-input/dynamic-typed-variable-or-input.module.css b/packages/sdk/src/features/variables/components/dynamic-typed-variable-or-input/dynamic-typed-variable-or-input.module.css
deleted file mode 100644
index e0ff1d2ed..000000000
--- a/packages/sdk/src/features/variables/components/dynamic-typed-variable-or-input/dynamic-typed-variable-or-input.module.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.button-toggle {
- padding: 0;
- margin: 0;
-}
diff --git a/packages/sdk/src/features/variables/components/dynamic-typed-variable-or-input/dynamic-typed-variable-or-input.tsx b/packages/sdk/src/features/variables/components/dynamic-typed-variable-or-input/dynamic-typed-variable-or-input.tsx
index d079c1ccb..23e7a6621 100644
--- a/packages/sdk/src/features/variables/components/dynamic-typed-variable-or-input/dynamic-typed-variable-or-input.tsx
+++ b/packages/sdk/src/features/variables/components/dynamic-typed-variable-or-input/dynamic-typed-variable-or-input.tsx
@@ -4,8 +4,6 @@ import { useTranslation } from 'react-i18next';
import { Icon } from '@workflow-builder/icons';
-import styles from './dynamic-typed-variable-or-input.module.css';
-
import type { VariableTypePrimitive } from '../../../../node/node-output-schema';
import { getIsSingleVariable } from '../../actions/get-is-single-variable';
import { filterSuggestionGroupsByType } from '../../utils/filter-suggestion-groups-by-type';
@@ -60,9 +58,14 @@ export function DynamicTypedVariableOrInput({
suggestionGroups={suggestionGroupsForType}
hasError={isError}
endAdornment={
-
-
+
}
+ size="xs"
+ variant="plain"
+ />
}
/>
);
@@ -80,12 +83,13 @@ export function DynamicTypedVariableOrInput({
endAdornment={
suggestionGroupsForType.length > 0 ? (
-
+ prefixIcon={
}
+ size="xs"
+ variant="plain"
+ />
) : undefined
}
/>
diff --git a/packages/sdk/src/features/variables/components/variable-text/variable-text.tsx b/packages/sdk/src/features/variables/components/variable-text/variable-text.tsx
index 8acc7b417..0905ac537 100644
--- a/packages/sdk/src/features/variables/components/variable-text/variable-text.tsx
+++ b/packages/sdk/src/features/variables/components/variable-text/variable-text.tsx
@@ -105,6 +105,7 @@ function SuggestionsContainer({
renderGroupHeader: (group: VariableSuggestionGroup) => ReactNode;
children: ReactElement;
}) {
+ const { t } = useTranslation();
const ul = children as ReactElement<{ children?: ReactElement[]; className?: string }>;
const items = ul.props.children;
@@ -149,13 +150,13 @@ function SuggestionsContainer({
{title}
{
event.stopPropagation();
handleClose();
}}
- >
-
+ prefixIcon={
{cloneElement(ul, {}, grouped)}
{onGoBack && (
-
-
+
{translateIfPossible(title) || title}
diff --git a/packages/ui/src/components/button/guards.spec.ts b/packages/ui/src/components/button/guards.spec.ts
deleted file mode 100644
index a9738caf1..000000000
--- a/packages/ui/src/components/button/guards.spec.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import { type ReactNode, createElement } from 'react';
-
-import { hasChildrenWithStringAndIcons, hasIconChildrenOnly, hasStringChildrenOnly } from './guards';
-
-const icon = createElement('span', null, 'icon');
-const otherIcon = createElement('svg');
-
-describe('hasIconChildrenOnly', () => {
- it('returns true for a single element child', () => {
- expect(hasIconChildrenOnly({ children: icon })).toBe(true);
- });
-
- it('returns true for a function child', () => {
- // A render-prop function is not a valid `ReactNode`, but the guard
- // accepts it at runtime via a `typeof === 'function'` check.
- const functionChild = (() => null) as unknown as ReactNode;
- expect(hasIconChildrenOnly({ children: functionChild })).toBe(true);
- });
-
- it('returns false for a string child', () => {
- expect(hasIconChildrenOnly({ children: 'label' })).toBe(false);
- });
-
- it('returns false for an array of children', () => {
- expect(hasIconChildrenOnly({ children: ['label', icon] })).toBe(false);
- });
-
- it('returns false for number/boolean/null children', () => {
- expect(hasIconChildrenOnly({ children: 42 })).toBe(false);
- expect(hasIconChildrenOnly({ children: true })).toBe(false);
- expect(hasIconChildrenOnly({ children: null })).toBe(false);
- });
-});
-
-describe('hasChildrenWithStringAndIcons', () => {
- it('returns true for [string, element]', () => {
- expect(hasChildrenWithStringAndIcons({ children: ['label', icon] })).toBe(true);
- });
-
- it('returns true for [element, string]', () => {
- expect(hasChildrenWithStringAndIcons({ children: [icon, 'label'] })).toBe(true);
- });
-
- it('returns true for two elements', () => {
- expect(hasChildrenWithStringAndIcons({ children: [icon, otherIcon] })).toBe(true);
- });
-
- it('returns false for an array shorter than 2', () => {
- expect(hasChildrenWithStringAndIcons({ children: [icon] })).toBe(false);
- });
-
- it('returns false for a single string child (not an array)', () => {
- expect(hasChildrenWithStringAndIcons({ children: 'label' })).toBe(false);
- });
-
- it('returns false for a single element child (not an array)', () => {
- expect(hasChildrenWithStringAndIcons({ children: icon })).toBe(false);
- });
-
- it('returns false when an entry is number/boolean/null', () => {
- expect(hasChildrenWithStringAndIcons({ children: [42, icon] })).toBe(false);
- expect(hasChildrenWithStringAndIcons({ children: [icon, null] })).toBe(false);
- expect(hasChildrenWithStringAndIcons({ children: [true, false] })).toBe(false);
- });
-});
-
-describe('hasStringChildrenOnly', () => {
- it('returns true for a string child', () => {
- expect(hasStringChildrenOnly({ children: 'label' })).toBe(true);
- });
-
- it('returns false for an element child', () => {
- expect(hasStringChildrenOnly({ children: icon })).toBe(false);
- });
-
- it('returns false for an array child', () => {
- expect(hasStringChildrenOnly({ children: ['label', icon] })).toBe(false);
- });
-
- it('returns false for number/boolean/null children', () => {
- expect(hasStringChildrenOnly({ children: 42 })).toBe(false);
- expect(hasStringChildrenOnly({ children: true })).toBe(false);
- expect(hasStringChildrenOnly({ children: null })).toBe(false);
- });
-});
diff --git a/packages/ui/src/components/button/guards.ts b/packages/ui/src/components/button/guards.ts
deleted file mode 100644
index 6ba289aa2..000000000
--- a/packages/ui/src/components/button/guards.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { PropsWithChildren, isValidElement } from 'react';
-
-export function hasIconChildrenOnly(props: PropsWithChildren): props is PropsWithChildren {
- return isValidElement(props.children) || typeof props.children === 'function';
-}
-
-export function hasChildrenWithStringAndIcons(props: PropsWithChildren): props is PropsWithChildren {
- return (
- Array.isArray(props.children) &&
- props.children.length >= 2 &&
- (typeof props.children[0] === 'string' || isValidElement(props.children[0])) &&
- (typeof props.children[1] === 'string' || isValidElement(props.children[1]))
- );
-}
-
-export function hasStringChildrenOnly(props: PropsWithChildren): props is PropsWithChildren {
- return typeof (props as PropsWithChildren).children === 'string';
-}
diff --git a/packages/ui/src/components/button/index.ts b/packages/ui/src/components/button/index.ts
index bf89cdc25..dfa1db191 100644
--- a/packages/ui/src/components/button/index.ts
+++ b/packages/ui/src/components/button/index.ts
@@ -1,3 +1,4 @@
+export * from './menu-trigger-button';
export * from './nav-button/nav-button';
export * from './nav-button/types';
export * from './regular-button/button';
diff --git a/packages/ui/src/components/button/menu-trigger-button/index.ts b/packages/ui/src/components/button/menu-trigger-button/index.ts
new file mode 100644
index 000000000..a546b3652
--- /dev/null
+++ b/packages/ui/src/components/button/menu-trigger-button/index.ts
@@ -0,0 +1 @@
+export * from './menu-trigger-button';
diff --git a/packages/ui/src/components/button/menu-trigger-button/menu-trigger-button.tsx b/packages/ui/src/components/button/menu-trigger-button/menu-trigger-button.tsx
new file mode 100644
index 000000000..6961e3546
--- /dev/null
+++ b/packages/ui/src/components/button/menu-trigger-button/menu-trigger-button.tsx
@@ -0,0 +1,20 @@
+import { forwardRef } from 'react';
+
+import { NavButton } from '../nav-button/nav-button';
+import type { NavButtonSize, NavButtonVariant } from '../nav-button/types';
+import type { BaseButtonProps, IconNode } from '../types';
+
+export type MenuTriggerButtonProps = BaseButtonProps & {
+ children: IconNode;
+ isOpen?: boolean;
+ /** @default 'm' */
+ size?: NavButtonSize;
+ /** @default 'square' */
+ variant?: NavButtonVariant;
+};
+
+export const MenuTriggerButton = forwardRef(
+ ({ children, isOpen = false, ...props }, ref) => (
+
+ {child}
+ ,
+ );
+ });
+
+ expect(container.querySelector(`svg[data-icon-slot="${slot}"]`)).not.toBeNull();
+ },
+);
diff --git a/packages/ui/src/components/button/nav-button/nav-button.tsx b/packages/ui/src/components/button/nav-button/nav-button.tsx
index 68021c8a6..da8b0c5d6 100644
--- a/packages/ui/src/components/button/nav-button/nav-button.tsx
+++ b/packages/ui/src/components/button/nav-button/nav-button.tsx
@@ -1,109 +1,44 @@
import clsx from 'clsx';
-import { ReactElement, forwardRef } from 'react';
-
-import navBorderRadiusStyles from './styles/nav-button-border-radius.module.css';
-import navButtonStyles from './styles/nav-button.module.css';
-
-import { hasChildrenWithStringAndIcons, hasIconChildrenOnly, hasStringChildrenOnly } from '../guards';
-import { NavIconButton, NavIconButtonProps } from './nav-icon-button/nav-icon-button';
-import { NavIconLabelButton, NavIconLabelButtonProps } from './nav-icon-label-button/nav-icon-label-button';
-import { NavLabelButton, NavLabelButtonProps } from './nav-label-button/nav-label-button';
-
-type WithRef = T & {
- ref?: React.Ref;
-};
-
-/**
- * NavButtonProps defines **discriminated overloads** for the Button component using
- * **structural discrimination** rather than a `type` field.
- *
- * The component dynamically determines which button variant to render based on the
- * **structure of the `children` prop**:
- *
- * - If `children` is a single `string`, it's treated as a **Label Button**.
- * - If `children` is a single icon (ReactElement), it's treated as an **Icon Button**.
- * - If `children` includes both a string and one or two icons (before/after),
- * it's treated as an **Icon Label Button**.
- *
- * Based on the inferred variant, **only props specific to that variant are allowed**.
- * This ensures that incorrect prop combinations (e.g., passing label-specific props
- * to an Icon Button) are caught at compile time.
- *
- * This is intentionally implemented with **overloads** instead of a union type,
- * which would incorrectly allow mixing props between types and compromise type safety.
- */
-type NavButtonProps = {
- (props: WithRef): ReactElement;
- (props: WithRef): ReactElement;
- (props: WithRef): ReactElement;
-};
-
-const NavButtonComponent = forwardRef<
- HTMLButtonElement,
- NavLabelButtonProps | NavIconButtonProps | NavIconLabelButtonProps
->(({ className, isSelected, size = 'medium', ...props }, ref) => {
- const buttonProps = {
- ref,
- ...props,
- className: clsx(
- navBorderRadiusStyles[size],
- navButtonStyles['nav-button'],
- { [navButtonStyles['selected']]: isSelected },
- className,
- ),
- size,
- };
-
- if (hasStringChildrenOnly(props)) {
- return {props.children} ;
- }
-
- if (hasIconChildrenOnly(props)) {
- return {props.children} ;
- }
-
- if (hasChildrenWithStringAndIcons(props)) {
- return {props.children} ;
- }
-
- return null;
+import { Children, forwardRef } from 'react';
+
+import styles from './nav-button.module.css';
+
+import { BaseButton } from '../base-button/base-button';
+import type { NavButtonProps } from './types';
+
+export const NavButton = forwardRef((buttonProps, ref) => {
+ const {
+ children,
+ className,
+ isSelected = false,
+ prefixIcon,
+ size = 'm',
+ suffixIcon,
+ variant = 'square',
+ ...props
+ } = buttonProps;
+ const renderableChildren = Children.toArray(children).filter((child) => child !== '');
+ const isIconOnly = renderableChildren.length === 0;
+
+ return (
+
+ {isIconOnly ? (
+ {prefixIcon ?? suffixIcon}
+ ) : (
+ <>
+ {prefixIcon != null && {prefixIcon} }
+ {renderableChildren}
+ {suffixIcon != null && {suffixIcon} }
+
+ )}
+
+ );
});
-
-/**
- * Button is a flexible, and type-safe component that automatically selects
- * the correct type (Label Button, Icon Button, or Icon Label Button) based on the
- * structure of its `children` prop.
- *
- * **Automatic Type Selection (Structural Discrimination)**
- * The component uses the shape of `children` to infer which button variant to render:
- * - **Label Button**: If `children` is a single `string`
- * - **Icon Button**: If `children` is a single React element (e.g., an icon)
- * - **Icon Label Button**: If `children` is a combination of string + icon(s)
- *
- * **Type Safety via Overloads**
- * Each variant supports its own unique set of props. Thanks to TypeScript overloads,
- * only the correct props for a given structure are allowed—invalid combinations
- * are caught at compile time.
- *
- * **How to Use**
- *
- * ```tsx
- * Submit // Label Button
- *
- *
- * // Icon Button
- *
- *
- * // Icon Label Button
- * ```
- *
- * This approach ensures:
- * - Simplified usage with fewer props
- * - No accidental mixing of incompatible props
- * - Autocomplete and type-checking experience
- */
-export const NavButton = NavButtonComponent as NavButtonProps;
diff --git a/packages/ui/src/components/button/nav-button/nav-icon-button/nav-button-icon-padding.module.css b/packages/ui/src/components/button/nav-button/nav-icon-button/nav-button-icon-padding.module.css
deleted file mode 100644
index 647927eae..000000000
--- a/packages/ui/src/components/button/nav-button/nav-icon-button/nav-button-icon-padding.module.css
+++ /dev/null
@@ -1,39 +0,0 @@
-:root {
- --ax-public-button-icon-padding-extra-large: var(--wb-space-150);
- --ax-public-button-icon-padding-large: var(--wb-space-137);
- --ax-public-button-icon-padding-medium: var(--wb-space-112);
- --ax-public-button-icon-padding-small: var(--wb-space-87);
- --ax-public-button-icon-padding-extra-small: var(--wb-space-75);
- --ax-public-button-icon-padding-xx-small: var(--wb-space-75);
- --ax-public-button-icon-padding-xxx-small: var(--wb-space-50);
-}
-
-@layer ui.component {
- .extra-large {
- padding: var(--ax-public-button-icon-padding-extra-large);
- }
-
- .large {
- padding: var(--ax-public-button-icon-padding-large);
- }
-
- .medium {
- padding: var(--ax-public-button-icon-padding-medium);
- }
-
- .small {
- padding: var(--ax-public-button-icon-padding-small);
- }
-
- .extra-small {
- padding: var(--ax-public-button-icon-padding-extra-small);
- }
-
- .xx-small {
- padding: var(--ax-public-button-icon-padding-xx-small);
- }
-
- .xxx-small {
- padding: var(--ax-public-button-icon-padding-xxx-small);
- }
-}
diff --git a/packages/ui/src/components/button/nav-button/nav-icon-button/nav-icon-button.module.css b/packages/ui/src/components/button/nav-button/nav-icon-button/nav-icon-button.module.css
deleted file mode 100644
index 17df928e7..000000000
--- a/packages/ui/src/components/button/nav-button/nav-icon-button/nav-icon-button.module.css
+++ /dev/null
@@ -1,11 +0,0 @@
-:root {
- --ax-public-button-nav-color-hover: var(--wb-components-nav-button-icon-primary-hover);
-}
-
-@layer ui.component {
- button:hover {
- &.transparent {
- background: transparent;
- }
- }
-}
diff --git a/packages/ui/src/components/button/nav-button/nav-icon-button/nav-icon-button.tsx b/packages/ui/src/components/button/nav-button/nav-icon-button/nav-icon-button.tsx
deleted file mode 100644
index 7c7a135a0..000000000
--- a/packages/ui/src/components/button/nav-button/nav-icon-button/nav-icon-button.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import clsx from 'clsx';
-import { forwardRef } from 'react';
-
-import navButtonBorderRadiusStyles from '../styles/nav-button-border-radius.module.css';
-import navButtonIconSizeStyles from '../styles/nav-button-icon-size.module.css';
-import navButtonIconPaddingStyles from './nav-button-icon-padding.module.css';
-import navIconButtonStyles from './nav-icon-button.module.css';
-
-import { BaseButton } from '../../base-button/base-button';
-import { IconNode, Shape } from '../../types';
-import { NavBaseButtonProps } from '../types';
-
-export type NavIconButtonProps = {
- shape?: Shape;
- transparent?: boolean;
- children: IconNode;
-} & NavBaseButtonProps;
-
-export const NavIconButton = forwardRef(
- ({ size = 'medium', shape = 'default', children, transparent, ...props }, ref) => (
-
- {children}
-
- ),
-);
diff --git a/packages/ui/src/components/button/nav-button/nav-icon-label-button/nav-button-gap.module.css b/packages/ui/src/components/button/nav-button/nav-icon-label-button/nav-button-gap.module.css
deleted file mode 100644
index fbf36e3f0..000000000
--- a/packages/ui/src/components/button/nav-button/nav-icon-label-button/nav-button-gap.module.css
+++ /dev/null
@@ -1,39 +0,0 @@
-:root {
- --ax-public-button-gap-extra-large: var(--wb-space-100);
- --ax-public-button-gap-large: var(--wb-space-100);
- --ax-public-button-gap-medium: var(--wb-space-100);
- --ax-public-button-gap-small: var(--wb-space-100);
- --ax-public-button-gap-extra-small: var(--wb-space-100);
- --ax-public-button-gap-xx-small: var(--wb-space-75) var(--wb-space-75);
- --ax-public-button-gap-xxx-small: var(--wb-space-50) var(--wb-space-75);
-}
-
-@layer ui.component {
- .extra-large {
- gap: var(--ax-public-button-gap-extra-large);
- }
-
- .large {
- gap: var(--ax-public-button-gap-large);
- }
-
- .medium {
- gap: var(--ax-public-button-gap-medium);
- }
-
- .small {
- gap: var(--ax-public-button-gap-small);
- }
-
- .extra-small {
- gap: var(--ax-public-button-gap-extra-small);
- }
-
- .xx-small {
- gap: var(--ax-public-button-gap-xx-small);
- }
-
- .xxx-small {
- gap: var(--ax-public-button-gap-xxx-small);
- }
-}
diff --git a/packages/ui/src/components/button/nav-button/nav-icon-label-button/nav-icon-label-button-padding.module.css b/packages/ui/src/components/button/nav-button/nav-icon-label-button/nav-icon-label-button-padding.module.css
deleted file mode 100644
index af44f7382..000000000
--- a/packages/ui/src/components/button/nav-button/nav-icon-label-button/nav-icon-label-button-padding.module.css
+++ /dev/null
@@ -1,39 +0,0 @@
-:root {
- --ax-public-icon-label-button-padding-extra-large: var(--wb-space-150) var(--wb-space-150);
- --ax-public-icon-label-button-padding-large: var(--wb-space-137) var(--wb-space-150);
- --ax-public-icon-label-button-padding-medium: var(--wb-space-112) var(--wb-space-150);
- --ax-public-icon-label-button-padding-small: var(--wb-space-87) var(--wb-space-125);
- --ax-public-icon-label-button-padding-extra-small: var(--wb-space-75) var(--wb-space-100);
- --ax-public-icon-label-button-padding-xx-small: var(--wb-space-75) var(--wb-space-75);
- --ax-public-icon-label-button-padding-xxx-small: var(--wb-space-50) var(--wb-space-75);
-}
-
-@layer ui.component {
- .extra-large {
- padding: var(--ax-public-icon-label-button-padding-extra-large);
- }
-
- .large {
- padding: var(--ax-public-icon-label-button-padding-large);
- }
-
- .medium {
- padding: var(--ax-public-icon-label-button-padding-medium);
- }
-
- .small {
- padding: var(--ax-public-icon-label-button-padding-small);
- }
-
- .extra-small {
- padding: var(--ax-public-icon-label-button-padding-extra-small);
- }
-
- .xx-small {
- padding: var(--ax-public-icon-label-button-padding-xx-small);
- }
-
- .xxx-small {
- padding: var(--ax-public-icon-label-button-padding-xxx-small);
- }
-}
diff --git a/packages/ui/src/components/button/nav-button/nav-icon-label-button/nav-icon-label-button.tsx b/packages/ui/src/components/button/nav-button/nav-icon-label-button/nav-icon-label-button.tsx
deleted file mode 100644
index a780ec4cf..000000000
--- a/packages/ui/src/components/button/nav-button/nav-icon-label-button/nav-icon-label-button.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import clsx from 'clsx';
-import { forwardRef } from 'react';
-
-import fontSizeStyles from '../../styles/font-size.module.css';
-import navFontSizeStyles from '../styles/nav-button-font-size.module.css';
-import navButtonIconSizeStyles from '../styles/nav-button-icon-size.module.css';
-import navGapStyles from './nav-button-gap.module.css';
-import navPaddingStyles from './nav-icon-label-button-padding.module.css';
-
-import { BaseButton } from '../../base-button/base-button';
-import { IconNode } from '../../types';
-import { NavBaseButtonProps } from '../types';
-
-export type NavIconLabelButtonProps = {
- children: [IconNode, string] | [string, IconNode] | [IconNode, string, IconNode];
-} & NavBaseButtonProps;
-
-export const NavIconLabelButton = forwardRef(
- ({ size = 'medium', children, ...props }, ref) => (
-
- {children}
-
- ),
-);
diff --git a/packages/ui/src/components/button/nav-button/nav-label-button/nav-label-button-padding.module.css b/packages/ui/src/components/button/nav-button/nav-label-button/nav-label-button-padding.module.css
deleted file mode 100644
index c3f429c55..000000000
--- a/packages/ui/src/components/button/nav-button/nav-label-button/nav-label-button-padding.module.css
+++ /dev/null
@@ -1,36 +0,0 @@
-:root {
- --ax-public-label-button-padding-extra-large: var(--wb-space-200) var(--wb-space-200);
- --ax-public-label-button-padding-large: var(--wb-space-200) var(--wb-space-200);
- --ax-public-label-button-padding-medium: var(--wb-space-150) var(--wb-space-150);
- --ax-public-label-button-padding-small: var(--wb-space-125) var(--wb-space-125);
- --ax-public-label-button-padding-extra-small: var(--wb-space-100) var(--wb-space-100);
- --ax-public-label-button-padding-xx-small: var(--wb-space-87) var(--wb-space-75);
- --ax-public-label-button-padding-xxx-small: var(--wb-space-62) var(--wb-space-75);
-}
-
-@layer ui.component {
- .extra-large,
- .large {
- padding: var(--ax-public-label-button-padding-extra-large);
- }
-
- .medium {
- padding: var(--ax-public-label-button-padding-medium);
- }
-
- .small {
- padding: var(--ax-public-label-button-padding-small);
- }
-
- .extra-small {
- padding: var(--ax-public-label-button-padding-extra-small);
- }
-
- .xx-small {
- padding: var(--ax-public-label-button-padding-xx-small);
- }
-
- .xxx-small {
- padding: var(--ax-public-label-button-padding-xxx-small);
- }
-}
diff --git a/packages/ui/src/components/button/nav-button/nav-label-button/nav-label-button.tsx b/packages/ui/src/components/button/nav-button/nav-label-button/nav-label-button.tsx
deleted file mode 100644
index a7668cb92..000000000
--- a/packages/ui/src/components/button/nav-button/nav-label-button/nav-label-button.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import clsx from 'clsx';
-import { forwardRef } from 'react';
-
-import fontSizeStyles from '../../styles/font-size.module.css';
-import navFontSizeStyles from '../styles/nav-button-font-size.module.css';
-import navPaddingStyles from './nav-label-button-padding.module.css';
-
-import { BaseButton } from '../../base-button/base-button';
-import { NavBaseButtonProps } from '../types';
-
-export type NavLabelButtonProps = {
- children: string;
-} & NavBaseButtonProps;
-
-export const NavLabelButton = forwardRef(
- ({ size = 'medium', children, ...props }, ref) => (
-
- {children}
-
- ),
-);
diff --git a/packages/ui/src/components/button/nav-button/styles/nav-button-border-radius.module.css b/packages/ui/src/components/button/nav-button/styles/nav-button-border-radius.module.css
deleted file mode 100644
index 682b4efc3..000000000
--- a/packages/ui/src/components/button/nav-button/styles/nav-button-border-radius.module.css
+++ /dev/null
@@ -1,46 +0,0 @@
-:root {
- --ax-public-button-border-radius-extra-large: var(--wb-radius-100);
- --ax-public-button-border-radius-large: var(--wb-radius-100);
- --ax-public-button-border-radius-medium: var(--wb-radius-75);
- --ax-public-button-border-radius-small: var(--wb-radius-50);
- --ax-public-button-border-radius-extra-small: var(--wb-radius-50);
- --ax-public-button-border-radius-circle: var(--wb-radius-full);
- --ax-public-button-border-radius-xx-small: var(--wb-radius-50);
- --ax-public-button-border-radius-xxx-small: var(--wb-radius-50);
-}
-
-@layer ui.component {
- :not(.circle) {
- &.extra-large {
- border-radius: var(--ax-public-button-border-radius-extra-large);
- }
-
- &.large {
- border-radius: var(--ax-public-button-border-radius-large);
- }
-
- &.medium {
- border-radius: var(--ax-public-button-border-radius-medium);
- }
-
- &.small {
- border-radius: var(--ax-public-button-border-radius-small);
- }
-
- &.extra-small {
- border-radius: var(--ax-public-button-border-radius-extra-small);
- }
-
- &.xx-small {
- border-radius: var(--ax-public-button-border-radius-xx-small);
- }
-
- &.xxx-small {
- border-radius: var(--ax-public-button-border-radius-xxx-small);
- }
- }
-
- .circle {
- border-radius: var(--ax-public-button-border-radius-circle);
- }
-}
diff --git a/packages/ui/src/components/button/nav-button/styles/nav-button-font-size.module.css b/packages/ui/src/components/button/nav-button/styles/nav-button-font-size.module.css
deleted file mode 100644
index e1eec5551..000000000
--- a/packages/ui/src/components/button/nav-button/styles/nav-button-font-size.module.css
+++ /dev/null
@@ -1,6 +0,0 @@
-@layer ui.component {
- .xx-small,
- .xxx-small {
- composes: ax-public-button-extra-small from global;
- }
-}
diff --git a/packages/ui/src/components/button/nav-button/styles/nav-button-icon-size.module.css b/packages/ui/src/components/button/nav-button/styles/nav-button-icon-size.module.css
deleted file mode 100644
index 58bd7a868..000000000
--- a/packages/ui/src/components/button/nav-button/styles/nav-button-icon-size.module.css
+++ /dev/null
@@ -1,60 +0,0 @@
-:root {
- --ax-public-icon-size-extra-large: 1.5rem /* missing token */;
- --ax-public-icon-size-large: 1.25rem /* missing token */;
- --ax-public-icon-size-medium: 1.125rem /* missing token */;
- --ax-public-icon-size-small: 1.125rem /* missing token */;
- --ax-public-icon-size-extra-small: 1rem /* missing token */;
- --ax-public-icon-size-xx-small: 0.75rem /* missing token */;
- --ax-public-icon-size-xxx-small: 0.75rem /* missing token */;
-}
-
-@layer ui.component {
- .extra-large {
- svg {
- width: var(--ax-public-icon-size-extra-large);
- height: var(--ax-public-icon-size-extra-large);
- }
- }
-
- .large {
- svg {
- width: var(--ax-public-icon-size-large);
- height: var(--ax-public-icon-size-large);
- }
- }
-
- .medium {
- svg {
- width: var(--ax-public-icon-size-medium);
- height: var(--ax-public-icon-size-medium);
- }
- }
-
- .small {
- svg {
- width: var(--ax-public-icon-size-small);
- height: var(--ax-public-icon-size-small);
- }
- }
-
- .extra-small {
- svg {
- width: var(--ax-public-icon-size-extra-small);
- height: var(--ax-public-icon-size-extra-small);
- }
- }
-
- .xx-small {
- svg {
- width: var(--ax-public-icon-size-xx-small);
- height: var(--ax-public-icon-size-xx-small);
- }
- }
-
- .xxx-small {
- svg {
- width: var(--ax-public-icon-size-xxx-small);
- height: var(--ax-public-icon-size-xxx-small);
- }
- }
-}
diff --git a/packages/ui/src/components/button/nav-button/styles/nav-button.module.css b/packages/ui/src/components/button/nav-button/styles/nav-button.module.css
deleted file mode 100644
index fcc35eef2..000000000
--- a/packages/ui/src/components/button/nav-button/styles/nav-button.module.css
+++ /dev/null
@@ -1,37 +0,0 @@
-:root {
- --ax-public-button-nav-background-color: var(--wb-components-nav-button-bg-primary-hover);
- --ax-public-button-nav-color: var(--wb-components-nav-button-icon-primary-default);
- --ax-public-button-nav-color-active: var(--wb-components-nav-button-icon-primary-pressed);
- --ax-public-button-nav-color-disabled: var(--wb-components-nav-button-icon-primary-disabled);
-}
-
-@layer ui.component {
- .nav-button {
- background-color: transparent;
- color: var(--ax-public-button-nav-color);
-
- &:hover {
- background-color: var(--ax-public-button-nav-background-color);
- }
-
- &:active {
- color: var(--ax-public-button-nav-color-active);
- background-color: var(--ax-public-button-nav-background-color);
- }
-
- &:focus-visible {
- background-color: var(--ax-public-button-nav-background-color);
- }
-
- &:disabled {
- color: var(--ax-public-button-nav-color-disabled);
- background-color: transparent;
- }
-
- &.selected {
- pointer-events: none;
- background-color: var(--wb-components-button-solid-primary-default);
- color: var(--wb-components-nav-button-icon-primary-active);
- }
- }
-}
diff --git a/packages/ui/src/components/button/nav-button/types.ts b/packages/ui/src/components/button/nav-button/types.ts
index 89ebd99bf..57360c71c 100644
--- a/packages/ui/src/components/button/nav-button/types.ts
+++ b/packages/ui/src/components/button/nav-button/types.ts
@@ -1,16 +1,35 @@
-import { Size } from '@ui/shared/types/size';
+import type { ReactNode } from 'react';
-import { BaseButtonProps } from '../types';
+import type { BaseButtonProps, IconNode } from '../types';
-export type NavBaseButtonProps = BaseButtonProps & {
- /**
- * Size variant of the nav button.
- * @default 'medium'
- */
- size?: Size;
+export const NAV_BUTTON_SIZES = ['xl', 'l', 'm', 's', 'xs', 'xxs', 'xxxs'] as const;
+
+export type NavButtonSize = (typeof NAV_BUTTON_SIZES)[number];
+
+export const NAV_BUTTON_VARIANTS = ['square', 'round', 'plain'] as const;
+
+export type NavButtonVariant = (typeof NAV_BUTTON_VARIANTS)[number];
+
+type NavButtonBaseProps = Omit & {
+ /** @default 'm' */
+ size?: NavButtonSize;
isSelected?: boolean;
};
-export type { NavIconButtonProps } from './nav-icon-button/nav-icon-button';
-export type { NavIconLabelButtonProps } from './nav-icon-label-button/nav-icon-label-button';
-export type { NavLabelButtonProps } from './nav-label-button/nav-label-button';
+export type NavLabelButtonProps = NavButtonBaseProps & {
+ /** @default 'square' */
+ variant?: Exclude;
+ children: ReactNode;
+ prefixIcon?: IconNode;
+ suffixIcon?: IconNode;
+};
+
+export type NavIconButtonProps = NavButtonBaseProps & {
+ /** @default 'square' */
+ variant?: NavButtonVariant;
+ prefixIcon: IconNode;
+ children?: never;
+ suffixIcon?: never;
+};
+
+export type NavButtonProps = NavLabelButtonProps | NavIconButtonProps;
diff --git a/packages/ui/src/components/collapsible/collapsible.tsx b/packages/ui/src/components/collapsible/collapsible.tsx
index e2fbc59bd..c54ae2127 100644
--- a/packages/ui/src/components/collapsible/collapsible.tsx
+++ b/packages/ui/src/components/collapsible/collapsible.tsx
@@ -54,13 +54,13 @@ Collapsible.Button = function CollapsibleButton() {
return (
-
+ prefixIcon={(
)}
- {onClose && (
-
-
- )}
+ {onClose && {children}
}
diff --git a/packages/ui/src/components/segment-picker/item/segment-picker-item.tsx b/packages/ui/src/components/segment-picker/item/segment-picker-item.tsx
index 0cabf15d1..cb92efe5b 100644
--- a/packages/ui/src/components/segment-picker/item/segment-picker-item.tsx
+++ b/packages/ui/src/components/segment-picker/item/segment-picker-item.tsx
@@ -1,38 +1,27 @@
-import {
- hasChildrenWithStringAndIcons,
- hasIconChildrenOnly,
- hasStringChildrenOnly,
-} from '@ui/components/button/guards';
import { NavButton } from '@ui/components/button/nav-button/nav-button';
-import { NavIconButtonProps } from '@ui/components/button/nav-button/nav-icon-button/nav-icon-button';
-import { NavIconLabelButtonProps } from '@ui/components/button/nav-button/nav-icon-label-button/nav-icon-label-button';
-import { NavLabelButtonProps } from '@ui/components/button/nav-button/nav-label-button/nav-label-button';
+import type { NavButtonProps } from '@ui/components/button/nav-button/types';
import clsx from 'clsx';
-import { MouseEvent, useContext } from 'react';
+import { type MouseEvent, useContext } from 'react';
import itemShapeStyles from './segment-picker-item-shape.module.css';
-import { BaseButtonProps } from '../../button/types';
+import type { BaseButtonProps } from '../../button/types';
import { SegmentPickerContext } from '../utils/context';
-export type SegmentPickerItemProps = BaseButtonProps & {
- value: string;
-} & (
- | Pick
- | Pick
- | Pick
- );
+export type SegmentPickerItemProps = BaseButtonProps &
+ Pick & {
+ value: string;
+ };
-/**
- * A single item in the SegmentPicker, rendered as a NavButton under the hood.
- *
- * Automatically receives size and shape from SegmentPicker context.
- * Must be used only within a SegmentPicker component.
- *
- * Determines which NavButton variant to render based on its children
- * (label only, icon only, or icon + label).
- */
-export function Item({ children, value, ...buttonProps }: SegmentPickerItemProps) {
+export function Item({
+ children,
+ className,
+ onClick,
+ prefixIcon,
+ suffixIcon,
+ value,
+ ...buttonProps
+}: SegmentPickerItemProps) {
const context = useContext(SegmentPickerContext);
if (!context) {
@@ -40,29 +29,25 @@ export function Item({ children, value, ...buttonProps }: SegmentPickerItemProps
return null;
}
- const { selectedValue, onSelect, shape, ...other } = context;
-
- const props = {
- className: clsx(itemShapeStyles['item'], itemShapeStyles[shape ?? 'default']),
- isSelected: selectedValue === value,
- onClick: (event: MouseEvent) => onSelect(event, value),
- shape,
- children,
- ...other,
- ...buttonProps,
- };
-
- if (hasStringChildrenOnly(props)) {
- return (props)) {
- return (props)) {
- return ) => {
+ onSelect(event, value);
+ onClick?.(event);
+ }}
+ prefixIcon={prefixIcon}
+ size={size}
+ variant={navVariant}
+ suffixIcon={suffixIcon}
+ {...buttonProps}
+ >
+ {children}
+
+ );
}
diff --git a/packages/ui/src/components/segment-picker/segment-picker.spec.tsx b/packages/ui/src/components/segment-picker/segment-picker.spec.tsx
new file mode 100644
index 000000000..0e6235ca2
--- /dev/null
+++ b/packages/ui/src/components/segment-picker/segment-picker.spec.tsx
@@ -0,0 +1,67 @@
+import { act } from 'react';
+import { type Root, createRoot } from 'react-dom/client';
+
+import { SegmentPicker } from './segment-picker';
+
+(globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+let container: HTMLDivElement;
+let root: Root;
+
+beforeEach(() => {
+ container = document.createElement('div');
+ document.body.append(container);
+ root = createRoot(container);
+});
+
+afterEach(() => {
+ act(() => root.unmount());
+ container.remove();
+});
+
+it('preserves element children inside the label', () => {
+ act(() => {
+ root.render(
+
+ First
+
+ Count important items
+
+ ,
+ );
+ });
+
+ expect(container.querySelector('strong')?.textContent).toBe('important');
+ expect(container.querySelectorAll('button')[1]?.textContent).toBe('Count important items');
+});
+
+it('keeps selection internal while composing the consumer click handler', () => {
+ const onChange = vi.fn();
+ const onSelectedClick = vi.fn();
+ const onNextClick = vi.fn();
+
+ act(() => {
+ root.render(
+
+
+ First
+
+
+ Second
+
+ ,
+ );
+ });
+
+ const buttons = container.querySelectorAll('button');
+ act(() => buttons[0]?.dispatchEvent(new MouseEvent('click', { bubbles: true })));
+
+ expect(onSelectedClick).toHaveBeenCalledOnce();
+ expect(onChange).not.toHaveBeenCalled();
+
+ act(() => buttons[1]?.dispatchEvent(new MouseEvent('click', { bubbles: true })));
+
+ expect(onNextClick).toHaveBeenCalledOnce();
+ expect(onChange).toHaveBeenCalledOnce();
+ expect(onChange.mock.calls[0]?.[1]).toBe('b');
+});
diff --git a/packages/ui/src/components/segment-picker/segment-picker.tsx b/packages/ui/src/components/segment-picker/segment-picker.tsx
index c1568da9e..c8ee237ec 100644
--- a/packages/ui/src/components/segment-picker/segment-picker.tsx
+++ b/packages/ui/src/components/segment-picker/segment-picker.tsx
@@ -1,27 +1,44 @@
-import { Shape } from '@ui/components/button/types';
-import { Size } from '@ui/shared/types/size';
+import type { NavButtonSize, NavButtonVariant } from '@ui/components/button/nav-button/types';
+import type { Shape } from '@ui/components/button/types';
+import type { Size } from '@ui/shared/types/size';
import clsx from 'clsx';
-import { ForwardRefExoticComponent, MouseEvent, ReactElement, forwardRef, useState } from 'react';
+import {
+ type ForwardRefExoticComponent,
+ type MouseEvent,
+ type ReactElement,
+ type RefAttributes,
+ forwardRef,
+ useState,
+} from 'react';
import borderRadiusStyles from './border-radius-size.module.css';
import styles from './segment-picker.module.css';
-import { Item, SegmentPickerItemProps } from './item/segment-picker-item';
+import { Item, type SegmentPickerItemProps } from './item/segment-picker-item';
import { SegmentPickerContext } from './utils/context';
import { getValidShape } from './utils/get-valid-shape';
+const NAV_BUTTON_SIZE_BY_SEGMENT_PICKER_SIZE: Record = {
+ 'extra-large': 'xl',
+ large: 'l',
+ medium: 'm',
+ small: 's',
+ 'extra-small': 'xs',
+ 'xx-small': 'xxs',
+ 'xxx-small': 'xxxs',
+};
+
+const NAV_BUTTON_VARIANT_BY_SEGMENT_PICKER_SHAPE: Record> = {
+ default: 'square',
+ circle: 'round',
+};
+
export type SegmentPickerPropsBase = {
children: ReactElement[];
- /**
- * Size variant of the SegmentPicker and its items.
- * @default 'medium'
- */
+ /** @default 'medium' */
size?: Size;
/**
- * Controls the shape of the SegmentPicker and its items.
- * (default) - Items stretch to fill the container equally.
- * 'circle' - Items fit tightly around their content to maintain a circular shape.
- * Only supported when items contain icons only.
+ * Circle is supported only when every item contains an icon without a label.
* @default 'default'
*/
shape?: Shape;
@@ -30,22 +47,18 @@ export type SegmentPickerPropsBase = {
};
export type ControlledSegmentPickerProps = {
- /** The currently selected value (controlled mode). */
value: string;
- /** Must not be used in controlled mode. */
defaultValue?: never;
} & SegmentPickerPropsBase;
export type UncontrolledSegmentPickerProps = {
- /** The initial selected value (uncontrolled mode). */
defaultValue: string;
- /** Must not be used in uncontrolled mode. */
value?: never;
} & SegmentPickerPropsBase;
export type SegmentPickerProps = ControlledSegmentPickerProps | UncontrolledSegmentPickerProps;
-type SegmentPickerComponent = ForwardRefExoticComponent> & {
+type SegmentPickerComponent = ForwardRefExoticComponent> & {
Item: typeof Item;
};
@@ -54,10 +67,11 @@ export const SegmentPicker = forwardRef(
const validShape = getValidShape(shape, children);
const isControlled = value !== undefined;
const [internalValue, setInternalValue] = useState(defaultValue);
-
const selectedValue = isControlled ? value : internalValue;
const handleSelect = (event: MouseEvent, newValue: string) => {
+ if (newValue === selectedValue) return;
+
if (!isControlled) {
setInternalValue(newValue);
}
@@ -69,8 +83,9 @@ export const SegmentPicker = forwardRef(
value={{
selectedValue,
onSelect: handleSelect,
- size,
+ size: NAV_BUTTON_SIZE_BY_SEGMENT_PICKER_SIZE[size],
shape: validShape,
+ navVariant: NAV_BUTTON_VARIANT_BY_SEGMENT_PICKER_SHAPE[validShape],
}}
>
diff --git a/packages/ui/src/components/segment-picker/utils/context.ts b/packages/ui/src/components/segment-picker/utils/context.ts
index 0a2a33938..524c8d02d 100644
--- a/packages/ui/src/components/segment-picker/utils/context.ts
+++ b/packages/ui/src/components/segment-picker/utils/context.ts
@@ -1,12 +1,13 @@
-import { Shape } from '@ui/components/button/types';
-import { Size } from '@ui/shared/types/size';
-import { MouseEvent, createContext } from 'react';
+import type { NavButtonSize, NavButtonVariant } from '@ui/components/button/nav-button/types';
+import type { Shape } from '@ui/components/button/types';
+import { type MouseEvent, createContext } from 'react';
type SegmentPickerContextType = {
selectedValue: string | undefined;
onSelect: (event: MouseEvent, value: string) => void;
- size?: Size;
- shape?: Shape;
+ size: NavButtonSize;
+ shape: Shape;
+ navVariant: Exclude;
};
export const SegmentPickerContext = createContext(undefined);
diff --git a/packages/ui/src/components/segment-picker/utils/get-valid-shape.spec.ts b/packages/ui/src/components/segment-picker/utils/get-valid-shape.spec.ts
index 5ae8ea34b..5449ca285 100644
--- a/packages/ui/src/components/segment-picker/utils/get-valid-shape.spec.ts
+++ b/packages/ui/src/components/segment-picker/utils/get-valid-shape.spec.ts
@@ -8,16 +8,16 @@ type PickerItem = ReactElement;
const icon = createElement('svg');
-// `SegmentPickerItemProps` requires `children` in props, so the guards read
-// `item.props.children` — pass it as a prop rather than a createElement arg.
function iconItem(value: string): PickerItem {
- // eslint-disable-next-line react/no-children-prop
- return createElement(Item, { value, children: icon }) as PickerItem;
+ return createElement(Item, { value, prefixIcon: icon }) as PickerItem;
+}
+
+function legacyIconItem(value: string): PickerItem {
+ return createElement(Item, { value }, icon) as PickerItem;
}
function labelItem(value: string): PickerItem {
- // eslint-disable-next-line react/no-children-prop
- return createElement(Item, { value, children: 'label' }) as PickerItem;
+ return createElement(Item, { value }, 'label') as PickerItem;
}
describe('getValidShape', () => {
@@ -25,11 +25,15 @@ describe('getValidShape', () => {
expect(getValidShape('default', [labelItem('a')])).toBe('default');
});
- it("returns 'circle' when every item has icon-only children", () => {
+ it("returns 'circle' when every item has an explicit prefix icon", () => {
expect(getValidShape('circle', [iconItem('a'), iconItem('b')])).toBe('circle');
});
- it("falls back to 'default' and logs an error when an item has a string child", () => {
+ it("returns 'circle' for the existing icon-child API", () => {
+ expect(getValidShape('circle', [legacyIconItem('a'), legacyIconItem('b')])).toBe('circle');
+ });
+
+ it("falls back to 'default' and logs an error when an item has a label", () => {
const spy = vi.spyOn(console, 'error').mockImplementation(() => {});
expect(getValidShape('circle', [iconItem('a'), labelItem('b')])).toBe('default');
diff --git a/packages/ui/src/components/segment-picker/utils/get-valid-shape.ts b/packages/ui/src/components/segment-picker/utils/get-valid-shape.ts
index d70248787..f3d857df0 100644
--- a/packages/ui/src/components/segment-picker/utils/get-valid-shape.ts
+++ b/packages/ui/src/components/segment-picker/utils/get-valid-shape.ts
@@ -1,20 +1,22 @@
-import { Shape } from '@ui/components/button/types';
-import { ReactElement } from 'react';
+import type { Shape } from '@ui/components/button/types';
+import { type ReactElement, isValidElement } from 'react';
-import { hasIconChildrenOnly } from '../../button/guards';
-import { Item, SegmentPickerItemProps } from '../item/segment-picker-item';
+import { Item, type SegmentPickerItemProps } from '../item/segment-picker-item';
export function getValidShape(shape: Shape, items: ReactElement[]): Shape {
if (shape !== 'circle') {
return shape;
}
- const everyItemHasOnlyIcon = items.every((item) => hasIconChildrenOnly({ children: item.props.children }));
+ const everyItemHasOnlyIcon = items.every(({ props }) => {
+ const hasExplicitIcon = props.prefixIcon != null && props.children == null && props.suffixIcon == null;
+ const hasLegacyIconChild = props.prefixIcon == null && isValidElement(props.children) && props.suffixIcon == null;
+
+ return hasExplicitIcon || hasLegacyIconChild;
+ });
if (!everyItemHasOnlyIcon) {
- console.error(
- '[SegmentPicker] The "circle" shape can only be used when all SegmentPicker.Item components contain icon-only children.',
- );
+ console.error('[SegmentPicker] The "circle" shape can only be used when all items contain only a prefix icon.');
return 'default';
}
diff --git a/packages/ui/src/components/snackbar/components/action-buttons.tsx b/packages/ui/src/components/snackbar/components/action-buttons.tsx
index 32dc2f8fd..c526cd203 100644
--- a/packages/ui/src/components/snackbar/components/action-buttons.tsx
+++ b/packages/ui/src/components/snackbar/components/action-buttons.tsx
@@ -34,9 +34,7 @@ export function ActionButtons({ variant, buttonLabel, onButtonClick, close, onCl
)}
{close && onClose && (
-
-
+
);