Components: Migrate ItemGroup to SCSS module

packages/components/CHANGELOG.md

@@ -45,6 +45,7 @@
 -   `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)).
 -   `ToggleGroupControl`: Migrate styles from Emotion to SCSS Modules and use WPDS tokens for migrated visual values ([#80381](https://github.com/WordPress/gutenberg/pull/80381)).
 -   `Disabled`: Migrate styles from Emotion to an SCSS Module ([#80643](https://github.com/WordPress/gutenberg/pull/80643)).
+-   `ItemGroup`: Migrate styles from Emotion to an SCSS Module. ([#80797](https://github.com/WordPress/gutenberg/pull/80797)).
 -   Update `exports` to use subpath patterns instead of deprecated trailing `/` folder mappings ([#80270](https://github.com/WordPress/gutenberg/pull/80270)).
 
 ## 37.0.0 (2026-07-14)

packages/components/src/item-group/item-group/hook.ts

@@ -1,15 +1,9 @@
-/**
- * Internal dependencies
- */
+import clsx from 'clsx';
+
 import type { WordPressComponentProps } from '../../context';
 import { useContextSystem } from '../../context';
-
-/**
- * Internal dependencies
- */
-import * as styles from '../styles';
-import { useCx } from '../../utils/hooks/use-cx';
 import type { ItemGroupProps } from '../types';
+import styles from '../style.module.scss';
 
 export function useItemGroup(
 	props: WordPressComponentProps< ItemGroupProps, 'div' >
@@ -23,12 +17,12 @@ export function useItemGroup(
 		...otherProps
 	} = useContextSystem( props, 'ItemGroup' );
 
-	const cx = useCx();
-
-	const classes = cx(
-		isBordered && styles.bordered,
-		isSeparated && styles.separated,
-		isRounded && styles.rounded,
+	const classes = clsx(
+		{
+			[ styles.bordered ]: isBordered,
+			[ styles.separated ]: isSeparated,
+			[ styles.rounded ]: isRounded,
+		},
 		className
 	);
 

packages/components/src/item-group/item/hook.ts

@@ -1,17 +1,16 @@
-/**
- * WordPress dependencies
- */
-import { useMemo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
+import clsx from 'clsx';
+
 import type { WordPressComponentProps } from '../../context';
 import { useContextSystem } from '../../context';
-import * as styles from '../styles';
 import { useItemGroupContext } from '../context';
-import { useCx } from '../../utils/hooks/use-cx';
 import type { ItemProps } from '../types';
+import styles from '../style.module.scss';
+
+const sizeClassName = {
+	small: styles[ 'size-small' ],
+	medium: styles[ 'size-medium' ],
+	large: styles[ 'size-large' ],
+};
 
 export function useItem( props: WordPressComponentProps< ItemProps, 'div' > ) {
 	const {
@@ -29,22 +28,16 @@ export function useItem( props: WordPressComponentProps< ItemProps, 'div' > ) {
 
 	const as = asProp || ( typeof onClick !== 'undefined' ? 'button' : 'div' );
 
-	const cx = useCx();
-
-	const classes = useMemo(
-		() =>
-			cx(
-				( as === 'button' || as === 'a' ) &&
-					styles.unstyledButton( as ),
-				styles.itemSizes[ size ] || styles.itemSizes.medium,
-				styles.item,
-				spacedAround && styles.spacedAround,
-				className
-			),
-		[ as, className, cx, size, spacedAround ]
+	const classes = clsx(
+		as === 'button' && styles[ 'unstyled-button' ],
+		as === 'a' && styles[ 'unstyled-link' ],
+		sizeClassName[ size ] || sizeClassName.medium,
+		styles.item,
+		spacedAround && styles[ 'spaced-around' ],
+		className
 	);
 
-	const wrapperClassName = cx( styles.itemWrapper );
+	const wrapperClassName = styles[ 'item-wrapper' ];
 
 	return {
 		as,

packages/components/src/item-group/style.module.scss

@@ -0,0 +1,111 @@
+@use "../utils/theme-variables" as *;
+
+// Matches CONFIG.radiusSmall — not --wpds-border-radius-xs (1px).
+$border-radius: 2px;
+
+// Matches CONFIG.surfaceBorderColor — not the WPDS stroke token (#dbdbdb).
+$surface-border-color: rgba(0, 0, 0, 0.1);
+
+$base-font-height: calc(13px * 1.4);
+$padding-y: calc((36px - #{$base-font-height} - 2px) / 2);
+$padding-y-small: calc((calc(36px * 0.8) - #{$base-font-height} - 2px) / 2);
+$padding-y-large: calc((calc(36px * 1.2) - #{$base-font-height} - 2px) / 2);
+
+.unstyled-button,
+.unstyled-link {
+	font-size: 13px;
+	font-family: inherit;
+	appearance: none;
+	border: 1px solid transparent;
+	cursor: var(--wpds-cursor-control);
+	background: none;
+	text-align: start;
+
+	svg,
+	path {
+		fill: currentColor;
+	}
+
+	&:hover {
+		color: $components-color-accent;
+	}
+
+	&:focus {
+		box-shadow: none;
+		outline: none;
+	}
+
+	&:focus-visible {
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
+		// Windows high contrast mode.
+		outline: 2px solid transparent;
+		outline-offset: 0;
+	}
+}
+
+.unstyled-link {
+	text-decoration: none;
+}
+
+.item-wrapper {
+	width: 100%;
+	display: block;
+}
+
+.item {
+	box-sizing: border-box;
+	width: 100%;
+	display: block;
+	margin: 0;
+	color: inherit;
+}
+
+.bordered {
+	border: 1px solid $surface-border-color;
+}
+
+.separated {
+	> *:not(marquee) > * {
+		border-bottom: 1px solid $surface-border-color;
+	}
+
+	> *:last-of-type > * {
+		/* stylelint-disable-next-line plugin/use-logical-properties-and-values -- Preserve Emotion physical border-bottom-color. */
+		border-bottom-color: transparent;
+	}
+}
+
+.spaced-around {
+	border-radius: $border-radius;
+}
+
+.rounded {
+	border-radius: $border-radius;
+
+	> *:first-of-type > * {
+		/* stylelint-disable-next-line plugin/use-logical-properties-and-values -- Preserve Emotion physical radius corners. */
+		border-top-left-radius: $border-radius;
+		/* stylelint-disable-next-line plugin/use-logical-properties-and-values -- Preserve Emotion physical radius corners. */
+		border-top-right-radius: $border-radius;
+	}
+
+	> *:last-of-type > * {
+		/* stylelint-disable-next-line plugin/use-logical-properties-and-values -- Preserve Emotion physical radius corners. */
+		border-bottom-left-radius: $border-radius;
+		/* stylelint-disable-next-line plugin/use-logical-properties-and-values -- Preserve Emotion physical radius corners. */
+		border-bottom-right-radius: $border-radius;
+	}
+}
+
+.size-small {
+	padding: $padding-y-small 8px;
+}
+
+.size-medium {
+	padding: $padding-y 12px;
+}
+
+.size-large {
+	// Matches CONFIG.controlPaddingXLarge (`12 * 1.3334`).
+	padding: $padding-y-large 16.0008px;
+}