Update: Add hightlight state and improve color list

Resources/Private/Editor/ColorValuesEditor/index.js

@@ -26,7 +26,7 @@ function Editor(props) {
     const { commit, value, highlight, i18nRegistry } = props;
     const { disabled, values } = options;
 
-    const previewBoxAttributes = (value, placeholder) => {
+    const previewBoxAttributes = (value, highlight, placeholder) => {
         const hasValue = value && Object.prototype.hasOwnProperty.call(values, value);
         const color = hasValue ? values[value].color : placeholder;
         const title = hasValue ? i18nRegistry.translate(values[value].label) : null;
@@ -40,6 +40,10 @@ function Editor(props) {
             classNames.push(style.checkboard);
         }
 
+        if (highlight) {
+            classNames.push(style.highlight);
+        }
+
         return {
             className: classNames.filter((item) => !!item).join(" "),
             style: { backgroundColor: color },
@@ -64,10 +68,12 @@ function Editor(props) {
         });
     }
 
+    const fixedButton = valueArray.length > 9;
+
     return (
         <div className={options.disabled && style.disabled}>
             <div className={style.wrapper}>
-                <div {...previewBoxAttributes(value, options.placeholder)}></div>
+                <div {...previewBoxAttributes(value, highlight, options.placeholder)}></div>
                 {allowEmpty && (
                     <div className={style.reset}>
                         <IconButton
@@ -80,17 +86,26 @@ function Editor(props) {
                 )}
             </div>
             <div className={style.list}>
-                {valueArray.map((item) => {
+                {valueArray.map((item, index) => {
                     return item.color ? (
                         <button
-                            className={[style.item, item.color == "transparent" && style.transparent].join(" ")}
+                            key={index}
+                            className={[
+                                style.item,
+                                item.color == "transparent" && style.transparent,
+                                fixedButton && style.itemFixed,
+                            ]
+                                .filter((item) => !!item)
+                                .join(" ")}
                             disabled={item.disabled}
                             style={{ backgroundColor: item.color }}
                             title={item.label}
                             onClick={() => commit(item.key)}
                         ></button>
                     ) : (
-                        <div className={style.label}>{item.label}</div>
+                        <div key={index} className={style.label}>
+                            {item.label}
+                        </div>
                     );
                 })}
             </div>

Resources/Private/Editor/ColorValuesEditor/style.module.css

@@ -10,10 +10,15 @@
     padding: 10px 16px;
 }
 
+.highlight {
+    box-shadow: 0 0 0 2px #ff8700;
+}
+
 .feedback {
     flex: 1;
     height: 40px;
     border: 1px solid #3f3f3f;
+    border-radius: 2px;
 }
 
 .transparent,
@@ -30,11 +35,11 @@
     flex: 1;
     position: relative;
     display: flex;
+    justify-content: flex-start;
     flex-wrap: wrap;
-    justify-content: space-between;
-    gap: 10px;
-    margin-top: 10px;
-    padding-top: 15px;
+    gap: 8px;
+    margin-top: 8px;
+    padding-top: 8px;
     border-top: 1px solid #3f3f3f;
 }
 
@@ -46,10 +51,14 @@
 .item {
     border: 1px solid #3f3f3f;
     border-radius: 2px;
-    width: 18px;
-    height: 18px;
+    height: 24px;
     cursor: pointer;
-    flex: 0 0 18px;
+    flex: 1 0 24px;
+    padding: 0;
+}
+
+.itemFixed {
+    flex-grow: 0;
 }
 
 .item:hover,