fix(data-viz): ensure color palette updates on theme change (#2007)

* fix(data-viz): ensure color palette updates on theme change * fix(data-viz): update alert colors Co-authored-by: Alessandra Davila <[email protected]> Co-authored-by: jeanservaas <[email protected]>
carbon-design-system · Dec 2, 2020 · c7806e9 · c7806e9 · vercel · Dec 2, 2020
1 parent 50d95c6
commit c7806e9
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 9 deletions.
diff --git a/src/components/ColorPalette/ColorPalette.js b/src/components/ColorPalette/ColorPalette.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { ContentSwitcher, Switch, Dropdown } from 'carbon-components-react';
 import cx from 'classnames';
 import {
@@ -16,7 +16,8 @@ import {
   fiveColorDark,
   monoColors,
   divergingColors,
-  alert,
+  alertLight,
+  alertDark,
 } from '../../data/data-visualization/palettes';
 import ColorPaletteColor from './ColorPaletteColor';
 import PalettesContainer from './PalettesContainer';
@@ -46,6 +47,7 @@ const ColorPalette = ({ type, isMono, isDiverging }) => {
   const threeColor = dark ? threeColorDark : threeColorLight;
   const fourColor = dark ? fourColorDark : fourColorLight;
   const fiveColor = dark ? fiveColorDark : fiveColorLight;
+  const alertColor = dark ? alertDark : alertLight;
 
   // SET RENDERED COLORS
   const [colorGroup, setColorGroup] = useState(oneColor); // used to render type === "grouped" colors
@@ -56,7 +58,7 @@ const ColorPalette = ({ type, isMono, isDiverging }) => {
   } else if (type === 'categorical') {
     colors = categorical;
   } else if (type === 'alert') {
-    colors = alert;
+    colors = alertColor;
   }
 
   // DROPDOWN STUFF
@@ -84,11 +86,13 @@ const ColorPalette = ({ type, isMono, isDiverging }) => {
   ];
 
   const onDropdownChange = (e) => {
+    const id = e.selectedItem ? e.selectedItem.id : e;
+
     // update selected option
-    setGroupNumber(e.selectedItem.id);
+    setGroupNumber(id);
 
     // update colors rendered
-    switch (e.selectedItem.id) {
+    switch (id) {
       case 1:
         setColorGroup(oneColor);
         break;
@@ -108,6 +112,11 @@ const ColorPalette = ({ type, isMono, isDiverging }) => {
     }
   };
 
+  // Rerender color group values when theme is toggled
+  useEffect(() => {
+    onDropdownChange(groupNumber);
+  }, [dark]);
+
   // SWITCHER STUFF
   const activateFirstSwitcher = () => {
     if (type === 'sequential') {
@@ -159,7 +168,6 @@ const ColorPalette = ({ type, isMono, isDiverging }) => {
             label="Color group selection"
             id="color-group-dropdown"
             size="xl"
-            light
             items={dropdownItems}
             onChange={onDropdownChange}
             selectedItem={dropdownItems[groupNumber - 1]}

diff --git a/src/data/data-visualization/palettes.js b/src/data/data-visualization/palettes.js
@@ -1168,7 +1168,7 @@ export const divergingColors = [
   },
 ];
 
-export const alert = [
+export const alertLight = [
   {
     name: 'Red 60',
     hex: 'da1e28',
@@ -1180,13 +1180,36 @@ export const alert = [
     light: false,
   },
   {
-    name: 'Green 50',
-    hex: '24a148',
+    name: 'Yellow 30',
+    hex: 'f1c21b',
+    light: false,
+  },
+  {
+    name: 'Green 60',
+    hex: '198038',
+    light: true,
+  },
+];
+
+export const alertDark = [
+  {
+    name: 'Red 50',
+    hex: 'fa4d56',
+    light: false,
+  },
+  {
+    name: 'Orange 40',
+    hex: 'ff832b',
     light: false,
   },
   {
     name: 'Yellow 30',
     hex: 'f1c21b',
     light: false,
   },
+  {
+    name: 'Green 50',
+    hex: '24a148',
+    light: false,
+  },
 ];