@coveord/plasma-mantine 53.0.0 → 53.1.0

package/src/components/inline-confirm/InlineConfirm.tsx

@@ -1,12 +1,11 @@
-import {factory, Factory, StylesApiProps, useProps} from '@mantine/core';
+import {Factory, StylesApiProps, useProps} from '@mantine/core';
+import {MantineComponent} from '@mantine/core/lib/core/factory/factory';
 import {Children, ReactElement, ReactNode, useState} from 'react';
 import {InlineConfirmProvider} from './InlineConfirmContext';
 import {InlineConfirmPrompt} from './InlineConfirmPrompt';
 
 import {InlineConfirmTarget} from './InlineConfirmTarget';
 
-export type InlineConfirmStyleNames = 'root';
-
 export interface InlineConfirmProps extends StylesApiProps<InlineConfirmFactory> {
     /**
      * The content of the component. Should contain at least one `InlineConfirm.Target` and one `InlineConfirm.Prompt` with matching ids
@@ -17,7 +16,6 @@ export interface InlineConfirmProps extends StylesApiProps<InlineConfirmFactory>
 export type InlineConfirmFactory = Factory<{
     props: InlineConfirmProps;
     ref: never;
-    stylesNames: InlineConfirmStyleNames;
     staticComponents: {
         Prompt: typeof InlineConfirmPrompt;
         Target: typeof InlineConfirmTarget;
@@ -26,7 +24,7 @@ export type InlineConfirmFactory = Factory<{
 
 const defaultProps: Partial<InlineConfirmProps> = {};
 
-export const InlineConfirm = factory<InlineConfirmFactory>((_props) => {
+export const InlineConfirm = ((_props) => {
     const {children} = useProps('InlineConfirm', defaultProps, _props);
     const [confirmingId, setConfirmingId] = useState<string | null>(null);
 
@@ -41,7 +39,7 @@ export const InlineConfirm = factory<InlineConfirmFactory>((_props) => {
             {prompt ?? children}
         </InlineConfirmProvider>
     );
-});
+}) as MantineComponent<InlineConfirmFactory>;
 
 InlineConfirm.Prompt = InlineConfirmPrompt;
 InlineConfirm.Target = InlineConfirmTarget;

package/src/components/inline-confirm/__tests__/InlineConfirm.spec.tsx

@@ -1,4 +1,4 @@
-import {Button, Menu, MenuItem} from '@mantine/core';
+import {Button, Menu} from '@mantine/core';
 import {render, screen, userEvent} from '@test-utils';
 
 import {InlineConfirm} from '../InlineConfirm';
@@ -36,7 +36,7 @@ describe('InlineConfirm', () => {
                         <button>open menu</button>
                     </Menu.Target>
                     <Menu.Dropdown>
-                        <InlineConfirm.Target component={MenuItem} id="delete" onClick={onClickSpy}>
+                        <InlineConfirm.Target component={Menu.Item} id="delete" onClick={onClickSpy}>
                             Delete
                         </InlineConfirm.Target>
                     </Menu.Dropdown>

package/src/components/sticky-footer/StickyFooter.module.css

@@ -4,6 +4,15 @@
     z-index: 10;
     background-color: white;
     padding: var(--mantine-spacing-md) var(--mantine-spacing-lg);
+
+    &[data-variant='modal-footer'] {
+        border-top: 1px solid var(--mantine-color-gray-3);
+        padding-bottom: 0;
+        margin-top: var(--mb-padding);
+        margin-bottom: calc(var(--mantine-spacing-md) - var(--mb-padding));
+        margin-left: calc(-1 * var(--mb-padding));
+        margin-right: calc(-1 * var(--mb-padding));
+    }
 }
 
 .border {

package/src/components/sticky-footer/StickyFooter.tsx

@@ -4,7 +4,7 @@ import {ReactNode} from 'react';
 import classes from './StickyFooter.module.css';
 
 export interface StickyFooterProps
-    extends Omit<GroupProps, 'classNames' | 'styles' | 'vars'>,
+    extends Omit<GroupProps, 'classNames' | 'styles' | 'vars' | 'variant'>,
         StylesApiProps<StickyFooterFactory> {
     /**
      * Whether a border is render on top of the footer
@@ -14,6 +14,13 @@ export interface StickyFooterProps
      * Footer's children, usually buttons
      */
     children?: ReactNode;
+    /**
+     * Use variant 'modal-footer' when rendering the `StickyFooter` inside `Modal`.
+     *
+     * The 'modal-footer' removes the modal's default padding so that the footer properly hugs the bottom of the modal.
+     * It also adds a border on top of the footer.
+     */
+    variant?: 'default' | 'modal-footer';
 }
 
 export type StickyFooterStylesNames = 'root';

