@coveord/plasma-mantine 59.2.0 → 59.4.0

package/src/components/RadioCard/RadioCard.tsx

@@ -1,13 +1,11 @@
 import {
-    Box,
     Factory,
-    Group,
     RadioCardProps as MantineRadioCardProps,
     RadioCardStylesNames as MantineRadioCardStylesNames,
     Radio,
     RadioCardCssVariables,
+    Stack,
     StylesApiProps,
-    Title,
     Tooltip,
     factory,
     useProps,
@@ -15,6 +13,7 @@ import {
 } from '@mantine/core';
 import {ReactNode} from 'react';
 import classes from '../../styles/RadioCard.module.css';
+import {Input} from '../Input/Input';
 
 export type RadioCardStylesNames = MantineRadioCardStylesNames | 'container' | 'indicator' | 'title' | 'description';
 export type RadioCardFactory = Factory<{
@@ -47,8 +46,19 @@ export type RadioCardProps = MantineRadioCardProps &
 const defaultProps: Partial<RadioCardProps> = {};
 
 export const RadioCard = factory<RadioCardFactory>((_props, ref) => {
-    const {classNames, styles, style, className, vars, disabled, label, description, disabledTooltip, ...others} =
-        useProps('RadioCard', defaultProps, _props);
+    const {
+        children,
+        classNames,
+        styles,
+        style,
+        className,
+        vars,
+        disabled,
+        label,
+        description,
+        disabledTooltip,
+        ...others
+    } = useProps('RadioCard', defaultProps, _props);
     const getStyles = useStyles<RadioCardFactory>({
         name: 'RadioCard',
         classes,
@@ -69,13 +79,16 @@ export const RadioCard = factory<RadioCardFactory>((_props, ref) => {
                 {...getStyles('card', {className, style, classNames, styles})}
                 {...others}
             >
-                <Group {...getStyles('container', {classNames, styles})}>
-                    <Radio.Indicator size="xs" disabled={disabled} {...getStyles('indicator', {classNames, styles})} />
-                    <Title order={4} {...getStyles('title', {classNames, styles})}>
-                        {label}
-                    </Title>
-                </Group>
-                {description && <Box {...getStyles('description', {classNames, styles})}>{description}</Box>}
+                <Radio.Indicator disabled={disabled} {...getStyles('indicator', {classNames, styles})} />
+                <Stack {...getStyles('container', {classNames, styles})}>
+                    <Input.Label {...getStyles('title', {classNames, styles})}>{label}</Input.Label>
+                    {description && (
+                        <Input.Description {...getStyles('description', {classNames, styles})}>
+                            {description}
+                        </Input.Description>
+                    )}
+                    {children}
+                </Stack>
             </Radio.Card>
         </Tooltip>
     );

package/src/styles/ActionIcon.module.css

@@ -1,5 +1,28 @@
 .root {
+    --ai-size-sm: 16px;
+    --ai-size-md: 24px;
     --ai-size-lg: 36px;
+    --ai-icon-size: 20px;
+
+    svg {
+        width: var(--ai-icon-size);
+        height: var(--ai-icon-size);
+    }
+
+    &[data-size='sm'] {
+        --ai-radius: var(--mantine-radius-sm);
+        --ai-icon-size: 12px;
+    }
+
+    &[data-size='md'] {
+        --ai-radius: var(--mantine-radius-sm);
+        --ai-icon-size: 16px;
+    }
+
+    &[data-size='lg'] {
+        --ai-radius: var(--mantine-radius-md);
+        --ai-icon-size: 20px;
+    }
 
     &[data-variant='subtle'] {
         &:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])) {

package/src/styles/CloseButton.module.css

@@ -0,0 +1,15 @@
+.root {
+    &[data-size='sm'] {
+        & svg {
+            width: 12px;
+            height: 12px;
+        }
+    }
+
+    &[data-size='md'] {
+        & svg {
+            width: 16px;
+            height: 16px;
+        }
+    }
+}

package/src/styles/Pill.module.css

@@ -1,4 +1,17 @@
 .root {
+    padding: 0 var(--mantine-spacing-xs);
     color: var(--mantine-color-text);
     background-color: var(--mantine-color-gray-light);
+
+    &[data-with-remove] {
+        padding: 0 var(--mantine-spacing-xxs) 0 var(--mantine-spacing-xs);
+
+        &[data-size='md'] {
+            padding: 0 2px 0 var(--mantine-spacing-xs);
+        }
+    }
+}
+
+.remove {
+    padding: 0;
 }

package/src/styles/RadioCard.module.css

@@ -5,24 +5,30 @@
 }
 
 .card {
-    display: inline-flex;
-    flex-direction: column;
+    --radio-card-outline-color: var(--mantine-color-default-border);
+
+    display: flex;
+    flex-flow: row nowrap;
     align-items: flex-start;
+    gap: var(--mantine-spacing-sm);
     padding: var(--mantine-spacing-sm);
     border-radius: var(--mantine-radius-lg);
+    border-color: var(--radio-card-outline-color);
+    transition: border-color 150ms ease;
 
     &[data-checked] {
-        border-color: var(--mantine-primary-color-filled);
+        --radio-card-outline-color: var(--mantine-primary-color-filled);
+    }
+
+    &[disabled],
+    &[readonly] {
+        --radio-card-outline-color: var(--mantine-color-default-border);
     }
 
     &[disabled] {
         cursor: not-allowed;
-        border-color: var(--mantine-color-default-border);
-
-        .title {
-            color: var(--mantine-color-disabled-color);
-        }
 
+        .title,
         .description {
             color: var(--mantine-color-disabled-color);
         }
@@ -30,44 +36,39 @@
 
     &[readonly] {
         pointer-events: none;
-        border-color: var(--mantine-color-default-border);
 
-        & .indicator {
-            border-color: var(--mantine-color-default-border);
+        .indicator[data-checked] {
+            background-color: var(--mantine-color-default);
+            color: var(--coveo-color-text-readonly);
 
-            &[data-checked] {
-                background-color: var(--coveo-color-bg-readonly);
-                color: var(--coveo-color-text-readonly);
-
-                & > svg {
-                    color: var(--coveo-color-text-readonly);
-                }
+            & > svg {
+                color: inherit;
             }
         }
     }
 }
 
 .container {
-    flex-wrap: nowrap;
-    gap: var(--mantine-spacing-sm);
-    align-items: baseline;
-    justify-content: flex-start;
-    width: 100%;
-    margin-bottom: var(--mantine-spacing-xs);
+    gap: var(--mantine-spacing-xs);
 }
 
 .title {
-    flex: 1;
-    word-break: break-word;
+    line-height: 20px;
 }
 
+.title,
 .description {
-    padding-left: var(--mantine-spacing-lg);
-    color: var(--mantine-color-dimmed);
-    font-weight: 400;
-    font-size: var(--mantine-font-size-xs);
+    flex: 1;
+    overflow-wrap: anywhere;
 }
 
 .indicator {
     cursor: pointer;
+    transition: border-color 150ms ease;
+
+    &,
+    &[data-disabled],
+    &[data-checked] {
+        border-color: var(--radio-card-outline-color);
+    }
 }

package/src/theme/Theme.tsx

@@ -83,6 +83,7 @@ import CardClasses from '../styles/Card.module.css';
 import CheckboxClasses from '../styles/Checkbox.module.css';
 import CheckboxIndicatorClasses from '../styles/CheckboxIndicator.module.css';
 import ChipClasses from '../styles/Chip.module.css';
+import CloseButtonClasses from '../styles/CloseButton.module.css';
 import ComboboxClasses from '../styles/Combobox.module.css';
 import DatePickerClasses from '../styles/DatePicker.module.css';
 import DateTimePickerClasses from '../styles/DateTimePicker.module.css';
@@ -186,7 +187,7 @@ export const plasmaTheme: MantineThemeOverride = createTheme({
         }),
         ActionIcon: ActionIcon.extend({
             defaultProps: {
-                size: 'lg',
+                size: 'md',
             },
             classNames: ActionIconClasses,
         }),
@@ -273,6 +274,7 @@ export const plasmaTheme: MantineThemeOverride = createTheme({
             defaultProps: {
                 icon: <CrossSize16Px height={16} aria-label="close" />,
             },
+            classNames: CloseButtonClasses,
         }),
         ColorSwatch: ColorSwatch.extend({
             defaultProps: {