Skip to content

Commit fd7e64e

Browse files
michaldudakmichaldudak
committed
Enable checking individual components
1 parent a7e37d2 commit fd7e64e

File tree

4 files changed

+207
-85
lines changed

4 files changed

+207
-85
lines changed

‎docs/src/app/(private)/experiments/perf/contained-triggers.tsx‎

Lines changed: 68 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,30 @@ import * as React from 'react';
33
import { Menu } from '@base-ui-components/react/menu';
44
import { Tooltip } from '@base-ui-components/react/tooltip';
55
import { Popover } from '@base-ui-components/react/popover';
6+
import {
7+
SettingsMetadata,
8+
useExperimentSettings,
9+
} from 'docs/src/components/Experiments/SettingsPanel';
610
import menuDemoStyles from 'docs/src/app/(public)/(content)/react/components/menu/demos/submenu/css-modules/index.module.css';
711
import tooltipDemoStyles from 'docs/src/app/(public)/(content)/react/components/tooltip/demos/hero/css-modules/index.module.css';
812
import popoverDemoStyles from 'docs/src/app/(public)/(content)/react/components/popover/demos/_index.module.css';
913
import styles from './perf.module.css';
1014
import PerformanceBenchmark from './utils/benchmark';
1115

12-
type RowData = {
16+
interface Settings {
17+
renderMenu: boolean;
18+
renderTooltip: boolean;
19+
renderPopover: boolean;
20+
}
21+
22+
interface RowData {
1323
label: string;
1424
index: number;
15-
};
25+
}
26+
27+
interface RowProps {
28+
rowData: RowData;
29+
}
1630

1731
const rowCount = 500;
1832
const menuItemCount = 50;
@@ -39,47 +53,30 @@ export default function PerfExperiment() {
3953
}
4054

4155
function TestComponent() {
56+
const { settings } = useExperimentSettings<Settings>();
57+
const { renderMenu, renderTooltip, renderPopover } = settings;
4258
return (
4359
<div className={styles.rows}>
4460
{rows.map((row) => (
4561
<div key={row.index} className={styles.row}>
4662
<span className={styles.label}>{row.label}</span>
4763
<span className={styles.actions}>
48-
<RowPopover rowData={row} />
49-
<RowMenu rowData={row} />
64+
{renderPopover && <RowPopover rowData={row} />}
65+
{renderTooltip && <RowTooltip rowData={row} />}
66+
{renderMenu && <RowMenu rowData={row} />}
5067
</span>
5168
</div>
5269
))}
5370
</div>
5471
);
5572
}
5673

