Merge branch 'master' into react-colorful

frontend/src/metabase/common/components/ColorPicker/ColorPicker.styled.tsx

@@ -9,63 +9,33 @@ export const ContentContainer = styled.div`
   padding: 1rem;
 `;
 
-// react-css inserts inline styles, but it's forbidden with our CSP headers
-// to fix this we copy relevant styles here
-// https://github.com/casesandberg/react-color/blob/v2.18.1/src/components/common/Hue.js#L78
-// https://github.com/casesandberg/react-color/blob/v2.18.1/src/components/common/Saturation.js#L94
-// eslint-disable-next-line no-color-literals
+// Styles for react-colorful components
 export const ControlsRoot = styled.div`
-  .hue-horizontal {
-    background: linear-gradient(
-      to right,
-      #f00 0%,
-      #ff0 17%,
-      #0f0 33%,
-      #0ff 50%,
-      #00f 67%,
-      #f0f 83%,
-      #f00 100%
-    );
+  .react-colorful {
+    width: 100%;
+    height: auto;
   }
 
-  .saturation-white {
-    background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
+  .react-colorful__saturation {
+    height: 10rem;
+    margin-bottom: 1rem;
+    border-radius: 0.25rem;
   }
 
-  .saturation-black {
-    background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
+  .react-colorful__hue {
+    height: 0.5rem;
+    border-radius: 0.25rem;
+  }
+
+  .react-colorful__pointer {
+    width: 0.875rem;
+    height: 0.875rem;
+    border: 2px solid var(--mb-color-bg-white);
+    border-radius: 50%;
+  }
+
+  .react-colorful__hue-pointer {
+    width: 0.625rem;
+    height: 0.625rem;
   }
 `;
-
-export const SaturationContainer = styled.div`
-  position: relative;
-  height: 10rem;
-  margin-bottom: 1rem;
-  border-radius: 0.25rem;
-  overflow: hidden;
-`;
-
-export const HueContainer = styled.div`
-  position: relative;
-  height: 0.5rem;
-  border-radius: 0.25rem;
-  overflow: hidden;
-`;
-
-const ControlsPointer = styled.div`
-  border: 2px solid var(--mb-color-bg-white);
-  border-radius: 50%;
-  pointer-events: none;
-`;
-
-export const SaturationPointer = styled(ControlsPointer)`
-  width: 0.875rem;
-  height: 0.875rem;
-  transform: translate(-50%, -50%);
-`;
-
-export const HuePointer = styled(ControlsPointer)`
-  width: 0.625rem;
-  height: 0.625rem;
-  transform: translate(-50%, -0.0625rem);
-`;

frontend/src/metabase/common/components/ColorPicker/ColorPickerContent.tsx

@@ -1,6 +1,5 @@
 import type { HTMLAttributes, Ref } from "react";
 import { forwardRef, useCallback } from "react";
-import type { ColorState } from "react-color";
 
 import ColorInput from "metabase/common/components/ColorInput";
 
