From 0d6dacc3a431c311119863f30ed1a49b9a7aa378 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Fri, 13 Dec 2024 21:47:18 +0000 Subject: [PATCH 1/6] Use DeprecatedSxProp instead of SxProp --- packages/react/src/Checkbox/Checkbox.tsx | 4 ++-- packages/react/src/LabelGroup/LabelGroup.tsx | 6 +++--- packages/react/src/Pagehead/Pagehead.tsx | 6 +++--- packages/react/src/Spinner/Spinner.tsx | 4 ++-- packages/react/src/Token/Token.tsx | 4 ++-- packages/react/src/Token/_RemoveTokenButton.tsx | 4 ++-- packages/react/src/experimental/Skeleton/SkeletonBox.tsx | 4 ++-- .../src/experimental/UnderlinePanels/UnderlinePanels.tsx | 8 ++++---- packages/react/src/internal/components/InputLabel.tsx | 4 ++-- .../src/internal/components/UnderlineTabbedInterface.tsx | 6 +++--- .../react/src/internal/components/UnstyledTextInput.tsx | 4 ++-- packages/react/src/sx.ts | 5 +++++ 12 files changed, 32 insertions(+), 27 deletions(-) diff --git a/packages/react/src/Checkbox/Checkbox.tsx b/packages/react/src/Checkbox/Checkbox.tsx index 5b60739d4d0..d49a0114c7b 100644 --- a/packages/react/src/Checkbox/Checkbox.tsx +++ b/packages/react/src/Checkbox/Checkbox.tsx @@ -1,7 +1,7 @@ import {clsx} from 'clsx' import {useProvidedRefOrCreate} from '../hooks' import React, {useContext, useEffect, type ChangeEventHandler, type InputHTMLAttributes, type ReactElement} from 'react' -import {type SxProp} from '../sx' +import {type DeprecatedSxProp} from '../sx' import useLayoutEffect from '../utils/useIsomorphicLayoutEffect' import type {FormValidationStatus} from '../utils/types/FormValidationStatus' import {CheckboxGroupContext} from '../CheckboxGroup/CheckboxGroupContext' @@ -36,7 +36,7 @@ export type CheckboxProps = { */ value?: string } & Exclude, 'value'> & - SxProp + DeprecatedSxProp /** * An accessible, native checkbox component diff --git a/packages/react/src/LabelGroup/LabelGroup.tsx b/packages/react/src/LabelGroup/LabelGroup.tsx index 5aaf6f8edd8..547f7888756 100644 --- a/packages/react/src/LabelGroup/LabelGroup.tsx +++ b/packages/react/src/LabelGroup/LabelGroup.tsx @@ -8,7 +8,7 @@ import {AnchoredOverlay} from '../AnchoredOverlay' import Box from '../Box' import {Button, IconButton} from '../Button' import {useTheme} from '../ThemeProvider' -import type {SxProp} from '../sx' +import type {DeprecatedSxProp} from '../sx' import sx from '../sx' export type LabelGroupProps = { @@ -18,9 +18,9 @@ export type LabelGroupProps = { overflowStyle?: 'inline' | 'overlay' /** How many tokens to show. `'auto'` truncates the tokens to fit in the parent container. Passing a number will truncate after that number tokens. If this is undefined, tokens will never be truncated. */ visibleChildCount?: 'auto' | number -} & SxProp +} & DeprecatedSxProp -const StyledLabelGroupContainer = styled.div` +const StyledLabelGroupContainer = styled.div` display: flex; flex-wrap: nowrap; gap: ${get('space.1')}; diff --git a/packages/react/src/Pagehead/Pagehead.tsx b/packages/react/src/Pagehead/Pagehead.tsx index 3aeb74dcfaf..76540af38bd 100644 --- a/packages/react/src/Pagehead/Pagehead.tsx +++ b/packages/react/src/Pagehead/Pagehead.tsx @@ -2,7 +2,7 @@ import styled from 'styled-components' import React, {type ComponentProps} from 'react' import {clsx} from 'clsx' import {get} from '../constants' -import sx, {type SxProp} from '../sx' +import sx, {type DeprecatedSxProp} from '../sx' import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent' import classes from './Pagehead.module.css' import {useFeatureFlag} from '../FeatureFlags' @@ -15,7 +15,7 @@ const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_ga' const StyledComponentPagehead = toggleStyledComponent( CSS_MODULES_FEATURE_FLAG, 'div', - styled.div` + styled.div` position: relative; padding-top: ${get('space.4')}; padding-bottom: ${get('space.4')}; @@ -38,5 +38,5 @@ const Pagehead = ({className, ...rest}: PageheadProps) => { /** * @deprecated */ -export type PageheadProps = ComponentProps & SxProp +export type PageheadProps = ComponentProps & DeprecatedSxProp export default Pagehead diff --git a/packages/react/src/Spinner/Spinner.tsx b/packages/react/src/Spinner/Spinner.tsx index 649da5cf17c..163c76bcbc7 100644 --- a/packages/react/src/Spinner/Spinner.tsx +++ b/packages/react/src/Spinner/Spinner.tsx @@ -1,6 +1,6 @@ import React from 'react' import styled from 'styled-components' -import sx, {type SxProp} from '../sx' +import sx, {type DeprecatedSxProp} from '../sx' import {VisuallyHidden} from '../VisuallyHidden' import type {HTMLDataAttributes} from '../internal/internal-types' import {useId} from '../hooks' @@ -24,7 +24,7 @@ export type SpinnerProps = { className?: string style?: React.CSSProperties } & HTMLDataAttributes & - SxProp + DeprecatedSxProp function Spinner({ size: sizeKey = 'medium', diff --git a/packages/react/src/Token/Token.tsx b/packages/react/src/Token/Token.tsx index 49a6183f52a..b68e3d655e7 100644 --- a/packages/react/src/Token/Token.tsx +++ b/packages/react/src/Token/Token.tsx @@ -1,7 +1,7 @@ import type {MouseEventHandler} from 'react' import React, {forwardRef} from 'react' import Box from '../Box' -import {merge, type BetterSystemStyleObject, type SxProp} from '../sx' +import {merge, type BetterSystemStyleObject, type DeprecatedSxProp} from '../sx' import {defaultSxProp} from '../utils/defaultSxProp' import type {TokenBaseProps} from './TokenBase' import TokenBase, {defaultTokenSize, isTokenInteractive} from './TokenBase' @@ -16,7 +16,7 @@ import {clsx} from 'clsx' // Omitting onResize and onResizeCapture because seems like React 18 types includes these menthod in the expansion but React 17 doesn't. // TODO: This is a temporary solution until we figure out why these methods are causing type errors. -export interface TokenProps extends TokenBaseProps, SxProp { +export interface TokenProps extends TokenBaseProps, DeprecatedSxProp { /** * A component that renders before the token text */ diff --git a/packages/react/src/Token/_RemoveTokenButton.tsx b/packages/react/src/Token/_RemoveTokenButton.tsx index 92bf161941e..99f98846914 100644 --- a/packages/react/src/Token/_RemoveTokenButton.tsx +++ b/packages/react/src/Token/_RemoveTokenButton.tsx @@ -4,7 +4,7 @@ import styled, {css} from 'styled-components' import {variant} from 'styled-system' import {clsx} from 'clsx' import {get} from '../constants' -import sx, {type SxProp} from '../sx' +import sx, {type DeprecatedSxProp} from '../sx' import type {TokenSizeKeys} from './TokenBase' import {tokenSizes, defaultTokenSize} from './TokenBase' import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent' @@ -12,7 +12,7 @@ import {useFeatureFlag} from '../FeatureFlags' import classes from './_RemoveTokenButton.module.css' -interface TokenButtonProps extends SxProp { +interface TokenButtonProps extends DeprecatedSxProp { borderOffset?: number size?: TokenSizeKeys isParentInteractive?: boolean diff --git a/packages/react/src/experimental/Skeleton/SkeletonBox.tsx b/packages/react/src/experimental/Skeleton/SkeletonBox.tsx index 8a8bcaea7b1..98ded4db66e 100644 --- a/packages/react/src/experimental/Skeleton/SkeletonBox.tsx +++ b/packages/react/src/experimental/Skeleton/SkeletonBox.tsx @@ -1,6 +1,6 @@ import React from 'react' import styled, {keyframes} from 'styled-components' -import sx, {merge, type SxProp} from '../../sx' +import sx, {merge, type DeprecatedSxProp} from '../../sx' import {get} from '../../constants' import {type CSSProperties, type HTMLProps} from 'react' import {toggleStyledComponent} from '../../internal/utils/toggleStyledComponent' @@ -16,7 +16,7 @@ type SkeletonBoxProps = { width?: CSSProperties['width'] /** The className of the skeleton box */ className?: string -} & SxProp & +} & DeprecatedSxProp & HTMLProps const shimmer = keyframes` diff --git a/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx b/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx index 2224d77d8cc..5bea45f0405 100644 --- a/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx +++ b/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx @@ -11,7 +11,7 @@ import { import Box, {type BoxProps} from '../../Box' import {useId} from '../../hooks' import {invariant} from '../../utils/invariant' -import {merge, type BetterSystemStyleObject, type SxProp} from '../../sx' +import {merge, type BetterSystemStyleObject, type DeprecatedSxProp} from '../../sx' import {defaultSxProp} from '../../utils/defaultSxProp' import {useResizeObserver, type ResizeObserverEntry} from '../../hooks/useResizeObserver' import useIsomorphicLayoutEffect from '../../utils/useIsomorphicLayoutEffect' @@ -42,7 +42,7 @@ export type UnderlinePanelsProps = { * Loading state for all counters. It displays loading animation for individual counters until all are resolved. It is needed to prevent multiple layout shift. */ loadingCounters?: boolean -} & SxProp +} & DeprecatedSxProp export type TabProps = PropsWithChildren<{ /** @@ -58,7 +58,7 @@ export type TabProps = PropsWithChildren<{ */ icon?: FC }> & - SxProp + DeprecatedSxProp export type PanelProps = Omit @@ -194,7 +194,7 @@ const UnderlinePanels: FC = ({ display: 'none', }, }, - sxProp as SxProp, + sxProp as DeprecatedSxProp, )} {...props} > diff --git a/packages/react/src/internal/components/InputLabel.tsx b/packages/react/src/internal/components/InputLabel.tsx index 9126d192086..7be1838a25c 100644 --- a/packages/react/src/internal/components/InputLabel.tsx +++ b/packages/react/src/internal/components/InputLabel.tsx @@ -1,9 +1,9 @@ import React from 'react' import styled from 'styled-components' import {get} from '../../constants' -import sx, {type SxProp} from '../../sx' +import sx, {type DeprecatedSxProp} from '../../sx' -type BaseProps = SxProp & { +type BaseProps = DeprecatedSxProp & { disabled?: boolean required?: boolean requiredText?: string diff --git a/packages/react/src/internal/components/UnderlineTabbedInterface.tsx b/packages/react/src/internal/components/UnderlineTabbedInterface.tsx index 25af0d0954d..8670ddaa747 100644 --- a/packages/react/src/internal/components/UnderlineTabbedInterface.tsx +++ b/packages/react/src/internal/components/UnderlineTabbedInterface.tsx @@ -5,7 +5,7 @@ import {isElement} from 'react-is' import type {IconProps} from '@primer/octicons-react' import styled, {keyframes} from 'styled-components' import CounterLabel from '../../CounterLabel' -import sx, {type SxProp} from '../../sx' +import sx, {type DeprecatedSxProp} from '../../sx' import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../../utils/polymorphic' import {defaultSxProp} from '../../utils/defaultSxProp' import {get} from '../../constants' @@ -41,7 +41,7 @@ type StyledUnderlineWrapperProps = { slot?: string as?: React.ElementType className?: string -} & SxProp +} & DeprecatedSxProp export const StyledUnderlineWrapper = forwardRef( ({children, className, ...rest}: PropsWithChildren, forwardedRef) => { @@ -276,7 +276,7 @@ export type UnderlineItemProps = { counter?: number | string icon?: FC | React.ReactElement id?: string -} & SxProp +} & DeprecatedSxProp export const UnderlineItem = forwardRef( ( diff --git a/packages/react/src/internal/components/UnstyledTextInput.tsx b/packages/react/src/internal/components/UnstyledTextInput.tsx index 8c3b42f6ef9..c96ffb87b21 100644 --- a/packages/react/src/internal/components/UnstyledTextInput.tsx +++ b/packages/react/src/internal/components/UnstyledTextInput.tsx @@ -1,5 +1,5 @@ import styled from 'styled-components' -import sx, {type SxProp} from '../../sx' +import sx, {type DeprecatedSxProp} from '../../sx' import {toggleStyledComponent} from '../utils/toggleStyledComponent' import React from 'react' import {useFeatureFlag} from '../../FeatureFlags' @@ -9,7 +9,7 @@ import {clsx} from 'clsx' export const TEXT_INPUT_CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff' -type ToggledUnstyledTextInputProps = React.ComponentPropsWithoutRef<'input'> & SxProp +type ToggledUnstyledTextInputProps = React.ComponentPropsWithoutRef<'input'> & DeprecatedSxProp const ToggledUnstyledTextInput = toggleStyledComponent( TEXT_INPUT_CSS_MODULES_FEATURE_FLAG, diff --git a/packages/react/src/sx.ts b/packages/react/src/sx.ts index 5b9a20fc011..d12dd32313e 100644 --- a/packages/react/src/sx.ts +++ b/packages/react/src/sx.ts @@ -29,6 +29,11 @@ export interface SxProp { sx?: BetterSystemStyleObject } +export interface DeprecatedSxProp { + /** @deprecated Use CSS modules for styling instead */ + sx?: BetterSystemStyleObject +} + const sx = (props: SxProp) => css(props.sx) export default sx From d63396ef2a1a906201528fd18fc227da9ac4305c Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Fri, 13 Dec 2024 13:50:05 -0800 Subject: [PATCH 2/6] Create few-coins-kick.md --- .changeset/few-coins-kick.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/few-coins-kick.md diff --git a/.changeset/few-coins-kick.md b/.changeset/few-coins-kick.md new file mode 100644 index 00000000000..2c306703104 --- /dev/null +++ b/.changeset/few-coins-kick.md @@ -0,0 +1,5 @@ +--- +"@primer/react": minor +--- + +Depreacte use of sx prop by switching to a deprecated type definition From a47f72b82fa1f3debd66eeaac868708ea708c1b9 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Fri, 13 Dec 2024 13:50:46 -0800 Subject: [PATCH 3/6] Fix typo in changeset description --- .changeset/few-coins-kick.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/few-coins-kick.md b/.changeset/few-coins-kick.md index 2c306703104..e3075acb2b1 100644 --- a/.changeset/few-coins-kick.md +++ b/.changeset/few-coins-kick.md @@ -2,4 +2,4 @@ "@primer/react": minor --- -Depreacte use of sx prop by switching to a deprecated type definition +Deprecate use of sx prop by switching to a deprecated type definition From 59605d59df9d7af81243db8ea68f111b0a01f6d0 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Wed, 18 Dec 2024 20:09:28 +0000 Subject: [PATCH 4/6] Use SxProp and deprecate that instead --- packages/react/src/Checkbox/Checkbox.tsx | 4 ++-- packages/react/src/LabelGroup/LabelGroup.tsx | 6 +++--- packages/react/src/Pagehead/Pagehead.tsx | 6 +++--- packages/react/src/Spinner/Spinner.tsx | 4 ++-- packages/react/src/Token/Token.tsx | 4 ++-- packages/react/src/Token/_RemoveTokenButton.tsx | 4 ++-- packages/react/src/experimental/Skeleton/SkeletonBox.tsx | 4 ++-- .../src/experimental/UnderlinePanels/UnderlinePanels.tsx | 8 ++++---- packages/react/src/internal/components/InputLabel.tsx | 4 ++-- .../src/internal/components/UnderlineTabbedInterface.tsx | 6 +++--- .../react/src/internal/components/UnstyledTextInput.tsx | 4 ++-- packages/react/src/sx.ts | 4 ---- 12 files changed, 27 insertions(+), 31 deletions(-) diff --git a/packages/react/src/Checkbox/Checkbox.tsx b/packages/react/src/Checkbox/Checkbox.tsx index d49a0114c7b..5b60739d4d0 100644 --- a/packages/react/src/Checkbox/Checkbox.tsx +++ b/packages/react/src/Checkbox/Checkbox.tsx @@ -1,7 +1,7 @@ import {clsx} from 'clsx' import {useProvidedRefOrCreate} from '../hooks' import React, {useContext, useEffect, type ChangeEventHandler, type InputHTMLAttributes, type ReactElement} from 'react' -import {type DeprecatedSxProp} from '../sx' +import {type SxProp} from '../sx' import useLayoutEffect from '../utils/useIsomorphicLayoutEffect' import type {FormValidationStatus} from '../utils/types/FormValidationStatus' import {CheckboxGroupContext} from '../CheckboxGroup/CheckboxGroupContext' @@ -36,7 +36,7 @@ export type CheckboxProps = { */ value?: string } & Exclude, 'value'> & - DeprecatedSxProp + SxProp /** * An accessible, native checkbox component diff --git a/packages/react/src/LabelGroup/LabelGroup.tsx b/packages/react/src/LabelGroup/LabelGroup.tsx index 547f7888756..5aaf6f8edd8 100644 --- a/packages/react/src/LabelGroup/LabelGroup.tsx +++ b/packages/react/src/LabelGroup/LabelGroup.tsx @@ -8,7 +8,7 @@ import {AnchoredOverlay} from '../AnchoredOverlay' import Box from '../Box' import {Button, IconButton} from '../Button' import {useTheme} from '../ThemeProvider' -import type {DeprecatedSxProp} from '../sx' +import type {SxProp} from '../sx' import sx from '../sx' export type LabelGroupProps = { @@ -18,9 +18,9 @@ export type LabelGroupProps = { overflowStyle?: 'inline' | 'overlay' /** How many tokens to show. `'auto'` truncates the tokens to fit in the parent container. Passing a number will truncate after that number tokens. If this is undefined, tokens will never be truncated. */ visibleChildCount?: 'auto' | number -} & DeprecatedSxProp +} & SxProp -const StyledLabelGroupContainer = styled.div` +const StyledLabelGroupContainer = styled.div` display: flex; flex-wrap: nowrap; gap: ${get('space.1')}; diff --git a/packages/react/src/Pagehead/Pagehead.tsx b/packages/react/src/Pagehead/Pagehead.tsx index 76540af38bd..3aeb74dcfaf 100644 --- a/packages/react/src/Pagehead/Pagehead.tsx +++ b/packages/react/src/Pagehead/Pagehead.tsx @@ -2,7 +2,7 @@ import styled from 'styled-components' import React, {type ComponentProps} from 'react' import {clsx} from 'clsx' import {get} from '../constants' -import sx, {type DeprecatedSxProp} from '../sx' +import sx, {type SxProp} from '../sx' import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent' import classes from './Pagehead.module.css' import {useFeatureFlag} from '../FeatureFlags' @@ -15,7 +15,7 @@ const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_ga' const StyledComponentPagehead = toggleStyledComponent( CSS_MODULES_FEATURE_FLAG, 'div', - styled.div` + styled.div` position: relative; padding-top: ${get('space.4')}; padding-bottom: ${get('space.4')}; @@ -38,5 +38,5 @@ const Pagehead = ({className, ...rest}: PageheadProps) => { /** * @deprecated */ -export type PageheadProps = ComponentProps & DeprecatedSxProp +export type PageheadProps = ComponentProps & SxProp export default Pagehead diff --git a/packages/react/src/Spinner/Spinner.tsx b/packages/react/src/Spinner/Spinner.tsx index 163c76bcbc7..649da5cf17c 100644 --- a/packages/react/src/Spinner/Spinner.tsx +++ b/packages/react/src/Spinner/Spinner.tsx @@ -1,6 +1,6 @@ import React from 'react' import styled from 'styled-components' -import sx, {type DeprecatedSxProp} from '../sx' +import sx, {type SxProp} from '../sx' import {VisuallyHidden} from '../VisuallyHidden' import type {HTMLDataAttributes} from '../internal/internal-types' import {useId} from '../hooks' @@ -24,7 +24,7 @@ export type SpinnerProps = { className?: string style?: React.CSSProperties } & HTMLDataAttributes & - DeprecatedSxProp + SxProp function Spinner({ size: sizeKey = 'medium', diff --git a/packages/react/src/Token/Token.tsx b/packages/react/src/Token/Token.tsx index b68e3d655e7..49a6183f52a 100644 --- a/packages/react/src/Token/Token.tsx +++ b/packages/react/src/Token/Token.tsx @@ -1,7 +1,7 @@ import type {MouseEventHandler} from 'react' import React, {forwardRef} from 'react' import Box from '../Box' -import {merge, type BetterSystemStyleObject, type DeprecatedSxProp} from '../sx' +import {merge, type BetterSystemStyleObject, type SxProp} from '../sx' import {defaultSxProp} from '../utils/defaultSxProp' import type {TokenBaseProps} from './TokenBase' import TokenBase, {defaultTokenSize, isTokenInteractive} from './TokenBase' @@ -16,7 +16,7 @@ import {clsx} from 'clsx' // Omitting onResize and onResizeCapture because seems like React 18 types includes these menthod in the expansion but React 17 doesn't. // TODO: This is a temporary solution until we figure out why these methods are causing type errors. -export interface TokenProps extends TokenBaseProps, DeprecatedSxProp { +export interface TokenProps extends TokenBaseProps, SxProp { /** * A component that renders before the token text */ diff --git a/packages/react/src/Token/_RemoveTokenButton.tsx b/packages/react/src/Token/_RemoveTokenButton.tsx index 99f98846914..92bf161941e 100644 --- a/packages/react/src/Token/_RemoveTokenButton.tsx +++ b/packages/react/src/Token/_RemoveTokenButton.tsx @@ -4,7 +4,7 @@ import styled, {css} from 'styled-components' import {variant} from 'styled-system' import {clsx} from 'clsx' import {get} from '../constants' -import sx, {type DeprecatedSxProp} from '../sx' +import sx, {type SxProp} from '../sx' import type {TokenSizeKeys} from './TokenBase' import {tokenSizes, defaultTokenSize} from './TokenBase' import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent' @@ -12,7 +12,7 @@ import {useFeatureFlag} from '../FeatureFlags' import classes from './_RemoveTokenButton.module.css' -interface TokenButtonProps extends DeprecatedSxProp { +interface TokenButtonProps extends SxProp { borderOffset?: number size?: TokenSizeKeys isParentInteractive?: boolean diff --git a/packages/react/src/experimental/Skeleton/SkeletonBox.tsx b/packages/react/src/experimental/Skeleton/SkeletonBox.tsx index 98ded4db66e..8a8bcaea7b1 100644 --- a/packages/react/src/experimental/Skeleton/SkeletonBox.tsx +++ b/packages/react/src/experimental/Skeleton/SkeletonBox.tsx @@ -1,6 +1,6 @@ import React from 'react' import styled, {keyframes} from 'styled-components' -import sx, {merge, type DeprecatedSxProp} from '../../sx' +import sx, {merge, type SxProp} from '../../sx' import {get} from '../../constants' import {type CSSProperties, type HTMLProps} from 'react' import {toggleStyledComponent} from '../../internal/utils/toggleStyledComponent' @@ -16,7 +16,7 @@ type SkeletonBoxProps = { width?: CSSProperties['width'] /** The className of the skeleton box */ className?: string -} & DeprecatedSxProp & +} & SxProp & HTMLProps const shimmer = keyframes` diff --git a/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx b/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx index 5bea45f0405..2224d77d8cc 100644 --- a/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx +++ b/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx @@ -11,7 +11,7 @@ import { import Box, {type BoxProps} from '../../Box' import {useId} from '../../hooks' import {invariant} from '../../utils/invariant' -import {merge, type BetterSystemStyleObject, type DeprecatedSxProp} from '../../sx' +import {merge, type BetterSystemStyleObject, type SxProp} from '../../sx' import {defaultSxProp} from '../../utils/defaultSxProp' import {useResizeObserver, type ResizeObserverEntry} from '../../hooks/useResizeObserver' import useIsomorphicLayoutEffect from '../../utils/useIsomorphicLayoutEffect' @@ -42,7 +42,7 @@ export type UnderlinePanelsProps = { * Loading state for all counters. It displays loading animation for individual counters until all are resolved. It is needed to prevent multiple layout shift. */ loadingCounters?: boolean -} & DeprecatedSxProp +} & SxProp export type TabProps = PropsWithChildren<{ /** @@ -58,7 +58,7 @@ export type TabProps = PropsWithChildren<{ */ icon?: FC }> & - DeprecatedSxProp + SxProp export type PanelProps = Omit @@ -194,7 +194,7 @@ const UnderlinePanels: FC = ({ display: 'none', }, }, - sxProp as DeprecatedSxProp, + sxProp as SxProp, )} {...props} > diff --git a/packages/react/src/internal/components/InputLabel.tsx b/packages/react/src/internal/components/InputLabel.tsx index 7be1838a25c..9126d192086 100644 --- a/packages/react/src/internal/components/InputLabel.tsx +++ b/packages/react/src/internal/components/InputLabel.tsx @@ -1,9 +1,9 @@ import React from 'react' import styled from 'styled-components' import {get} from '../../constants' -import sx, {type DeprecatedSxProp} from '../../sx' +import sx, {type SxProp} from '../../sx' -type BaseProps = DeprecatedSxProp & { +type BaseProps = SxProp & { disabled?: boolean required?: boolean requiredText?: string diff --git a/packages/react/src/internal/components/UnderlineTabbedInterface.tsx b/packages/react/src/internal/components/UnderlineTabbedInterface.tsx index 8670ddaa747..25af0d0954d 100644 --- a/packages/react/src/internal/components/UnderlineTabbedInterface.tsx +++ b/packages/react/src/internal/components/UnderlineTabbedInterface.tsx @@ -5,7 +5,7 @@ import {isElement} from 'react-is' import type {IconProps} from '@primer/octicons-react' import styled, {keyframes} from 'styled-components' import CounterLabel from '../../CounterLabel' -import sx, {type DeprecatedSxProp} from '../../sx' +import sx, {type SxProp} from '../../sx' import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../../utils/polymorphic' import {defaultSxProp} from '../../utils/defaultSxProp' import {get} from '../../constants' @@ -41,7 +41,7 @@ type StyledUnderlineWrapperProps = { slot?: string as?: React.ElementType className?: string -} & DeprecatedSxProp +} & SxProp export const StyledUnderlineWrapper = forwardRef( ({children, className, ...rest}: PropsWithChildren, forwardedRef) => { @@ -276,7 +276,7 @@ export type UnderlineItemProps = { counter?: number | string icon?: FC | React.ReactElement id?: string -} & DeprecatedSxProp +} & SxProp export const UnderlineItem = forwardRef( ( diff --git a/packages/react/src/internal/components/UnstyledTextInput.tsx b/packages/react/src/internal/components/UnstyledTextInput.tsx index c96ffb87b21..8c3b42f6ef9 100644 --- a/packages/react/src/internal/components/UnstyledTextInput.tsx +++ b/packages/react/src/internal/components/UnstyledTextInput.tsx @@ -1,5 +1,5 @@ import styled from 'styled-components' -import sx, {type DeprecatedSxProp} from '../../sx' +import sx, {type SxProp} from '../../sx' import {toggleStyledComponent} from '../utils/toggleStyledComponent' import React from 'react' import {useFeatureFlag} from '../../FeatureFlags' @@ -9,7 +9,7 @@ import {clsx} from 'clsx' export const TEXT_INPUT_CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff' -type ToggledUnstyledTextInputProps = React.ComponentPropsWithoutRef<'input'> & DeprecatedSxProp +type ToggledUnstyledTextInputProps = React.ComponentPropsWithoutRef<'input'> & SxProp const ToggledUnstyledTextInput = toggleStyledComponent( TEXT_INPUT_CSS_MODULES_FEATURE_FLAG, diff --git a/packages/react/src/sx.ts b/packages/react/src/sx.ts index d12dd32313e..0d11b6cc647 100644 --- a/packages/react/src/sx.ts +++ b/packages/react/src/sx.ts @@ -26,10 +26,6 @@ type CSSSelectorObject = { export type BetterSystemStyleObject = BetterCssProperties | SystemStyleObject | CSSCustomProperties | CSSSelectorObject export interface SxProp { - sx?: BetterSystemStyleObject -} - -export interface DeprecatedSxProp { /** @deprecated Use CSS modules for styling instead */ sx?: BetterSystemStyleObject } From 30aadb3c0b85b73027cfb87c8722f92a87f0368a Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Wed, 18 Dec 2024 12:10:23 -0800 Subject: [PATCH 5/6] Fix typo in changeset description --- .changeset/few-coins-kick.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/few-coins-kick.md b/.changeset/few-coins-kick.md index e3075acb2b1..058bd131e00 100644 --- a/.changeset/few-coins-kick.md +++ b/.changeset/few-coins-kick.md @@ -2,4 +2,4 @@ "@primer/react": minor --- -Deprecate use of sx prop by switching to a deprecated type definition +Deprecate use of sx prop by deprecated the `SxProp` type definition From ca0f8d1db158e7d209bfcad666ab679c883fc1b2 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Wed, 18 Dec 2024 12:10:40 -0800 Subject: [PATCH 6/6] Fix typo in changeset description --- .changeset/few-coins-kick.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/few-coins-kick.md b/.changeset/few-coins-kick.md index 058bd131e00..4479640c18c 100644 --- a/.changeset/few-coins-kick.md +++ b/.changeset/few-coins-kick.md @@ -2,4 +2,4 @@ "@primer/react": minor --- -Deprecate use of sx prop by deprecated the `SxProp` type definition +Deprecate use of sx prop by deprecating the `SxProp` type definition