@coveord/plasma-mantine 55.7.2-next.2 → 55.7.2-next.21

package/src/components/table/layouts/row-layout/RowLayout.module.css

@@ -1,18 +1,12 @@
 .headerRow {
-    &[data-selectable='true'] input[type='checkbox'] {
-        border-color: var(--mantine-color-gray-4);
-        pointer-events: auto;
-        cursor: default;
-    }
-
     &[data-selectable='false'] input[type='checkbox'] {
-        background-color: var(--mantine-color-gray-2);
-        border-color: var(--mantine-color-gray-3);
+        background-color: var(--mantine-color-gray-light);
+        border-color: var(--mantine-color-default-border);
         pointer-events: none;
         cursor: not-allowed;
 
         & + svg {
-            color: var(--mantine-color-gray-5);
+            color: var(--mantine-color-dimmed);
         }
     }
 }
@@ -25,23 +19,23 @@
     }
 
     @mixin hover {
-        background-color: var(--mantine-color-gray-1);
+        background-color: var(--mantine-color-gray-light-hover);
     }
 
     &[data-selectable='false'] input[type='checkbox'] {
-        background-color: var(--mantine-color-gray-2);
-        border-color: var(--mantine-color-gray-3);
+        background-color: var(--mantine-color-gray-light);
+        border-color: var(--mantine-color-default-border);
         pointer-events: none;
         cursor: not-allowed;
 
         &:checked + svg {
-            color: var(--mantine-color-gray-5);
+            color: var(--mantine-color-dimmed);
         }
     }
 
     &[data-selected='true'] {
         &[data-multi-selection='false'] {
-            background-color: var(--mantine-color-gray-1);
+            background-color: var(--mantine-color-gray-light);
         }
 
         &[data-multi-selection='true'] {
@@ -61,10 +55,10 @@
     /* We must use height instead of minHeight here, otherwise it doesn’t apply */
     height: 56px;
     padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
-    border-bottom: rem(1) solid var(--mantine-color-gray-3);
+    border-bottom: rem(1) solid var(--mantine-color-default-border);
 }
 
 .collapsibleWrapper {
-    border-bottom: rem(1) solid var(--mantine-color-gray-3);
-    background-color: var(--mantine-color-gray-1);
+    border-bottom: rem(1) solid var(--mantine-color-default-border);
+    background-color: var(--mantine-color-gray-light);
 }

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

@@ -1,3 +1,4 @@
+import {IconList} from '@coveord/plasma-react-icons';
 import {Factory, MantineComponent, StylesApiProps, useProps, useStyles} from '@mantine/core';
 import {ReactNode} from 'react';
 import {identity} from '../../../../utils';
@@ -6,7 +7,6 @@ import classes from './RowLayout.module.css';
 import {RowLayoutBody, RowLayoutBodyStylesNames} from './RowLayoutBody';
 import {RowLayoutProvider} from './RowLayoutContext';
 import {RowLayoutHeader, RowLayoutHeaderStyleNames} from './RowLayoutHeader';
-import {RowLayoutIcon} from './RowLayoutIcon';
 
 type RowLayoutStylesNames = RowLayoutHeaderStyleNames | RowLayoutBodyStylesNames;
 export interface RowLayoutProps extends StylesApiProps<RowLayoutFactory> {
@@ -37,6 +37,6 @@ export const RowLayout = ((props: RowLayoutProps) => {
 
 RowLayout.Body = RowLayoutBody;
 RowLayout.Header = RowLayoutHeader;
-RowLayout.Icon = RowLayoutIcon;
+RowLayout.Icon = IconList;
 RowLayout.displayName = 'Rows';
 RowLayout.extend = identity;

package/src/components/table/table-actions/TableActionItem.tsx

@@ -54,15 +54,14 @@ export const TableActionItem = polymorphicFactory<TableActionItemFactory>(
 
         if (primary) {
             return (
-                <Button
+                <Button.Quaternary
                     component={component}
                     ref={ref}
-                    variant="subtle"
                     {...others}
                     {...getStyles('actionItemRoot', {className, style, classNames, styles})}
                 >
                     {children}
-                </Button>
+                </Button.Quaternary>
             );
         }
 

package/src/components/table/table-actions/TableActionsList.tsx

@@ -1,10 +1,8 @@
 import {MoreSize16Px} from '@coveord/plasma-react-icons';
 import {
-    ActionIcon,
     Box,
-    Button,
-    CSSProperties,
     CompoundStylesApiProps,
+    CSSProperties,
     ExtendComponent,
     Factory,
     Menu,
@@ -13,6 +11,8 @@ import {
     useProps,
 } from '@mantine/core';
 import {MouseEventHandler, ReactNode, useState} from 'react';
+import {ActionIcon} from '../../action-icon';
+import {Button} from '../../button';
 import {InlineConfirm} from '../../inline-confirm';
 import {TableAction} from '../Table.types';
 import {useTableContext} from '../TableContext';
@@ -131,13 +131,12 @@ export const TableActionsList = (props: TableActionsListProps) => {
                     <TableActionProvider value={{primary: false}}>
                         <Menu withinPortal={false} {...others} keepMounted>
                             <Menu.Target>
-                                <Button
+                                <Button.Quaternary
                                     {...getStyles('actionsTarget', {styles, classNames})}
-                                    variant="subtle"
                                     leftSection={icon}
                                 >
                                     {label}
-                                </Button>
+                                </Button.Quaternary>
                             </Menu.Target>
                             <Menu.Dropdown {...getStyles('actionsDropdown', {styles, classNames})}>
                                 <ActionsGroupsMenuItems
@@ -159,13 +158,12 @@ export const TableActionsList = (props: TableActionsListProps) => {
                 <Menu opened={opened} onChange={onChange} {...others} keepMounted>
                     <Menu.Target>
                         <Tooltip label={label} {...getStyles('actionsTooltip', {styles, classNames})}>
-                            <ActionIcon
+                            <ActionIcon.Quaternary
                                 {...getStyles('actionsTarget', {styles, classNames})}
                                 onClick={onClick}
-                                variant="subtle"
                             >
                                 {icon}
-                            </ActionIcon>
+                            </ActionIcon.Quaternary>
                         </Tooltip>
                     </Menu.Target>
                     <Menu.Dropdown {...getStyles('actionsDropdown', {styles, classNames})}>

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

@@ -1,4 +1,4 @@
-import {ArrowHeadDownSize16Px, ArrowHeadUpSize16Px} from '@coveord/plasma-react-icons';
+import {IconChevronDown, IconChevronUp} from '@coveord/plasma-react-icons';
 import {Factory, factory, useProps} from '@mantine/core';
 import {CellContext, ColumnDef} from '@tanstack/table-core';
 import {MouseEvent as ReactMouseEvent, ReactNode} from 'react';
@@ -58,8 +58,8 @@ type TableCollapsibleColumnFactory = Factory<{
 }>;
 
 const defaultProps: Partial<CollapsibleIconProps> = {
-    iconExpanded: <ArrowHeadUpSize16Px height={16} />,
-    iconCollapsed: <ArrowHeadDownSize16Px height={16} />,
+    iconExpanded: <IconChevronUp aria-label="Collapse" size={20} />,
+    iconCollapsed: <IconChevronDown aria-label="Expand" size={20} />,
 };
 
 const CollapsibleIcon = factory<TableCollapsibleColumnFactory>((props, ref) => {
@@ -76,16 +76,15 @@ const CollapsibleIcon = factory<TableCollapsibleColumnFactory>((props, ref) => {
         handler();
     };
     return info.row.getCanExpand() ? (
-        <ActionIcon
+        <ActionIcon.Quaternary
             ref={ref}
             onClick={onClick}
-            variant="subtle"
             color="gray"
             radius="sm"
             {...getStyles('collapsibleIcon', {className, classNames, styles, style})}
             {...others}
         >
             {info.row.getIsExpanded() ? iconExpanded : iconCollapsed}
-        </ActionIcon>
+        </ActionIcon.Quaternary>
     ) : null;
 });

package/src/components/table/table-filter/TableFilter.tsx

@@ -1,8 +1,9 @@
-import {CrossSize16Px, FilterSize16Px} from '@coveord/plasma-react-icons';
-import {ActionIcon, BoxProps, CompoundStylesApiProps, Factory, Grid, TextInput, factory, useProps} from '@mantine/core';
+import {IconSearch, IconX} from '@coveord/plasma-react-icons';
+import {BoxProps, CompoundStylesApiProps, Factory, factory, Grid, TextInput, useProps} from '@mantine/core';
 import {useDebouncedValue, useDidUpdate} from '@mantine/hooks';
 import {ChangeEventHandler, MouseEventHandler, useEffect, useState} from 'react';
 
+import {ActionIcon} from '../../action-icon';
 import {TableComponentsOrder} from '../Table';
 import {useTableContext} from '../TableContext';
 
@@ -74,11 +75,11 @@ export const TableFilter = factory<TableFilterFactory>((props, ref) => {
                 autoComplete="off"
                 rightSection={
                     filter ? (
-                        <ActionIcon onClick={handleClear} color="gray" variant="subtle">
-                            <CrossSize16Px height={16} />
-                        </ActionIcon>
+                        <ActionIcon.Quaternary onClick={handleClear}>
+                            <IconX aria-label="clear" size={20} />
+                        </ActionIcon.Quaternary>
                     ) : (
-                        <FilterSize16Px height={16} {...getStyles('filterEmpty', stylesApiProps)} />
+                        <IconSearch size={20} {...getStyles('filterEmpty', stylesApiProps)} />
                     )
                 }
                 value={filter}

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

@@ -73,14 +73,13 @@ export const TableHeader = factory<TableHeaderFactory>((props, ref) => {
                         order={TableComponentsOrder.MultiSelectInfo}
                     >
                         <Tooltip label={unselectAllLabel}>
-                            <Button
+                            <Button.Quaternary
                                 onClick={store.clearRowSelection}
-                                variant="subtle"
                                 disabled={!store.rowSelectionEnabled}
                                 leftSection={<CrossSize16Px height={16} />}
                             >
                                 {selectedCountLabel(selectedRows.length)}
-                            </Button>
+                            </Button.Quaternary>
                         </Tooltip>
                     </Grid.Col>
                 ) : null}

package/src/index.ts

@@ -15,6 +15,7 @@ export {noop};
 
 // explicitly overriding mantine components
 export {
+    Accordion,
     ActionIcon,
     BrowserPreview,
     Button,

package/src/styles/ActionIcon.module.css

@@ -0,0 +1,7 @@
+.root {
+    &[data-variant='subtle'] {
+        &:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])) {
+            background: transparent;
+        }
+    }
+}

package/src/styles/Alert.module.css

@@ -1,3 +1,14 @@
 .title {
     font-weight: 500;
 }
+
+.icon {
+    margin-inline-end: var(--mantine-spacing-sm);
+}
+
+.closeButton {
+    & svg {
+        width: 20px;
+        height: 20px;
+    }
+}

package/src/styles/Breadcrumbs.module.css

@@ -0,0 +1,10 @@
+.root {
+    font-size: var(--mantine-font-size-xs);
+    font-weight: var(--mantine-heading-font-weight);
+}
+
+.breadcrumb {
+    &:not(a) {
+        color: var(--coveo-color-title);
+    }
+}

package/src/styles/Button.module.css

@@ -1,3 +1,11 @@
 .label {
     font-weight: 500;
 }
+
+.root {
+    &[data-variant='subtle'] {
+        &:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])) {
+            background: transparent;
+        }
+    }
+}

package/src/styles/Checkbox.module.css

@@ -1,3 +1,9 @@
 .label {
-    font-weight: 300;
+    font-weight: 400;
+}
+
+.input {
+    @mixin where-light {
+        border-color: var(--coveo-color-input-border);
+    }
 }

package/src/styles/CheckboxIndicator.module.css

@@ -0,0 +1,5 @@
+.indicator {
+    @mixin where-light {
+        border-color: var(--coveo-color-input-border);
+    }
+}

package/src/styles/Input.module.css

@@ -0,0 +1,19 @@
+.wrapper {
+    --input-section-color: var(--mantine-color-placeholder);
+
+    @mixin light {
+        --input-disabled-color: var(--coveo-color-text-disabled);
+
+        &[data-variant='default'] {
+            --input-bd: var(--coveo-color-input-border);
+        }
+    }
+
+    &[data-disabled] {
+        --input-section-color: var(--input-disabled-color);
+    }
+}
+
+.section {
+    color: var(--input-section-color);
+}

package/src/styles/InputWrapper.module.css

@@ -1,7 +1,17 @@
+.root {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mantine-spacing-xxs);
+}
+
+.label {
+    color: var(--coveo-color-title);
+}
+
 .description {
-    font-weight: 300;
+    font-weight: 400;
 }
 
 .error {
-    font-weight: 300;
+    font-weight: 400;
 }

package/src/styles/NavLink.module.css

@@ -4,6 +4,6 @@
 
 .children {
     & .label {
-        font-weight: 300;
+        font-weight: 400;
     }
 }

package/src/styles/Pagination.module.css

@@ -0,0 +1,5 @@
+.control {
+    @mixin where-light {
+        border-color: var(--coveo-color-input-border);
+    }
+}

package/src/styles/Radio.module.css

@@ -2,3 +2,9 @@
     display: flex;
     align-items: flex-start;
 }
+
+.radio {
+    @mixin where-light {
+        border-color: var(--coveo-color-input-border);
+    }
+}

package/src/styles/ReadOnlyInput.module.css

@@ -3,6 +3,10 @@
 
     --input-bd: transparent;
     --input-bg: var(--mantine-color-dark-light);
-    --input-color: var(--mantine-color-dimmed);
-    --input-placeholder-color: var(--mantine-color-dimmed);
+    --input-color: var(--mantine-color-text);
+    --input-placeholder-color: var(--mantine-color-text);
+}
+
+.section {
+    --input-section-color: var(--mantine-color-text);
 }

package/src/styles/SegmentedControl.module.css

@@ -1,3 +1,3 @@
 .label {
-    font-weight: 300;
+    font-weight: 400;
 }

package/src/styles/Tabs.module.css

@@ -6,6 +6,10 @@
             }
         }
     }
+
+    @mixin light {
+        --tab-border-color: var(--mantine-color-default-border);
+    }
 }
 
 .tab {

package/src/styles/Text.module.css

@@ -1,5 +1,5 @@
 .root {
-    font-weight: 300;
+    font-weight: 400;
 
     &:where([data-inherit]) {
         font-weight: inherit;