@coveord/plasma-mantine 59.2.0 → 59.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/.turbo/turbo-build.log +4 -4
  2. package/.turbo/turbo-test.log +87 -91
  3. package/dist/.tsbuildinfo +1 -1
  4. package/dist/cjs/components/InfoToken/InfoToken.module.css +1 -1
  5. package/dist/cjs/components/Input/InputLabelInfo.d.ts.map +1 -1
  6. package/dist/cjs/components/Input/InputLabelInfo.js +4 -1
  7. package/dist/cjs/components/Input/InputLabelInfo.js.map +1 -1
  8. package/dist/cjs/components/Input/InputLabelInfo.module.css +1 -0
  9. package/dist/cjs/components/RadioCard/RadioCard.d.ts.map +1 -1
  10. package/dist/cjs/components/RadioCard/RadioCard.js +18 -18
  11. package/dist/cjs/components/RadioCard/RadioCard.js.map +1 -1
  12. package/dist/cjs/styles/ActionIcon.module.css +23 -0
  13. package/dist/cjs/styles/CloseButton.module.css +15 -0
  14. package/dist/cjs/styles/Pill.module.css +13 -0
  15. package/dist/cjs/styles/RadioCard.module.css +31 -30
  16. package/dist/cjs/theme/Theme.d.ts.map +1 -1
  17. package/dist/cjs/theme/Theme.js +4 -2
  18. package/dist/cjs/theme/Theme.js.map +1 -1
  19. package/dist/esm/components/InfoToken/InfoToken.module.css +1 -1
  20. package/dist/esm/components/Input/InputLabelInfo.d.ts.map +1 -1
  21. package/dist/esm/components/Input/InputLabelInfo.js +2 -1
  22. package/dist/esm/components/Input/InputLabelInfo.js.map +1 -1
  23. package/dist/esm/components/Input/InputLabelInfo.module.css +1 -0
  24. package/dist/esm/components/RadioCard/RadioCard.d.ts.map +1 -1
  25. package/dist/esm/components/RadioCard/RadioCard.js +20 -20
  26. package/dist/esm/components/RadioCard/RadioCard.js.map +1 -1
  27. package/dist/esm/styles/ActionIcon.module.css +23 -0
  28. package/dist/esm/styles/CloseButton.module.css +15 -0
  29. package/dist/esm/styles/Pill.module.css +13 -0
  30. package/dist/esm/styles/RadioCard.module.css +31 -30
  31. package/dist/esm/theme/Theme.d.ts.map +1 -1
  32. package/dist/esm/theme/Theme.js +4 -2
  33. package/dist/esm/theme/Theme.js.map +1 -1
  34. package/package.json +3 -3
  35. package/src/components/InfoToken/InfoToken.module.css +1 -1
  36. package/src/components/Input/InputLabelInfo.module.css +1 -0
  37. package/src/components/Input/InputLabelInfo.tsx +7 -2
  38. package/src/components/RadioCard/RadioCard.tsx +25 -12
  39. package/src/styles/ActionIcon.module.css +23 -0
  40. package/src/styles/CloseButton.module.css +15 -0
  41. package/src/styles/Pill.module.css +13 -0
  42. package/src/styles/RadioCard.module.css +31 -30
  43. package/src/theme/Theme.tsx +3 -1
package/src/styles/Pill.module.css CHANGED
@@ -1,4 +1,17 @@
1
1
  .root {
2
+ padding: 0 var(--mantine-spacing-xs);
2
3
  color: var(--mantine-color-text);
3
4
  background-color: var(--mantine-color-gray-light);
5
+
6
+ &[data-with-remove] {
7
+ padding: 0 var(--mantine-spacing-xxs) 0 var(--mantine-spacing-xs);
8
+
9
+ &[data-size='md'] {
10
+ padding: 0 2px 0 var(--mantine-spacing-xs);
11
+ }
12
+ }
13
+ }
14
+
15
+ .remove {
16
+ padding: 0;
4
17
  }
package/src/styles/RadioCard.module.css CHANGED
@@ -5,24 +5,30 @@
5
5
  }
6
6
 
