Skip to content

Commit ce365d1

Browse files
librowskilibrowski
committed
feat(ui)!: rebuild NavButton, add MenuTriggerButton
NavButton takes size, styleVariant and explicit icon slots, so the label/icon/icon+label subtypes and the shared children-shape guards are gone - nothing imports them any more, so they are deleted too. The selected state and the mouse-down state are now separate: selection survives hover and pointer-down overrides it, each on its own token, which is what the design defines and what the token export ships. Seven sizes carry the design's boxes, padding, gap, radius and icon boxes; nav labels keep the regular weight. MenuTriggerButton composes NavButton and maps its open state onto selection. SegmentPicker keeps its public API and translates to the new slots internally.
1 parent ccf1827 commit ce365d1

56 files changed

Lines changed: 645 additions & 676 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.changeset/nav-button-redesign.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@workflowbuilder/ui': major
3+
'@workflowbuilder/sdk': minor
4+
---
5+
6+
NavButton now uses letter sizes and explicit `size`, `styleVariant`, `prefixIcon`, `suffixIcon`, and `children` inputs instead of inferring variants from the children structure. Its persistent selected state is separate from the mouse-down state, and MenuTriggerButton is available as a fixed-size menu trigger composition.

‎.changeset/ui-export-prop-types.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@
22
'@workflowbuilder/ui': minor
33
---
44

5-
Component prop types are now exported: `AvatarProps`, `CheckboxProps`, `RadioProps`, `StatusProps`, `TooltipProps`, `MenuProps`, `ModalProps`, `EdgeLabelProps`, `NodeIconProps`, `NodeDescriptionProps`, `NodeAsPortWrapperProps`, `SegmentPickerProps` (with its controlled/uncontrolled variants), the NavButton variant prop types, and `DatePickerProps` now covers the component's full runtime surface (`value`, `defaultValue`, `placeholder`, `valueFormat`, `type`, `error`). Supporting types used in those signatures (`Shape`, `IconNode`) are exported as well.
5+
Component prop types are now exported: `AvatarProps`, `CheckboxProps`, `RadioProps`, `StatusProps`, `TooltipProps`, `MenuProps`, `ModalProps`, `EdgeLabelProps`, `NodeIconProps`, `NodeDescriptionProps`, `NodeAsPortWrapperProps`, `SegmentPickerProps` (with its controlled/uncontrolled variants), `NavButtonProps`, and `DatePickerProps` now covers the component's full runtime surface (`value`, `defaultValue`, `placeholder`, `valueFormat`, `type`, `error`). Supporting types used in those signatures (`Shape`, `IconNode`) are exported as well.

‎apps/ai-studio/src/components/controls/ai-studio-controls.tsx‎

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -38,18 +38,28 @@ export function AiStudioControls() {
3838
>
3939
<div className={styles['panel']}>
4040
{isRunning ? (
41-
<NavButton onClick={cancel} tooltip="Cancel execution">
42-
<Icon name="Stop" />
43-
</NavButton>
41+
<NavButton
42+
aria-label="Cancel execution"
43+
onClick={cancel}
44+
tooltip="Cancel execution"
45+
prefixIcon={<Icon name="Stop" />}
46+
/>
4447
) : (
45-
<NavButton onClick={handleExecute} tooltip="Execute (backend)" disabled={isRunning}>
46-
<Icon name="Play" />
47-
</NavButton>
48+
<NavButton
49+
aria-label="Execute (backend)"
50+
onClick={handleExecute}
51+
tooltip="Execute (backend)"
52+
disabled={isRunning}
53+
prefixIcon={<Icon name="Play" />}
54+
/>
4855
)}
4956
{isDone && (
50-
<NavButton onClick={reset} tooltip="Reset">
51-
<Icon name="ArrowCounterClockwise" />
52-
</NavButton>
57+
<NavButton
58+
aria-label="Reset"
59+
onClick={reset}
60+
tooltip="Reset"
61+
prefixIcon={<Icon name="ArrowCounterClockwise" />}
62+
/>
5363
)}
5464
</div>
5565
</div>

‎apps/ai-studio/src/plugins/undo-redo/components/buttons-undo-redo/buttons-undo-redo.tsx‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,20 @@ export function ButtonsUndoRedo() {
1212

1313
return (
1414
<>
15-
<NavButton onClick={undo} disabled={!canUndo || isReadOnlyMode} tooltip={t('plugins.undoRedo.undo')}>
16-
<Icon name="ArrowUUpLeft" />
17-
</NavButton>
18-
<NavButton onClick={redo} disabled={!canRedo || isReadOnlyMode} tooltip={t('plugins.undoRedo.redo')}>
19-
<Icon name="ArrowUUpRight" />
20-
</NavButton>
15+
<NavButton
16+
aria-label={t('plugins.undoRedo.undo')}
17+
onClick={undo}
18+
disabled={!canUndo || isReadOnlyMode}
19+
tooltip={t('plugins.undoRedo.undo')}
20+
prefixIcon={<Icon name="ArrowUUpLeft" />}
21+
/>
22+
<NavButton
23+
aria-label={t('plugins.undoRedo.redo')}
24+
onClick={redo}
25+
disabled={!canRedo || isReadOnlyMode}
26+
tooltip={t('plugins.undoRedo.redo')}
27+
prefixIcon={<Icon name="ArrowUUpRight" />}
28+
/>
2129
</>
2230
);
2331
}

‎apps/demo/src/app/plugins/undo-redo/components/buttons-undo-redo/buttons-undo-redo.tsx‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,20 @@ export function ButtonsUndoRedo() {
1212

1313
return (
1414
<>
15-
<NavButton onClick={undo} disabled={!canUndo || isReadOnlyMode} tooltip={t('plugins.undoRedo.undo')}>
16-
<Icon name="ArrowUUpLeft" />
17-
</NavButton>
18-
<NavButton onClick={redo} disabled={!canRedo || isReadOnlyMode} tooltip={t('plugins.undoRedo.redo')}>
19-
<Icon name="ArrowUUpRight" />
20-
</NavButton>
15+
<NavButton
16+
aria-label={t('plugins.undoRedo.undo')}
17+
onClick={undo}
18+
disabled={!canUndo || isReadOnlyMode}
19+
tooltip={t('plugins.undoRedo.undo')}
20+
prefixIcon={<Icon name="ArrowUUpLeft" />}
21+
/>
22+
<NavButton
23+
aria-label={t('plugins.undoRedo.redo')}
24+
onClick={redo}
25+
disabled={!canRedo || isReadOnlyMode}
26+
tooltip={t('plugins.undoRedo.redo')}
27+
prefixIcon={<Icon name="ArrowUUpRight" />}
28+
/>
2129
</>
2230
);
2331
}

‎apps/docs/scripts/ui-components.mjs‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,18 @@ export const COMPONENTS = [
2525
{ slug: 'icon-switch', name: 'IconSwitch', propsType: 'IconSwitchProps', dir: 'switch/icon-switch' },
2626
{ slug: 'input', name: 'Input', propsType: 'InputProps', dir: 'input' },
2727
{ slug: 'menu', name: 'Menu', propsType: 'MenuProps', dir: 'menu' },
28+
{
29+
slug: 'menu-trigger-button',
30+
name: 'MenuTriggerButton',
31+
propsType: 'MenuTriggerButtonProps',
32+
dir: 'button/menu-trigger-button',
33+
},
2834
{ slug: 'modal', name: 'Modal', propsType: 'ModalProps', dir: 'modal' },
2935
{ slug: 'number-field', name: 'NumberField', propsType: 'NumberFieldProps', dir: 'number-field' },
3036
{
3137
slug: 'nav-button',
3238
name: 'NavButton',
33-
propsType: ['NavLabelButtonProps', 'NavIconButtonProps', 'NavIconLabelButtonProps'],
39+
propsType: 'NavButtonProps',
3440
dir: 'button/nav-button',
3541
},
3642
{ slug: 'radio', name: 'Radio', propsType: 'RadioProps', dir: 'radio-button' },

‎apps/docs/src/components/ui-examples/menu-trigger-button.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { DotsThreeVertical } from '@phosphor-icons/react';
2+
import { Menu, MenuTriggerButton } from '@workflowbuilder/ui';
3+
import { useState } from 'react';
4+
5+
import { ComponentPreview } from './component-preview';
6+
7+
export function MenuTriggerButtonExample() {
8+
const [isOpen, setIsOpen] = useState(false);
9+
10+
return (
11+
<ComponentPreview>
12+
<Menu
13+
open={isOpen}
14+
onOpenChange={setIsOpen}
15+
items={[
16+
{ label: 'Edit', onClick: () => {} },
17+
{ label: 'Duplicate', onClick: () => {} },
18+
{ label: 'Delete', destructive: true, onClick: () => {} },
19+
]}
20+
>
21+
<MenuTriggerButton isOpen={isOpen} aria-label="Open menu">
22+
<DotsThreeVertical />
23+
</MenuTriggerButton>
24+
</Menu>
25+
</ComponentPreview>
26+
);
27+
}

‎apps/docs/src/components/ui-examples/nav-button.module.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.rows {
2+
display: flex;
3+
flex-direction: column;
4+
gap: var(--wb-space-150);
5+
}
6+
7+
.row {
8+
display: flex;
9+
flex-wrap: wrap;
10+
align-items: center;
11+
gap: var(--wb-space-100);
12+
}

‎apps/docs/src/components/ui-examples/nav-button.tsx‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,32 @@
1-
import { NavButton } from '@workflowbuilder/ui';
1+
import { ArrowRight, House, Plus } from '@phosphor-icons/react';
2+
import { NAV_BUTTON_SIZES, NavButton } from '@workflowbuilder/ui';
3+
4+
import styles from './nav-button.module.css';
25

36
import { ComponentPreview } from './component-preview';
47

58
export function NavButtonExample() {
69
return (
710
<ComponentPreview>
8-
<NavButton>Nav button</NavButton>
11+
<div className={styles['rows']}>
12+
<div className={styles['row']}>
13+
<NavButton prefixIcon={<House />}>Square</NavButton>
14+
<NavButton styleVariant="round" prefixIcon={<House />}>
15+
Round
16+
</NavButton>
17+
<NavButton styleVariant="plain" prefixIcon={<House />}>
18+
Plain
19+
</NavButton>
20+
<NavButton isSelected prefixIcon={<House />} suffixIcon={<ArrowRight />}>
21+
Selected
22+
</NavButton>
23+
</div>
24+
<div className={styles['row']}>
25+
{NAV_BUTTON_SIZES.map((size) => (
26+
<NavButton key={size} aria-label={`Add (${size})`} size={size} prefixIcon={<Plus />} />
27+
))}
28+
</div>
29+
</div>
930
</ComponentPreview>
1031
);
1132
}

‎apps/docs/src/content/docs/ui-library/ui-components/index.mdx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ live, interactive example plus the component's props and CSS variables.
1717
- [DatePicker](/ui-library/ui-components/date-picker/) - Date selection with a calendar popover.
1818
- [Input](/ui-library/ui-components/input/) - Text input with icons and explicit field states.
1919
- [Menu](/ui-library/ui-components/menu/) - Popup menu for dropdowns.
20+
- [MenuTriggerButton](/ui-library/ui-components/menu-trigger-button/) - Icon button for opening a menu.
2021
- [Modal](/ui-library/ui-components/modal/) - Dialog overlay with a backdrop.
2122
- [NavButton](/ui-library/ui-components/nav-button/) - Compact icon / label navigation button.
2223
- [NumberField](/ui-library/ui-components/number-field/) - Numeric input with stepper controls.

0 commit comments

Comments
 (0)