Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit8f2394c

Browse files
chore: replace MUI tables (#20201)
I tried to break this work into smaller pieces, but since there are alot of dependent components, I decided to handle it in one larger chunkand rely on Storybook to catch any bugs.That said, let me know if you’d prefer a different approach!
1 parented90ecf commit8f2394c

File tree

33 files changed

+795
-921
lines changed

33 files changed

+795
-921
lines changed

‎biome.jsonc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@
5353
"@mui/material/Box":"Use a <div> instead.",
5454
"@mui/material/Button":"Use a components/Button/Button instead.",
5555
"@mui/material/styles":"Import from @emotion/react instead.",
56+
"@mui/material/Table*":"Import from components/Table/Table instead.",
5657
"lodash":"Use lodash/<name> instead."
5758
}
5859
}

‎site/e2e/api.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -213,7 +213,7 @@ export async function verifyConfigFlagBoolean(
213213
constvalue=opt.value ?"Enabled" :"Disabled";
214214

215215
constconfigOption=page.locator(
216-
`div.options-table .option-${flag} .${type}`,
216+
`table.options-table .option-${flag} .${type}`,
217217
);
218218
awaitexpect(configOption).toHaveText(value);
219219
}
@@ -225,7 +225,7 @@ export async function verifyConfigFlagNumber(
225225
){
226226
constopt=findConfigOption(config,flag);
227227
constconfigOption=page.locator(
228-
`div.options-table .option-${flag} .option-value-number`,
228+
`table.options-table .option-${flag} .option-value-number`,
229229
);
230230
awaitexpect(configOption).toHaveText(String(opt.value));
231231
}
@@ -238,7 +238,7 @@ export async function verifyConfigFlagString(
238238
constopt=findConfigOption(config,flag);
239239

240240
constconfigOption=page.locator(
241-
`div.options-table .option-${flag} .option-value-string`,
241+
`table.options-table .option-${flag} .option-value-string`,
242242
);
243243
// biome-ignore lint/suspicious/noExplicitAny: opt.value is any
244244
awaitexpect(configOption).toHaveText(opt.valueasany);
@@ -251,7 +251,7 @@ export async function verifyConfigFlagArray(
251251
){
252252
constopt=findConfigOption(config,flag);
253253
constconfigOption=page.locator(
254-
`div.options-table .option-${flag} .option-array`,
254+
`table.options-table .option-${flag} .option-array`,
255255
);
256256

257257
// Verify array of options with simple dots
@@ -268,7 +268,7 @@ export async function verifyConfigFlagEntries(
268268
){
269269
constopt=findConfigOption(config,flag);
270270
constconfigOption=page.locator(
271-
`div.options-table .option-${flag} .option-array`,
271+
`table.options-table .option-${flag} .option-array`,
272272
);
273273

274274
// Verify array of options with green marks.
@@ -296,7 +296,7 @@ export async function verifyConfigFlagDuration(
296296
);
297297
}
298298
constconfigOption=page.locator(
299-
`div.options-table .option-${flag} .option-value-string`,
299+
`table.options-table .option-${flag} .option-value-string`,
300300
);
301301
awaitexpect(configOption).toHaveText(humanDuration(opt.value/1e6));
302302
}

‎site/e2e/tests/deployment/general.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ test("experiments", async ({ page }) => {
1919
awaitpage.goto("/deployment/overview",{waitUntil:"domcontentloaded"});
2020

2121
constexperimentsLocator=page.locator(
22-
"div.options-table tr.option-experiments ul.option-array",
22+
"table.options-table tr.option-experiments ul.option-array",
2323
);
2424
awaitexpect(experimentsLocator).toBeVisible();
2525

‎site/e2e/tests/deployment/security.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ async function verifyStrictTransportSecurity(
4747
}
4848

4949
constconfigOption=page.locator(
50-
`div.options-table .option-${flag} .option-value-string`,
50+
`table.options-table .option-${flag} .option-value-string`,
5151
);
5252
awaitexpect(configOption).toHaveText("Disabled");
5353
}

‎site/src/components/Table/Table.tsx‎

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export const TableBody = React.forwardRef<
4747
/>
4848
));
4949

