Components: Migrate ItemGroup to SCSS module

packages/components/CHANGELOG.md

@@ -8,6 +8,7 @@
     -   `ToggleGroupControl` ([#80381](https://github.com/WordPress/gutenberg/pull/80381))
     -   `Disabled` ([#80643](https://github.com/WordPress/gutenberg/pull/80643))
     -   `ToolsPanel` ([#80445](https://github.com/WordPress/gutenberg/pull/80445))
+    -   `ItemGroup` ([#80797](https://github.com/WordPress/gutenberg/pull/80797))
 -   Remove the private `Theme` component ([#80691](https://github.com/WordPress/gutenberg/pull/80691)).
 
 ### Deprecations
@@ -60,6 +61,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,13 @@ 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[ 'item-group' ],
+		{
+			[ styles[ 'is-bordered' ] ]: isBordered,
+			[ styles[ 'is-separated' ] ]: isSeparated,
+			[ styles[ 'is-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[ 'is-size-small' ],
+	medium: styles[ 'is-size-medium' ],
+	large: styles[ 'is-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(
+		styles.item,
+		as === 'button' && styles[ 'is-unstyled-button' ],
+		as === 'a' && styles[ 'is-unstyled-link' ],
+		sizeClassName[ size ] || sizeClassName.medium,
+		spacedAround && styles[ 'is-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,115 @@
+@use "../utils/theme-variables" as *;
+
+// Matches CONFIG.surfaceBorderColor — not the WPDS stroke token (#dbdbdb).
+$surface-border-color: rgba(0, 0, 0, 0.1);
+
+// Matches CONFIG.controlHeight.
+$control-height: 36px;
+$base-font-height: calc(13px * 1.4);
+
+/*
+ * Math:
+ * - Use the desired height as the base value
+ * - Subtract the computed height of (default) text
+ * - Subtract the effects of border
+ * - Divide the calculated number by 2, in order to get an individual top/bottom padding
+ */
+$padding-y: calc((#{$control-height} - #{$base-font-height} - 2px) / 2);
+$padding-y-small: calc((calc(#{$control-height} * 0.8) - #{$base-font-height} - 2px) / 2);
+$padding-y-large: calc((calc(#{$control-height} * 1.2) - #{$base-font-height} - 2px) / 2);
+
+.item-group {
+	&.is-bordered {
+		border: 1px solid $surface-border-color;
+	}
+
+	&.is-separated {
+		> *:not(marquee) > * {
+			border-block-end: 1px solid $surface-border-color;
+		}
+
+		> *:last-of-type > * {
+			border-block-end-color: transparent;
+		}
+	}
+
+	&.is-rounded {
+		border-radius: var(--wpds-border-radius-sm);
+
+		> *:first-of-type > * {
+			border-start-start-radius: var(--wpds-border-radius-sm);
+			border-start-end-radius: var(--wpds-border-radius-sm);
+		}
+
+		> *:last-of-type > * {
+			border-end-start-radius: var(--wpds-border-radius-sm);
+			border-end-end-radius: var(--wpds-border-radius-sm);
+		}
+	}
+}
+
+.item-wrapper {
+	width: 100%;
+	display: block;
+}
+
+.item {
+	box-sizing: border-box;
+	width: 100%;
+	display: block;
+	margin: 0;
+	color: inherit;
+
+	&.is-unstyled-button,
+	&.is-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;
+		}
+	}
+
+	&.is-unstyled-link {
+		text-decoration: none;
+	}
+
+	&.is-spaced-around {
+		border-radius: var(--wpds-border-radius-sm);
+	}
+
+	&.is-size-small {
+		padding: $padding-y-small 8px;
+	}
+
+	&.is-size-medium {
+		padding: $padding-y 12px;
+	}
+
+	&.is-size-large {
+		// Matches CONFIG.controlPaddingXLarge (`12 * 1.3334`).
+		padding: $padding-y-large 16.0008px;
+	}
+}