remove background logic from mastercard container and reposition pills (#445)

Co-authored-by: Panos Christophides <panos@netdata.cloud>

Author: christophidesp

src/components/pill/alertMastercard.js

@@ -63,12 +63,14 @@ const AlertMasterCard = forwardRef(
       zIndex: 2,
       ...pillProps,
       ...pillRight,
+      round: "0 12px 12px 0",
     }
     const pillEndProps = pillEnd && {
       background: pillEndBackground,
       margin: [0, 0, 0, -3],
       padding: [1, 2, 1, 4],
       zIndex: 1,
+      round: "0 12px 12px 0",
       ...pillProps,
       ...pillEnd,
     }

src/components/pill/index.stories.js

@@ -208,13 +208,15 @@ const MasterCards = () => (
       <MasterCard
         pillLeft={{ flavour: "error", text: "3" }}
         pillRight={{ flavour: "warning", text: "2" }}
+        pillEnd={{ flavour: "clear", text: "223" }}
       />
       <MasterCard />
     </Flex>
     <Flex gap={2}>
       <MasterCard
         pillLeft={{ flavour: "error", text: "3" }}
         pillRight={{ flavour: "warning", text: "2" }}
+        pillEnd={{ flavour: "clear", text: "223" }}
         size="large"
       />
       <MasterCard size="large" />
@@ -229,13 +231,15 @@ const AlertMasterCards = () => (
         onClick={() => console.log("test")}
         pillLeft={{ flavour: "error", text: "3" }}
         pillRight={{ flavour: "warning", text: "2" }}
+        pillEnd={{ flavour: "clear", text: "223" }}
       />
       <AlertMasterCard />
     </Flex>
     <Flex gap={2}>
       <AlertMasterCard
         pillLeft={{ flavour: "error", text: "3" }}
         pillRight={{ flavour: "warning", text: "2" }}
+        pillEnd={{ flavour: "clear", text: "223" }}
         size="large"
       />
       <AlertMasterCard size="large" />

src/components/pill/mastercard.js

@@ -4,7 +4,7 @@ import { getMasterCardBackground } from "./mixins/background"
 import { MasterCardContainer } from "./styled"
 
 const minWidths = {
-  default: "29px",
+  default: "22px",
   large: "37px",
 }
 
@@ -21,6 +21,7 @@ const MasterCard = forwardRef(
       pillEnd,
       round,
       size,
+      zIndex,
       ...rest
     },
     ref
@@ -37,35 +38,37 @@ const MasterCard = forwardRef(
 
     const pillLeftProps = {
       background: getMasterCardBackground(pillLeft.background, pillLeft.flavour || "disabledError"),
-      padding: [1, 3],
+      padding: [0, 3],
       position: "relative",
       width: { min: minWidths[rest.size] || minWidths.default },
       ...pillProps,
       ...pillLeft,
+      round: "12px",
+      zIndex: 3,
     }
     const pillRightProps = {
       background: pillRightBackground,
-      margin: [0, 0, 0, -1],
-      padding: [1, 2],
+      margin: [0, 0, 0, -1.5],
+      padding: [0, 2],
+      width: { min: minWidths[rest.size] || minWidths.default },
       ...pillProps,
       ...pillRight,
+      round: "0 12px 12px 0",
+      zIndex: 2,
     }
     const pillEndProps = pillEnd && {
       background: pillEndBackground,
-      margin: [0, 0, 0, -1],
-      padding: [1, 2],
+      margin: [0, 0, 0, -1.5],
+      padding: [0, 2],
+      width: { min: minWidths[rest.size] || minWidths.default },
       ...pillProps,
       ...pillEnd,
+      round: "0 12px 12px 0",
+      zIndex: 1,
     }
 
     return (
-      <MasterCardContainer
-        background={pillEndBackground || pillRightBackground}
-        data-testid={testId}
-        onClick={onClick}
-        ref={ref}
-        {...commonProps}
-      >
+      <MasterCardContainer data-testid={testId} onClick={onClick} ref={ref} {...commonProps}>
         {children || (
           <>
             <MasterCardPill data-testid={`${testId}-left-pill`} {...pillLeftProps} />

src/components/pill/styled.js

@@ -34,6 +34,7 @@ export const PillContainer = styled(Flex).attrs(
     width,
     height,
     position,
+    zIndex,
   }) => ({
     padding: getPillPadding(padding, size, tiny),
     round,
@@ -48,6 +49,7 @@ export const PillContainer = styled(Flex).attrs(
     justifyContent: "center",
     alignItems: "center",
     position,
+    zIndex,
   })
 )`
   ${getPillBackground};