Skip to content
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 our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(Mantine): support mantine 7 #6345

Open
wants to merge 70 commits into
base: main
Choose a base branch
from
Open
Changes from 1 commit
Commits
Show all changes
70 commits
Select commit Hold shift + click to select a range
13cbd1f
feat(mantine): mantine 7
glebtv Feb 21, 2024
51f4503
feat(inferencer): mantine 7
glebtv Feb 21, 2024
8cdbcb8
feat(ui-tests): mantine 7
glebtv Feb 21, 2024
41febc0
feat(live-previews): mantine 7
glebtv Feb 21, 2024
e06b1dd
feat(examples): mantine 7
glebtv Feb 21, 2024
f7b8900
fix(mantine): mantine select crashes when label is undefined
glebtv Feb 21, 2024
9aaa2d9
Merge branch 'master' into mantine7.v4
BatuhanW Feb 21, 2024
29349da
fix(mantine): fix e2e tests
glebtv Feb 22, 2024
fcee89d
chore: format files
BatuhanW Feb 26, 2024
c85e590
Merge branch 'master' into mantine7.v4
BatuhanW Feb 26, 2024
c67ad52
fix(mantine): restore accidentally removed class
glebtv Feb 26, 2024
9aba874
fix(inferencer): update test snapshots
glebtv Feb 26, 2024
7f16ddb
chore(mantine): remove unused types, remove ThemedLayout v1, remove c…
glebtv Feb 27, 2024
e152887
chore(mantine): add changeset, undo changes to package versions
glebtv Feb 27, 2024
e5e65a5
fix(mantine): better action button variant handling
glebtv Feb 27, 2024
00b4538
fix(mantine): move github banner to appshell footer
glebtv Feb 27, 2024
082517b
fix: restore refinedev/mantine version
glebtv Feb 27, 2024
cde6385
fix: examples/base-mantine remove unused filter
glebtv Feb 27, 2024
d2c8563
fix: remove commented code, better mantine test wrapper
glebtv Feb 27, 2024
451ad37
Merge branch 'master' into mantine7.v4
glebtv Feb 29, 2024
230c0a6
Merge branch 'master' into mantine7.v4
BatuhanW Feb 29, 2024
2a05017
fix(inferencer): add React import to mantine inferencer generated code
glebtv Feb 29, 2024
3221708
Merge branch 'master' into mantine7.v4
BatuhanW Feb 29, 2024
6afde2f
Merge branch 'master' into mantine7.v4
BatuhanW Mar 4, 2024
04e0f4b
chore(mantine): split changesets as per review
glebtv Mar 4, 2024
2d89b2f
chore(mantine): remove commented code
glebtv Mar 4, 2024
f7d75f7
chore(mantine): icon color should be primary
glebtv Mar 4, 2024
34480b7
fix(inferencer): filterDataOnExactSearchMatch is no longer available …
glebtv Mar 4, 2024
9260b67
Merge branch 'master' into mantine7.v4
BatuhanW Mar 7, 2024
1817134
Merge remote-tracking branch 'upstream/master' into mantine7-v2-1
glebtv Mar 28, 2024
f20d327
fix(mantine): try fix biome lint error
glebtv Mar 28, 2024
e0e99af
chore(mantine): update mantine version in docs
glebtv Mar 28, 2024
bacc65a
Merge remote-tracking branch 'upstream/releases/april' into mantine7.v4
glebtv Mar 29, 2024
77f7e9c
chore: try fix biome errors
glebtv Mar 29, 2024
515dc57
chore: fix versions after merge, fix mantine delete button tests
glebtv Mar 29, 2024
494fb07
Merge branch 'master' into mantine7.v4
alodela Sep 9, 2024
7fc8ffe
feat(mantine): mantine 7
alodela Sep 17, 2024
cdebb7e
chore(mantine): update packages version
alodela Sep 17, 2024
04b6720
Merge branch 'refinedev:master' into mantine7.v4
alodela Sep 17, 2024
ced22ca
Merge branch 'master' into mantine7.v4
alodela Sep 18, 2024
e460d33
fix(mantine): lint & build errors
alodela Sep 18, 2024
01c08f1
fix(mantine): update form types in examples
alodela Sep 18, 2024
6518830
Merge branch 'master' into mantine7.v4
alodela Sep 20, 2024
e8b46f4
Merge branch 'master' into mantine7.v4
BatuhanW Sep 24, 2024
3bd2870
Merge branch 'master' into mantine7.v4
alodela Oct 14, 2024
60e515a
Merge branch 'master' into mantine7.v4
alodela Oct 16, 2024
c2972c6
Merge branch 'master' into mantine7.v4
BatuhanW Oct 28, 2024
00be382
Merge branch 'master' into mantine7.v4
alodela Oct 31, 2024
0104168
Merge branch 'master' into mantine7.v4
alodela Oct 31, 2024
ba364b7
Merge branch 'master' into mantine7.v4
alodela Nov 2, 2024
65c68d4
Merge branch 'master' into mantine7.v4
alodela Nov 8, 2024
a688bd3
fix(mantine): fix action icon style
alodela Nov 9, 2024
10b36cf
Merge branch 'master' into mantine7.v4
alodela Nov 9, 2024
6e9c66a
Merge branch 'master' into mantine7.v4
alodela Nov 12, 2024
faf028d
Merge branch 'master' into mantine7.v4
alodela Nov 16, 2024
ceaf214
Merge branch 'master' into mantine7.v4
alodela Nov 24, 2024
a5365d2
fix(mantine): update snapshots
alodela Nov 24, 2024
a6eccbb
Merge branch 'master' into mantine7.v4
alodela Nov 28, 2024
935ce43
Merge branch 'main' into mantine7.v4
alodela Dec 4, 2024
58cf201
Merge branch 'main' into mantine7.v4
alodela Dec 12, 2024
2a9d078
Merge branch 'main' into mantine7.v4
alodela Dec 30, 2024
689f08c
Merge branch 'main' into mantine7.v4
alodela Jan 18, 2025
a53f76c
chore(mantine): update documentation
alodela Jan 19, 2025
e0de4e4
Merge branch 'main' into mantine7.v4
alodela Jan 21, 2025
e524a95
Merge branch 'main' into mantine7.v4
alodela Jan 26, 2025
3edd2d4
Merge branch 'main' into mantine7.v4
alodela Jan 29, 2025
1ee0029
Merge branch 'main' into mantine7.v4
alodela Feb 6, 2025
36fdc2b
Merge branch 'main' into mantine7.v4
alodela Feb 14, 2025
01332a4
Merge branch 'main' into mantine7.v4
alodela Feb 19, 2025
b493970
Merge branch 'main' into mantine7.v4
alodela Feb 22, 2025
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
Prev Previous commit
Next Next commit
fix(mantine): fix action icon style
  • Loading branch information
