@thecb/components 7.0.2-beta.6 → 7.0.2-beta.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "7.0.2-beta.6",
+  "version": "7.0.2-beta.8",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/atoms/icons/ClipboardIcon.js

@@ -21,8 +21,8 @@ const ClipboardIcon = ({ themeValues }) => {
         height="18"
       >
         <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M9.83929 3.43753H14.1607V5.59825H9.83929L9.83929 3.43753ZM8.75893 3.43753C8.75893 2.84087 9.24262 2.35718 9.83929 2.35718H14.1607C14.7574 2.35718 15.2411 2.84087 15.2411 3.43753V5.59825C15.2411 6.19491 14.7574 6.67861 14.1607 6.67861H9.83929C9.24262 6.67861 8.75893 6.19491 8.75893 5.59825V3.43753ZM6.59821 3.70762H7.94866V5.32816H6.59821C6.29988 5.32816 6.05804 5.57001 6.05804 5.86834V17.4822C6.05804 17.7805 6.29988 18.0224 6.59821 18.0224H17.4018C17.7001 18.0224 17.942 17.7805 17.942 17.4822V5.86834C17.942 5.57001 17.7001 5.32816 17.4018 5.32816H16.0513V3.70762H17.4018C18.5951 3.70762 19.5625 4.67501 19.5625 5.86834V17.4822C19.5625 18.6755 18.5951 19.6429 17.4018 19.6429H6.59821C5.40488 19.6429 4.4375 18.6755 4.4375 17.4822V5.86834C4.4375 4.67501 5.40488 3.70762 6.59821 3.70762Z"
           fill={themeValues.singleIconColor}
         />

package/src/components/molecules/copyable/Copyable.js

@@ -46,9 +46,9 @@ const Copyable = ({
   copyErrorPopoverContent = "Unable to copy value",
   copiedPopoverContentDuration = 1000,
   hasPopover = true,
-  popoverMinWidth = "210px",
+  popoverMinWidth = "max-content",
   popoverID = 0,
-  popoverExtraStyles
+  popoverExtraStyles,
 }) => {
   const [popoverContent, setPopoverContent] = useState(initialPopoverContent);
   const [startTimer, setStartTimer] = useState(false);
@@ -96,7 +96,7 @@ const Copyable = ({
           onCopy?.();
           setAttemptCopy(false);
         })
-        .catch(error => {
+        .catch((error) => {
           console.error(error);
           setPopoverContent(copyErrorPopoverContent);
           setAttemptCopy(false);
@@ -118,18 +118,18 @@ const Copyable = ({
         top: "auto",
         right: "auto",
         bottom: "auto",
-        left: `calc(-${popoverArrowWidth} - 8px)`
+        left: `calc(-${popoverArrowWidth} - 8px)`,
       }}
       arrowPosition={{
         arrowTop: "auto",
         arrowRight: "-8px",
         arrowBottom: `calc(50% - ${popoverArrowWidth})`,
-        arrowLeft: "auto"
+        arrowLeft: "auto",
       }}
       transform="translate(-100%, -75%)"
       arrowDirection="right"
       popoverID={popoverID}
-      buttonExtraStyles="margin: 0"
+      buttonExtraStyles="margin: 0;min-width:auto"
       extraStyles={popoverExtraStyles}
       triggerText={CopyableContent({ content, onClick })}
       content={popoverContent}

package/src/components/molecules/popover/Popover.js

@@ -39,7 +39,7 @@ const Popover = ({
   position, // { top: string, right: string, bottom: string, left: string }
   arrowPosition, // { top: string, right: string, bottom: string, left: string }
   arrowDirection = "down",
-  transform,
+  transform = "none",
   buttonExtraStyles
 }) => {
   const { hoverColor, activeColor, popoverTriggerColor } = themeValues;
@@ -127,7 +127,7 @@ const Popover = ({
           bottom: ${bottom}; 
           left: ${left};
           height: ${height};
-          transform: ${transform ? transform : "none"};
+          transform: ${transform};
           `}
       >
         <Paragraph>{content}</Paragraph>