fix(ColorGenerator): always prepend entered colors with pound sign (#…

…2904)
ionic-team · Apr 12, 2023 · 29a1279 · 29a1279 · vercel · Apr 12, 2023
1 parent 2dc8c1c
commit 29a1279
Showing 1 changed file with 3 additions and 2 deletions.
diff --git a/src/components/page/theming/ColorGenerator/index.tsx b/src/components/page/theming/ColorGenerator/index.tsx
@@ -43,6 +43,7 @@ const ColorGenerator = (props) => {
           const { tint, shade, value } = color;
           const nameCap = name[0].toUpperCase() + name.substring(1);
 
+          const formattedValue = value.charAt(0) === '#' ? value : '#' + value;
           const isOpen = activeColor === name ? true : false;
 
           return (
@@ -52,13 +53,13 @@ const ColorGenerator = (props) => {
             >
               <div className={styles.titleRow}>
                 <div className={styles.titleRowStart}>
-                  <ColorDot color={value} />
+                  <ColorDot color={formattedValue} />
                   {nameCap}
                 </div>
                 <div className={styles.titleRowEnd}>
                   <ColorInput
                     onClick={(ev) => ev.stopPropagation()}
-                    color={value}
+                    color={formattedValue}
                     setColor={(color) =>
                       setColors((colors) => {
                         colors[name] = generateColor(color);