50-
const_TableFooter=React.forwardRef<
50+
exportconstTableFooter=React.forwardRef<
5151
HTMLTableSectionElement,
5252
React.HTMLAttributes<HTMLTableSectionElement>
5353
>(({ className, ...props},ref)=>(
@@ -82,22 +82,23 @@ const tableRowVariants = cva(
8282
},
8383
);
8484

85-
exportconstTableRow=React.forwardRef<
86-
HTMLTableRowElement,
87-
React.HTMLAttributes<HTMLTableRowElement>&
88-
VariantProps<typeoftableRowVariants>
89-
>(({ className, hover, ...props},ref)=>(
90-
<tr
91-
ref={ref}
92-
className={cn(
93-
"border-0 border-b border-solid border-border transition-colors",
94-
"data-[state=selected]:bg-muted",
95-
tableRowVariants({ hover}),
96-
className,
97-
)}
98-
{...props}
99-
/>
100-
));
85+
exporttypeTableRowProps=React.HTMLAttributes<HTMLTableRowElement>&
86+
VariantProps<typeoftableRowVariants>;
87+
88+
exportconstTableRow=React.forwardRef<HTMLTableRowElement,TableRowProps>(
89+
({ className, hover, ...props},ref)=>(
90+
<tr
91+
ref={ref}
92+
className={cn(
93+
"border-0 border-b border-solid border-border transition-colors",
94+
"data-[state=selected]:bg-muted",
95+
tableRowVariants({ hover}),
96+
className,
97+
)}
98+
{...props}
99+
/>
100+
),
101+
);
101102

102103
exportconstTableHead=React.forwardRef<
103104
HTMLTableCellElement,

‎site/src/components/TableEmpty/TableEmpty.stories.tsx‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
importTablefrom"@mui/material/Table";
2-
importTableBodyfrom"@mui/material/TableBody";
3-
importTableContainerfrom"@mui/material/TableContainer";
41
importtype{Meta,StoryObj}from"@storybook/react-vite";
52
import{CodeExample}from"components/CodeExample/CodeExample";
3+
import{Table,TableBody}from"components/Table/Table";
64
import{TableEmpty}from"./TableEmpty";
75

86
constmeta:Meta<typeofTableEmpty>={
@@ -13,13 +11,11 @@ const meta: Meta<typeof TableEmpty> = {
1311
},
1412
decorators:[
1513
(Story)=>(
16-
<TableContainer>
17-
<Table>
18-
<TableBody>
19-
<Story/>
20-
</TableBody>
21-
</Table>
22-
</TableContainer>
14+
<Table>
15+
<TableBody>
16+
<Story/>
17+
</TableBody>
18+
</Table>
2319
),
2420
],
2521
};

‎site/src/components/TableEmpty/TableEmpty.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
importTableCellfrom"@mui/material/TableCell";
2-
importTableRowfrom"@mui/material/TableRow";
31
import{
42
EmptyState,
53
typeEmptyStateProps,
64
}from"components/EmptyState/EmptyState";
5+
import{TableCell,TableRow}from"components/Table/Table";
76
importtype{FC}from"react";
87

98
typeTableEmptyProps=EmptyStateProps;

‎site/src/components/TableLoader/TableLoader.stories.tsx‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,17 @@
1-
importTablefrom"@mui/material/Table";
2-
importTableBodyfrom"@mui/material/TableBody";
3-
importTableContainerfrom"@mui/material/TableContainer";
41
importtype{Meta,StoryObj}from"@storybook/react-vite";
2+
import{Table,TableBody}from"components/Table/Table";
53
import{TableLoader}from"./TableLoader";
64

75
constmeta:Meta<typeofTableLoader>={
86
title:"components/TableLoader",
97
component:TableLoader,
108
decorators:[
119
(Story)=>(
12-
<TableContainer>
13-
<Table>
14-
<TableBody>
15-
<Story/>
16-
</TableBody>
17-
</Table>
18-
</TableContainer>
10+
<Table>
11+
<TableBody>
12+
<Story/>
13+
</TableBody>
14+
</Table>
1915
),
2016
],
2117
};

‎site/src/components/TableLoader/TableLoader.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
1-
importTableCellfrom"@mui/material/TableCell";
2-
importTableRow,{typeTableRowProps}from"@mui/material/TableRow";
1+
import{
2+
TableCell,
3+
TableRow,
4+
typeTableRowProps,
5+
}from"components/Table/Table";
36
import{cloneElement,typeFC,isValidElement,typeReactNode}from"react";
47
import{Loader}from"../Loader/Loader";
58

‎site/src/components/Timeline/TimelineDateRow.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import{css,useTheme}from"@emotion/react";
2-
importTableCellfrom"@mui/material/TableCell";
3-
importTableRowfrom"@mui/material/TableRow";
2+
import{TableCell,TableRow}from"components/Table/Table";
43
importtype{FC}from"react";
54
import{createDisplayDate}from"./utils";
65

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp