From b45cefd2d4bf6ac7c8e07b18cd4e18ebf8f783fa Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Fri, 4 Oct 2024 18:05:46 +0000 Subject: [PATCH 1/4] When the feature flag is enabled and sx prop is passed in use, Box --- .../src/internal/utils/toggleStyledComponent.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/react/src/internal/utils/toggleStyledComponent.tsx b/packages/react/src/internal/utils/toggleStyledComponent.tsx index 4a9bbd0e00a..7b366cb0eb0 100644 --- a/packages/react/src/internal/utils/toggleStyledComponent.tsx +++ b/packages/react/src/internal/utils/toggleStyledComponent.tsx @@ -1,9 +1,12 @@ import React from 'react' import {useFeatureFlag} from '../../FeatureFlags' +import Box from '../../Box' +import {defaultSxProp} from '../../utils/defaultSxProp' type CSSModulesProps = { // eslint-disable-next-line @typescript-eslint/no-explicit-any as?: string | React.ComponentType + sx?: React.CSSProperties } /** @@ -18,12 +21,18 @@ type CSSModulesProps = { * is disabled */ export function toggleStyledComponent(flag: string, Component: React.ComponentType

) { - const Wrapper = React.forwardRef(function Wrapper({as: BaseComponent = 'div', ...rest}, ref) { + const Wrapper = React.forwardRef(function Wrapper( + {as: BaseComponent = 'div', sx: sxProp = defaultSxProp, ...rest}, + ref, + ) { const enabled = useFeatureFlag(flag) if (enabled) { + if (sxProp !== defaultSxProp) { + return + } return } - return + return }) return Wrapper From 73a446cd8d44b8ee6f0852bacc9daa68c3ed0072 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Fri, 4 Oct 2024 11:07:35 -0700 Subject: [PATCH 2/4] Create plenty-books-agree.md --- .changeset/plenty-books-agree.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/plenty-books-agree.md diff --git a/.changeset/plenty-books-agree.md b/.changeset/plenty-books-agree.md new file mode 100644 index 00000000000..e893025c849 --- /dev/null +++ b/.changeset/plenty-books-agree.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +fix for `toggleStyledComponent` utility, When the feature flag is enabled and sx prop is passed in use, Box From b8d0b9b2d3901dccff9ad49a704b1a775c9706c9 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Fri, 4 Oct 2024 19:54:45 +0000 Subject: [PATCH 3/4] Adding tests --- .../__tests__/toggleStyledComponent.test.tsx | 48 +++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 packages/react/src/internal/utils/__tests__/toggleStyledComponent.test.tsx diff --git a/packages/react/src/internal/utils/__tests__/toggleStyledComponent.test.tsx b/packages/react/src/internal/utils/__tests__/toggleStyledComponent.test.tsx new file mode 100644 index 00000000000..d06cd7b7e00 --- /dev/null +++ b/packages/react/src/internal/utils/__tests__/toggleStyledComponent.test.tsx @@ -0,0 +1,48 @@ +import React from 'react' +import {render} from '@testing-library/react' +import {FeatureFlags} from '../../../FeatureFlags' +import {toggleStyledComponent} from '../toggleStyledComponent' +import styled from 'styled-components' + +describe('toggleStyledComponent', () => { + test('renders the `as` prop when flag is enabled', () => { + const TestComponent = toggleStyledComponent('testFeatureFlag', () =>

) + const {container} = render( + + + , + ) + expect(container.firstChild).toBeInstanceOf(HTMLButtonElement) + }) + + test('renders a div as fallback when flag is enabled and no `as` prop is provided', () => { + const TestComponent = toggleStyledComponent('testFeatureFlag', () =>
) + const {container} = render( + + + , + ) + expect(container.firstChild).toBeInstanceOf(HTMLDivElement) + }) + + test('renders Box with `as` if `sx` is provided and flag is enabled', () => { + const TestComponent = toggleStyledComponent('testFeatureFlag', () => styled.div``) + const {container} = render( + + + , + ) + + expect(container.firstChild).toHaveStyle('color: red') + }) + + test('renders styled component when flag is disabled', () => { + const StyledComponent = toggleStyledComponent('testFeatureFlag', styled.div.attrs({['data-styled']: true})``) + const {container} = render( + + + , + ) + expect(container.firstChild).toHaveAttribute('data-styled') + }) +}) From a4ade5ae62a980d7ef60482b4b886d157b310564 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Fri, 4 Oct 2024 19:57:29 +0000 Subject: [PATCH 4/4] Add as button back --- .../internal/utils/__tests__/toggleStyledComponent.test.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/react/src/internal/utils/__tests__/toggleStyledComponent.test.tsx b/packages/react/src/internal/utils/__tests__/toggleStyledComponent.test.tsx index d06cd7b7e00..6a4206003d0 100644 --- a/packages/react/src/internal/utils/__tests__/toggleStyledComponent.test.tsx +++ b/packages/react/src/internal/utils/__tests__/toggleStyledComponent.test.tsx @@ -29,10 +29,11 @@ describe('toggleStyledComponent', () => { const TestComponent = toggleStyledComponent('testFeatureFlag', () => styled.div``) const {container} = render( - + , ) + expect(container.firstChild).toBeInstanceOf(HTMLButtonElement) expect(container.firstChild).toHaveStyle('color: red') })