From 1e36712a9294975eea61746425f3d34c57de4fcd Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Thu, 30 Mar 2023 10:36:52 -0400 Subject: [PATCH 1/6] fixes transparent bg pointerbox and adds stories --- src/Caret.tsx | 2 + src/{ => PointerBox}/PointerBox.docs.json | 0 src/PointerBox/PointerBox.stories.tsx | 48 +++++++++++++++ src/{ => PointerBox}/PointerBox.tsx | 26 ++++++-- src/PointerBox/index.ts | 1 + src/__tests__/PointerBox.test.tsx | 12 +++- .../__snapshots__/Caret.test.tsx.snap | 60 +++++++++++++++++++ .../__snapshots__/PointerBox.test.tsx.snap | 35 ++++++++++- 8 files changed, 176 insertions(+), 8 deletions(-) rename src/{ => PointerBox}/PointerBox.docs.json (100%) create mode 100644 src/PointerBox/PointerBox.stories.tsx rename src/{ => PointerBox}/PointerBox.tsx (52%) create mode 100644 src/PointerBox/index.ts 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 52% rename from src/PointerBox.tsx rename to src/PointerBox/PointerBox.tsx index 45ebf065171..ec1bb020f24 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,11 @@ export type PointerBoxProps = { function PointerBox(props: PointerBoxProps) { // don't destructure these, just grab them - const {bg, border, borderColor, theme, sx} = props + const {bg, border, borderColor, theme: themeProp, sx} = props const {caret, children, ...boxProps} = props + const {bg: sxBg, backgroundColor, ...sxRest} = sx || {} + const theme = themeProp || React.useContext(ThemeContext) + const customBackground = bg || sxBg || backgroundColor const caretProps = { bg: bg || sx?.bg || sx?.backgroundColor, @@ -36,7 +41,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`] = ` + + + + + + + + + + + + + + + + in with relative positioning 1`] = ` > in with relative positioning 1`] = ` + + Date: Thu, 30 Mar 2023 14:42:13 +0000 Subject: [PATCH 2/6] Update generated/components.json --- generated/components.json | 37 +++++++++++++++++++++---------------- 1 file changed, 21 insertions(+), 16 deletions(-) diff --git a/generated/components.json b/generated/components.json index 1c111c80995..1922f055df9 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", From 1d4acffb1a1600ee2cb1251aee95cd3b91fe97c0 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Thu, 30 Mar 2023 11:00:10 -0400 Subject: [PATCH 3/6] adds changeset --- .changeset/violet-cobras-sparkle.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/violet-cobras-sparkle.md 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. From 5f6958965be66db81e0adc95748654e086cffabf Mon Sep 17 00:00:00 2001 From: mperrotti Date: Thu, 30 Mar 2023 15:02:37 +0000 Subject: [PATCH 4/6] Update generated/components.json --- generated/components.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/generated/components.json b/generated/components.json index 074b9bc086d..fd840f0b7ea 100644 --- a/generated/components.json +++ b/generated/components.json @@ -5126,4 +5126,4 @@ "subcomponents": [] } } -} +} \ No newline at end of file From 1f3511c79afa9cc13f8d25c5969c94b25713ba11 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Thu, 30 Mar 2023 11:53:09 -0400 Subject: [PATCH 5/6] fixes linting errors --- src/PointerBox/PointerBox.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/PointerBox/PointerBox.tsx b/src/PointerBox/PointerBox.tsx index ec1bb020f24..1ee7ef1e064 100644 --- a/src/PointerBox/PointerBox.tsx +++ b/src/PointerBox/PointerBox.tsx @@ -24,10 +24,11 @@ export type PointerBoxProps = { function PointerBox(props: PointerBoxProps) { // don't destructure these, just grab them + 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 || React.useContext(ThemeContext) + const theme = themeProp || themeContext const customBackground = bg || sxBg || backgroundColor const caretProps = { From efacc872b4547759c14bbf3b579325ecbb0148b7 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Thu, 30 Mar 2023 12:20:18 -0400 Subject: [PATCH 6/6] updates path to docs data --- docs/content/PointerBox.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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