@mtes-mct/monitor-ui 10.2.0 → 10.2.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [10.2.0](https://github.com/MTES-MCT/monitor-ui/compare/v10.1.1...v10.2.0) (2023-10-02)
+
+
+### Features
+
+* **field:** add disabled prop on Option type to handle case where only certain options are disabled ([58dc8f8](https://github.com/MTES-MCT/monitor-ui/commit/58dc8f8342dcac01f6d59ca5e05bfc4b05b738a7))
+
 ## [10.1.1](https://github.com/MTES-MCT/monitor-ui/compare/v10.1.0...v10.1.1) (2023-09-27)
 
 # [10.1.0](https://github.com/MTES-MCT/monitor-ui/compare/v10.0.0...v10.1.0) (2023-09-27)

package/index.js

@@ -34629,7 +34629,7 @@ const Disk = styled.span `
   border-radius: 50%;
 `;
 
-function Tag({ accent, bullet, bulletColor, children, className, color, Icon, isLight = false, ...nativeProps }) {
+function Tag({ accent, backgroundColor, borderColor, bullet, bulletColor, children, className, color, Icon, isLight = false, ...nativeProps }) {
     const commonChildren = useMemo(() => {
         const defaultColor = color || THEME.color.gunMetal;
         const controlledBulletColor = bulletColor ||
@@ -34640,7 +34640,7 @@ function Tag({ accent, bullet, bulletColor, children, className, color, Icon, is
                     [Accent.TERTIARY]: THEME.color.white
                 }[accent]
                 : defaultColor);
-        return (jsxs(Fragment, { children: [Icon && jsx(Icon, { size: 1 }), bullet === TagBullet.DISK && jsx(Disk, { "$color": controlledBulletColor }), children] }));
+        return (jsxs(Fragment, { children: [Icon && !bullet && jsx(Icon, { size: 16 }), bullet === TagBullet.DISK && !Icon && jsx(Disk, { "$color": controlledBulletColor }), children] }));
     }, [accent, bullet, bulletColor, color, children, Icon]);
     const commonProps = useMemo(() => ({
         $isLight: isLight,
@@ -34656,12 +34656,19 @@ function Tag({ accent, bullet, bulletColor, children, className, color, Icon, is
         case Accent.TERTIARY:
             return jsx(TertiaryTag, { ...commonProps });
         default:
-            return jsx(Box$e, { "$color": color, ...commonProps });
+            return jsx(Box$e, { "$backgroundColor": backgroundColor, "$borderColor": borderColor, "$color": color, ...commonProps });
     }
 }
 const Box$e = styled.span `
-  align-items: center;
-  background-color: ${p => (p.$isLight ? p.theme.color.white : 'transparent')};
+  align-items: end;
+  align-self: flex-start;
+  background-color: ${p => {
+    if (p.$backgroundColor) {
+        return p.$backgroundColor;
+    }
+    return p.$isLight ? p.theme.color.white : 'transparent';
+}};
+  border: ${p => (p.$borderColor ? `1px solid ${p.$borderColor}` : 'none')};
   border-radius: 11px;
   color: ${p => (p.$color ? p.$color : p.theme.color.gunMetal)};
   display: inline-flex;
@@ -34687,7 +34694,7 @@ const PrimaryTag = styled(Box$e) `
 `;
 // TODO Fix this color.
 const SecondaryTag = styled(Box$e) `
-  background-color: ${p => (p.$isLight ? '#f6d012' : '#f6d012')};
+  background-color: ${p => (p.$isLight ? p.theme.color.goldenPoppy : p.theme.color.goldenPoppy)};
   color: ${p => p.theme.color.gunMetal};
 `;
 const TertiaryTag = styled(Box$e) `