diff --git a/.changeset/fancy-webs-hear.md b/.changeset/fancy-webs-hear.md new file mode 100644 index 00000000000..f551b3e3f1a --- /dev/null +++ b/.changeset/fancy-webs-hear.md @@ -0,0 +1,5 @@ +--- +'@primer/react': minor +--- + +Remove the CSS modules feature flag from the BranchName component diff --git a/packages/react/src/BranchName/BranchName.tsx b/packages/react/src/BranchName/BranchName.tsx index 46b239865d7..21f44687d59 100644 --- a/packages/react/src/BranchName/BranchName.tsx +++ b/packages/react/src/BranchName/BranchName.tsx @@ -1,58 +1,26 @@ import React, {type ForwardedRef} from 'react' import {clsx} from 'clsx' -import styled from 'styled-components' -import {get} from '../constants' import type {SxProp} from '../sx' -import sx from '../sx' -import {useFeatureFlag} from '../FeatureFlags' -import Box from '../Box' import classes from './BranchName.module.css' - -const StyledBranchName = styled.a` - display: inline-block; - padding: 2px 6px; - font-size: var(--text-body-size-small, ${get('fontSizes.0')}); - font-family: var(--fontStack-monospace, ${get('fonts.mono')}); - color: var(--fgColor-link, ${get('colors.accent.fg')}); - background-color: var(--bgColor-accent-muted, ${get('colors.accent.subtle')}); - border-radius: var(--borderRadius-medium, ${get('radii.2')}); - text-decoration: none; - &:is(:not(a)) { - color: var(--fgColor-muted); - } - ${sx}; -` +import {toggleSxComponent} from '../internal/utils/toggleSxComponent' type BranchNameProps = { as?: As } & DistributiveOmit, 'as'> & + Omit & SxProp +const BaseComponent = toggleSxComponent('div') as React.ComponentType< + React.PropsWithChildren & React.RefAttributes> +> + // eslint-disable-next-line @typescript-eslint/no-explicit-any function BranchName(props: BranchNameProps, ref: ForwardedRef) { - const {as: BaseComponent = 'a', className, children, sx, ...rest} = props - const enabled = useFeatureFlag('primer_react_css_modules_ga') - - if (enabled) { - if (sx) { - return ( - - {children} - - ) - } - - return ( - - {children} - - ) - } - + const {as: Component = 'a', className, children, ...rest} = props return ( - + {children} - + ) }