fix(popper): arrow box shadow (chakra-ui#7137)

Closes chakra-ui#7005
ivanchenph · Dec 21, 2022 · b374879 · b374879
1 parent e505a41
commit b374879
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 3 deletions.
diff --git a/.changeset/few-comics-study.md b/.changeset/few-comics-study.md
@@ -0,0 +1,5 @@
+---
+"@chakra-ui/popover": patch
+---
+
+Allow overriding arrow background and boxShadow
diff --git a/.changeset/moody-dolls-taste.md b/.changeset/moody-dolls-taste.md
@@ -0,0 +1,5 @@
+---
+"@chakra-ui/popper": patch
+---
+
+Set `boxShadow` of inner arrow with css variable
diff --git a/packages/components/popover/src/popover-arrow.tsx b/packages/components/popover/src/popover-arrow.tsx
@@ -5,10 +5,11 @@ import { usePopoverContext, usePopoverStyles } from "./popover-context"
 export interface PopoverArrowProps extends HTMLChakraProps<"div"> {}
 
 export function PopoverArrow(props: PopoverArrowProps) {
-  const { bg, bgColor, backgroundColor } = props
+  const { bg, bgColor, backgroundColor, shadow, boxShadow } = props
   const { getArrowProps, getArrowInnerProps } = usePopoverContext()
   const styles = usePopoverStyles()
   const arrowBg = bg ?? bgColor ?? backgroundColor
+  const arrowShadow = shadow ?? boxShadow
   return (
     <chakra.div
       {...getArrowProps()}
@@ -18,10 +19,13 @@ export function PopoverArrow(props: PopoverArrowProps) {
         className={cx("chakra-popover__arrow", props.className)}
         {...getArrowInnerProps(props)}
         __css={{
-          ...styles.arrow,
           "--popper-arrow-bg": arrowBg
             ? `colors.${arrowBg}, ${arrowBg}`
             : undefined,
+          "--popper-arrow-shadow": arrowShadow
+            ? `shadows.${arrowShadow}, ${arrowShadow}`
+            : undefined,
+          ...styles.arrow,
         }}
       />
     </chakra.div>

diff --git a/packages/components/popper/src/modifiers.ts b/packages/components/popper/src/modifiers.ts
@@ -130,6 +130,10 @@ const setInnerArrowStyles = (state: State) => {
   ) as HTMLElement | null
 
   if (!inner) return
+  const boxShadow = getBoxShadow(state.placement)
+  if (boxShadow) {
+    inner.style.setProperty("--popper-arrow-default-shadow", boxShadow)
+  }
 
   Object.assign(inner.style, {
     transform: "rotate(45deg)",
@@ -140,6 +144,6 @@ const setInnerArrowStyles = (state: State) => {
     height: "100%",
     position: "absolute",
     zIndex: "inherit",
-    boxShadow: getBoxShadow(state.placement),
+    boxShadow: `var(--popper-arrow-shadow, var(--popper-arrow-default-shadow))`,
   })
 }