Updated unstyledButton hover selector to change fill of svg and path …

…element (#50819) * Updated unstyledButton hover selector to change fill of svg and path elements * Changed placement svg selector and used css constant currentColor * Deleted :focus selector since it overrides browser default :focus-visible * Updated test snapshots * Update changelog * Fix PR URL in changelog * Fix indentation in CHANGELOG.md --------- Co-authored-by: Sarah Norris <[email protected]>
WordPress · Jun 9, 2023 · 524d6ef · 524d6ef · github-actions · Jun 9, 2023
1 parent b7432c8
commit 524d6ef
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 12 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -18,6 +18,7 @@
 -   Wrapped `TabPanel` in a `forwardRef` call ([#50199](https://github.com/WordPress/gutenberg/pull/50199)).
 -   `ColorPalette`: Improve readability of color name and value, and improve rendering of partially transparent colors ([#50450](https://github.com/WordPress/gutenberg/pull/50450)).
 -   `Button`: Add `__next32pxSmallSize` prop to opt into the new 32px size when the `isSmall` prop is enabled ([#51012](https://github.com/WordPress/gutenberg/pull/51012)).
+-   `ItemGroup`: Update styles so all SVGs inherit color from their parent element ([#50819](https://github.com/WordPress/gutenberg/pull/50819)).
 
 ### Experimental
 

diff --git a/packages/components/src/item-group/styles.ts b/packages/components/src/item-group/styles.ts
@@ -15,15 +15,13 @@ export const unstyledButton = css`
 	background: none;
 	text-align: start;
 
-	&:hover {
-		color: ${ COLORS.ui.theme };
+	svg,
+	path {
+		fill: currentColor;
 	}
 
-	&:focus {
-		background-color: transparent;
+	&:hover {
 		color: ${ COLORS.ui.theme };
-		border-color: ${ COLORS.ui.theme };
-		outline: 3px solid transparent;
 	}
 `;
 

diff --git a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap
@@ -607,15 +607,13 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
   border-radius: 2px;
 }
 
-.emotion-13:hover {
-  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+.emotion-13 svg,
+.emotion-13 path {
+  fill: currentColor;
 }
 
-.emotion-13:focus {
-  background-color: transparent;
+.emotion-13:hover {
   color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  outline: 3px solid transparent;
 }
 
 .emotion-15 {