Add container props on mastercard container (#548)

* Do not allow user selection for mastercard container

* Add container props

* v4.8.9

Author: kapantzak

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netdata/netdata-ui",
-  "version": "4.8.8",
+  "version": "4.8.9",
   "description": "netdata UI kit",
   "main": "dist/index.js",
   "module": "dist/es6/index.js",

src/components/pill/alertMastercard.js

@@ -15,13 +15,14 @@ const AlertMasterCard = forwardRef(
       pillLeft = {},
       pillRight = {},
       pillEnd,
+      containerProps = {},
       round,
       size,
       ...rest
     },
     ref
   ) => {
-    const commonProps = { height, round, size }
+    const commonProps = { height, round, size, ...containerProps }
     const iconProps = {
       background: masterCardColorMap.alert,
       color: "text",

src/components/pill/styled.js

@@ -5,14 +5,19 @@ import { getPillColor } from "./mixins/colors"
 import getPillPadding from "./mixins/padding"
 
 export const MasterCardContainer = styled(Flex).attrs(
-  ({ background, height, onClick, round = 999, size }) => ({
+  ({ background, height, onClick, round = 999, size, ...props }) => ({
     background,
     ...(onClick && { cursor: "pointer" }),
     position: "relative",
     round,
     size,
+    ...props,
   })
 )`
+  -webkit-user-select: ${({ noUserSelection }) => (noUserSelection ? "none" : "auto")};
+  -ms-user-select: ${({ noUserSelection }) => (noUserSelection ? "none" : "auto")};
+  user-select: ${({ noUserSelection }) => (noUserSelection ? "none" : "auto")};
+
   * {
     cursor: ${({ onClick }) => (onClick ? "pointer" : "inherit")};
   }