Color picker improvements

jest.config.js

@@ -6,17 +6,45 @@ module.exports = () => ({
   moduleNameMapper: {
     "^.+\\.(css|less|scss)$": "identity-obj-proxy",
     "^@bigbinary/neetoui/(.*)$": path.resolve(__dirname, "src", "$1"),
-    "neetoicons/logos": path.resolve(
+    "^(@bigbinary/neeto-icons|neetoicons)$": path.resolve(
       __dirname,
-      "node_modules/@bigbinary/neeto-icons/dist/neeto-logos.js"
+      "node_modules/@bigbinary/neeto-icons/dist/cjs/icons/index.js"
     ),
-    "neetoicons/app-icons": path.resolve(
+    "^(@bigbinary/neeto-icons|neetoicons)/logos$": path.resolve(
       __dirname,
-      "node_modules/@bigbinary/neeto-icons/dist/app-icons.js"
+      "node_modules/@bigbinary/neeto-icons/dist/cjs/logos/index.js"
     ),
-    neetoicons: path.resolve(
+    "^(@bigbinary/neeto-icons|neetoicons)/app-icons$": path.resolve(
       __dirname,
-      "node_modules/@bigbinary/neeto-icons/dist/neeto-icons.js"
+      "node_modules/@bigbinary/neeto-icons/dist/cjs/app-icons/index.js"
+    ),
+    "^(@bigbinary/neeto-icons|neetoicons)/typeface-logos$": path.resolve(
+      __dirname,
+      "node_modules/@bigbinary/neeto-icons/dist/cjs/typeface-logos/index.js"
+    ),
+    "^(@bigbinary/neeto-icons|neetoicons)/misc$": path.resolve(
+      __dirname,
+      "node_modules/@bigbinary/neeto-icons/dist/cjs/misc/index.js"
+    ),
+    "^(@bigbinary/neeto-icons|neetoicons)/logos/(.*)$": path.resolve(
+      __dirname,
+      "node_modules/@bigbinary/neeto-icons/dist/cjs/logos/$2.js"
+    ),
+    "^(@bigbinary/neeto-icons|neetoicons)/app-icons/(.*)$": path.resolve(
+      __dirname,
+      "node_modules/@bigbinary/neeto-icons/dist/cjs/app-icons/$2.js"
+    ),
+    "^(@bigbinary/neeto-icons|neetoicons)/typeface-logos/(.*)$": path.resolve(
+      __dirname,
+      "node_modules/@bigbinary/neeto-icons/dist/cjs/typeface-logos/$2.js"
+    ),
+    "^(@bigbinary/neeto-icons|neetoicons)/misc/(.*)$": path.resolve(
+      __dirname,
+      "node_modules/@bigbinary/neeto-icons/dist/cjs/misc/$2.js"
+    ),
+    "^(@bigbinary/neeto-icons|neetoicons)/(.*)$": path.resolve(
+      __dirname,
+      "node_modules/@bigbinary/neeto-icons/dist/cjs/icons/$2.js"
     ),
     neetocist: path.resolve(
       __dirname,

package.json

@@ -84,7 +84,7 @@
     "@bigbinary/neeto-commons-frontend": "^3.0.10",
     "@bigbinary/neeto-datepicker": "^1.0.4",
     "@bigbinary/neeto-hotkeys": "1.0.4",
-    "@bigbinary/neeto-icons": "^1.9.22",
+    "@bigbinary/neeto-icons": "^1.20.21",
     "@reach/auto-id": "0.15.0",
     "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-babel": "^6.0.4",

src/components/ColorPicker/Palette.jsx

@@ -4,12 +4,12 @@ import classnames from "classnames";
 import PropTypes from "prop-types";
 
 const Palette = ({ color, colorList = [], onChange }) => (
-  <div className="neeto-ui-flex neeto-ui-flex-row neeto-ui-flex-wrap neeto-ui-items-start neeto-ui-justify-start neeto-ui-color-palette">
+  <div className="neeto-ui-flex neeto-ui-flex-row neeto-ui-flex-wrap neeto-ui-items-start neeto-ui-justify-start neeto-ui-color-palette neeto-ui-gap-1">
     {colorList.map((item, index) => (
       <div
         data-testid="color-palette-item"
         key={index}
-        className={classnames("neeto-ui-color-palette__item", {
+        className={classnames("neeto-ui-color-palette__item neeto-ui-border", {
           active: color && color.from === item.from && color.to === item.to,
         })}
         onClick={() => onChange(item.from, item.to)}
@@ -26,10 +26,7 @@ Palette.propTypes = {
     to: PropTypes.string,
   }),
   colorList: PropTypes.arrayOf(
-    PropTypes.shape({
-      from: PropTypes.string,
-      to: PropTypes.string,
-    })
+    PropTypes.shape({ from: PropTypes.string, to: PropTypes.string })
   ),
   onChange: PropTypes.func,
 };

src/components/ColorPicker/index.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useRef } from "react";
 
 import classnames from "classnames";
-import { Down, Focus } from "neetoicons";
+import { Down, ColorPicker as ColorPickerIcon } from "neetoicons";
 import PropTypes from "prop-types";
 import {
   HexColorPicker,
@@ -29,7 +29,7 @@ const ColorPicker = ({
   onChange = noop,
   colorPaletteProps,
   dropdownProps,
-  showEyeDropper = false,
+  showEyeDropper = true,
   showHexValue = false,
   showTransparencyControl = false,
   showPicker = true,
@@ -102,7 +102,7 @@ const ColorPicker = ({
       )}
       <span className="neeto-ui-colorpicker-target__color-wrapper">
         <span
-          className="neeto-ui-colorpicker-target__color neeto-ui-border-gray-400 border"
+          className="neeto-ui-colorpicker-target__color neeto-ui-border-gray-200"
           style={{ backgroundColor: colorValue }}
         />
         <span className="neeto-ui-colorpicker-target__icon">
@@ -123,17 +123,6 @@ const ColorPicker = ({
       dropdownProps={{ ...dropdownProps?.dropdownProps, ...portalProps }}
     >
       <div className="neeto-ui-colorpicker__popover">
-        {colorPaletteProps && (
-          <div
-            data-testid="color-palette"
-            className={classnames("neeto-ui-colorpicker__palette-wrapper", {
-              "neeto-ui-colorpicker__palette-wrapper--hidden-picker":
-                !showPicker,
-            })}
-          >
-            <Palette {...colorPaletteProps} />
-          </div>
-        )}
         {showPicker && (
           <>
             <div
@@ -142,11 +131,11 @@ const ColorPicker = ({
             >
               <PickerComponent color={colorValue} onChange={onPickerChange} />
             </div>
-            <div className="neeto-ui-flex neeto-ui-items-center neeto-ui-justify-center neeto-ui-mt-2 neeto-ui-gap-2">
+            <div className="neeto-ui-flex neeto-ui-items-center neeto-ui-justify-center neeto-ui-mt-3 neeto-ui-gap-2">
               {showEyeDropper && isSupported() && (
                 <Button
                   className="neeto-ui-colorpicker__eyedropper-btn"
-                  icon={Focus}
+                  icon={ColorPickerIcon}
                   size="small"
                   style="text"
                   type="button"
@@ -160,6 +149,7 @@ const ColorPicker = ({
                 >
                   <HexColorInput
                     {...{ onBlur }}
+                    prefixed
                     alpha={!!showTransparencyControl}
                     color={colorValue}
                     onChange={onColorInputChange}
@@ -169,6 +159,19 @@ const ColorPicker = ({
             </div>
           </>
         )}
+        {colorPaletteProps && (
+          <div
+            data-testid="color-palette"
+            className={classnames("neeto-ui-colorpicker__palette-wrapper", {
+              "neeto-ui-colorpicker__palette-wrapper--hidden-picker":
+                !showPicker,
+              "neeto-ui-pt-3 neeto-ui-border-t neeto-ui-border-gray-200":
+                showPicker,
+            })}
+          >
+            <Palette {...colorPaletteProps} />
+          </div>
+        )}
       </div>
     </Dropdown>
   );
@@ -212,7 +215,7 @@ ColorPicker.propTypes = {
   showEyeDropper: PropTypes.bool,
   /**
    * To show hex value near to the color in the dropdown.
-   * By default it will be hidden.
+   * By default it will be enabled.
    */
   showHexValue: PropTypes.bool,
   /**

src/styles/components/_color-picker.scss

@@ -8,16 +8,16 @@
   --neeto-ui-colorpicker-pointer-height: 1.25rem;
 
   // Palette Wrapper
-  --neeto-ui-colorpicker-palette-wrapper-margin-bottom: 0.75rem;
+  --neeto-ui-colorpicker-palette-wrapper-margin: 0.75rem;
 
   // Palette Item
-  --neeto-ui-colorpicker-palette-item-width: 2rem;
-  --neeto-ui-colorpicker-palette-item-height: 2rem;
+  --neeto-ui-colorpicker-palette-item-width: 1.5rem;
+  --neeto-ui-colorpicker-palette-item-height: 1.5rem;
   --neeto-ui-colorpicker-palette-item-border-width: 1px;
-  --neeto-ui-colorpicker-palette-item-border-color: transparent;
-  --neeto-ui-colorpicker-palette-item-border-radius: var(--neeto-ui-rounded-md);
-  --neeto-ui-colorpicker-palette-item-padding: 2px;
-  --neeto-ui-colorpicker-palette-item-margin-left: 1.25px;
+  --neeto-ui-colorpicker-palette-item-border-color: rgb(var(--neeto-ui-gray-200));
+  --neeto-ui-colorpicker-palette-item-border-radius: 0.3125rem;
+  --neeto-ui-colorpicker-palette-item-padding: 0;
+  --neeto-ui-colorpicker-palette-item-margin-left: 0;
 
   // Target Wrapper
   --neeto-ui-colorpicker-target-wrapper-gap: 0.5rem;
@@ -28,7 +28,7 @@
   --neeto-ui-colorpicker-target-border-width: 1px;
   --neeto-ui-colorpicker-target-border-color: rgb(var(--neeto-ui-gray-400));
   --neeto-ui-colorpicker-target-height: 1.75rem;
-  --neeto-ui-colorpicker-target-padding: 0.5rem;
+  --neeto-ui-colorpicker-target-padding: 0.1875rem;
   --neeto-ui-colorpicker-target-gap: 0.75rem;
 
   // Targer: Hover
@@ -61,17 +61,11 @@
   width: var(--neeto-ui-colorpicker-popover-width);
   padding: var(--neeto-ui-colorpicker-popover-padding);
 
-  .neeto-ui-colorpicker__eyedropper-btn {
-    svg {
-      fill: currentColor;
-    }
-  }
-
   .neeto-ui-colorpicker__palette-wrapper {
-    margin-bottom: var(--neeto-ui-colorpicker-palette-wrapper-margin-bottom);
+    margin-top: var(--neeto-ui-colorpicker-palette-wrapper-margin);
 
     &--hidden-picker {
-      --neeto-ui-colorpicker-palette-wrapper-margin-bottom: 0px;
+      --neeto-ui-colorpicker-palette-wrapper-margin: 0px;
     }
   }
 
@@ -90,6 +84,7 @@
   border-radius: var(--neeto-ui-colorpicker-palette-item-border-radius);
   margin-left: var(--neeto-ui-colorpicker-palette-item-margin-left);
   cursor: pointer;
+  overflow: hidden;
 
   &.active {
     --neeto-ui-colorpicker-palette-item-border-color: rgb(var(--neeto-ui-gray-500));
@@ -98,8 +93,6 @@
   div {
     width: 100%;
     min-height: 100%;
-    border-radius: var(--neeto-ui-colorpicker-palette-item-border-radius);
-    overflow: hidden;
   }
 }
 
@@ -141,6 +134,8 @@
     border-radius: var(--neeto-ui-colorpicker-target-color-block-border-radius);
     width: var(--neeto-ui-colorpicker-target-color-block-width);
     height: var(--neeto-ui-colorpicker-target-color-block-height);
+    border-width: 1px;
+    border-style: solid;
   }
 
   .neeto-ui-colorpicker-target__code {
@@ -152,14 +147,14 @@
 
   &-size--medium {
     --neeto-ui-colorpicker-target-height: 2rem;
-    --neeto-ui-colorpicker-target-padding: 0.5rem;
+    --neeto-ui-colorpicker-target-padding: 0.25rem;
     --neeto-ui-colorpicker-target-color-block-width: 1.5rem;
     --neeto-ui-colorpicker-target-color-block-height: 1.5rem;
   }
 
   &-size--large {
     --neeto-ui-colorpicker-target-height: 2.5rem;
-    --neeto-ui-colorpicker-target-padding: 0.75rem;
+    --neeto-ui-colorpicker-target-padding: 0.4375rem;
     --neeto-ui-colorpicker-target-color-block-width: 1.5rem;
     --neeto-ui-colorpicker-target-color-block-height: 1.5rem;
   }

stories/Components/ColorPickerStoriesDocs/ColorPickerCSSCustomization.mdx

@@ -20,7 +20,7 @@ component.
 --neeto-ui-colorpicker-palette-item-border-width: 1px;
 --neeto-ui-colorpicker-palette-item-border-color: transparent;
 --neeto-ui-colorpicker-palette-item-border-radius: var(--neeto-ui-rounded-md);
---neeto-ui-colorpicker-palette-item-padding: 2px;
+--neeto-ui-colorpicker-palette-item-padding: 0;
 --neeto-ui-colorpicker-palette-item-margin-left: 1.25px;
 
 // Target Wrapper

yarn.lock

@@ -3071,10 +3071,10 @@
   resolved "https://registry.yarnpkg.com/@bigbinary/neeto-hotkeys/-/neeto-hotkeys-1.0.4.tgz#03358c7eb27c430b69d8bf786a4a278fdf7a280f"
   integrity sha512-/DEbXYPeg/Pbljd/k2GhRvCaDEpQG2JTnSWz0soSlw5m6VkPY7NdC0PR+PIwvHFZUjGtRU7liSBZoWPTleTtHA==
 
-"@bigbinary/neeto-icons@^1.9.22":
-  version "1.17.4"
-  resolved "https://registry.yarnpkg.com/@bigbinary/neeto-icons/-/neeto-icons-1.17.4.tgz#d2de4e1e64ec92c5e94a4eedd8a4b4ffe8ee9d72"
-  integrity sha512-v/VaqzOwB7acnBgEnrhVyF+utEm+ERR66VRFIXZIMGUOaYTN6NzqcrLgGF8HmCPoy5DUavzGQfLvPn4I9TSZEw==
+"@bigbinary/neeto-icons@^1.20.21":
+  version "1.20.21"
+  resolved "https://registry.yarnpkg.com/@bigbinary/neeto-icons/-/neeto-icons-1.20.21.tgz#a6a8b23dc83ad765bd91a68b8727becd74de379a"
+  integrity sha512-euiy9lQi0RMf25g7HOQEdZ/TVRTwZ1immtt71fvHJTX0Y1deYhhcskjVO9Pl4ddDHxQQS6yxtX8BOmdhN9H6FQ==
 
 "@colors/colors@1.5.0":
   version "1.5.0"