@wordpress/components 19.7.0-next.e230fbab09.0 → 19.8.1

package/src/color-palette/stories/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { object } from '@storybook/addon-knobs';
-
 /**
  * WordPress dependencies
  */
@@ -12,36 +7,84 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import ColorPalette from '../';
+import Popover from '../../popover';
+import { Provider as SlotFillProvider } from '../../slot-fill';
 
-export default {
+const meta = {
 	title: 'Components/ColorPalette',
 	component: ColorPalette,
+	argTypes: {
+		__experimentalHasMultipleOrigins: {
+			control: {
+				type: null,
+			},
+		},
+		__experimentalIsRenderedInSidebar: {
+			control: {
+				type: 'boolean',
+			},
+		},
+		clearable: {
+			control: {
+				type: 'boolean',
+			},
+		},
+		disableCustomColors: {
+			control: {
+				type: 'boolean',
+			},
+		},
+	},
 	parameters: {
-		knobs: { disable: false },
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
 	},
 };
+export default meta;
 
-const ColorPaletteWithState = ( props ) => {
-	const [ color, setColor ] = useState( '#F00' );
-	return <ColorPalette { ...props } value={ color } onChange={ setColor } />;
+const Template = ( args ) => {
+	const [ color, setColor ] = useState( '#f00' );
+	return (
+		<SlotFillProvider>
+			<ColorPalette { ...args } value={ color } onChange={ setColor } />
+			<Popover.Slot />
+		</SlotFillProvider>
+	);
 };
 
-export const _default = () => {
-	const colors = [
-		{ name: 'red', color: '#f00' },
-		{ name: 'white', color: '#fff' },
-		{ name: 'blue', color: '#00f' },
-	];
-
-	return <ColorPaletteWithState colors={ colors } />;
+export const Default = Template.bind( {} );
+Default.args = {
+	colors: [
+		{ name: 'Red', color: '#f00' },
+		{ name: 'White', color: '#fff' },
+		{ name: 'Blue', color: '#00f' },
+	],
 };
 
-export const withKnobs = () => {
-	const colors = [
-		object( 'Red', { name: 'red', color: '#f00' } ),
-		object( 'White', { name: 'white', color: '#fff' } ),
-		object( 'Blue', { name: 'blue', color: '#00f' } ),
-	];
-
-	return <ColorPaletteWithState colors={ colors } />;
+/**
+ * When setting the `__experimentalHasMultipleOrigins` prop to `true`,
+ * the `colors` prop is expected to be an array of color palettes, rather
+ * than an array of color objects.
+ */
+export const MultipleOrigins = Template.bind( {} );
+MultipleOrigins.args = {
+	__experimentalHasMultipleOrigins: true,
+	colors: [
+		{
+			name: 'Primary colors',
+			colors: [
+				{ name: 'Red', color: '#f00' },
+				{ name: 'Yellow', color: '#ff0' },
+				{ name: 'Blue', color: '#00f' },
+			],
+		},
+		{
+			name: 'Primary colors',
+			colors: [
+				{ name: 'Orange', color: '#f60' },
+				{ name: 'Green', color: '#0f0' },
+				{ name: 'Purple', color: '#60f' },
+			],
+		},
+	],
 };

package/src/color-palette/style.scss

@@ -2,11 +2,10 @@
 	position: relative;
 	border: none;
 	background: none;
-	display: block;
 	border-radius: $radius-block-ui;
-	height: $grid-unit-60;
+	height: $grid-unit-80;
+	padding: $grid-unit-15;
 	font-family: inherit;
-	text-align: right;
 	width: 100%;
 	background-image:
 		repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200),
@@ -55,3 +54,12 @@
 		}
 	}
 }
+
+.components-color-palette__custom-color-name {
+	text-align: left;
+}
+
+.components-color-palette__custom-color-value {
+	margin-left: $grid-unit-20;
+	text-transform: uppercase;
+}