package/src/components/table/Table.module.css

@@ -35,8 +35,7 @@
 .headerRoot {
     border-bottom: 1px solid var(--mantine-color-gray-3);
     background-color: var(--mantine-color-gray-1);
-    padding-left: var(--mantine-spacing-xl);
-    padding-right: var(--mantine-spacing-lg);
+    padding: var(--mantine-spacing-sm) var(--mantine-spacing-xl);
     position: relative;
 }
 

package/src/components/table/layouts/row-layout/RowLayoutHeader.tsx

@@ -26,11 +26,8 @@ const defaultProps: Partial<RowLayoutHeaderProps<unknown>> = {};
 
 export const RowLayoutHeader = <T,>(props: RowLayoutHeaderProps<T> & {ref?: ForwardedRef<HTMLTableRowElement>}) => {
     const ctx = useRowLayout();
-    const {table, getExpandChildren, loading, className, style, classNames, styles, ...others} = useProps(
-        'RowLayoutHeader',
-        defaultProps as RowLayoutHeaderProps<T>,
-        props,
-    );
+    const {table, getExpandChildren, loading, doubleClickAction, className, style, classNames, styles, ...others} =
+        useProps('RowLayoutHeader', defaultProps as RowLayoutHeaderProps<T>, props);
     const {multiRowSelectionEnabled, disableRowSelection} = useTable();
 
     const headers = table.getHeaderGroups().map((headerGroup) => (

package/src/components/table/table-column/TableCollapsibleColumn.tsx

@@ -11,7 +11,7 @@ const sharedProps: ColumnDef<unknown> = {
     id: 'collapsible',
     enableSorting: false,
     header: '',
-    size: 62,
+    size: 84, // 16px padding left + 28px ActionIcon + 40px padding right
 };
 
 /**

package/src/components/table/table-header/TableHeader.tsx

@@ -43,13 +43,7 @@ export const TableHeader = factory<TableHeaderFactory>((props, ref) => {
     const gridStyles = ctx.getStyles('headerGrid', stylesApiProps);
 
     return (
-        <Box
-            py="sm"
-            px="lg"
-            ref={ref}
-            {...ctx.getStyles('headerRoot', {className, style, ...stylesApiProps})}
-            {...others}
-        >
+        <Box ref={ref} {...ctx.getStyles('headerRoot', {className, style, ...stylesApiProps})} {...others}>
             <Grid
                 justify="flex-start"
                 align="center"

package/src/components/table/table-per-page/TablePerPage.tsx

@@ -26,7 +26,6 @@ export const TablePerPage: FunctionComponent<TablePerPageProps> & {DEFAULT_SIZE:
                 value={state.pagination.pageSize.toString() ?? values?.[1].toString()}
                 onChange={updatePerPage}
                 data={values.map((value) => value.toString())}
-                color="action"
                 size="sm"
             />
         </Group>

package/src/styles/Alert.module.css

@@ -1,3 +1,33 @@
+.root {
+    padding: var(--mantine-spacing-sm);
+    &:not(&[data-variant]) {
+        border-color: color-mix(in srgb, var(--alert-color), var(--alert-bg) 85%);
+    }
+}
+
+.wrapper {
+    gap: var(--mantine-spacing-sm);
+}
+
 .title {
-    font-weight: var(--font-weight-medium);
+    font-weight: 500;
+}
+
+.icon {
+    width: 16px;
+    height: 16px;
+    margin-right: 0;
+}
+
+.message {
+    @mixin light {
+        color: var(--mantine-color-gray-7);
+        &:where([data-variant='filled']) {
+            color: var(--alert-color);
+        }
+    }
+
+    &:where([data-variant='white']) {
+        color: var(--mantine-color-black);
+    }
 }

package/src/styles/Pagination.module.css

@@ -0,0 +1,27 @@
+.root {
+    --pagination-control-fz: var(--mantine-font-size-sm);
+    color: var(--mantine-color-gray-6);
+}
+
+.control {
+    color: var(--mantine-color-gray-6);
+
+    @mixin light {
+        border-color: var(--mantine-color-gray-3);
+        @mixin hover {
+            &:where(:not(:disabled, [data-disabled])) {
+                background-color: var(--mantine-primary-color-1);
+            }
+        }
+    }
+
+    &:where([data-active]) {
+        @mixin light {
+            border-color: var(--pagination-active-bg);
+            color: var(--pagination-active-color, var(--mantine-color-white));
+            @mixin hover {
+                background-color: var(--pagination-active-bg);
+            }
+        }
+    }
+}

package/src/styles/SegmentedControl.module.css

@@ -1,3 +1,35 @@
 .root {
     background-color: var(--mantine-color-gray-2);
 }
+
+.indicator {
+    border-radius: var(--sc-radius, var(--mantine-radius-sm));
+}
+
+.label {
+    font-weight: 300;
+
+    @mixin light {
+        color: var(--mantine-color-gray-6);
+    }
+
+    &:where([data-disabled]) {
+        @mixin light {
+            color: var(--mantine-color-gray-5);
+        }
+    }
+
+    &:where([data-active]) {
+        @mixin light {
+            color: var(--sc-label-color, var(--mantine-color-black));
+        }
+    }
+
+    &:where(:not([data-disabled], [data-active], [data-read-only])) {
+        @mixin hover {
+            @mixin light {
+                color: var(--mantine-color-black);
+            }
+        }
+    }
+}

package/src/theme/Theme.tsx

@@ -1,4 +1,12 @@
-import {CheckSize16Px, CrossSize16Px, FilterSize16Px, InfoSize24Px} from '@coveord/plasma-react-icons';
+import {
+    ArrowHeadLeftSize16Px,
+    ArrowHeadRightSize16Px,
+    CheckSize16Px,
+    CrossSize16Px,
+    FilterSize16Px,
+    InfoSize16Px,
+    InfoSize24Px,
+} from '@coveord/plasma-react-icons';
 import {color} from '@coveord/plasma-tokens';
 import {
     ActionIcon,
@@ -23,6 +31,7 @@ import {
     MultiSelect,
     NavLink,
     Notification,
+    Pagination,
     Popover,
     Radio,
     ScrollArea,
@@ -53,6 +62,7 @@ import ListClasses from '../styles/List.module.css';
 import ModalClasses from '../styles/Modal.module.css';
 import NavLinkClasses from '../styles/NavLink.module.css';
 import NotificationClasses from '../styles/Notification.module.css';
+import PaginationClasses from '../styles/Pagination.module.css';
 import RadioClasses from '../styles/Radio.module.css';
 import ScrollAreaClasses from '../styles/ScrollArea.module.css';
 import SegmentedControlClasses from '../styles/SegmentedControl.module.css';
@@ -107,10 +117,10 @@ export const plasmaTheme: MantineThemeOverride = createTheme({
         }),
         Alert: Alert.extend({
             defaultProps: {
-                icon: <InfoSize24Px height={24} />,
+                icon: <InfoSize16Px height={16} />,
                 color: 'navy',
             },
-            classNames: {title: AlertClasses.title},
+            classNames: AlertClasses,
         }),
         Anchor: Anchor.extend({
             defaultProps: {
@@ -213,6 +223,14 @@ export const plasmaTheme: MantineThemeOverride = createTheme({
             },
             vars: NotificationVars,
         }),
+        Pagination: Pagination.extend({
+            classNames: PaginationClasses,
+            vars: () => ({root: {'--pagination-control-fz': 'var(--mantine-font-size-sm)'}}),
+            defaultProps: {
+                nextIcon: ArrowHeadRightSize16Px,
+                previousIcon: ArrowHeadLeftSize16Px,
+            },
+        }),
         Popover: Popover.extend({
             defaultProps: {
                 shadow: 'md',
@@ -226,7 +244,7 @@ export const plasmaTheme: MantineThemeOverride = createTheme({
             classNames: {viewport: ScrollAreaClasses.viewport},
         }),
         SegmentedControl: SegmentedControl.extend({
-            classNames: {root: SegmentedControlClasses.root},
+            classNames: SegmentedControlClasses,
         }),
         Select: Select.extend({
             defaultProps: {withCheckIcon: false, allowDeselect: false},