@mtes-mct/monitor-ui 9.0.0 → 9.1.0

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## [9.0.1](https://github.com/MTES-MCT/monitor-ui/compare/v9.0.0...v9.0.1) (2023-08-23)
+
+
+### Bug Fixes
+
+* **components:** fix secondary dropdown item size ([1cb5c9c](https://github.com/MTES-MCT/monitor-ui/commit/1cb5c9c95c349581fb4ae1b9ac9bf3cd04718698))
+
+# [9.0.0](https://github.com/MTES-MCT/monitor-ui/compare/v8.8.0...v9.0.0) (2023-08-23)
+
+
+### Bug Fixes
+
+* **utils:** fix getCoordinates rounding ([622d9fc](https://github.com/MTES-MCT/monitor-ui/commit/622d9fc887b663a92a30b74bd8a64bfb56acf40d))
+
+
+* feat(utils)!: add prop to getOptionsFromLabelledEnum function for sorted or not the options ([4ff53fe](https://github.com/MTES-MCT/monitor-ui/commit/4ff53fe398f3ac2d24a858f2f4c305d7880a22d0))
+
+
+### BREAKING CHANGES
+
+* - add mustSort prop with default value to false for sorted or not the options
+
 # [8.8.0](https://github.com/MTES-MCT/monitor-ui/compare/v8.7.0...v8.8.0) (2023-08-22)
 
 

package/index.js

@@ -2351,6 +2351,8 @@ const SecondaryDropdownItem = styled(Dropdown$1.Item) `
   background-color: ${p => p.theme.color.cultured};
   border: 1px solid ${p => p.theme.color.lightGray};
   padding: 4px;
+  width: 30px;
+  height: 30px;
   :hover {
     background-color: ${p => p.theme.color.cultured};
     border: 1px solid ${p => p.theme.color.lightGray};
@@ -2955,7 +2957,7 @@ const ICON_SIZE_IN_PX = {
     [Size.NORMAL]: 20,
     [Size.SMALL]: 14
 };
-function IconButton({ accent = Accent.PRIMARY, className, color, Icon, iconSize, onClick, size = Size.NORMAL, type = 'button', withUnpropagatedClick = false, ...nativeProps }) {
+function IconButton({ accent = Accent.PRIMARY, className, color, Icon, iconSize, isCompact, onClick, size = Size.NORMAL, type = 'button', withUnpropagatedClick = false, ...nativeProps }) {
     const handleClick = useCallback((event) => {
         if (withUnpropagatedClick) {
             stopMouseEventPropagation(event);
@@ -2968,11 +2970,12 @@ function IconButton({ accent = Accent.PRIMARY, className, color, Icon, iconSize,
     const commonProps = useMemo(() => ({
         children: commonChildren,
         className: classnames('Element-IconButton', className),
+        isCompact,
         onClick: handleClick,
         size,
         type,
         ...nativeProps
-    }), [className, commonChildren, handleClick, nativeProps, size, type]);
+    }), [className, commonChildren, handleClick, isCompact, nativeProps, size, type]);
     switch (accent) {
         case Accent.SECONDARY:
             return jsx(SecondaryButton, { as: StyledButton, ...commonProps });
@@ -2987,35 +2990,58 @@ const PADDING$1 = {
     [Size.NORMAL]: '5px',
     [Size.SMALL]: '3px'
 };
+// We can't use $-prefixed props here for some reason (maybe because the `as` prop exclude them?).
 const StyledButton = styled.button `
   align-items: center;
   display: flex;
   justify-content: center;
-  padding: ${p => PADDING$1[p.size]};
+  padding: ${p => (p.isCompact ? 0 : PADDING$1[p.size])};
+
+  ${p => p.isCompact &&
+    css `
+      border: 0;
+
+      :hover,
+      &._hover {
+        border: 0;
+      }
+      border: 0;
+
+      :active,
+      &._active {
+        border: 0;
+      }
+      border: 0;
+
+      :disabled,
+      &._disabled {
+        border: 0;
+      }
+    `}
 `;
 const TertiaryButton = styled.button `
   background-color: transparent;
-  border: 1px solid transparent;
+  border: ${p => (p.isCompact ? 0 : '1px solid transparent')};
   color: ${p => p.theme.color.charcoal};
 
   :hover,
   &._hover {
     background-color: transparent;
-    border: 1px solid transparent;
+    border: ${p => (p.isCompact ? 0 : '1px solid transparent')};
     color: ${p => p.theme.color.blueYonder['100']};
   }
 
   :active,
   &._active {
     background-color: transparent;
-    border: 1px solid transparent;
+    border: ${p => (p.isCompact ? 0 : '1px solid transparent')};
     color: ${p => p.theme.color.blueGray['100']};
   }
 
   :disabled,
   &._disabled {
     background-color: transparent;
-    border: 1px solid transparent;
+    border: ${p => (p.isCompact ? 0 : '1px solid transparent')};
     color: ${p => p.theme.color.lightGray};
   }
 `;