diff --git a/.changeset/tiny-peaches-tease.md b/.changeset/tiny-peaches-tease.md new file mode 100644 index 00000000000..8486b7f1e54 --- /dev/null +++ b/.changeset/tiny-peaches-tease.md @@ -0,0 +1,5 @@ +--- +"@primer/react": minor +--- + +Remove the CSS modules feature flag from the ConfirmationDialog component diff --git a/packages/react/src/ConfirmationDialog/ConfirmationDialog.tsx b/packages/react/src/ConfirmationDialog/ConfirmationDialog.tsx index 8b4cb19ee8e..49c97ad4d0f 100644 --- a/packages/react/src/ConfirmationDialog/ConfirmationDialog.tsx +++ b/packages/react/src/ConfirmationDialog/ConfirmationDialog.tsx @@ -1,17 +1,12 @@ import React, {useCallback} from 'react' import {createRoot} from 'react-dom/client' -import styled from 'styled-components' -import Box from '../Box' import type {ThemeProviderProps} from '../ThemeProvider' import {ThemeProvider, useTheme} from '../ThemeProvider' import {FocusKeys} from '@primer/behaviors' -import {get} from '../constants' import type {DialogProps, DialogHeaderProps, DialogButtonProps} from '../Dialog/Dialog' import {Dialog} from '../Dialog/Dialog' import {useFocusZone} from '../hooks/useFocusZone' import BaseStyles from '../BaseStyles' -import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent' -import {useFeatureFlag} from '../FeatureFlags' import classes from './ConfirmationDialog.module.css' /** @@ -46,70 +41,22 @@ export interface ConfirmationDialogProps { confirmButtonType?: 'normal' | 'primary' | 'danger' } -const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_ga' - -const StyledConfirmationHeader = toggleStyledComponent( - CSS_MODULES_FEATURE_FLAG, - 'div', - styled.div` - padding: ${get('space.2')}; - display: flex; - flex-direction: row; - `, -) - -const StyledTitle = toggleStyledComponent( - CSS_MODULES_FEATURE_FLAG, - 'h1', - styled(Box).attrs({as: 'h1'})` - font-size: ${get('fontSizes.3')}; - font-weight: ${get('fontWeights.bold')}; - padding: 6px ${get('space.2')}; - flex-grow: 1; - margin: 0; /* override default margin */ - `, -) - const ConfirmationHeader: React.FC> = ({title, onClose, dialogLabelId}) => { const onCloseClick = useCallback(() => { onClose('close-button') }, [onClose]) - const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) return ( - - {title} +
+

{title}

- +
) } -const StyledConfirmationBody = toggleStyledComponent( - CSS_MODULES_FEATURE_FLAG, - 'div', - styled(Box)` - font-size: ${get('fontSizes.1')}; - padding: 0 ${get('space.3')} ${get('space.3')} ${get('space.3')}; - flex-grow: 1; - `, -) const ConfirmationBody: React.FC> = ({children}) => { - const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) - return {children} + return
{children}
} -const StyledConfirmationFooter = toggleStyledComponent( - CSS_MODULES_FEATURE_FLAG, - 'div', - styled(Box)` - display: grid; - grid-auto-flow: column; - grid-auto-columns: max-content; - grid-gap: ${get('space.2')}; - align-items: end; - justify-content: end; - padding: ${get('space.1')} ${get('space.3')} ${get('space.3')}; - `, -) const ConfirmationFooter: React.FC> = ({footerButtons}) => { const {containerRef: footerRef} = useFocusZone({ @@ -117,16 +64,11 @@ const ConfirmationFooter: React.FC> = ({foo focusInStrategy: 'closest', }) - const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) - // Must have exactly 2 buttons! return ( - } - className={enabled && classes.ConfirmationFooter} - > +
} className={classes.ConfirmationFooter}> - +
) }