Custom color picker

assets/src/edit-story/components/button/index.js

@@ -27,6 +27,8 @@ import RedoIcon from './icons/redo.svg';
 import LeftArrowIcon from './icons/arrow_left.svg';
 import RightArrowIcon from './icons/arrow_right.svg';
 import GridViewIcon from './icons/grid_view.svg';
+import CloseIcon from './icons/close.svg';
+import EyedropperIcon from './icons/eyedropper.svg';
 
 const Base = styled.button.attrs(
 	( { isDisabled } ) => ( { disabled: isDisabled } ),
@@ -127,6 +129,18 @@ export const GridView = ( props ) => (
 	</StyledButton>
 );
 
+export const Close = ( props ) => (
+	<StyledButton { ...props }>
+		<CloseIcon />
+	</StyledButton>
+);
+
+export const Eyedropper = ( props ) => (
+	<StyledButton { ...props }>
+		<EyedropperIcon />
+	</StyledButton>
+);
+
 export const ActionButton = styled.button.attrs( { type: 'button' } )`
 	background: transparent;
 	border: 1px solid ${ ( { theme } ) => theme.colors.fg.v3 };

assets/src/edit-story/components/button/stories/index.js

@@ -22,7 +22,7 @@ import { text, boolean } from '@storybook/addon-knobs';
 /**
  * Internal dependencies
  */
-import { Primary, Secondary, Outline, Undo, Redo, GridView } from '../';
+import { Primary, Secondary, Outline, Undo, Redo, GridView, Close, Eyedropper } from '../';
 
 export default {
 	title: 'Components/Button',
@@ -129,3 +129,39 @@ gridView.story = {
 		],
 	},
 };
+
+export const close = () => {
+	const isDisabled = boolean( 'Disabled', false );
+
+	return (
+		<Close
+			isDisabled={ isDisabled }
+		/>
+	);
+};
+
+close.story = {
+	parameters: {
+		backgrounds: [
+			{ name: 'dark', value: '#000', default: true },
+		],
+	},
+};
+
+export const eyedropper = () => {
+	const isDisabled = boolean( 'Disabled', false );
+
+	return (
+		<Eyedropper
+			isDisabled={ isDisabled }
+		/>
+	);
+};
+
+eyedropper.story = {
+	parameters: {
+		backgrounds: [
+			{ name: 'dark', value: '#000', default: true },
+		],
+	},
+};

assets/src/edit-story/components/colorPicker/editableHexPreview.js

@@ -0,0 +1,63 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { EditableInput } from 'react-color/lib/components/common';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+const Preview = styled.button`
+	padding: 0;
+	margin: 0;
+	border: none;
+	background: transparent;
+	background: ${ ( { theme } ) => theme.colors.bg.v7 };
+	color: ${ ( { theme } ) => theme.colors.fg.v1 };
+`;
+
+function EditableHexPreview( { hex, onChange } ) {
+	const [ isEditing, setIsEditing ] = useState( false );
+
+	if ( ! isEditing ) {
+		return (
+			<Preview onClick={ () => setIsEditing( true ) }>
+				{ hex }
+			</Preview>
+		);
+	}
+
+	return (
+		<EditableInput
+			value={ hex }
+			onChange={ onChange }
+			onChangeComplete={ () => setIsEditing( false ) }
+		/>
+	);
+}
+
+EditableHexPreview.propTypes = {
+	hex: PropTypes.string,
+	onChange: PropTypes.func.isRequired,
+};
+
+export default EditableHexPreview;