Components: migrate ConfirmDialog to SCSS module

packages/base-styles/_z-index.scss

@@ -74,6 +74,7 @@ $z-layers: (
 	".components-popover": 1000000,
 
 	// Should be above the popover (dropdown)
+	".components-confirm-dialog": 1000001,
 	".reusable-blocks-menu-items__convert-modal": 1000001,
 	".patterns-menu-items__convert-modal": 1000001,
 	".fields-create-template-part-modal": 1000001,
@@ -92,9 +93,6 @@ $z-layers: (
 	".media-editor-modal__footer": 1000001,
 	".components-snackbar-list.media-editor-modal__snackbar": 1000001,
 
-	// Note: The ConfirmDialog component's z-index is being set to 1000001 in packages/components/src/confirm-dialog/styles.ts
-	// because it uses emotion and not sass. We need it to render on top its parent popover.
-
 	// Show media replace flow and similar popovers beneath the media modal when its open.
 	".components-popover.block-editor-media-replace-flow__options": 99999,
 	".components-popover.block-library-video-tracks-editor": 99999,

packages/components/CHANGELOG.md

@@ -8,6 +8,7 @@
 
 ### Internal
 
+-   `ConfirmDialog`: Migrate styles from Emotion to an SCSS Module ([#80394](https://github.com/WordPress/gutenberg/pull/80394)).
 -   `InputControl`, `SelectControl`, `CustomSelectControl`: Remove obsolete `__unstable-large` from the public `size` type. The value continues to work at runtime, and is equivalent to the `default` size. ([#80081](https://github.com/WordPress/gutenberg/pull/80081)).
 -   Update `exports` to use subpath patterns instead of deprecated trailing `/` folder mappings ([#80270](https://github.com/WordPress/gutenberg/pull/80270)).
 

packages/components/src/confirm-dialog/component.tsx

@@ -15,8 +15,7 @@ import { Flex } from '../flex';
 import Button from '../button';
 import { Text } from '../text';
 import { VStack } from '../v-stack';
-import * as styles from './styles';
-import { useCx } from '../utils/hooks/use-cx';
+import styles from './style.module.scss';
 
 const UnconnectedConfirmDialog = (
 	props: WordPressComponentProps< ConfirmDialogProps, 'div', false >,
@@ -33,8 +32,7 @@ const UnconnectedConfirmDialog = (
 		...otherProps
 	} = useContextSystem( props, 'ConfirmDialog' );
 
-	const cx = useCx();
-	const wrapperClassName = cx( styles.wrapper );
+	const wrapperClassName = styles.wrapper;
 	const cancelButtonRef = useRef< HTMLButtonElement >( null );
 	const confirmButtonRef = useRef< HTMLButtonElement >( null );
 

packages/components/src/confirm-dialog/style.module.scss

@@ -0,0 +1,7 @@
+@use "@wordpress/base-styles/z-index" as *;
+
+// Match the previous Emotion `&&` specificity so this rule continues to
+// override the Modal overlay's default z-index regardless of source order.
+.wrapper.wrapper {
+	z-index: z-index(".components-confirm-dialog");
+}

packages/components/src/confirm-dialog/test/index.tsx

@@ -8,6 +8,7 @@ import userEvent from '@testing-library/user-event';
  * Internal dependencies
  */
 import { ConfirmDialog } from '..';
+import styles from '../style.module.scss';
 
 const noop = () => {};
 
@@ -25,6 +26,10 @@ describe( 'Confirm', () => {
 				const elementsTexts = [ 'Are you sure?', 'OK', 'Cancel' ];
 
 				expect( dialog ).toBeInTheDocument();
+				expect( dialog ).toHaveClass( 'components-confirm-dialog' );
+				// Disable reason: Semantic queries can't reach the overlay.
+				// eslint-disable-next-line testing-library/no-node-access
+				expect( dialog.parentElement ).toHaveClass( styles.wrapper );
 
 				elementsTexts.forEach( ( txt ) => {
 					const el = screen.getByText( txt );

tools/eslint/suppressions.json

@@ -626,11 +626,6 @@
 			"count": 1
 		}
 	},
-	"packages/components/src/confirm-dialog/styles.ts": {
-		"no-restricted-imports": {
-			"count": 1
-		}
-	},
 	"packages/components/src/context/test/context-system-provider.js": {
 		"no-restricted-imports": {
 			"count": 1