Fixes transparent bg PointerBox and adds stories

.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.

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
 

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": "() => <PointerBox>Pointer box content</PointerBox>"
+        }
+      ],
+      "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",

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"
     >
       <g transform={transform}>
+        <path d={triangle} fill={theme?.colors.canvas.default} />
         <path d={triangle} fill={bg} />
         <path d={line} fill="none" stroke={borderColor} strokeWidth={borderWidth} />
       </g>

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<typeof PointerBox>
+
+export const Default = () => <PointerBox>Pointer box content</PointerBox>
+
+export const Playground: Story<ComponentProps<typeof PointerBox>> = args => (
+  <PointerBox {...args}>Pointer box content</PointerBox>
+)
+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',
+  },
+}

src/PointerBox.tsx → 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 (
-    <Box {...defaultBoxProps} {...boxProps} sx={{...sx, position: 'relative'}}>
+    <Box
+      {...defaultBoxProps}
+      {...boxProps}
+      sx={{
+        ...sxRest,
+        '--custom-bg': get(`colors.${customBackground}`)({theme}),
+        backgroundImage: customBackground
+          ? `linear-gradient(var(--custom-bg), var(--custom-bg)), linear-gradient(${theme.colors.canvas.default}, ${theme.colors.canvas.default})`
+          : undefined,
+        position: 'relative',
+      }}
+    >
       {children}
       <Caret {...caretProps} />
     </Box>

src/PointerBox/index.ts

@@ -0,0 +1 @@
+export {default, PointerBoxProps} from './PointerBox'

src/__tests__/PointerBox.test.tsx

@@ -43,7 +43,15 @@ describe('PointerBox', () => {
     const mockBg = 'red'
     const viaStyledSystem = renderStyles(<PointerBox bg={mockBg} />)
     const viaSxProp = renderStyles(<PointerBox sx={{bg: mockBg}} />)
-    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)',
+      }),
+    )
   })
 })