fix: replace color picker in figma plugin #3048

microsoft · May 1, 2020 · 7f7a403 · 7f7a403
1 parent 6d98e4e
commit 7f7a403
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 13 deletions.
diff --git a/packages/tooling/fast-figma-plugin-msft/package.json b/packages/tooling/fast-figma-plugin-msft/package.json
@@ -52,5 +52,8 @@
     "webpack": "^4.41.5",
     "webpack-bundle-analyzer": "^3.6.0",
     "webpack-cli": "^3.3.10"
+  },
+  "dependencies": {
+    "react-color": "^2.18.0"
   }
 }
diff --git a/packages/tooling/fast-figma-plugin-msft/src/core/ui/index.tsx b/packages/tooling/fast-figma-plugin-msft/src/core/ui/index.tsx
@@ -13,6 +13,7 @@ import {
     StandardLuminance,
 } from "@microsoft/fast-components-styles-msft";
 import { ColorRGBA64, parseColorHexRGB } from "@microsoft/fast-colors";
+import { BlockPicker } from "react-color";
 import { MessageAction, MessageTypes, UIMessage } from "../messaging";
 import { RecipeData, RecipeTypes } from "../recipe-registry";
 import { detach, refresh, revertChanges } from "./glyphs";
@@ -499,32 +500,37 @@ export class PluginUI extends React.Component<PluginUIProps> {
             .map(node => node.designSystem[type])
             .filter(value => !!value);
 
-        const onChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
-            const { value } = e.target;
-            const parsed = parseColorHexRGB(value);
+        const onChange = (value: any, e: React.ChangeEvent<HTMLInputElement>): void => {
+            const hex: string = value.hex;
+            const parsed = parseColorHexRGB(hex);
 
             if (parsed instanceof ColorRGBA64) {
                 this.props.dispatch({
                     nodeIds: this.props.selectedNodes.map(node => node.id),
                     type: MessageTypes.designSystem,
                     action: MessageAction.assign,
-                    value: value.toUpperCase(),
+                    value: hex.toUpperCase(),
                     property: type,
                 });
             }
         };
 
         return (
             <p className="inset">
-                <Label>
-                    <input
-                        type="color"
-                        disabled={values.length > 1}
-                        style={{ margin: "4px 8px 0 0" }}
-                        onChange={onChange}
-                        value={values.length ? values[0] : DesignSystemDefaults[type]}
+                <Label style={{ width: "100%" }}>
+                    <p>Accent color</p>
+                    <BlockPicker
+                        color={values.length ? values[0] : DesignSystemDefaults[type]}
+                        onChangeComplete={onChange}
+                        colors={[
+                            "#128475",
+                            "#1C881E",
+                            "#FDB82C",
+                            "#0078D4",
+                            "#8664C3",
+                            "#6A2A2B",
+                        ]}
                     />
-                    Accent color
                 </Label>
             </p>
         );

diff --git a/packages/tooling/fast-figma-plugin-msft/src/core/ui/swatch.tsx b/packages/tooling/fast-figma-plugin-msft/src/core/ui/swatch.tsx
@@ -20,7 +20,7 @@ function Swatch(props: SwatchProps): JSX.Element {
             title={color}
             className={managedClasses.swatch}
             style={{ background: color }}
-            {...rest}
+            {...(rest as any)}
         />
     );
 }

diff --git a/packages/tooling/fast-figma-plugin-msft/src/global.css b/packages/tooling/fast-figma-plugin-msft/src/global.css
@@ -103,3 +103,44 @@ html:hover ::-webkit-scrollbar-thumb {
 ::-webkit-scrollbar-thumb:window-inactive {
     background: rgba(0, 0, 0, 0.13);
 }
+
+/* Color Picker overrides */
+
+.block-picker {
+    box-shadow: none !important;
+    width: 100% !important;
+}
+
+.block-picker input {
+    max-width: 118px;
+    margin-left: 64px;
+    height: 24px !important;
+}
+
+.block-picker > div:first-child,
+.block-picker > div:nth-child(2) > div {
+    display: none;
+}
+
+.block-picker > div:nth-child(2) {
+    height: 24px !important;
+    width: 54px !important;
+    border-radius: 2px !important;
+}
+
+.block-picker > div:nth-child(3) {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+    display: flex;
+    flex-direction: column-reverse;
+    margin-top: -34px;
+}
+
+.block-picker > div:nth-child(3) > div:first-child {
+    margin-top: 12px;
+}
+
+.block-picker > div:nth-child(3) > div:first-child div {
+    border-radius: 50% !important;
+    margin-bottom: 0 !important;
+}
diff --git a/yarn.lock b/yarn.lock
@@ -17981,6 +17981,18 @@ react-color@^2.17.1:
     reactcss "^1.2.0"
     tinycolor2 "^1.4.1"
 
+react-color@^2.18.0:
+  version "2.18.0"
+  resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.18.0.tgz#34956f0bac394f6c3bc01692fd695644cc775ffd"
+  integrity sha512-FyVeU1kQiSokWc8NPz22azl1ezLpJdUyTbWL0LPUpcuuYDrZ/Y1veOk9rRK5B3pMlyDGvTk4f4KJhlkIQNRjEA==
+  dependencies:
+    "@icons/material" "^0.2.4"
+    lodash "^4.17.11"
+    material-colors "^1.2.1"
+    prop-types "^15.5.10"
+    reactcss "^1.2.0"
+    tinycolor2 "^1.4.1"
+
 react-dev-utils@^9.0.0:
   version "9.1.0"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-9.1.0.tgz#3ad2bb8848a32319d760d0a84c56c14bdaae5e81"