diff --git a/.changeset/violet-cobras-sparkle.md b/.changeset/violet-cobras-sparkle.md
new file mode 100644
index 00000000000..506e99078a8
--- /dev/null
+++ b/.changeset/violet-cobras-sparkle.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Fixes styling issue where PointerBox would show a border between the caret and the box if the background color was transparent.
diff --git a/docs/content/PointerBox.mdx b/docs/content/PointerBox.mdx
index 48b169a2be9..42f069d809d 100644
--- a/docs/content/PointerBox.mdx
+++ b/docs/content/PointerBox.mdx
@@ -6,7 +6,7 @@ status: Alpha
source: https://github.com/primer/react/blob/main/src/PointerBox.tsx
---
-import data from '../../src/PointerBox.docs.json'
+import data from '../../src/PointerBox/PointerBox.docs.json'
## Examples
diff --git a/generated/components.json b/generated/components.json
index 4ccda03af29..5840bfae98e 100644
--- a/generated/components.json
+++ b/generated/components.json
@@ -342,22 +342,6 @@
],
"subcomponents": []
},
- "pointer_box": {
- "id": "pointer_box",
- "name": "PointerBox",
- "status": "alpha",
- "a11yReviewed": false,
- "stories": [],
- "props": [
- {
- "name": "caret",
- "type": "| 'top' | 'top-left' | 'top-right' | 'right' | 'right-top' | 'right-bottom' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-top' | 'left-bottom'",
- "defaultValue": "'bottom'",
- "description": "Sets the location of the caret. The format is [edge]-[position on edge]. For example, right-top will position the caret on the top of the right edge of the box. Use top"
- }
- ],
- "subcomponents": []
- },
"popover": {
"id": "popover",
"name": "Popover",
@@ -3136,6 +3120,27 @@
],
"subcomponents": []
},
+ "pointer_box": {
+ "id": "pointer_box",
+ "name": "PointerBox",
+ "status": "alpha",
+ "a11yReviewed": false,
+ "stories": [
+ {
+ "id": "components-pointerbox--default",
+ "code": "() => Pointer box content"
+ }
+ ],
+ "props": [
+ {
+ "name": "caret",
+ "type": "| 'top' | 'top-left' | 'top-right' | 'right' | 'right-top' | 'right-bottom' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-top' | 'left-bottom'",
+ "defaultValue": "'bottom'",
+ "description": "Sets the location of the caret. The format is [edge]-[position on edge]. For example, right-top will position the caret on the top of the right edge of the box. Use top"
+ }
+ ],
+ "subcomponents": []
+ },
"portal": {
"id": "portal",
"name": "Portal",
diff --git a/src/Caret.tsx b/src/Caret.tsx
index b4e0a4d446f..ed58fc4da8b 100644
--- a/src/Caret.tsx
+++ b/src/Caret.tsx
@@ -106,8 +106,10 @@ function Caret(props: CaretProps) {
// then we don't need an offset margin
[`margin${perp}`]: align ? null : -size,
}}
+ role="presentation"
>
+
diff --git a/src/PointerBox.docs.json b/src/PointerBox/PointerBox.docs.json
similarity index 100%
rename from src/PointerBox.docs.json
rename to src/PointerBox/PointerBox.docs.json
diff --git a/src/PointerBox/PointerBox.stories.tsx b/src/PointerBox/PointerBox.stories.tsx
new file mode 100644
index 00000000000..b76c37feac1
--- /dev/null
+++ b/src/PointerBox/PointerBox.stories.tsx
@@ -0,0 +1,48 @@
+import React from 'react'
+import {Story, Meta} from '@storybook/react'
+import PointerBox from './PointerBox'
+import {ComponentProps} from '../utils/types'
+
+export default {
+ title: 'Components/PointerBox',
+ component: PointerBox,
+} as Meta
+
+export const Default = () => Pointer box content
+
+export const Playground: Story> = args => (
+ Pointer box content
+)
+Playground.args = {
+ caret: 'top',
+}
+Playground.argTypes = {
+ caret: {
+ control: {
+ type: 'radio',
+ },
+ options: [
+ 'top',
+ 'top-left',
+ 'top-right',
+ 'right',
+ 'right-top',
+ 'right-bottom',
+ 'bottom',
+ 'bottom-left',
+ 'bottom-right',
+ 'left',
+ 'left-top',
+ 'left-bottom',
+ ],
+ },
+ bg: {
+ control: 'color',
+ },
+ borderColor: {
+ control: 'color',
+ },
+ border: {
+ control: 'number',
+ },
+}
diff --git a/src/PointerBox.tsx b/src/PointerBox/PointerBox.tsx
similarity index 51%
rename from src/PointerBox.tsx
rename to src/PointerBox/PointerBox.tsx
index 45ebf065171..1ee7ef1e064 100644
--- a/src/PointerBox.tsx
+++ b/src/PointerBox/PointerBox.tsx
@@ -1,7 +1,9 @@
import React from 'react'
-import Box, {BoxProps} from './Box'
-import Caret, {CaretProps} from './Caret'
-import {SxProp} from './sx'
+import {ThemeContext} from 'styled-components'
+import Box, {BoxProps} from '../Box'
+import Caret, {CaretProps} from '../Caret'
+import {get} from '../constants'
+import {SxProp} from '../sx'
// FIXME: Make this work with BetterStyledSystem types
type MutatedSxProps = {
@@ -22,8 +24,12 @@ export type PointerBoxProps = {
function PointerBox(props: PointerBoxProps) {
// don't destructure these, just grab them
- const {bg, border, borderColor, theme, sx} = props
+ const themeContext = React.useContext(ThemeContext)
+ const {bg, border, borderColor, theme: themeProp, sx} = props
const {caret, children, ...boxProps} = props
+ const {bg: sxBg, backgroundColor, ...sxRest} = sx || {}
+ const theme = themeProp || themeContext
+ const customBackground = bg || sxBg || backgroundColor
const caretProps = {
bg: bg || sx?.bg || sx?.backgroundColor,
@@ -36,7 +42,18 @@ function PointerBox(props: PointerBoxProps) {
const defaultBoxProps = {borderWidth: '1px', borderStyle: 'solid', borderColor: 'border.default', borderRadius: 2}
return (
-
+
{children}
diff --git a/src/PointerBox/index.ts b/src/PointerBox/index.ts
new file mode 100644
index 00000000000..2fe24d0940f
--- /dev/null
+++ b/src/PointerBox/index.ts
@@ -0,0 +1 @@
+export {default, PointerBoxProps} from './PointerBox'
diff --git a/src/__tests__/PointerBox.test.tsx b/src/__tests__/PointerBox.test.tsx
index 41fcc693b68..4b5c6f99aa1 100644
--- a/src/__tests__/PointerBox.test.tsx
+++ b/src/__tests__/PointerBox.test.tsx
@@ -43,7 +43,15 @@ describe('PointerBox', () => {
const mockBg = 'red'
const viaStyledSystem = renderStyles()
const viaSxProp = renderStyles()
- expect(viaStyledSystem).toEqual(expect.objectContaining({'background-color': mockBg}))
- expect(viaSxProp).toEqual(expect.objectContaining({'background-color': mockBg}))
+ expect(viaStyledSystem).toEqual(
+ expect.objectContaining({
+ 'background-image': 'linear-gradient(var(--custom-bg),var(--custom-bg)),linear-gradient(#ffffff,#ffffff)',
+ }),
+ )
+ expect(viaSxProp).toEqual(
+ expect.objectContaining({
+ 'background-image': 'linear-gradient(var(--custom-bg),var(--custom-bg)),linear-gradient(#ffffff,#ffffff)',
+ }),
+ )
})
})
diff --git a/src/__tests__/__snapshots__/Caret.test.tsx.snap b/src/__tests__/__snapshots__/Caret.test.tsx.snap
index 4111e94915d..c7af9d5eddb 100644
--- a/src/__tests__/__snapshots__/Caret.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Caret.test.tsx.snap
@@ -3,6 +3,7 @@
exports[`Caret renders cardinal directions 1`] = `