Set the correct min-width for the ChromePicker popover (#6863)

Fixes #6750.
WordPress · May 22, 2018 · 3d897ea · 3d897ea
1 parent e245ea2
commit 3d897ea
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 9 deletions.
diff --git a/components/color-palette/index.js b/components/color-palette/index.js
@@ -48,7 +48,7 @@ export default function ColorPalette( { colors, disableCustomColors = false, val
 			{ ! disableCustomColors &&
 				<Dropdown
 					className="components-color-palette__item-wrapper components-color-palette__custom-color"
-					contentClassName="components-color-palette__picker "
+					contentClassName="components-color-palette__picker"
 					renderToggle={ ( { isOpen, onToggle } ) => (
 						<Tooltip text={ customColorPickerLabel }>
 							<button
@@ -66,7 +66,6 @@ export default function ColorPalette( { colors, disableCustomColors = false, val
 						<ChromePicker
 							color={ value }
 							onChangeComplete={ ( color ) => onChange( color.hex ) }
-							style={ { width: '100%' } }
 							disableAlpha
 						/>
 					) }

diff --git a/components/color-palette/style.scss b/components/color-palette/style.scss
@@ -144,3 +144,8 @@ $color-palette-circle-spacing: 14px;
 
 	background-clip: content-box, content-box, content-box, content-box, content-box, content-box, padding-box, padding-box, padding-box, padding-box, padding-box, padding-box;
 }
+
+.components-color-palette__picker:not(.is-mobile) .components-popover__content {
+	// ChromePicker has a hardcoded width of 225px, so we need to override the popover min-width.
+	min-width: 225px;
+}
diff --git a/components/color-palette/test/__snapshots__/index.js.snap b/components/color-palette/test/__snapshots__/index.js.snap
@@ -32,11 +32,6 @@ exports[`ColorPalette Dropdown .renderContent should render dropdown content 1`]
       "r": 255,
     }
   }
-  style={
-    Object {
-      "width": "100%",
-    }
-  }
 />
 `;
 
@@ -57,7 +52,7 @@ exports[`ColorPalette Dropdown .renderToggle should render dropdown content 1`]
 exports[`ColorPalette Dropdown should render it correctly 1`] = `
 <Dropdown
   className="components-color-palette__item-wrapper components-color-palette__custom-color"
-  contentClassName="components-color-palette__picker "
+  contentClassName="components-color-palette__picker"
   renderContent={[Function]}
   renderToggle={[Function]}
 />
@@ -210,7 +205,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
   </div>
   <Dropdown
     className="components-color-palette__item-wrapper components-color-palette__custom-color"
-    contentClassName="components-color-palette__picker "
+    contentClassName="components-color-palette__picker"
     renderContent={[Function]}
     renderToggle={[Function]}
   />