feat: Remove InfosBadge

JF-Cozy · JF-Cozy · commit b619845a57da · 2026-03-24T09:08:49.000+01:00
BREAKING CHANGE: InfosBadge has been removed. Use Badge instead (see commit or doc)
diff --git a/docs/styleguide.config.js b/docs/styleguide.config.js
@@ -32,7 +32,6 @@ module.exports = {
         '../react/Icon',
         '../react/IconButton',
         '../react/Labs/IconGrid',
-        '../react/InfosBadge',
         '../react/List',
         '../react/ListItem',
         '../react/ListItemText',
diff --git a/react/Badge/Readme.md b/react/Badge/Readme.md
@@ -63,20 +63,29 @@ Badges can be combined — in this example, we have an item with a new qualifica
 
 ```jsx
 import Badge from 'cozy-ui/transpiled/react/Badge'
-import InfosBadge from 'cozy-ui/transpiled/react/InfosBadge'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import Avatar from 'cozy-ui/transpiled/react/Avatar'
 import LinkIcon from "cozy-ui/transpiled/react/Icons/Link"
 
 ;
 
-<InfosBadge
+<Badge
+  anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
   badgeContent={
-    <Badge color="error" variant="dot" size="small">
-      <Icon icon={LinkIcon} size={16} />
-    </Badge>
+    <div
+      className="u-h-1-half u-miw-1-half u-bdrs-circle u-flex u-flex-items-center u-flex-justify-center"
+      style={{
+        backgroundColor: 'var(--paperBackgroundColor)',
+        color: 'var(--iconTextColor)',
+        boxShadow: 'var(--shadow3)'
+      }}
+    >
+      <Badge color="error" variant="dot" size="small">
+        <Icon icon={LinkIcon} size={16} />
+      </Badge>
+    </div>
   }
 >
   <Avatar>CD</Avatar>
-</InfosBadge>
+</Badge>
 ```
diff --git a/react/InfosBadge/Readme.md b/react/InfosBadge/Readme.md
@@ -1,14 +1,28 @@
 The InfosBadge is used to provide extra information about the item it is annotating.
 
 ```jsx
-import InfosBadge from 'cozy-ui/transpiled/react/InfosBadge'
+import Badge from 'cozy-ui/transpiled/react/Badge'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import LinkIcon from "cozy-ui/transpiled/react/Icons/Link"
 import CircleFilledIcon from "cozy-ui/transpiled/react/Icons/CircleFilled"
 
 ;
 
-<InfosBadge badgeContent={<Icon icon={LinkIcon} size="10" />}>
+<Badge
+  badgeContent={
+    <div
+      className="u-h-1-half u-miw-1-half u-bdrs-circle u-flex u-flex-items-center u-flex-justify-center"
+      style={{
+        backgroundColor: 'var(--paperBackgroundColor)',
+        color: 'var(--iconTextColor)',
+        boxShadow: 'var(--shadow3)'
+      }}
+    >
+      <Icon icon={LinkIcon} size="10" />
+    </div>
+  }
+  anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+>
   <Icon icon={CircleFilledIcon} size="32" color="var(--slateGrey)" />
-</InfosBadge>
+</Badge>
 ```
diff --git a/react/InfosBadge/index.jsx b/react/InfosBadge/index.jsx
