Add container props

netdata · Jan 17, 2025 · 0c86e3a · 0c86e3a
1 parent 3243194
commit 0c86e3a
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 5 deletions.
diff --git a/src/components/pill/alertMastercard.js b/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",

diff --git a/src/components/pill/styled.js b/src/components/pill/styled.js
@@ -5,17 +5,18 @@ 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: none;
-  -ms-user-select: none;
-  user-select: none;
+  -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")};