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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coveord/plasma-mantine",
-  "version": "55.7.2-next.2",
+  "version": "55.7.3",
   "description": "A Plasma flavoured Mantine theme",
   "keywords": [
     "plasma",
@@ -32,52 +32,53 @@
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",
     "@mantine/utils": "6.0.22",
-    "@monaco-editor/react": "4.6.0",
+    "@monaco-editor/react": "4.7.0",
     "@swc/helpers": "0.5.15",
-    "@tanstack/react-table": "8.20.6",
-    "@tanstack/table-core": "8.20.5",
+    "@tanstack/react-table": "8.21.2",
+    "@tanstack/table-core": "8.21.2",
     "clsx": "2.1.1",
     "dayjs": "1.11.13",
     "fast-deep-equal": "3.1.3",
     "lodash.debounce": "4.0.8",
     "lodash.defaultsdeep": "4.6.1",
     "monaco-editor": "0.52.2",
-    "@coveord/plasma-react-icons": "55.7.2-next.0",
-    "@coveord/plasma-tokens": "55.7.2-next.0"
+    "@coveord/plasma-tokens": "55.7.3",
+    "@coveord/plasma-react-icons": "55.7.3"
   },
   "devDependencies": {
-    "@mantine/carousel": "7.16.1",
-    "@mantine/code-highlight": "7.16.1",
-    "@mantine/core": "7.16.1",
-    "@mantine/dates": "7.16.1",
-    "@mantine/form": "7.16.1",
-    "@mantine/hooks": "7.16.1",
-    "@mantine/modals": "7.16.1",
-    "@mantine/notifications": "7.16.1",
+    "@mantine/carousel": "7.17.2",
+    "@mantine/code-highlight": "7.17.2",
+    "@mantine/core": "7.17.2",
+    "@mantine/dates": "7.17.2",
+    "@mantine/form": "7.17.2",
+    "@mantine/hooks": "7.17.2",
+    "@mantine/modals": "7.17.2",
+    "@mantine/notifications": "7.17.2",
     "@swc/cli": "0.6.0",
-    "@swc/core": "1.10.8",
+    "@swc/core": "1.11.9",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.2.0",
-    "@testing-library/user-event": "14.6.0",
+    "@testing-library/user-event": "14.6.1",
     "@types/lodash.debounce": "4.0.9",
     "@types/lodash.defaultsdeep": "4.6.9",
     "@types/react": "18.3.18",
     "@types/react-dom": "18.3.5",
+    "cross-env": "7.0.3",
     "embla-carousel-react": "7.1.0",
     "identity-obj-proxy": "3.0.0",
     "jsdom": "26.0.0",
-    "postcss": "8.5.1",
+    "postcss": "8.5.3",
     "postcss-preset-mantine": "^1.11.0",
     "postcss-simple-vars": "^7.0.1",
-    "publint": "0.3.2",
+    "publint": "0.3.9",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "rimraf": "6.0.1",
-    "sass": "1.83.4",
+    "sass": "1.85.1",
     "tslib": "2.8.1",
-    "typescript": "5.7.3",
-    "vitest": "3.0.5"
+    "typescript": "5.8.2",
+    "vitest": "3.0.8"
   },
   "peerDependencies": {
     "@mantine/carousel": "^7.6.1",
@@ -120,7 +121,7 @@
     "clean": "rimraf dist",
     "lintfix": "../../node_modules/.bin/prettier --write \"**/*.{scss,ts,tsx,js,jsx,json,md,yml,html}\" && ../../node_modules/.bin/eslint \"**/*.{ts,tsx}\" --fix",
     "start": "node ../../scripts/start",
-    "test": "TZ=UTC vitest run",
-    "test:watch": "TZ=UTC vitest"
+    "test": "cross-env TZ=UTC vitest run",
+    "test:watch": "cross-env TZ=UTC vitest"
   }
 }

package/src/components/browser-preview/BrowserPreview.module.css

@@ -2,7 +2,7 @@
     box-shadow: var(--mantine-shadow-md);
     border-radius: var(--mantine-radius-default);
     border: 1px solid;
-    border-color: var(--mantine-color-default-border);
+    border-color: var(--mantine-color-gray-3);
     flex: 1;
 }
 

package/src/components/button/Button.tsx

@@ -56,9 +56,3 @@ export const Button = polymorphicFactory<ButtonOverloadFactory>(
     },
 );
 Button.Group = MantineButton.Group;