7
7
  .card {
8
- display: inline-flex;
9
- flex-direction: column;
8
+ --radio-card-outline-color: var(--mantine-color-default-border);
9
+
10
+ display: flex;
11
+ flex-flow: row nowrap;
10
12
  align-items: flex-start;
13
+ gap: var(--mantine-spacing-sm);
11
14
  padding: var(--mantine-spacing-sm);
12
15
  border-radius: var(--mantine-radius-lg);
16
+ border-color: var(--radio-card-outline-color);
17
+ transition: border-color 150ms ease;
13
18
 
14
19
  &[data-checked] {
15
- border-color: var(--mantine-primary-color-filled);
20
+ --radio-card-outline-color: var(--mantine-primary-color-filled);
21
+ }
22
+
23
+ &[disabled],
24
+ &[readonly] {
25
+ --radio-card-outline-color: var(--mantine-color-default-border);
16
26
  }
17
27
 
18
28
  &[disabled] {
19
29
  cursor: not-allowed;
20
- border-color: var(--mantine-color-default-border);
21
-
22
- .title {
23
- color: var(--mantine-color-disabled-color);
24
- }
25
30
 
31
+ .title,
26
32
  .description {
27
33
  color: var(--mantine-color-disabled-color);
28
34
  }
@@ -30,44 +36,39 @@
30
36
 
31
37
  &[readonly] {
32
38
  pointer-events: none;
33
- border-color: var(--mantine-color-default-border);
34
39
 
35
- & .indicator {
36
- border-color: var(--mantine-color-default-border);
40
+ .indicator[data-checked] {
41
+ background-color: var(--mantine-color-default);
42
+ color: var(--coveo-color-text-readonly);
37
43
 
38
- &[data-checked] {
39
- background-color: var(--coveo-color-bg-readonly);
40
- color: var(--coveo-color-text-readonly);
41
-
42
- & > svg {
43
- color: var(--coveo-color-text-readonly);
44
- }
44
+ & > svg {
45
+ color: inherit;
45
46
  }
46
47
  }
47
48
  }
48
49
  }
49
50
 
50
51
  .container {
51
- flex-wrap: nowrap;
52
- gap: var(--mantine-spacing-sm);
53
- align-items: baseline;
54
- justify-content: flex-start;
55
- width: 100%;
56
- margin-bottom: var(--mantine-spacing-xs);
52
+ gap: var(--mantine-spacing-xs);
57
53
  }
58
54
 
59
55
  .title {
60
- flex: 1;
61
- word-break: break-word;
56
+ line-height: 20px;
62
57
  }
63
58
 
59
+ .title,
64
60
  .description {
65
- padding-left: var(--mantine-spacing-lg);
66
- color: var(--mantine-color-dimmed);
67
- font-weight: 400;
68
- font-size: var(--mantine-font-size-xs);
61
+ flex: 1;
62
+ overflow-wrap: anywhere;
69
63
  }
70
64
 
71
65
  .indicator {
72
66
  cursor: pointer;
67
+ transition: border-color 150ms ease;
68
+
69
+ &,
70
+ &[data-disabled],
71
+ &[data-checked] {
72
+ border-color: var(--radio-card-outline-color);
73
+ }
73
74
  }
package/src/theme/Theme.tsx CHANGED
@@ -83,6 +83,7 @@ import CardClasses from '../styles/Card.module.css';
83
83
  import CheckboxClasses from '../styles/Checkbox.module.css';
84
84
  import CheckboxIndicatorClasses from '../styles/CheckboxIndicator.module.css';
85
85
  import ChipClasses from '../styles/Chip.module.css';
86
+ import CloseButtonClasses from '../styles/CloseButton.module.css';
86
87
  import ComboboxClasses from '../styles/Combobox.module.css';
87
88
  import DatePickerClasses from '../styles/DatePicker.module.css';
88
89
  import DateTimePickerClasses from '../styles/DateTimePicker.module.css';
@@ -186,7 +187,7 @@ export const plasmaTheme: MantineThemeOverride = createTheme({
186
187
  }),
187
188
  ActionIcon: ActionIcon.extend({
188
189
  defaultProps: {
189
- size: 'lg',
190
+ size: 'md',
190
191
  },
191
192
  classNames: ActionIconClasses,
192
193
  }),
@@ -273,6 +274,7 @@ export const plasmaTheme: MantineThemeOverride = createTheme({
273
274
  defaultProps: {
274
275
  icon: <CrossSize16Px height={16} aria-label="close" />,
275
276
  },
277
+ classNames: CloseButtonClasses,
276
278
  }),
277
279
  ColorSwatch: ColorSwatch.extend({
278
280
  defaultProps: {