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

chore: replace MUI tables#20201

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
BrunoQuaresma merged 8 commits intomainfrombq/replace-table
Oct 9, 2025
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletionsbiome.jsonc
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -53,6 +53,7 @@
"@mui/material/Box": "Use a <div> instead.",
"@mui/material/Button": "Use a components/Button/Button instead.",
"@mui/material/styles": "Import from @emotion/react instead.",
"@mui/material/Table*": "Import from components/Table/Table instead.",
"lodash": "Use lodash/<name> instead."
}
}
Expand Down
12 changes: 6 additions & 6 deletionssite/e2e/api.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -213,7 +213,7 @@ export async function verifyConfigFlagBoolean(
const value = opt.value ? "Enabled" : "Disabled";

const configOption = page.locator(
`div.options-table .option-${flag} .${type}`,
`table.options-table .option-${flag} .${type}`,
);
await expect(configOption).toHaveText(value);
}
Expand All@@ -225,7 +225,7 @@ export async function verifyConfigFlagNumber(
) {
const opt = findConfigOption(config, flag);
const configOption = page.locator(
`div.options-table .option-${flag} .option-value-number`,
`table.options-table .option-${flag} .option-value-number`,
);
await expect(configOption).toHaveText(String(opt.value));
}
Expand All@@ -238,7 +238,7 @@ export async function verifyConfigFlagString(
const opt = findConfigOption(config, flag);

const configOption = page.locator(
`div.options-table .option-${flag} .option-value-string`,
`table.options-table .option-${flag} .option-value-string`,
);
// biome-ignore lint/suspicious/noExplicitAny: opt.value is any
await expect(configOption).toHaveText(opt.value as any);
Expand All@@ -251,7 +251,7 @@ export async function verifyConfigFlagArray(
) {
const opt = findConfigOption(config, flag);
const configOption = page.locator(
`div.options-table .option-${flag} .option-array`,
`table.options-table .option-${flag} .option-array`,
);

// Verify array of options with simple dots
Expand All@@ -268,7 +268,7 @@ export async function verifyConfigFlagEntries(
) {
const opt = findConfigOption(config, flag);
const configOption = page.locator(
`div.options-table .option-${flag} .option-array`,
`table.options-table .option-${flag} .option-array`,
);

// Verify array of options with green marks.
Expand DownExpand Up@@ -296,7 +296,7 @@ export async function verifyConfigFlagDuration(
);
}
const configOption = page.locator(
`div.options-table .option-${flag} .option-value-string`,
`table.options-table .option-${flag} .option-value-string`,
);
await expect(configOption).toHaveText(humanDuration(opt.value / 1e6));
}
Expand Down
2 changes: 1 addition & 1 deletionsite/e2e/tests/deployment/general.spec.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -19,7 +19,7 @@ test("experiments", async ({ page }) => {
await page.goto("/deployment/overview", { waitUntil: "domcontentloaded" });

const experimentsLocator = page.locator(
"div.options-table tr.option-experiments ul.option-array",
"table.options-table tr.option-experiments ul.option-array",
);
await expect(experimentsLocator).toBeVisible();

Expand Down
2 changes: 1 addition & 1 deletionsite/e2e/tests/deployment/security.spec.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -47,7 +47,7 @@ async function verifyStrictTransportSecurity(
}

const configOption = page.locator(
`div.options-table .option-${flag} .option-value-string`,
`table.options-table .option-${flag} .option-value-string`,
);
await expect(configOption).toHaveText("Disabled");
}
35 changes: 18 additions & 17 deletionssite/src/components/Table/Table.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -47,7 +47,7 @@ export const TableBody = React.forwardRef<
/>
));

const_TableFooter = React.forwardRef<
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

how did this end up unused?

Copy link
ContributorAuthor

@BrunoQuaresmaBrunoQuaresmaOct 8, 2025•
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

The tables we had weren’t using it 😕

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

it's not really doing anything novel/complicated. I would rather we delete unused code than ignore it.

exportconstTableFooter = React.forwardRef<
HTMLTableSectionElement,
React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
Expand DownExpand Up@@ -82,22 +82,23 @@ const tableRowVariants = cva(
},
);

export const TableRow = React.forwardRef<
HTMLTableRowElement,
React.HTMLAttributes<HTMLTableRowElement> &
VariantProps<typeof tableRowVariants>
>(({ className, hover, ...props }, ref) => (
<tr
ref={ref}
className={cn(
"border-0 border-b border-solid border-border transition-colors",
"data-[state=selected]:bg-muted",
tableRowVariants({ hover }),
className,
)}
{...props}
/>
));
export type TableRowProps = React.HTMLAttributes<HTMLTableRowElement> &
VariantProps<typeof tableRowVariants>;

export const TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(
({ className, hover, ...props }, ref) => (
<tr
ref={ref}
className={cn(
"border-0 border-b border-solid border-border transition-colors",
"data-[state=selected]:bg-muted",
tableRowVariants({ hover }),
className,
)}
{...props}
/>
),
);

