cozy-ui 142.3.0 → 142.3.1
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.
- package/CHANGELOG.md +7 -0
- package/package.json +1 -1
- package/react/Badge/Readme.md +26 -0
- package/react/MuiCozyTheme/overrides/makeLightOverrides.js +3 -1
- package/transpiled/react/MuiCozyTheme/overrides/makeDarkOverrides.d.ts +2 -1
- package/transpiled/react/MuiCozyTheme/overrides/makeLightOverrides.d.ts +2 -1
- package/transpiled/react/MuiCozyTheme/overrides/makeLightOverrides.js +3 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
## [142.3.1](https://github.com/cozy/cozy-ui/compare/v142.3.0...v142.3.1) (2026-10-13)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* **Badge:** Draw counts as a pill ([5e0875c](https://github.com/cozy/cozy-ui/commit/5e0875c))
|
|
7
|
+
|
|
1
8
|
# [142.3.0](https://github.com/cozy/cozy-ui/compare/v142.2.3...v142.3.0) (2026-10-06)
|
|
2
9
|
|
|
3
10
|
|
package/package.json
CHANGED
package/react/Badge/Readme.md
CHANGED
|
@@ -56,6 +56,32 @@ const DemoBadge = ({ variant, ...props }) => {
|
|
|
56
56
|
</Variants>
|
|
57
57
|
```
|
|
58
58
|
|
|
59
|
+
### Counts
|
|
60
|
+
|
|
61
|
+
One or two digits sit in a circle, longer counts in a pill.
|
|
62
|
+
|
|
63
|
+
```jsx
|
|
64
|
+
import Badge from 'cozy-ui/transpiled/react/Badge'
|
|
65
|
+
import { CircleFilled, Icon } from '@linagora/twake-icons'
|
|
66
|
+
|
|
67
|
+
;
|
|
68
|
+
|
|
69
|
+
<>
|
|
70
|
+
{[1, 12, 44, 99, 120].map(count => (
|
|
71
|
+
<Badge
|
|
72
|
+
key={count}
|
|
73
|
+
className="u-m-1"
|
|
74
|
+
badgeContent={count}
|
|
75
|
+
max={99}
|
|
76
|
+
color="primary"
|
|
77
|
+
size="medium"
|
|
78
|
+
>
|
|
79
|
+
<Icon icon={CircleFilled} size="24" color="var(--iconTextColor)" />
|
|
80
|
+
</Badge>
|
|
81
|
+
))}
|
|
82
|
+
</>
|
|
83
|
+
```
|
|
84
|
+
|
|
59
85
|
### Double badges
|
|
60
86
|
|
|
61
87
|
Badges can be combined — in this example, we have an item with a new qualification.
|
|
@@ -1047,7 +1047,9 @@ export const makeLightOverrides = theme => ({
|
|
|
1047
1047
|
badge: {
|
|
1048
1048
|
boxSizing: 'content-box',
|
|
1049
1049
|
padding: 0,
|
|
1050
|
-
borderRadius:
|
|
1050
|
+
borderRadius: 100,
|
|
1051
|
+
// Every two-digit count fits the circle, longer counts grow into a pill
|
|
1052
|
+
fontVariantNumeric: 'tabular-nums',
|
|
1051
1053
|
'&.badgeBorder': {
|
|
1052
1054
|
border: `2px solid ${theme.palette.background.paper}`
|
|
1053
1055
|
},
|
|
@@ -1065,7 +1065,8 @@ export function makeDarkOverrides(theme: any): {
|
|
|
1065
1065
|
badge: {
|
|
1066
1066
|
boxSizing: string;
|
|
1067
1067
|
padding: number;
|
|
1068
|
-
borderRadius:
|
|
1068
|
+
borderRadius: number;
|
|
1069
|
+
fontVariantNumeric: string;
|
|
1069
1070
|
'&.badgeBorder': {
|
|
1070
1071
|
border: string;
|
|
1071
1072
|
};
|
|
@@ -1065,7 +1065,8 @@ export function makeLightOverrides(theme: any): {
|
|
|
1065
1065
|
badge: {
|
|
1066
1066
|
boxSizing: string;
|
|
1067
1067
|
padding: number;
|
|
1068
|
-
borderRadius:
|
|
1068
|
+
borderRadius: number;
|
|
1069
|
+
fontVariantNumeric: string;
|
|
1069
1070
|
'&.badgeBorder': {
|
|
1070
1071
|
border: string;
|
|
1071
1072
|
};
|
|
@@ -990,7 +990,9 @@ export var makeLightOverrides = function makeLightOverrides(theme) {
|
|
|
990
990
|
badge: {
|
|
991
991
|
boxSizing: 'content-box',
|
|
992
992
|
padding: 0,
|
|
993
|
-
borderRadius:
|
|
993
|
+
borderRadius: 100,
|
|
994
|
+
// Every two-digit count fits the circle, longer counts grow into a pill
|
|
995
|
+
fontVariantNumeric: 'tabular-nums',
|
|
994
996
|
'&.badgeBorder': {
|
|
995
997
|
border: "2px solid ".concat(theme.palette.background.paper)
|
|
996
998
|
},
|