change design to DropdownMenu

packages/block-editor/src/components/block-inspector/style.scss

@@ -14,10 +14,6 @@
 	.block-editor-block-card {
 		padding: $grid-unit-20;
 	}
-
-	.block-editor-block-variation-transforms {
-		padding: 0 $grid-unit-20 $grid-unit-20;
-	}
 }
 
 .block-editor-block-inspector__no-blocks {

packages/block-editor/src/components/block-variation-transforms/index.js

@@ -2,12 +2,17 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { SelectControl } from '@wordpress/components';
+import {
+	DropdownMenu,
+	MenuGroup,
+	MenuItemsChoice,
+} from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useState } from '@wordpress/element';
+import { chevronDown } from '@wordpress/icons';
 
 function __experimentalBlockVariationTransforms( { selectedBlockClientId } ) {
-	const [ variationsSelectValue, setVariationsSelectValue ] = useState( '' );
+	const [ selectedValue, setSelectedValue ] = useState( '' );
 	const { updateBlockAttributes } = useDispatch( 'core/block-editor' );
 	const { variations } = useSelect(
 		( select ) => {
@@ -25,29 +30,44 @@ function __experimentalBlockVariationTransforms( { selectedBlockClientId } ) {
 	if ( ! variations?.length ) return null;
 
 	const selectOptions = [
-		{ value: '', label: __( 'Select a variation' ) },
-		...variations.map( ( variation ) => ( {
-			value: variation.name,
-			label: variation.title,
+		...variations.map( ( { name, title, description } ) => ( {
+			value: name,
+			label: title,
+			info: description,
 		} ) ),
 	];
 	const onSelectVariation = ( variationName ) => {
-		setVariationsSelectValue( variationName );
-		if ( ! variationName ) return;
+		setSelectedValue( variationName );
 		updateBlockAttributes( selectedBlockClientId, {
 			...variations.find( ( { name } ) => name === variationName )
 				.attributes,
 		} );
 	};
+	const baseClass = 'block-editor-block-variation-transforms';
 	return (
-		<div className="block-editor-block-variation-transforms">
-			<SelectControl
-				label={ __( 'Transform to variation' ) }
-				value={ variationsSelectValue }
-				options={ selectOptions }
-				onChange={ onSelectVariation }
-			/>
-		</div>
+		<DropdownMenu
+			className={ baseClass }
+			label={ __( 'Transform to variation' ) }
+			text={ __( 'Transform to variation' ) }
+			popoverProps={ {
+				position: 'bottom center',
+				className: `${ baseClass }__popover`,
+			} }
+			icon={ chevronDown }
+			iconPosition="right"
+		>
+			{ () => (
+				<div className={ `${ baseClass }__container` }>
+					<MenuGroup>
+						<MenuItemsChoice
+							choices={ selectOptions }
+							value={ selectedValue }
+							onSelect={ onSelectVariation }
+						/>
+					</MenuGroup>
+				</div>
+			) }
+		</DropdownMenu>
 	);
 }
 

packages/block-editor/src/components/block-variation-transforms/style.scss

@@ -0,0 +1,33 @@
+.block-editor-block-variation-transforms {
+	padding: 0 $grid-unit-20 $grid-unit-20 56px;
+	width: 100%;
+
+	.components-dropdown-menu__toggle {
+		border: 1px solid $gray-700;
+		border-radius: $radius-block-ui;
+		min-height: 30px;
+		width: 100%;
+		position: relative;
+		text-align: left;
+		justify-content: left;
+
+		// For all button sizes allow sufficient space for the
+		// dropdown "arrow" icon to display.
+		&.components-dropdown-menu__toggle {
+			padding-right: $icon-size;
+		}
+
+		&:focus:not(:disabled) {
+			border-color: var(--wp-admin-theme-color);
+			box-shadow: 0 0 0 ($border-width-focus - $border-width) var(--wp-admin-theme-color);
+		}
+
+		svg {
+			height: 100%;
+			padding: 0;
+			position: absolute;
+			right: 0;
+			top: 0;
+		}
+	}
+}

packages/block-editor/src/style.scss

@@ -26,6 +26,7 @@
 @import "./components/block-switcher/style.scss";
 @import "./components/block-types-list/style.scss";
 @import "./components/block-variation-picker/style.scss";
+@import "./components/block-variation-transforms/style.scss";
 @import "./components/button-block-appender/style.scss";
 @import "./components/colors-gradients/style.scss";
 @import "./components/contrast-checker/style.scss";

packages/components/src/button/index.js

@@ -34,6 +34,7 @@ export function Button( props, ref ) {
 		className,
 		disabled,
 		icon,
+		iconPosition = 'left',
 		iconSize,
 		showTooltip,
 		tooltipPosition,
@@ -111,8 +112,13 @@ export function Button( props, ref ) {
 			aria-label={ additionalProps[ 'aria-label' ] || label }
 			ref={ ref }
 		>
-			{ icon && <Icon icon={ icon } size={ iconSize } /> }
+			{ icon && iconPosition === 'left' && (
+				<Icon icon={ icon } size={ iconSize } />
+			) }
 			{ text && <>{ text }</> }
+			{ icon && iconPosition === 'right' && (
+				<Icon icon={ icon } size={ iconSize } />
+			) }
 			{ children }
 		</Tag>
 	);

packages/components/src/dropdown-menu/index.js

@@ -38,6 +38,7 @@ function DropdownMenu( {
 	className,
 	controls,
 	icon = 'menu',
+	iconPosition,
 	label,
 	popoverProps,
 	toggleProps,
@@ -115,6 +116,7 @@ function DropdownMenu( {
 					<Button
 						{ ...mergedToggleProps }
 						icon={ icon }
+						iconPosition={ iconPosition }
 						onClick={ ( event ) => {
 							onToggle( event );
 							if ( mergedToggleProps.onClick ) {

packages/components/src/menu-items-choice/index.js

@@ -26,6 +26,7 @@ export default function MenuItemsChoice( {
 				key={ item.value }
 				role="menuitemradio"
 				icon={ isSelected && check }
+				info={ item.info }
 				isSelected={ isSelected }
 				shortcut={ item.shortcut }
 				className="components-menu-items-choice"