export const TableHead = React.forwardRef<
HTMLTableCellElement,
Expand Down
16 changes: 6 additions & 10 deletionssite/src/components/TableEmpty/TableEmpty.stories.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableContainer from "@mui/material/TableContainer";
import type { Meta, StoryObj } from "@storybook/react-vite";
import { CodeExample } from "components/CodeExample/CodeExample";
import { Table, TableBody } from "components/Table/Table";
import { TableEmpty } from "./TableEmpty";

const meta: Meta<typeof TableEmpty> = {
Expand All@@ -13,13 +11,11 @@ const meta: Meta<typeof TableEmpty> = {
},
decorators: [
(Story) => (
<TableContainer>
<Table>
<TableBody>
<Story />
</TableBody>
</Table>
</TableContainer>
<Table>
<TableBody>
<Story />
</TableBody>
</Table>
),
],
};
Expand Down
3 changes: 1 addition & 2 deletionssite/src/components/TableEmpty/TableEmpty.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
import TableCell from "@mui/material/TableCell";
import TableRow from "@mui/material/TableRow";
import {
EmptyState,
type EmptyStateProps,
} from "components/EmptyState/EmptyState";
import { TableCell, TableRow } from "components/Table/Table";
import type { FC } from "react";

type TableEmptyProps = EmptyStateProps;
Expand Down
16 changes: 6 additions & 10 deletionssite/src/components/TableLoader/TableLoader.stories.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,17 @@
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableContainer from "@mui/material/TableContainer";
import type { Meta, StoryObj } from "@storybook/react-vite";
import { Table, TableBody } from "components/Table/Table";
import { TableLoader } from "./TableLoader";

const meta: Meta<typeof TableLoader> = {
title: "components/TableLoader",
component: TableLoader,
decorators: [
(Story) => (
<TableContainer>
<Table>
<TableBody>
<Story />
</TableBody>
</Table>
</TableContainer>
<Table>
<TableBody>
<Story />
</TableBody>
</Table>
),
],
};
Expand Down
7 changes: 5 additions & 2 deletionssite/src/components/TableLoader/TableLoader.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
import TableCell from "@mui/material/TableCell";
import TableRow, { type TableRowProps } from "@mui/material/TableRow";
import {
TableCell,
TableRow,
type TableRowProps,
} from "components/Table/Table";
import { cloneElement, type FC, isValidElement, type ReactNode } from "react";
import { Loader } from "../Loader/Loader";

Expand Down
3 changes: 1 addition & 2 deletionssite/src/components/Timeline/TimelineDateRow.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
import { css, useTheme } from "@emotion/react";
import TableCell from "@mui/material/TableCell";
import TableRow from "@mui/material/TableRow";
import { TableCell, TableRow } from "components/Table/Table";
import type { FC } from "react";
import { createDisplayDate } from "./utils";

Expand Down
2 changes: 1 addition & 1 deletionsite/src/components/Timeline/TimelineEntry.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
import TableRow,{type TableRowProps } from "@mui/material/TableRow";
import{TableRow, type TableRowProps } from "components/Table/Table";
import { forwardRef } from "react";
import { cn } from "utils/cn";

Expand Down
24 changes: 6 additions & 18 deletionssite/src/pages/AuditPage/AuditLogRow/AuditLogRow.stories.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -8,32 +8,20 @@ import {
MockAuditLogWithWorkspaceBuild,
MockUserOwner,
} from "testHelpers/entities";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import type { Meta, StoryObj } from "@storybook/react-vite";
import { Table, TableBody } from "components/Table/Table";
import { AuditLogRow } from "./AuditLogRow";

const meta: Meta<typeof AuditLogRow> = {
title: "pages/AuditPage/AuditLogRow",
component: AuditLogRow,
decorators: [
(Story) => (
<TableContainer>
<Table>
<TableHead>
<TableRow>
<TableCell style={{ paddingLeft: 32 }}>Logs</TableCell>
</TableRow>
</TableHead>
<TableBody>
<Story />
</TableBody>
</Table>
</TableContainer>
<Table>
<TableBody>
<Story />
</TableBody>
</Table>
),
],
};
Expand Down
2 changes: 1 addition & 1 deletionsite/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
import type { CSSObject, Interpolation, Theme } from "@emotion/react";
import Collapse from "@mui/material/Collapse";
import Link from "@mui/material/Link";
import TableCell from "@mui/material/TableCell";
import Tooltip from "@mui/material/Tooltip";
import type { AuditLog, BuildReason } from "api/typesGenerated";
import { Avatar } from "components/Avatar/Avatar";
import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
import { Stack } from "components/Stack/Stack";
import { StatusPill } from "components/StatusPill/StatusPill";
import { TableCell } from "components/Table/Table";
import { TimelineEntry } from "components/Timeline/TimelineEntry";
import { InfoIcon, NetworkIcon } from "lucide-react";
import { type FC, useState } from "react";
Expand Down
Loading
Loading
[8]ページ先頭
©2009-2025 Movatter.jp