57-
interface RowMenuProps {
58-
rowData: RowData;
59-
}
60-
61-
function RowMenu({ rowData }: RowMenuProps) {
74+
function RowMenu({ rowData }: RowProps) {
6275
return (
6376
<Menu.Root>
64-
<Tooltip.Root>
65-
<Tooltip.Trigger
66-
className={menuDemoStyles.Trigger}
67-
data-id={rowData.index}
68-
render={(props) => <Menu.Trigger {...props} />}
69-
>
70-
•••
71-
</Tooltip.Trigger>
72-
<Tooltip.Portal>
73-
<Tooltip.Positioner sideOffset={10}>
74-
<Tooltip.Popup className={tooltipDemoStyles.Popup}>
75-
<Tooltip.Arrow className={tooltipDemoStyles.Arrow}>
76-
<ArrowSvg />
77-
</Tooltip.Arrow>
78-
Actions menu for {rowData.label}
79-
</Tooltip.Popup>
80-
</Tooltip.Positioner>
81-
</Tooltip.Portal>
82-
</Tooltip.Root>
77+
<Menu.Trigger className={menuDemoStyles.Button} data-id={rowData.index}>
78+
Menu
79+
</Menu.Trigger>
8380
<Menu.Portal>
8481
<Menu.Positioner sideOffset={8} className={menuDemoStyles.Positioner}>
8582
<Menu.Popup className={menuDemoStyles.Popup}>
@@ -102,24 +99,46 @@ function RowMenu({ rowData }: RowMenuProps) {
10299
);
103100
}
104101

105-
function RowPopover({ rowData }: RowMenuProps) {
102+
function RowPopover({ rowData }: RowProps) {
106103
return (
107104
<Popover.Root>
108-
<Popover.Trigger className={popoverDemoStyles.Button}>info</Popover.Trigger>
105+
<Popover.Trigger className={menuDemoStyles.Button} data-id={rowData.index}>
106+
Popover
107+
</Popover.Trigger>
109108
<Popover.Portal>
110109
<Popover.Positioner sideOffset={8} className={popoverDemoStyles.Positioner}>
111110
<Popover.Popup className={popoverDemoStyles.Popup}>
112111
<Popover.Arrow className={popoverDemoStyles.Arrow}>
113112
<ArrowSvg />
114113
</Popover.Arrow>
115-
{rowData && <div>Details for {rowData.label}</div>}
114+
{rowData && <div>Popover for {rowData.label}</div>}
116115
</Popover.Popup>
117116
</Popover.Positioner>
118117
</Popover.Portal>
119118
</Popover.Root>
120119
);
121120
}
122121

122+
function RowTooltip({ rowData }: RowProps) {
123+
return (
124+
<Tooltip.Root>
125+
<Tooltip.Trigger className={menuDemoStyles.Button} data-id={rowData.index}>
126+
Tooltip
127+
</Tooltip.Trigger>
128+
<Tooltip.Portal>
129+
<Tooltip.Positioner sideOffset={10}>
130+
<Tooltip.Popup className={tooltipDemoStyles.Popup}>
131+
<Tooltip.Arrow className={tooltipDemoStyles.Arrow}>
132+
<ArrowSvg />
133+
</Tooltip.Arrow>
134+
Tooltip for {rowData.label}
135+
</Tooltip.Popup>
136+
</Tooltip.Positioner>
137+
</Tooltip.Portal>
138+
</Tooltip.Root>
139+
);
140+
}
141+
123142
function ArrowSvg(props: React.ComponentProps<'svg'>) {
124143
return (
125144
<svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
@@ -138,3 +157,21 @@ function ArrowSvg(props: React.ComponentProps<'svg'>) {
138157
</svg>
139158
);
140159
}
160+
161+
export const settingsMetadata: SettingsMetadata<Settings> = {
162+
renderMenu: {
163+
type: 'boolean',
164+
default: true,
165+
label: 'Render Menu',
166+
},
167+
renderTooltip: {
168+
type: 'boolean',
169+
default: true,
170+
label: 'Render Tooltip',
171+
},
172+
renderPopover: {
173+
type: 'boolean',
174+
default: true,
175+
label: 'Render Popover',
176+
},
177+
};

‎docs/src/app/(private)/experiments/perf/detached-triggers.tsx‎

Lines changed: 73 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,26 @@ import * as React from 'react';
33
import { Menu } from '@base-ui-components/react/menu';
44
import { Tooltip } from '@base-ui-components/react/tooltip';
55
import { Popover } from '@base-ui-components/react/popover';
6+
import {
7+
SettingsMetadata,
8+
useExperimentSettings,
9+
} from 'docs/src/components/Experiments/SettingsPanel';
610
import menuDemoStyles from 'docs/src/app/(public)/(content)/react/components/menu/demos/submenu/css-modules/index.module.css';
711
import tooltipDemoStyles from 'docs/src/app/(public)/(content)/react/components/tooltip/demos/hero/css-modules/index.module.css';
812
import popoverDemoStyles from 'docs/src/app/(public)/(content)/react/components/popover/demos/_index.module.css';
913
import styles from './perf.module.css';
1014
import PerformanceBenchmark from './utils/benchmark';
1115

12-
type RowData = {
16+
interface Settings {
17+
renderMenu: boolean;
18+
renderTooltip: boolean;
19+
renderPopover: boolean;
20+
}
21+
22+
interface RowData {
1323
label: string;
1424
index: number;
15-
};
25+
}
1626

1727
const rowCount = 500;
1828
const menuItemCount = 50;
@@ -28,13 +38,13 @@ const menuItems = Array.from({ length: menuItemCount }).map((_, i) => ({
2838
}));
2939

3040
const rowMenuHandle = Menu.createHandle<RowData>();
31-
const genericTooltipHandle = Tooltip.createHandle<string>();
41+
const genericTooltipHandle = Tooltip.createHandle<RowData>();
3242
const rowPopoverHandle = Popover.createHandle<RowData>();
3343

3444
export default function PerfExperiment() {
3545
return (
3646
<div className={styles.container}>
37-
<h1>Component performance - detached triggers</h1>
47+
<h1>Initial render performance - detached triggers</h1>
3848
<PerformanceBenchmark>
3949
<TestComponent />
4050
</PerformanceBenchmark>
@@ -43,36 +53,53 @@ export default function PerfExperiment() {
4353
}
4454

4555
function TestComponent() {
56+
const { settings } = useExperimentSettings<Settings>();
57+
const { renderMenu, renderTooltip, renderPopover } = settings;
4658
return (
4759
<div>
4860
<div className={styles.rows}>
4961
{rows.map((row) => (
5062
<div key={row.index} className={styles.row}>
5163
<span className={styles.label}>{row.label}</span>
5264
<span className={styles.actions}>
53-
<Popover.Trigger
54-
handle={rowPopoverHandle}
55-
payload={row}
56-
className={popoverDemoStyles.Button}
57-
>
58-
info
59-
</Popover.Trigger>
60-
<Tooltip.Trigger
61-
handle={genericTooltipHandle}
62-
render={(props) => <Menu.Trigger {...props} handle={rowMenuHandle} payload={row} />}
63-
className={menuDemoStyles.Trigger}
64-
payload={`Actions menu for ${row.label}`}
65-
data-id={row.index}
66-
>
67-
•••
68-
</Tooltip.Trigger>
65+
{renderPopover && (
66+
<Popover.Trigger
67+
handle={rowPopoverHandle}
68+
payload={row}
69+
className={menuDemoStyles.Button}
70+
data-id={row.index}
71+
>
72+
Popover
73+
</Popover.Trigger>
74+
)}
75+
76+
{renderTooltip && (
77+
<Tooltip.Trigger
78+
handle={genericTooltipHandle}
79+
payload={row}
80+
className={menuDemoStyles.Button}
81+
data-id={row.index}
82+
>
83+
Tooltip
84+
</Tooltip.Trigger>
85+
)}
86+
{renderMenu && (
87+
<Menu.Trigger
88+
handle={rowMenuHandle}
89+
payload={row}
90+
className={menuDemoStyles.Button}
91+
data-id={row.index}
92+
>
93+
Menu
94+
</Menu.Trigger>
95+
)}
6996
</span>
7097
</div>
7198
))}
7299
</div>
73-
<RowMenu />
74-
<GenericTooltip />
75-
<RowPopover />
100+
{renderMenu && <RowMenu />}
101+
{renderTooltip && <RowTooltip />}
102+
{renderPopover && <RowPopover />}
76103
</div>
77104
);
78105
}
@@ -118,7 +145,7 @@ function RowPopover() {
118145
<Popover.Arrow className={popoverDemoStyles.Arrow}>
119146
<ArrowSvg />
120147
</Popover.Arrow>
121-
{rowData && <div>Details for {rowData.label}</div>}
148+
{rowData && <div>Popover for {rowData.label}</div>}
122149
</Popover.Popup>
123150
</Popover.Positioner>
124151
</Popover.Portal>
@@ -127,18 +154,18 @@ function RowPopover() {
127154
);
128155
}
129156

130-
function GenericTooltip() {
157+
function RowTooltip() {
131158
return (
132159
<Tooltip.Root handle={genericTooltipHandle}>
133-
{({ payload: content }) =>
134-
content ? (
160+
{({ payload: rowData }) =>
161+
rowData ? (
135162
<Tooltip.Portal>
136163
<Tooltip.Positioner sideOffset={10}>
137164
<Tooltip.Popup className={tooltipDemoStyles.Popup}>
138165
<Tooltip.Arrow className={tooltipDemoStyles.Arrow}>
139166
<ArrowSvg />
140167
</Tooltip.Arrow>
141-
{content}
168+
Tooltip for {rowData.label}
142169
</Tooltip.Popup>
143170
</Tooltip.Positioner>
144171
</Tooltip.Portal>
@@ -166,3 +193,21 @@ function ArrowSvg(props: React.ComponentProps<'svg'>) {
166193
</svg>
167194
);
168195
}
196+
197+
export const settingsMetadata: SettingsMetadata<Settings> = {
198+
renderMenu: {
199+
type: 'boolean',
200+
default: true,
201+
label: 'Render Menu',
202+
},
203+
renderTooltip: {
204+
type: 'boolean',
205+
default: true,
206+
label: 'Render Tooltip',
207+
},
208+
renderPopover: {
209+
type: 'boolean',
210+
default: true,
211+
label: 'Render Popover',
212+
},
213+
};

‎docs/src/app/(private)/experiments/perf/perf.module.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
padding: 8px;
1313
display: flex;
1414
justify-content: space-between;
15+
align-items: center;
1516
border-bottom: 1px solid var(--color-gray-300);
1617
}
1718

0 commit comments

Comments
 (0)