@mtes-mct/monitor-ui 10.2.0 → 10.3.0

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [10.2.1](https://github.com/MTES-MCT/monitor-ui/compare/v10.2.0...v10.2.1) (2023-10-03)
+
+
+### Bug Fixes
+
+* **elements:** add backgroundColor prop and fix icon size in Tag component ([f58b3f4](https://github.com/MTES-MCT/monitor-ui/commit/f58b3f42746286b9a27b04018101e4cd2f2263f6))
+* **elements:** add borderColor prop in Tag component ([1d54f61](https://github.com/MTES-MCT/monitor-ui/commit/1d54f61d80f2fc1224bcd69fe0e775dda33fbc06))
+
+## [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

@@ -260,6 +260,7 @@ const THEME = {
         // Notification Colors
         mediumSeaGreen: '#29B361',
         goldenPoppy: '#FAC11A',
+        goldenPoppy25: '#FAC11A',
         /** CONTEXTUAL COLORS */
         // Mission status
         yellowGreen: '#8CC800',
@@ -34629,7 +34630,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 +34641,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 +34657,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 +34695,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) `