-
-export const ButtonPrimary = Button.withProps({variant: 'filled'});
-export const ButtonSecondary = Button.withProps({variant: 'light'});
-export const ButtonTertiary = Button.withProps({variant: 'subtle'});
-export const ButtonDestructive = Button.withProps({variant: 'filled', color: 'var(--mantine-color-error)'});
-export const ButtonDestructiveSecondary = Button.withProps({variant: 'light', color: 'var(--mantine-color-error)'});

package/src/components/code-editor/CodeEditor.tsx

@@ -15,7 +15,7 @@ import {
 } from '@mantine/core';
 import {useUncontrolled} from '@mantine/hooks';
 import Editor, {Monaco, loader} from '@monaco-editor/react';
-import {editor as monacoEditor} from 'monaco-editor';
+import {editor as monacoEditor, MarkerSeverity} from 'monaco-editor';
 import {FunctionComponent, useEffect, useRef, useState} from 'react';
 
 import cx from 'clsx';
@@ -159,6 +159,10 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
     };
 
     const [hasMonacoError, setHasMonacoError] = useState(false);
+    const hasMonacoErrorRef = useRef(false);
+
+    hasMonacoErrorRef.current = hasMonacoError;
+
     const renderErrorOutline = !!error || hasMonacoError;
     const theme = useMantineTheme();
     const {colorScheme} = useMantineColorScheme();
@@ -172,9 +176,7 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
     }, []);
 
     const handleValidate = (markers: monacoEditor.IMarker[]) => {
-        setHasMonacoError(
-            markers.some((marker) => marker.severity === loader.__getMonacoInstance().MarkerSeverity.Error),
-        );
+        setHasMonacoError(markers.some((marker) => marker.severity === MarkerSeverity.Error));
     };
 
     const _label = label ? (
@@ -247,7 +249,12 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
                     registerThemes(monaco);
                     editor.onDidFocusEditorText(() => onFocus?.());
                     editor.onDidBlurEditorText(async () => {
-                        await editor.getAction('editor.action.formatDocument').run();
+                        // monaco editor has a timeout of 500ms populating errors, we want to ensure that checking errors happen after that
+                        setTimeout(async () => {
+                            if (!hasMonacoErrorRef.current) {
+                                await editor?.getAction('editor.action.formatDocument')?.run();
+                            }
+                        }, 550);
                     });
                 }}
             />

package/src/components/collection/CollectionItem.tsx

@@ -20,7 +20,7 @@ interface CollectionItemSharedProps extends GroupProps {
 const RemoveButton: FunctionComponent<{
     onClick: React.MouseEventHandler<HTMLButtonElement>;
 }> = ({onClick}) => (
-    <ActionIcon style={{alignSelf: 'center'}} variant="subtle" onClick={onClick}>
+    <ActionIcon style={{alignSelf: 'center'}} variant="subtle" onClick={onClick} color="action">
         <RemoveSize16Px height={16} />
     </ActionIcon>
 );

package/src/components/copyToClipboard/CopyToClipboard.tsx

@@ -50,7 +50,7 @@ export const CopyToClipboard: FunctionComponent<CopyToClipboardProps> = ({withLa
             value={others.value}
             readOnly
             autoComplete="off"
-            rightSection={<CopyToClipboardButton {...others} />}
+            rightSection={<CopyToClipboardButton color="action" {...others} />}
         />
     ) : (
         <CopyToClipboardButton {...others} />

package/src/components/header/Header.module.css

@@ -5,13 +5,18 @@
     }
 
     & .description {
-        color: var(--mantine-color-dimmed);
+        color: var(--mantine-color-gray-6);
         font-weight: 300;
     }
 }
 
 .title {
     word-break: break-word;
+
+    &[data-variant='primary'] {
+        color: var(--mantine-color-gray-5);
+    }
+
     line-height: var(--mantine-line-height-md);
 }
 
@@ -26,5 +31,5 @@
 }
 
 .breadcrumbsSeparator {
-    color: var(--mantine-color-dimmed);
+    color: var(--mantine-color-gray-5);
 }

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

