Color Picker: Improve border, padding, and box shadow styles. (#36963)

WordPress · Nov 29, 2021 · 61d82f7 · 61d82f7
1 parent f3c9ed0
commit 61d82f7
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 0 deletions.
diff --git a/packages/components/src/color-palette/index.js b/packages/components/src/color-palette/index.js
@@ -135,6 +135,7 @@ export default function ColorPalette( {
 		<VStack spacing={ 3 } className={ className }>
 			{ ! disableCustomColors && (
 				<Dropdown
+					contentClassName="components-color-palette__custom-color-dropdown-content"
 					renderContent={ renderCustomColorPicker }
 					renderToggle={ ( { isOpen, onToggle } ) => (
 						<button

diff --git a/packages/components/src/color-palette/style.scss b/packages/components/src/color-palette/style.scss
@@ -16,3 +16,12 @@
 	color: $white;
 	cursor: pointer;
 }
+
+.components-dropdown__content.components-color-palette__custom-color-dropdown-content .components-popover__content {
+	overflow: visible;
+	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.05);
+	border: none;
+	& > div {
+		padding: 0;
+	}
+}
diff --git a/packages/components/src/color-palette/test/__snapshots__/index.js.snap b/packages/components/src/color-palette/test/__snapshots__/index.js.snap
@@ -26,6 +26,7 @@ exports[`ColorPalette Dropdown .renderToggle should render dropdown content 1`]
 
 exports[`ColorPalette Dropdown should render it correctly 1`] = `
 <Dropdown
+  contentClassName="components-color-palette__custom-color-dropdown-content"
   key=".0"
   renderContent={[Function]}
   renderToggle={[Function]}
@@ -177,6 +178,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
         data-wp-component="VStack"
       >
         <Dropdown
+          contentClassName="components-color-palette__custom-color-dropdown-content"
           key=".0"
           renderContent={[Function]}
           renderToggle={[Function]}