From f99739db0bee21a5cb665ebd8d811c9c1ec3dc40 Mon Sep 17 00:00:00 2001
From: 0815Strohhut <44547548+0815Strohhut@users.noreply.github.com>
Date: Wed, 13 Mar 2019 18:30:47 +0100
Subject: [PATCH] Add styles to ChromeColorPicker (#33711)

ChromeColorPicker allows to override styles by providing a "styles" parameter which consists of a bunch of CSS definitions applied to different parts of the component
---
 types/react-color/index.d.ts                  |  8 +++--
 .../lib/components/chrome/Chrome.d.ts         | 31 ++++++++++++++++++-
 types/react-color/react-color-tests.tsx       |  2 +-
 3 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/types/react-color/index.d.ts b/types/react-color/index.d.ts
index 25664870c8..9935814feb 100644
--- a/types/react-color/index.d.ts
+++ b/types/react-color/index.d.ts
@@ -1,6 +1,10 @@
-// Type definitions for react-color 2.14
+// Type definitions for react-color 2.17
 // Project: https://github.com/casesandberg/react-color/, http://casesandberg.github.io/react-color
-// Definitions by: Karol Janyst <https://github.com/LKay>, Marks Polakovs <https://github.com/markspolakovs>, Matthieu Montaudouin <https://github.com/mntdn>, Nokogiri <https://github.com/nkgrnkgr>
+// Definitions by:  Karol Janyst <https://github.com/LKay>,
+//                  Marks Polakovs <https://github.com/markspolakovs>,
+//                  Matthieu Montaudouin <https://github.com/mntdn>,
+//                  Nokogiri <https://github.com/nkgrnkgr>,
+//                  0815Strohhut <https://github.com/0815Strohhut>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 
diff --git a/types/react-color/lib/components/chrome/Chrome.d.ts b/types/react-color/lib/components/chrome/Chrome.d.ts
index a078cb231e..3c8f4139a5 100644
--- a/types/react-color/lib/components/chrome/Chrome.d.ts
+++ b/types/react-color/lib/components/chrome/Chrome.d.ts
@@ -1,8 +1,37 @@
-import { Component } from "react";
+import { Component, CSSProperties } from "react";
 import { ColorPickerProps } from "../../..";
 
+export interface ChromePickerDefaultStyles {
+    picker?: CSSProperties;
+    saturation?: CSSProperties;
+    Saturation?: CSSProperties;
+    body?: CSSProperties;
+    controls?: CSSProperties;
+    color?: CSSProperties;
+    swatch?: CSSProperties;
+    active?: CSSProperties;
+    toggles?: CSSProperties;
+    hue?: CSSProperties;
+    Hue?: CSSProperties;
+    alpha?: CSSProperties;
+    Alpha?: CSSProperties;
+}
+
+export interface ChromePickerDisableAlphaStyles {
+    color?: CSSProperties;
+    alpha?: CSSProperties;
+    hue?: CSSProperties;
+    swatch?: CSSProperties;
+}
+
+export interface ChromePickerStyles {
+    default?: ChromePickerDefaultStyles;
+    disableAlpha?: ChromePickerDisableAlphaStyles;
+}
+
 export interface ChromePickerProps extends ColorPickerProps<ChromePicker> {
     disableAlpha?: boolean;
+    styles?: ChromePickerStyles;
 }
 
 export default class ChromePicker extends Component<ChromePickerProps> {}
diff --git a/types/react-color/react-color-tests.tsx b/types/react-color/react-color-tests.tsx
index 71ed800375..631fb34839 100644
--- a/types/react-color/react-color-tests.tsx
+++ b/types/react-color/react-color-tests.tsx
@@ -35,7 +35,7 @@ const colors = ["#000", "#333"];
 
 render(<AlphaPicker height="100px" width="100px" />, document.getElementById("main"));
 render(<BlockPicker colors={ colors } width="100px" />, document.getElementById("main"));
-render(<ChromePicker disableAlpha />, document.getElementById("main"));
+render(<ChromePicker disableAlpha styles={{ default: { picker: { width: 200 }}}} />, document.getElementById("main"));
 render(<CirclePicker colors={ colors } width="100px" />, document.getElementById("main"));
 render(<CompactPicker colors={ colors } />, document.getElementById("main"));
 render(<GithubPicker colors={ colors } width="100px" />, document.getElementById("main"));