alodela committed Nov 9, 2024
commit a688bd344f0a37f5d05b1bf930a1a977fe0d1d5f
3 changes: 1 addition & 2 deletions packages/mantine/src/components/buttons/clone/index.tsx
Original file line number Diff line number Diff line change
@@ -7,7 +7,6 @@ import {
import { ActionIcon, Anchor, Button } from "@mantine/core";
import { IconSquarePlus } from "@tabler/icons-react";

import { mapButtonVariantToActionIconVariant } from "@definitions/button";
import type { CloneButtonProps } from "../types";

/**
@@ -62,7 +61,7 @@ export const CloneButton: React.FC<CloneButtonProps> = ({
disabled={disabled}
title={title}
aria-label={label}
variant={mapButtonVariantToActionIconVariant(variant, "default")}
variant={variant || "default"}
data-testid={RefineButtonTestIds.CloneButton}
className={RefineButtonClassNames.CloneButton}
{...commonProps}
3 changes: 1 addition & 2 deletions packages/mantine/src/components/buttons/create/index.tsx
Original file line number Diff line number Diff line change
@@ -7,7 +7,6 @@ import {
import { ActionIcon, Anchor, Button } from "@mantine/core";
import { IconSquarePlus } from "@tabler/icons-react";

import { mapButtonVariantToActionIconVariant } from "@definitions/button";
import type { CreateButtonProps } from "../types";

export const CreateButton: React.FC<CreateButtonProps> = ({
@@ -54,7 +53,7 @@ export const CreateButton: React.FC<CreateButtonProps> = ({
title={title}
disabled={disabled}
aria-label={label}
variant={mapButtonVariantToActionIconVariant(variant, "default")}
variant={variant || "default"}
data-testid={RefineButtonTestIds.CreateButton}
className={RefineButtonClassNames.CreateButton}
{...commonProps}
3 changes: 1 addition & 2 deletions packages/mantine/src/components/buttons/delete/index.tsx
Original file line number Diff line number Diff line change
@@ -7,7 +7,6 @@ import {
import { Group, Text, Button, Popover, ActionIcon } from "@mantine/core";
import { IconTrash } from "@tabler/icons-react";

import { mapButtonVariantToActionIconVariant } from "@definitions/button";
import type { DeleteButtonProps } from "../types";

/**
@@ -109,7 +108,7 @@ export const DeleteButton: React.FC<DeleteButtonProps> = ({
loading={loading}
data-testid={RefineButtonTestIds.DeleteButton}
className={RefineButtonClassNames.DeleteButton}
variant={mapButtonVariantToActionIconVariant(variant, "outline")}
variant={variant || "default"}
{...commonProps}
>
<IconTrash size={18} {...svgIconProps} />
3 changes: 1 addition & 2 deletions packages/mantine/src/components/buttons/edit/index.tsx
Original file line number Diff line number Diff line change
@@ -7,7 +7,6 @@ import {
import { ActionIcon, Anchor, Button } from "@mantine/core";
import { IconPencil } from "@tabler/icons-react";

import { mapButtonVariantToActionIconVariant } from "@definitions/button";
import type { EditButtonProps } from "../types";

/**
@@ -63,7 +62,7 @@ export const EditButton: React.FC<EditButtonProps> = ({
aria-label={label}
data-testid={RefineButtonTestIds.EditButton}
className={RefineButtonClassNames.EditButton}
variant={mapButtonVariantToActionIconVariant(variant, "default")}
variant={variant || "default"}
{...commonProps}
>
<IconPencil size={18} {...svgIconProps} />
3 changes: 1 addition & 2 deletions packages/mantine/src/components/buttons/export/index.tsx
Original file line number Diff line number Diff line change
@@ -7,7 +7,6 @@ import {
import { ActionIcon, Button } from "@mantine/core";
import { IconFileExport } from "@tabler/icons-react";

import { mapButtonVariantToActionIconVariant } from "@definitions/button";
import type { ExportButtonProps } from "../types";

/**
@@ -30,7 +29,7 @@ export const ExportButton: React.FC<ExportButtonProps> = ({
return hideText ? (
<ActionIcon
size="md"
variant={mapButtonVariantToActionIconVariant(variant, "default")}
variant={variant || "default"}
loading={loading}
aria-label={label}
data-testid={RefineButtonTestIds.ExportButton}
3 changes: 1 addition & 2 deletions packages/mantine/src/components/buttons/import/index.tsx
Original file line number Diff line number Diff line change
@@ -7,7 +7,6 @@ import {
import { ActionIcon, Button } from "@mantine/core";
import { IconFileImport } from "@tabler/icons-react";

import { mapButtonVariantToActionIconVariant } from "@definitions/button";
import type { ImportButtonProps } from "../types";

/**
@@ -33,7 +32,7 @@ export const ImportButton: React.FC<ImportButtonProps> = ({
<input {...inputProps} multiple hidden />
{hideText ? (
<ActionIcon
variant={mapButtonVariantToActionIconVariant(variant, "default")}
variant={variant || "default"}
aria-label={label}
component="span"
loading={loading}
3 changes: 1 addition & 2 deletions packages/mantine/src/components/buttons/list/index.tsx
Original file line number Diff line number Diff line change
@@ -7,7 +7,6 @@ import {
import { ActionIcon, Anchor, Button } from "@mantine/core";
import { IconList } from "@tabler/icons-react";

import { mapButtonVariantToActionIconVariant } from "@definitions/button";
import type { ListButtonProps } from "../types";

/**
@@ -56,7 +55,7 @@ export const ListButton: React.FC<ListButtonProps> = ({
>
{hideText ? (
<ActionIcon
variant={mapButtonVariantToActionIconVariant(variant, "default")}
variant={variant || "default"}
disabled={disabled}
title={title}
data-testid={RefineButtonTestIds.ListButton}
3 changes: 1 addition & 2 deletions packages/mantine/src/components/buttons/refresh/index.tsx
Original file line number Diff line number Diff line change
@@ -7,7 +7,6 @@ import {
import { ActionIcon, Button } from "@mantine/core";
import { IconRefresh } from "@tabler/icons-react";

import { mapButtonVariantToActionIconVariant } from "@definitions/button";
import type { RefreshButtonProps } from "../types";

/**
@@ -48,7 +47,7 @@ export const RefreshButton: React.FC<RefreshButtonProps> = ({
aria-label={label}
data-testid={RefineButtonTestIds.RefreshButton}
className={RefineButtonClassNames.RefreshButton}
variant={mapButtonVariantToActionIconVariant(variant, "default")}
variant={variant || "default"}
{...commonProps}
>
<IconRefresh size={18} {...svgIconProps} />
3 changes: 1 addition & 2 deletions packages/mantine/src/components/buttons/save/index.tsx
Original file line number Diff line number Diff line change
@@ -7,7 +7,6 @@ import {
import { ActionIcon, Button } from "@mantine/core";
import { IconDeviceFloppy } from "@tabler/icons-react";

import { mapButtonVariantToActionIconVariant } from "@definitions/button";
import type { SaveButtonProps } from "../types";

/**
@@ -28,7 +27,7 @@ export const SaveButton: React.FC<SaveButtonProps> = ({

return hideText ? (
<ActionIcon
variant={mapButtonVariantToActionIconVariant(variant, "filled")}
variant={variant || "default"}
aria-label={label}
data-testid={RefineButtonTestIds.SaveButton}
className={RefineButtonClassNames.SaveButton}
3 changes: 1 addition & 2 deletions packages/mantine/src/components/buttons/show/index.tsx
Original file line number Diff line number Diff line change
@@ -7,7 +7,6 @@ import {
import { ActionIcon, Anchor, Button } from "@mantine/core";
import { IconEye } from "@tabler/icons-react";

import { mapButtonVariantToActionIconVariant } from "@definitions/button";
import type { ShowButtonProps } from "../types";

/**
@@ -58,7 +57,7 @@ export const ShowButton: React.FC<ShowButtonProps> = ({
>
{hideText ? (
<ActionIcon
variant={mapButtonVariantToActionIconVariant(variant, "default")}
variant={variant || "default"}
disabled={disabled}
title={title}
data-testid={RefineButtonTestIds.ShowButton}
11 changes: 4 additions & 7 deletions packages/mantine/src/components/crud/create/index.tsx
Original file line number Diff line number Diff line change
@@ -57,11 +57,7 @@ export const Create: React.FC<CreateProps> = (props) => {
: breadcrumbFromProps;

const breadcrumbComponent =
typeof breadcrumb !== "undefined" ? (
<>{breadcrumb}</> ?? undefined
) : (
<Breadcrumb />
);
typeof breadcrumb !== "undefined" ? <>{breadcrumb}</> : <Breadcrumb />;

const saveButtonProps: SaveButtonProps = {
...(isLoading ? { disabled: true } : {}),
@@ -73,8 +69,9 @@ export const Create: React.FC<CreateProps> = (props) => {
const defaultFooterButtons = <SaveButton {...saveButtonProps} />;

const buttonBack =
goBackFromProps === (false || null) ? null : (
goBackFromProps === false || goBackFromProps === null ? null : (
<ActionIcon
variant="subtle"
onClick={
action !== "list" || typeof action !== "undefined"
? routerType === "legacy"
@@ -111,7 +108,7 @@ export const Create: React.FC<CreateProps> = (props) => {
return (
<Card p="md" {...wrapperProps}>
<LoadingOverlay visible={loadingOverlayVisible} />
<Group {...headerProps}>
<Group justify="space-between" {...headerProps}>
<Stack gap="xs">
{breadcrumbComponent}
<Group gap="xs">
7 changes: 2 additions & 5 deletions packages/mantine/src/components/crud/edit/index.tsx
Original file line number Diff line number Diff line change
@@ -99,11 +99,7 @@ export const Edit: React.FC<EditProps> = (props) => {
deleteButtonPropsFromProps);

const breadcrumbComponent =
typeof breadcrumb !== "undefined" ? (
<>{breadcrumb}</> ?? undefined
) : (
<Breadcrumb />
);
typeof breadcrumb !== "undefined" ? <>{breadcrumb}</> : <Breadcrumb />;

const loadingOverlayVisible =
isLoading ?? saveButtonPropsFromProps?.disabled ?? false;
@@ -163,6 +159,7 @@ export const Edit: React.FC<EditProps> = (props) => {
const buttonBack =
goBackFromProps === false || goBackFromProps === null ? null : (
<ActionIcon
Copy link

Choose a reason for hiding this comment

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

I'd suggest adding the variant="subtle" attribute to all the ActionIcon components that are used for the back buttons in the crud components.

This is the style of the action icon in v5:
grafik

With the v7 upgrade it looks like a primary button:
grafik

With varlian="subtle" it looks similar to the v5 version:
grafik

Works also with dark mode (see https://mantine.dev/core/action-icon/#usage).

Copy link
Author

Choose a reason for hiding this comment

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

@kruschid Great suggestion. I've updated all the back buttons.

variant="subtle"
onClick={
action !== "list" && typeof action !== "undefined"
? routerType === "legacy"
6 changes: 1 addition & 5 deletions packages/mantine/src/components/crud/list/index.tsx
Original file line number Diff line number Diff line change
@@ -58,11 +58,7 @@ export const List: React.FC<ListProps> = (props) => {
) : null;

const breadcrumbComponent =
typeof breadcrumb !== "undefined" ? (
<>{breadcrumb}</> ?? undefined
) : (
<Breadcrumb />
);
typeof breadcrumb !== "undefined" ? <>{breadcrumb}</> : <Breadcrumb />;

const headerButtons = headerButtonsFromProps
? typeof headerButtonsFromProps === "function"
9 changes: 3 additions & 6 deletions packages/mantine/src/components/crud/show/index.tsx
Original file line number Diff line number Diff line change
@@ -86,11 +86,7 @@ export const Show: React.FC<ShowProps> = (props) => {
: breadcrumbFromProps;

const breadcrumbComponent =
typeof breadcrumb !== "undefined" ? (
<>{breadcrumb}</> ?? undefined
) : (
<Breadcrumb />
);
typeof breadcrumb !== "undefined" ? <>{breadcrumb}</> : <Breadcrumb />;

const hasList = resource?.list && !recordItemId;
const isDeleteButtonVisible =
@@ -146,8 +142,9 @@ export const Show: React.FC<ShowProps> = (props) => {
);

const buttonBack =
goBackFromProps === (false || null) ? null : (
goBackFromProps === false || goBackFromProps === null ? null : (
<ActionIcon
variant="subtle"
onClick={
action !== "list" && typeof action !== "undefined"
? routerType === "legacy"
14 changes: 0 additions & 14 deletions packages/mantine/src/definitions/button/index.ts

This file was deleted.

1 change: 0 additions & 1 deletion packages/mantine/src/definitions/index.ts

This file was deleted.

1 change: 0 additions & 1 deletion packages/mantine/src/index.tsx
Original file line number Diff line number Diff line change
@@ -2,5 +2,4 @@ export * from "./components/index.js";
export * from "./providers/index.js";
export * from "./hooks/index.js";
export * from "./theme/index.js";
export * from "./definitions/index.js";
export * from "./contexts/index.js";