New: Add label option

Resources/Private/Editor/src/ColorValuesEditor.css

@@ -29,20 +29,27 @@
 .list {
   flex: 1;
   position: relative;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(18px, 1fr));
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
   gap: 10px;
   margin-top: 10px;
   padding-top: 15px;
   border-top: 1px solid #3f3f3f;
 }
 
+.label {
+  flex: 1 0 100%;
+  margin-bottom: -10px;
+}
+
 .item {
   border: 1px solid #3f3f3f;
   border-radius: 2px;
   width: 18px;
   height: 18px;
   cursor: pointer;
+  flex: 0 0 18px;
 }
 
 .item:hover,

Resources/Private/Editor/src/ColorValuesEditor.js

@@ -107,18 +107,22 @@ export default class Editor extends PureComponent {
           )}
         </div>
         <div className={style.list}>
-          {valueArray.map((item) => (
+          {valueArray.map((item) => {
+            return item.color ? (
             <button
               className={[
                 style.item,
-                item.color == 'transparent' && style.transparent,
-              ].join(' ')}
+                  item.color == "transparent" && style.transparent,
+                ].join(" ")}
               disabled={item.disabled}
               style={{ backgroundColor: item.color }}
               title={item.label}
               onClick={() => commit(item.key)}
             ></button>
-          ))}
+            ) : (
+              <div className={style.label}>{item.label}</div>
+            );
+          })}
         </div>
       </div>
     );