@coveord/plasma-mantine 50.0.2 → 51.0.0

package/src/components/date-range-picker/__tests__/DateRangePickerInlineCalendar.spec.tsx

@@ -63,8 +63,8 @@ describe('DateRangePickerInlineCalendar', () => {
         render(<DateRangePickerInlineCalendar initialRange={[null, null]} onApply={onApply} onCancel={vi.fn()} />);
 
         // click once for the start, once for the end
-        await user.click(screen.getAllByRole('button', {name: '8'})[0]);
-        await user.click(screen.getAllByRole('button', {name: '14'})[0]);
+        await user.click(screen.getAllByRole('button', {name: /8 january 2022/i})[0]);
+        await user.click(screen.getAllByRole('button', {name: /14 january 2022/i})[0]);
 
         await user.click(screen.getByRole('button', {name: 'Apply'}));
 
@@ -78,8 +78,7 @@ describe('DateRangePickerInlineCalendar', () => {
         vi.useFakeTimers().setSystemTime(new Date(2022, 0, 31));
         const onApply = vi.fn();
         render(<DateRangePickerInlineCalendar initialRange={[null, null]} onApply={onApply} onCancel={vi.fn()} />);
-
-        await user.click(screen.getAllByRole('button', {name: '8'})[0]);
+        await user.click(screen.getAllByRole('button', {name: /8 january 2022/i})[0]);
         await user.click(screen.getByRole('button', {name: 'Apply'}));
 
         expect(onApply).toHaveBeenCalledWith([new Date(2022, 0, 8), new Date(2022, 0, 8)]);

package/src/components/date-range-picker/__tests__/DateRangePickerPopoverCalendar.spec.tsx

@@ -1,6 +1,6 @@
-import {DateRangePickerValue} from '@mantine/dates';
 import {useForm} from '@mantine/form';
 import {render, screen, userEvent} from '@test-utils';
+import {DateRangePickerValue} from '../DateRangePickerInlineCalendar';
 
 import {DateRangePickerPopoverCalendar} from '../DateRangePickerPopoverCalendar';
 
@@ -66,14 +66,14 @@ describe('DateRangePickerPopoverCalendar', () => {
 
         await user.click(screen.getByRole('textbox', {name: 'Start'}));
         // click once for the start, once for the end
-        await user.click(screen.getAllByRole('button', {name: '8'})[0]);
-        await user.click(screen.getAllByRole('button', {name: '14'})[0]);
+        await user.click(screen.getByRole('button', {name: '8 January 2022'}));
+        await user.click(screen.getByRole('button', {name: '14 February 2022'}));
 
         // hides the calendar when the second date is clicked
-        expect(screen.queryAllByRole('button', {name: '8'})[0]).not.toBeVisible();
-        expect(screen.queryAllByRole('button', {name: '8'})[1]).not.toBeVisible();
+        expect(await screen.findByRole('button', {name: '8 January 2022'})).not.toBeVisible();
+        expect(await screen.findByRole('button', {name: '8 February 2022'})).not.toBeVisible();
 
-        expect(screen.getByTestId('json')).toHaveTextContent('["2022-01-08T00:00:00.000Z","2022-01-14T00:00:00.000Z"]');
+        expect(screen.getByTestId('json')).toHaveTextContent('["2022-01-08T00:00:00.000Z","2022-02-14T00:00:00.000Z"]');
 
         vi.useRealTimers();
     });

package/src/components/header/Header.tsx

@@ -68,7 +68,7 @@ export const Header: HeaderType = ({description, borderBottom, children, variant
 const HeaderBreadcrumbs: FunctionComponent<{children: ReactNode}> = ({children}) => (
     <Breadcrumbs
         styles={(theme) => ({
-            breadcrumb: {fontSize: theme.fontSizes.sm, fontWeight: 300},
+            breadcrumb: {fontSize: theme.fontSizes.sm, fontWeight: 300, color: theme.colors.action[6]},
             separator: {color: theme.colors.gray[5]},
         })}
     >

package/src/components/header/__tests__/Header.spec.tsx

@@ -10,7 +10,7 @@ describe('Header', () => {
         const header = screen.getByRole('heading');
         expect(header).toMatchInlineSnapshot(`
           <h1
-            class="mantine-Text-root mantine-Title-root mantine-jqzr1h"
+            class="mantine-Text-root mantine-Title-root mantine-14ccmdx"
           >
             child
           </h1>

package/src/components/header/__tests__/__snapshots__/Header.spec.tsx.snap

@@ -3,36 +3,36 @@
 exports[`Header > renders the specified breadcrumbs above the title 1`] = `
 <div>
   <div
-    class="mantine-Group-root mantine-1g2mfqe"
+    class="mantine-Group-root mantine-ogmezo"
   >
     <div
-      class="mantine-Stack-root mantine-1fod3h5"
+      class="mantine-Stack-root mantine-1178y6y"
     >
       <div
-        class="mantine-Breadcrumbs-root mantine-16ttirm"
+        class="mantine-Breadcrumbs-root mantine-1ujbd2v"
       >
         <a
-          class="mantine-Text-root mantine-Anchor-root mantine-Breadcrumbs-breadcrumb mantine-1cehd6q"
+          class="mantine-Text-root mantine-Anchor-root mantine-Breadcrumbs-breadcrumb mantine-1rfg646"
         >
           One
         </a>
         <div
-          class="mantine-Text-root mantine-Breadcrumbs-separator mantine-1mpiak2"
+          class="mantine-Text-root mantine-Breadcrumbs-separator mantine-se7e6j"
         >
           /
         </div>
         <a
-          class="mantine-Text-root mantine-Anchor-root mantine-Breadcrumbs-breadcrumb mantine-1cehd6q"
+          class="mantine-Text-root mantine-Anchor-root mantine-Breadcrumbs-breadcrumb mantine-1rfg646"
         >
           Two
         </a>
         <div
-          class="mantine-Text-root mantine-Breadcrumbs-separator mantine-1mpiak2"
+          class="mantine-Text-root mantine-Breadcrumbs-separator mantine-se7e6j"
         >
           /
         </div>
         <a
-          class="mantine-Text-root mantine-Anchor-root mantine-Breadcrumbs-breadcrumb mantine-1cehd6q"
+          class="mantine-Text-root mantine-Anchor-root mantine-Breadcrumbs-breadcrumb mantine-1rfg646"
         >
           Three
         </a>
@@ -41,13 +41,13 @@ exports[`Header > renders the specified breadcrumbs above the title 1`] = `
         class="mantine-xg7kom"
       >
         <h1
-          class="mantine-Text-root mantine-Title-root mantine-jqzr1h"
+          class="mantine-Text-root mantine-Title-root mantine-14ccmdx"
         >
           Title
         </h1>
       </div>
       <div
-        class="mantine-Text-root mantine-1qppuo4"
+        class="mantine-Text-root mantine-vti01c"
       />
     </div>
   </div>

package/src/components/modal-wizard/ModalWizard.tsx

@@ -7,7 +7,7 @@ import {StickyFooter} from '../sticky-footer';
 import {ModalWizardStep, ModalWizardStepProps, ResolveStep} from './ModalWizardStep';
 
 const useStyles = createStyles(() => ({
-    modal: {
+    content: {
         display: 'flex',
         flexDirection: 'column',
     },
@@ -103,14 +103,13 @@ export const ModalWizard: ModalWizardType = ({
     isDirty,
     handleDirtyState,
     classNames,
-    className,
     styles,
     unstyled,
     children,
     ...modalProps
 }) => {
     const {
-        classes: {modal, body},
+        classes: {content, body},
         cx,
     } = useStyles(null, {
         name: 'ModalWizard',
@@ -167,7 +166,7 @@ export const ModalWizard: ModalWizardType = ({
     return (
         <Modal
             opened={opened}
-            classNames={{modal: cx(modal, classNames?.modal), body: cx(body, classNames?.body)}}
+            classNames={{content: cx(content, classNames?.content), body: cx(body, classNames?.body)}}
             centered
             onClose={() => handleClose(true)}
             withCloseButton={false}
@@ -183,7 +182,7 @@ export const ModalWizard: ModalWizardType = ({
                     />
                 ) : null}
                 <Header.Actions>
-                    <CloseButton aria-label={modalProps.closeButtonLabel} onClick={() => handleClose(true)} />
+                    <CloseButton aria-label={'close-modal'} onClick={() => handleClose(true)} />
                 </Header.Actions>
             </Header>
             {currentStep.props.showProgressBar && (

package/src/components/modal-wizard/__tests__/ModalWizard.spec.tsx

@@ -36,7 +36,6 @@ describe('ModalWizard', () => {
 
         render(
             <ModalWizard
-                closeButtonLabel="closebuttonlabel"
                 isDirty={isDirty}
                 handleDirtyState={() => confirm('Are you sure you want to close?')}
                 opened={true}
@@ -64,7 +63,7 @@ describe('ModalWizard', () => {
 
         expect(
             screen.getByRole('button', {
-                name: /closebuttonlabel/i,
+                name: /close-modal/i,
             })
         ).toBeInTheDocument();
 
@@ -83,7 +82,7 @@ describe('ModalWizard', () => {
 
         expect(
             screen.getByRole('button', {
-                name: /closebuttonlabel/i,
+                name: /close-modal/i,
             })
         ).toBeInTheDocument();
 
@@ -110,7 +109,7 @@ describe('ModalWizard', () => {
 
         expect(
             screen.getByRole('button', {
-                name: /closebuttonlabel/i,
+                name: /close-modal/i,
             })
         ).toBeInTheDocument();
 
@@ -143,7 +142,7 @@ describe('ModalWizard', () => {
 
         expect(
             screen.getByRole('button', {
-                name: /closebuttonlabel/i,
+                name: /close-modal/i,
             })
         ).toBeInTheDocument();
 
@@ -172,7 +171,7 @@ describe('ModalWizard', () => {
         const onClose = vi.fn();
 
         render(
-            <ModalWizard isDirty={isDirty} onClose={onClose} closeButtonLabel="closebuttonlabel" opened={true}>
+            <ModalWizard isDirty={isDirty} onClose={onClose} opened={true}>
                 {modelSteps.map((model_item) => (
                     <ModalWizard.Step
                         docLink={model_item.docLink}
@@ -186,7 +185,7 @@ describe('ModalWizard', () => {
         );
 
         const closeButton = screen.getByRole('button', {
-            name: /closebuttonlabel/i,
+            name: /close-modal/i,
         });
         await user.click(closeButton);
 
@@ -282,13 +281,7 @@ describe('ModalWizard', () => {
         const handleDirtyState = vi.fn();
 
         render(
-            <ModalWizard
-                isDirty={isDirty}
-                onClose={onClose}
-                handleDirtyState={handleDirtyState}
-                closeButtonLabel="closebuttonlabel"
-                opened={true}
-            >
+            <ModalWizard isDirty={isDirty} onClose={onClose} handleDirtyState={handleDirtyState} opened={true}>
                 {modelSteps.map((model_item) => (
                     <ModalWizard.Step
                         docLink={model_item.docLink}
@@ -301,7 +294,7 @@ describe('ModalWizard', () => {
             </ModalWizard>
         );
         const closeButton = screen.getByRole('button', {
-            name: /closebuttonlabel/i,
+            name: /close-modal/i,
         });
 
         handleDirtyState.mockReturnValueOnce(true);
@@ -327,13 +320,7 @@ describe('ModalWizard', () => {
         const handleDirtyState = vi.fn();
 
         render(
-            <ModalWizard
-                isDirty={isDirty}
-                onClose={onClose}
-                handleDirtyState={handleDirtyState}
-                closeButtonLabel="closebuttonlabel"
-                opened={true}
-            >
+            <ModalWizard isDirty={isDirty} onClose={onClose} handleDirtyState={handleDirtyState} opened={true}>
                 {modelSteps.map((model_item) => (
                     <ModalWizard.Step
                         docLink={model_item.docLink}
@@ -346,7 +333,7 @@ describe('ModalWizard', () => {
             </ModalWizard>
         );
         const closeButton = screen.getByRole('button', {
-            name: /closebuttonlabel/i,
+            name: /close-modal/i,
         });
 
         handleDirtyState.mockReturnValueOnce(false);

package/src/components/table/Table.styles.ts

@@ -44,7 +44,7 @@ const useStyles = createStyles<string, TableStylesParams>((theme, {hasHeader, mu
 
         rowCollapsibleButtonCell: {
             textAlign: 'right',
-            padding: `${theme.spacing.xs / 2}px ${theme.spacing.sm}px !important`,
+            padding: `calc(${theme.spacing.xs}/2) ${theme.spacing.sm} !important`,
         },
 
         row: {

package/src/components/table/Table.types.ts

@@ -1,4 +1,3 @@
-import {DateRangePickerValue} from '@mantine/dates';
 import {UseFormReturnType} from '@mantine/form';
 import {
     ColumnDef,
@@ -8,6 +7,7 @@ import {
     TableState as TanstackTableState,
 } from '@tanstack/table-core';
 import {Dispatch, ReactElement, ReactNode, RefObject} from 'react';
+import {DateRangePickerValue} from '../date-range-picker/DateRangePickerInlineCalendar';
 
 import {TableActions} from './TableActions';
 import {TableAccordionColumn, TableCollapsibleColumn} from './TableCollapsibleColumn';

package/src/components/table/TableDateRangePicker.tsx

@@ -1,12 +1,15 @@
 import {CalendarSize24Px} from '@coveord/plasma-react-icons';
 import {Popover} from '@mantine/core';
-import {DateRangePickerValue} from '@mantine/dates';
 import dayjs from 'dayjs';
 import {FunctionComponent, useState} from 'react';
 
 import {Button} from '../button';
-import {DateRangePickerInlineCalendar, DateRangePickerInlineCalendarProps} from '../date-range-picker';
-import {DateRangePickerPreset} from '../date-range-picker/DateRangePickerPresetSelect';
+import {
+    DateRangePickerInlineCalendar,
+    DateRangePickerInlineCalendarProps,
+    DateRangePickerPreset,
+    DateRangePickerValue,
+} from '../date-range-picker';
 import {useTable} from './TableContext';
 
 interface TableDateRangePickerProps

package/src/components/table/TablePagination.tsx

@@ -24,19 +24,22 @@ export const TablePagination: FunctionComponent<TablePaginationProps> = ({totalP
 
     return (
         <Pagination
-            page={state.pagination.pageIndex + 1}
+            value={state.pagination.pageIndex + 1}
             onChange={updatePage}
             total={total}
             boundaries={0}
             size="md"
-            getItemAriaLabel={(label) => {
-                switch (label) {
-                    case 'prev':
-                        return 'previous page';
+            getControlProps={(control) => {
+                switch (control) {
+                    case 'previous':
+                        return {
+                            component: 'button',
+                            'aria-label': 'previous page',
+                        };
                     case 'next':
-                        return 'next page';
+                        return {component: 'button', 'aria-label': 'next page'};
                     default:
-                        return `${label}`;
+                        return {};
                 }
             }}
         />

package/src/components/table/Th.tsx

@@ -12,7 +12,7 @@ const useStyles = createStyles((theme) => ({
 
     control: {
         width: '100%',
-        padding: `${theme.spacing.xs}px ${theme.spacing.sm}px`,
+        padding: `${theme.spacing.xs} ${theme.spacing.sm}`,
         whiteSpace: 'nowrap',
 
         '&:hover': {

package/src/theme/Theme.tsx

@@ -1,6 +1,6 @@
 import {InfoSize24Px} from '@coveord/plasma-react-icons';
 import {color} from '@coveord/plasma-tokens';
-import {ButtonStylesParams, MantineThemeOverride, ModalStylesParams} from '@mantine/core';
+import {getSize, MantineThemeOverride, ModalProps, rem} from '@mantine/core';
 
 import {PlasmaColors} from './PlasmaColors';
 
@@ -12,23 +12,23 @@ export const plasmaTheme: MantineThemeOverride = {
     defaultRadius: 8,
     lineHeight: 1.5,
     spacing: {
-        xs: 8,
-        sm: 16,
-        md: 24,
-        lg: 32,
-        xl: 40,
+        xs: '8px',
+        sm: '16px',
+        md: '24px',
+        lg: '32px',
+        xl: '40px',
     },
     primaryColor: 'action',
     headings: {
         fontFamily: 'canada-type-gibson, sans-serif',
         fontWeight: 500,
         sizes: {
-            h1: {fontSize: 48, lineHeight: undefined, fontWeight: 300},
-            h2: {fontSize: 32, lineHeight: undefined, fontWeight: 500},
-            h3: {fontSize: 24, lineHeight: undefined, fontWeight: 500},
-            h4: {fontSize: 18, lineHeight: undefined, fontWeight: 300},
-            h5: {fontSize: 14, lineHeight: undefined, fontWeight: 500},
-            h6: {fontSize: 12, lineHeight: undefined, fontWeight: 500},
+            h1: {fontSize: '48px', lineHeight: undefined, fontWeight: 300},
+            h2: {fontSize: '32px', lineHeight: undefined, fontWeight: 500},
+            h3: {fontSize: '24px', lineHeight: undefined, fontWeight: 500},
+            h4: {fontSize: '18px', lineHeight: undefined, fontWeight: 300},
+            h5: {fontSize: '14px', lineHeight: undefined, fontWeight: 500},
+            h6: {fontSize: '12px', lineHeight: undefined, fontWeight: 500},
         },
     },
     shadows: {
@@ -64,26 +64,43 @@ export const plasmaTheme: MantineThemeOverride = {
             },
         },
         Button: {
-            styles: (theme, params: ButtonStylesParams) => ({
+            styles: () => ({
                 root: {
                     fontWeight: 400,
-                    backgroundColor: params.variant === 'outline' ? 'white' : undefined,
                 },
             }),
+            variants: {
+                outline: () => ({
+                    root: {
+                        backgroundColor: 'white',
+                    },
+                }),
+            },
         },
         Modal: {
-            styles: (theme, {size, fullScreen}: ModalStylesParams) => ({
-                modal: {
-                    width: fullScreen
-                        ? undefined
-                        : theme.fn.size({size, sizes: {xs: 440, sm: 550, md: 800, lg: 1334, xl: '85%'}}),
+            styles: (theme, {size, fullScreen}: ModalProps) => ({
+                content: {
+                    flex: fullScreen
+                        ? '0 0 100%'
+                        : `0 0 ${getSize({
+                              size: size,
+                              sizes: {
+                                  xs: rem(440),
+                                  sm: rem(550),
+                                  md: rem(800),
+                                  lg: rem(1334),
+                                  xl: rem('85%'),
+                              },
+                          })}`,
                     overflow: 'auto',
                 },
                 title: {width: '100%'},
             }),
             defaultProps: {
-                overlayColor: color.primary.navy[9],
-                overlayOpacity: 0.9,
+                overlayProps: {
+                    color: color.primary.navy[9],
+                    opacity: 0.9,
+                },
             },
         },
         InputWrapper: {
@@ -136,7 +153,7 @@ export const plasmaTheme: MantineThemeOverride = {
         },
         Anchor: {
             defaultProps: {
-                color: 'action',
+                color: 'action.6',
             },
             styles: (theme) => ({
                 root: {