DropdownMenuV2: use the Icon component to render radio checks (#55964)

* DropdownMenuV2: use the `Icon` component to render radio checks * CHANGELOG
WordPress · Nov 9, 2023 · 1e3dd2a · 1e3dd2a
1 parent 369947c
commit 1e3dd2a
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -12,6 +12,7 @@
 
 -   `Tabs`: Add `focusable` prop to the `Tabs.TabPanel` sub-component ([#55287](https://github.com/WordPress/gutenberg/pull/55287))
 -   `Tabs`: Update sub-components to accept relevant HTML element props ([#55860](https://github.com/WordPress/gutenberg/pull/55860))
+-   `DropdownMenuV2`: Fix radio menu item check icon not rendering correctly in some browsers ([#55964](https://github.com/WordPress/gutenberg/pull/55964))
 
 ### Enhancements
 

diff --git a/packages/components/src/dropdown-menu-v2-ariakit/index.tsx b/packages/components/src/dropdown-menu-v2-ariakit/index.tsx
@@ -99,6 +99,12 @@ export const DropdownMenuCheckboxItem = forwardRef<
 	);
 } );
 
+const radioCheck = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Circle cx={ 12 } cy={ 12 } r={ 3 }></Circle>
+	</SVG>
+);
+
 export const DropdownMenuRadioItem = forwardRef<
 	HTMLDivElement,
 	WordPressComponentProps< DropdownMenuRadioItemProps, 'div', false >
@@ -119,14 +125,7 @@ export const DropdownMenuRadioItem = forwardRef<
 				store={ dropdownMenuContext?.store }
 				render={ <Styled.ItemPrefixWrapper /> }
 			>
-				<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-					<Circle
-						cx={ 12 }
-						cy={ 12 }
-						r={ 3 }
-						fill="currentColor"
-					></Circle>
-				</SVG>
+				<Icon icon={ radioCheck } size={ 24 } />
 			</Ariakit.MenuItemCheck>
 			{ children }
 			{ suffix }