@@ -22,7 +21,7 @@ const ColorPickerContent = forwardRef(function ColorPickerContent(
   ref: Ref<HTMLDivElement>,
 ) {
   const handleChange = useCallback(
-    (state: ColorState) => onChange?.(state.hex),
+    (color: string) => onChange?.(color),
     [onChange],
   );
 

frontend/src/metabase/common/components/ColorPicker/ColorPickerControls.tsx

@@ -1,40 +1,19 @@
-import type { CustomPickerInjectedProps } from "react-color";
-import { CustomPicker } from "react-color";
-import { Hue, Saturation } from "react-color/lib/components/common";
+import { HexColorPicker } from "react-colorful";
 
-import {
-  ControlsRoot,
-  HueContainer,
-  HuePointer,
-  SaturationContainer,
-  SaturationPointer,
-} from "./ColorPicker.styled";
+import { ControlsRoot } from "./ColorPicker.styled";
 
-const saturationStyles = {
-  color: {
-    borderTopLeftRadius: "5px",
-    borderBottomRightRadius: "5px",
-  },
-};
+export interface ColorPickerControlsProps {
+  color?: string;
+  onChange?: (color: string) => void;
+}
 
-const ColorPickerControls = CustomPicker(function ColorControls(
-  props: CustomPickerInjectedProps,
-) {
+function ColorPickerControls({ color, onChange }: ColorPickerControlsProps) {
   return (
     <ControlsRoot>
-      <SaturationContainer>
-        <Saturation
-          {...props}
-          pointer={SaturationPointer}
-          style={saturationStyles}
-        />
-      </SaturationContainer>
-      <HueContainer>
-        <Hue {...props} pointer={HuePointer} />
-      </HueContainer>
+      <HexColorPicker color={color} onChange={onChange} />
     </ControlsRoot>
   );
-});
+}
 
 // eslint-disable-next-line import/no-default-export -- deprecated usage
 export default ColorPickerControls;

package.json

@@ -110,7 +110,7 @@
     "re-reselect": "^4.0.1",
     "react": "^18.2.0",
     "react-ansi-style": "^1.0.0",
-    "react-color": "^2.14.1",
+    "react-colorful": "^5.6.1",
     "react-copy-to-clipboard": "^5.0.1",
     "react-dnd": "4",
     "react-dnd-html5-backend": "4",
@@ -231,7 +231,6 @@
     "@types/prop-types": "^15.7.4",
     "@types/raf": "^3.4.0",
     "@types/react": "^18.3.3",
-    "@types/react-color": "^2.17.6",
     "@types/react-copy-to-clipboard": "^5.0.2",
     "@types/react-dom": "^18.2.17",
     "@types/react-grid-layout": "^1.3.5",

yarn.lock

@@ -2313,11 +2313,6 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
-"@icons/material@^0.2.4":
-  version "0.2.4"
-  resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8"
-  integrity sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==
-
 "@inquirer/checkbox@^2.4.7":
   version "2.4.7"
   resolved "https://registry.yarnpkg.com/@inquirer/checkbox/-/checkbox-2.4.7.tgz#0a2867a3a8c5853c79e43e99634e80c1721934ca"
@@ -5601,14 +5596,6 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc"
   integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==
 
-"@types/react-color@^2.17.6":
-  version "2.17.6"
-  resolved "https://registry.yarnpkg.com/@types/react-color/-/react-color-2.17.6.tgz#584946f17c40fcd0828fde5f72a9c23ccea6f037"
-  integrity sha512-5CEKnrpvgZz8v5UYbpLgBeK+V6K7KdszksSDK6mNjL/8wrsqQfIyKB45CQOAEYtRgn+tWqTeqbUtvFWjXDpURQ==
-  dependencies:
-    "@types/react" "*"
-    "@types/reactcss" "*"
-
 "@types/react-copy-to-clipboard@^5.0.2":
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/@types/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.2.tgz#c29690b472a54edff35916f0d1c6c797ad0fd34b"
@@ -5698,13 +5685,6 @@
     "@types/prop-types" "*"
     csstype "^3.0.2"
 
-"@types/reactcss@*":
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/@types/reactcss/-/reactcss-1.2.4.tgz#66c5f6afe123ffa1a50dbe724aa1fe68eb9fab00"
-  integrity sha512-1rhVqteMSD6KQjO+dPBObE1OkKadw00HVJkG5WCYsyvMwGgdTZ530wF7Bkrg/4TWxB2AtINIzFotjW51eViw+w==
-  dependencies:
-    "@types/react" "*"
-
 "@types/redux-actions@^2.6.5":
   version "2.6.5"
   resolved "https://registry.yarnpkg.com/@types/redux-actions/-/redux-actions-2.6.5.tgz#3728477ada6c4bc0fe54ffae11def23a65c0714b"
@@ -14698,7 +14678,7 @@ lodash.truncate@^4.4.2:
   resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
   integrity sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM=
 
-lodash@4.17.21, lodash@^4.0.1, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.3, lodash@^4.2.1, lodash@~4.17.15:
+lodash@4.17.21, lodash@^4.17.10, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.3, lodash@^4.2.1, lodash@~4.17.15:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -14905,11 +14885,6 @@ marky@^1.2.2:
   resolved "https://registry.yarnpkg.com/marky/-/marky-1.2.5.tgz#55796b688cbd72390d2d399eaaf1832c9413e3c0"
   integrity sha512-q9JtQJKjpsVxCRVgQ+WapguSbKC3SQ5HEzFGPAJMStgh3QjCawp00UKv3MTTAArTmGmmPUvllHZoNbZ3gs0I+Q==
 
-material-colors@^1.2.1:
-  version "1.2.6"
-  resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
-  integrity sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==
-
 math-expression-evaluator@^1.2.14:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.4.0.tgz#3d66031117fbb7b9715ea6c9c68c2cd2eebd37e2"
@@ -17971,17 +17946,10 @@ react-ansi-style@^1.0.0:
     ansi-style-parser "^1.0.1"
     js-managed-css "^1.4.1"
 
-react-color@^2.14.1:
-  version "2.18.1"
-  resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.18.1.tgz#2cda8cc8e06a9e2c52ad391a30ddad31972472f4"
-  integrity sha512-X5XpyJS6ncplZs74ak0JJoqPi+33Nzpv5RYWWxn17bslih+X7OlgmfpmGC1fNvdkK7/SGWYf1JJdn7D2n5gSuQ==
-  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-colorful@^5.6.1:
+  version "5.6.1"
+  resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.6.1.tgz#7dc2aed2d7c72fac89694e834d179e32f3da563b"
+  integrity sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==
 
 react-copy-to-clipboard@^5.0.1:
   version "5.0.2"
@@ -18324,13 +18292,6 @@ react@^18.2.0:
   dependencies:
     loose-envify "^1.1.0"
 
-reactcss@^1.2.0:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.3.tgz#c00013875e557b1cf0dfd9a368a1c3dab3b548dd"
-  integrity sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==
-  dependencies:
-    lodash "^4.0.1"
-
 read-cache@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
@@ -20663,11 +20624,6 @@ tiny-warning@^1.0.2:
   resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
   integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
 
-tinycolor2@^1.4.1:
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803"
-  integrity sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==
-
 tinyglobby@^0.2.0, tinyglobby@^0.2.14:
   version "0.2.15"
   resolved "https://registry.yarnpkg.com/tinyglobby/-/tinyglobby-0.2.15.tgz#e228dd1e638cea993d2fdb4fcd2d4602a79951c2"