@@ -0,0 +1,73 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Header > renders the specified breadcrumbs above the title 1`] = `
+<div>
+  <style
+    data-mantine-styles="classes"
+  >
+    @media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}
+  </style>
+  <div
+    class="_root_69e643 mantine-PlasmaHeader-root m_4081bf90 mantine-Group-root"
+    data-variant="primary"
+    style="--group-gap: var(--mantine-spacing-md); --group-align: center; --group-justify: space-between; --group-wrap: nowrap;"
+  >
+    <div
+      class="m_6d731127 mantine-Stack-root"
+      style="--stack-gap: 0rem; --stack-align: stretch; --stack-justify: flex-start;"
+    >
+      <div
+        class="m_8b3717df mantine-Breadcrumbs-root"
+      >
+        <a
+          class="mantine-focus-auto _root_a623ec m_849cf0da _breadcrumbsRoot_69e643 mantine-PlasmaHeader-breadcrumbsRoot m_f678d540 mantine-Breadcrumbs-breadcrumb m_b6d8b162 mantine-Text-root mantine-Anchor-root"
+          color="action.6"
+          data-underline="hover"
+          style="--text-color: var(--mantine-color-action-6); --text-fz: var(--mantine-font-size-sm);"
+        >
+          One
+        </a>
+        <div
+          class="_breadcrumbsSeparator_69e643 mantine-PlasmaHeader-breadcrumbsSeparator m_3b8f2208 mantine-Breadcrumbs-separator"
+        >
+          /
+        </div>
+        <a
+          class="mantine-focus-auto _root_a623ec m_849cf0da _breadcrumbsRoot_69e643 mantine-PlasmaHeader-breadcrumbsRoot m_f678d540 mantine-Breadcrumbs-breadcrumb m_b6d8b162 mantine-Text-root mantine-Anchor-root"
+          color="action.6"
+          data-underline="hover"
+          style="--text-color: var(--mantine-color-action-6); --text-fz: var(--mantine-font-size-sm);"
+        >
+          Two
+        </a>
+        <div
+          class="_breadcrumbsSeparator_69e643 mantine-PlasmaHeader-breadcrumbsSeparator m_3b8f2208 mantine-Breadcrumbs-separator"
+        >
+          /
+        </div>
+        <a
+          class="mantine-focus-auto _root_a623ec m_849cf0da _breadcrumbsRoot_69e643 mantine-PlasmaHeader-breadcrumbsRoot m_f678d540 mantine-Breadcrumbs-breadcrumb m_b6d8b162 mantine-Text-root mantine-Anchor-root"
+          color="action.6"
+          data-underline="hover"
+          style="--text-color: var(--mantine-color-action-6); --text-fz: var(--mantine-font-size-sm);"
+        >
+          Three
+        </a>
+      </div>
+      <h1
+        class="_root_4eabcc _title_69e643 mantine-PlasmaHeader-title m_8a5d1357 mantine-Title-root"
+        data-order="1"
+        data-variant="primary"
+        style="--title-fw: var(--mantine-h1-font-weight); --title-lh: var(--mantine-h1-line-height); --title-fz: var(--mantine-h1-font-size);"
+      >
+        Title
+      </h1>
+      <p
+        class="mantine-focus-auto _description_69e643 mantine-PlasmaHeader-description m_b6d8b162 mantine-Text-root"
+        data-size="md"
+        style="--text-fz: var(--mantine-font-size-md); --text-lh: var(--mantine-line-height-md);"
+      />
+    </div>
+  </div>
+</div>
+`;

package/src/components/index.ts

@@ -1,6 +1,4 @@
 export * from './action-icon';
-export * from './alert';
-export * from './badge';
 export * from './blank-slate';
 export * from './browser-preview';
 export * from './button';

package/src/components/prompt/Prompt.module.css

@@ -1,9 +1,14 @@
 .root {
-    --prompt-icon-size: 68px;
+    --prompt-icon-size: 88px;
+
+    .header {
+        border-bottom: none;
+        align-items: center;
+    }
 
     .body {
         padding: 0 var(--mantine-spacing-lg) var(--mantine-spacing-lg)
-            calc(var(--prompt-icon-size) + var(--mantine-spacing-md) + var(--mantine-spacing-lg));
+            calc(var(--prompt-icon-size) + (2 * var(--mantine-spacing-lg)));
     }
 }
 
@@ -13,12 +18,18 @@
 }
 
 .header {
-    gap: var(--mantine-spacing-md);
+    gap: var(--mantine-spacing-lg);
     width: 100%;
+    font-size: var(--mantine-h3-font-size);
+    line-height: var(--mantine-h3-line-height);
     overflow-wrap: anywhere;
     padding: var(--mantine-spacing-lg) var(--mantine-spacing-md) var(--mantine-spacing-xs) var(--mantine-spacing-lg);
 }
 
+.close {
+    align-self: flex-start;
+}
+
 .inner {
-    color: var(--mantine-color-dimmed);
+    color: var(--mantine-color-gray-7);
 }

package/src/components/prompt/Prompt.tsx

@@ -100,7 +100,7 @@ export const Prompt = factory<PromptFactory>((_props, ref) => {
 
     return (
         <PromptContextProvider value={{variant, getStyles}}>
-            <Modal.Root ref={ref} variant="prompt" size="lg" {...others} {...getStyles('root')}>
+            <Modal.Root ref={ref} variant="prompt" size="sm" {...others} {...getStyles('root')}>
                 <Modal.Overlay {...getStyles('overlay', stylesApiProps)} />
                 <Modal.Content {...getStyles('content', stylesApiProps)}>
                     <Modal.Header {...getStyles('header', stylesApiProps)}>

package/src/components/prompt/PromptConfirmButton.tsx

@@ -17,10 +17,10 @@ export type PromptConfirmButtonFactory = Factory<{
 }>;
 
 const COLOR_BY_VARIANT: Record<PromptVariant, string> = {
-    success: 'var(--mantine-primary-color-filled)',
-    info: 'var(--mantine-primary-color-filled)',
-    warning: 'var(--mantine-color-error)',
-    critical: 'var(--mantine-color-error)',
+    success: 'action',
+    info: 'action',
+    warning: 'critical',
+    critical: 'critical',
 };
 
 const defaultProps: Partial<PromptConfirmButtonProps> = {};

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

@@ -2,11 +2,11 @@
     position: sticky;
     bottom: 0;
     z-index: 10;
-    background-color: var(--mantine-color-body);
+    background-color: white;
     padding: var(--mantine-spacing-md) var(--mantine-spacing-lg);
 
     &[data-variant='modal-footer'] {
-        border-top: 1px solid var(--mantine-color-default-border);
+        border-top: 1px solid var(--mantine-color-gray-3);
         padding-bottom: 0;
         margin: var(--mb-padding) calc(-1 * var(--mb-padding)) calc(var(--mantine-spacing-md) - var(--mb-padding))
             calc(-1 * var(--mb-padding));
@@ -14,5 +14,5 @@
 }
 
 .border {
-    border-top: 1px solid var(--mantine-color-default-border);
+    border-top: 1px solid var(--mantine-color-gray-3);
 }

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

@@ -19,7 +19,7 @@
         left: 0;
         right: 0;
         bottom: 0;
-        border-bottom: 1px solid var(--mantine-color-default-border);
+        border-bottom: 1px solid var(--mantine-color-gray-3);
     }
 }
 
@@ -66,8 +66,7 @@
 
 /* Table.Header */
 .headerRoot {
-    border-bottom: 1px solid var(--mantine-color-default-border);
-    border-top: 1px solid var(--mantine-color-default-border);
+    border-bottom: 1px solid var(--mantine-color-gray-3);
     background-color: var(--mantine-color-gray-1);
     padding: var(--mantine-spacing-sm) var(--mantine-spacing-xl);
     position: relative;
@@ -90,7 +89,7 @@
     color: var(--mantine-color-gray-6);
     height: var(--mantine-spacing-xl);
     font-weight: 500;
-    font-size: var(--mantine-font-size-sm);
+    font-size: var(--mantine-font-size-xs);
 
     &:first-of-type {
         padding-left: var(--mantine-spacing-xl);

package/src/styles/ActionIcon.module.css

@@ -0,0 +1,6 @@
+.root {
+    &[data-disabled] {
+        color: var(--mantine-color-gray-4);
+        background-color: var(--mantine-color-gray-1);
+    }
+}

package/src/styles/Alert.module.css

@@ -1,3 +1,35 @@
+.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: 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/Anchor.module.css

@@ -0,0 +1,6 @@
+.root {
+    @mixin hover {
+        text-decoration: underline;
+        color: var(--mantine-color-action-8);
+    }
+}

package/src/styles/AppShellNavBar.module.css

@@ -0,0 +1,3 @@
+.navbar {
+    border-color: var(--mantine-color-gray-3);
+}

package/src/styles/Badge.module.css

@@ -1,3 +1,5 @@
 .root {
+    text-transform: none;
+    padding: var(--mantine-spacing-xxs) var(--mantine-spacing-xs);
     font-weight: 500;
 }

package/src/styles/Button.module.css

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

package/src/styles/Checkbox.module.css

@@ -1,3 +1,20 @@
 .label {
+    font-size: var(--mantine-font-size-sm);
     font-weight: 300;
 }
+
+.input {
+    &[data-indeterminate] {
+        background-color: var(--mantine-color-pureWhite);
+        border-color: var(--mantine-color-gray-4);
+
+        & + svg {
+            color: var(--mantine-color-gray-6);
+        }
+    }
+
+    &[readonly] {
+        background-color: var(--mantine-color-gray-2);
+        border-color: var(--mantine-color-gray-2);
+    }
+}

package/src/styles/Combobox.module.css

@@ -1,10 +1,9 @@
-/* TODO: Plasma Reset, validate if we need the custom style for the search */
 .search {
     margin: 0 0 var(--mantine-spacing-xs);
-    border-radius: var(--mantine-radius-default);
+    border-radius: var(--mantine-radius-md);
     border: 1px solid;
     width: 100%;
-    border-color: var(--mantine-color-default-border);
+    border-color: var(--mantine-color-gray-4);
 
     &:focus {
         border-color: var(--mantine-primary-color-filled);

package/src/styles/DatePicker.module.css

@@ -0,0 +1,3 @@
+.monthCell {
+    text-align: center;
+}

package/src/styles/Input.module.css

@@ -0,0 +1,3 @@
+.input {
+    --input-color: var(--mantine-color-gray-7);
+}

package/src/styles/InputWrapper.module.css

@@ -1,7 +1,16 @@
+.label {
+    margin-bottom: var(--mantine-spacing-xs);
+}
+
 .description {
+    font-size: var(--mantine-font-size-sm);
+    color: var(--mantine-color-gray-7);
+    margin-bottom: var(--mantine-spacing-xs);
+    line-height: var(--mantine-line-height);
     font-weight: 300;
 }
 
 .error {
+    line-height: var(--mantine-line-height);
     font-weight: 300;
 }

package/src/styles/Modal.module.css

@@ -1,3 +1,65 @@
+.root {
+    &[data-full-screen] {
+        .content {
+            flex: 0 0 100%;
+        }
+    }
+
+    &[data-size='xs'] {
+        .content {
+            flex: 0 0 rem(432px);
+        }
+    }
+
+    &[data-size='sm'] {
+        .content {
+            flex: 0 0 rem(664px);
+        }
+    }
+
+    &[data-size='md'] {
+        .content {
+            flex: 0 0 rem(896px);
+        }
+    }
+
+    &[data-size='lg'] {
+        .content {
+            flex: 0 0 rem(1120px);
+        }
+    }
+
+    &[data-size='xl'] {
+        .content {
+            flex: 0 0 rem(88%);
+        }
+    }
+
+    &:not([data-size]) {
+        .content {
+            flex: 0 0 rem(896px);
+        }
+    }
+}
+
+.content {
+    overflow: auto;
+}
+
+.header {
+    border-bottom: 1px solid var(--mantine-color-gray-3);
+    align-items: flex-start;
+}
+
 .title {
+    width: 100%;
+    font-size: var(--mantine-h3-font-size);
+    line-height: var(--mantine-h3-line-height);
     font-weight: 500;
 }
+
+.body {
+    &:where(:not(:only-child)) {
+        padding-top: var(--mb-padding, var(--mantine-spacing-md));
+    }
+}

package/src/styles/NavLink.module.css

@@ -1,3 +1,21 @@
+.root {
+    color: var(--mantine-color-gray-6);
+    line-height: var(--mantine-line-height);
+    border-radius: var(--mantine-radius-default) 0 0 var(--mantine-radius-default);
+
+    &[data-active] {
+        color: var(--mantine-primary-color-6);
+    }
+
+    @mixin hover {
+        @mixin light {
+            &:where(:not([data-active])) {
+                background-color: var(--mantine-color-gray-1);
+            }
+        }
+    }
+}
+
 .label {
     font-weight: 500;
 }

package/src/styles/Notification.module.css

@@ -0,0 +1,20 @@
+.root {
+    border-color: var(--mantine-color-gray-3);
+    background-color: var(--mantine-color-gray-0);
+    box-shadow: var(--mantine-shadow-lg);
+    padding: var(--mantine-spacing-sm);
+
+    &[data-with-icon] {
+        padding-left: var(--mantine-spacing-sm);
+    }
+}
+
+.icon {
+    background-color: transparent;
+    margin-right: var(--mantine-spacing-sm);
+}
+
+.closeButton {
+    margin: var(--mantine-spacing-xs);
+    color: var(--mantine-color-gray-5);
+}