Color picker – Add full gradient support

assets/src/edit-story/components/canvas/displayLayer.js

@@ -24,21 +24,18 @@ import styled from 'styled-components';
  */
 import { useStory } from '../../app';
 import generatePatternStyles from '../../utils/generatePatternStyles';
-import convertToCSS from '../../utils/convertToCSS';
 import createSolid from '../../utils/createSolid';
 import useCanvas from './useCanvas';
 import DisplayElement from './displayElement';
 import { Layer, PageArea } from './layout';
 
 const DEFAULT_COLOR = createSolid(255, 255, 255);
 
-const DisplayPageArea = styled(PageArea).attrs({
+const DisplayPageArea = styled(PageArea).attrs(({ backgroundColor }) => ({
   className: 'container',
   overflowAllowed: false,
-})`
-  ${({ backgroundColor }) =>
-    convertToCSS(generatePatternStyles(backgroundColor || DEFAULT_COLOR))};
-`;
+  style: generatePatternStyles(backgroundColor || DEFAULT_COLOR),
+}))``;
 
 function DisplayLayer() {
   const {

assets/src/edit-story/components/canvas/pagepreview/index.js

@@ -25,15 +25,18 @@ import PropTypes from 'prop-types';
  */
 import useStory from '../../../app/story/useStory';
 import generatePatternStyles from '../../../utils/generatePatternStyles';
-import convertToCSS from '../../../utils/convertToCSS';
-import createSolidFromString from '../../../utils/createSolidFromString';
+import createSolid from '../../../utils/createSolid';
 import { TransformProvider } from '../../transform';
 import { UnitsProvider } from '../../../units';
 import DisplayElement from '../displayElement';
 
 const PAGE_THUMB_OUTLINE = 2;
 
-const Page = styled.button`
+const DEFAULT_COLOR = createSolid(255, 255, 255);
+
+const Page = styled.button.attrs(({ backgroundColor }) => ({
+  style: generatePatternStyles(backgroundColor || DEFAULT_COLOR),
+}))`
   padding: 0;
   margin: 0;
   border: none;
@@ -42,12 +45,6 @@ const Page = styled.button`
       isActive ? theme.colors.selection : theme.colors.bg.v1};
   height: ${({ height }) => height}px;
   width: ${({ width }) => width}px;
-  ${({ backgroundColor, theme }) =>
-    convertToCSS(
-      generatePatternStyles(
-        backgroundColor || createSolidFromString(theme.colors.fg.v1)
-      )
-    )};
   flex: none;
   transition: width 0.2s ease, height 0.2s ease;
 

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

@@ -0,0 +1,175 @@
+/*
+ * 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 { CSSTransition } from 'react-transition-group';
+import { useEffect, useRef, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { rgba } from 'polished';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { PatternPropType } from '../../types';
+import { useKeyDownEffect } from '../keyboard';
+import useFocusOut from '../../utils/useFocusOut';
+import CurrentColorPicker from './currentColorPicker';
+import GradientPicker from './gradientPicker';
+import Header from './header';
+import useColor from './useColor';
+
+const CONTAINER_PADDING = 15;
+
+const Container = styled.div`
+  border-radius: 4px;
+  background: ${({ theme }) => theme.colors.bg.v7};
+  color: ${({ theme }) => theme.colors.fg.v1};
+  width: 240px;
+  font-family: ${({ theme }) => theme.fonts.body1.family};
+  font-style: normal;
+  font-weight: normal;
+  font-size: 12px;
+  user-select: none;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+
+  &.picker-appear {
+    opacity: 0.01;
+    margin-top: -10px;
+
+    &.picker-appear-active {
+      opacity: 1;
+      margin-top: 0;
+      transition: 300ms ease-out;
+      transition-property: opacity, margin-top;
+    }
+  }
+`;
+
+const Body = styled.div`
+  border-top: 1px solid ${({ theme }) => rgba(theme.colors.fg.v2, 0.2)};
+  padding: ${CONTAINER_PADDING}px;
+`;
+
+function ColorPicker({ color, hasGradient, hasOpacity, onChange, onClose }) {
+  const {
+    state: { type, stops, currentStopIndex, currentColor, generatedColor },
+    actions: {
+      load,
+      updateCurrentColor,
+      reverseStops,
+      selectStop,
+      addStopAt,
+      removeCurrentStop,
+      rotateClockwise,
+      moveCurrentStopBy,
+      setToSolid,
+      setToGradient,
+    },
+  } = useColor();
+
+  useEffect(() => {
+    if (generatedColor) {
+      onChange(generatedColor);
+    }
+  }, [color, generatedColor, onChange]);
+
+  useEffect(() => {
+    if (color) {
+      load(color);
+    }
+  }, [color, load]);
+
+  // Detect focus out of color picker (clicks or focuses outside)
+  const containerRef = useRef();
+  useFocusOut(containerRef, onClose);
+
+  // Re-establish focus when actively exiting by button or key press
+  const previousFocus = useRef(document.activeElement);
+  const handleCloseAndRefocus = useCallback(() => {
+    if (previousFocus.current) {
+      previousFocus.current.focus();
+    }
+    onClose();
+  }, [onClose]);
+
+  useKeyDownEffect(containerRef, 'esc', handleCloseAndRefocus);
+
+  return (
+    <CSSTransition in appear={true} classNames="picker" timeout={300}>
+      <Container
+        role="dialog"
+        aria-label={__('Color and gradient picker', 'web-stories')}
+        ref={containerRef}
+      >
+        <Header
+          hasGradient={hasGradient}
+          type={type}
+          setToGradient={setToGradient}
+          setToSolid={setToSolid}
+          onClose={handleCloseAndRefocus}
+        />
+        {type !== 'solid' && (
+          <Body>
+            <GradientPicker
+              stops={stops}
+              currentStopIndex={currentStopIndex}
+              onSelect={selectStop}
+              onReverse={reverseStops}
+              onAdd={addStopAt}
+              onDelete={removeCurrentStop}
+              onRotate={rotateClockwise}
+              onMove={moveCurrentStopBy}
+            />
+          </Body>
+        )}
+        <Body>
+          <CurrentColorPicker
+            color={currentColor}
+            onChange={updateCurrentColor}
+            showOpacity={hasOpacity}
+          />
+        </Body>
+      </Container>
+    </CSSTransition>
+  );
+}
+
+ColorPicker.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  onClose: PropTypes.func,
+  hasGradient: PropTypes.bool,
+  hasOpacity: PropTypes.bool,
+  color: PatternPropType,
+};
+
+ColorPicker.defaultProps = {
+  color: null,
+  onClose: () => {},
+  hasGradient: false,
+  hasOpacity: true,
+};
+
+export default ColorPicker;

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

@@ -0,0 +1,18 @@
+/*
+ * 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.
+ */
+
+export const LINE_LENGTH = 155;
+export const LINE_WIDTH = 12;

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

@@ -51,7 +51,6 @@ const Container = styled.div`
 `;
 
 const Body = styled.div`
-  padding: ${CONTAINER_PADDING}px;
   padding-bottom: 0;
   display: grid;
   grid: 'saturation hue alpha' ${BODY_HEIGHT}px / 1fr ${CONTROLS_WIDTH}px ${CONTROLS_WIDTH}px;
@@ -91,7 +90,7 @@ const Footer = styled.div`
 
 const EyedropperWrapper = styled.div`
   position: absolute;
-  left: ${CONTAINER_PADDING}px;
+  left: 0;
   bottom: ${CONTAINER_PADDING}px;
 `;
 
@@ -109,7 +108,7 @@ const CurrentWrapper = styled.div`
 
 const CurrentAlphaWrapper = styled.div`
   position: absolute;
-  right: ${CONTAINER_PADDING}px;
+  right: 0;
   bottom: ${CONTAINER_PADDING}px;
 `;