Update: Improve preview and show changed state

Resources/Private/Editor/package.json

@@ -11,7 +11,9 @@
     "@neos-project/eslint-config-neos": "^2.3.0",
     "@neos-project/neos-ui-extensibility": "~8.3.6",
     "@neos-project/react-ui-components": "^8.3.6",
-    "esbuild": "^0.20.1",
-    "esbuild-plugin-lightningcss-modules": "^0.1.2"
+    "clsx": "^2.1.0",
+    "esbuild": "^0.20.2",
+    "esbuild-plugin-lightningcss-modules": "^0.1.2",
+    "nanoid": "^5.0.6"
   }
 }

Resources/Private/Editor/src/Colors/index.js

@@ -2,8 +2,9 @@ import React, { PureComponent } from "react";
 import PropTypes from "prop-types";
 import { IconButton, SelectBox } from "@neos-project/react-ui-components";
 import { neos } from "@neos-project/neos-ui-decorators";
-import OptionWithPreview from "../Helper/OptionWithPreview";
+import OptionPreview from "../OptionPreview";
 import { returnValues, getPreviewBoxAttributes, getPreviewBoxText, capitalizeFirstLetter } from "./utlis";
+import clsx from "clsx";
 import style from "./style.module.css";
 
 const neosifier = neos((globalRegistry) => ({
@@ -63,7 +64,7 @@ class Editor extends PureComponent {
     };
 
     render() {
-        let { value, options, i18nRegistry, config } = this.props;
+        let { value, options, i18nRegistry, config, highlight } = this.props;
         options = Object.assign({}, this.constructor.defaultOptions, options);
         if (options.colors) {
             config.colors = options.colors;
@@ -190,26 +191,30 @@ class Editor extends PureComponent {
                         placeholder={i18nRegistry.translate("Carbon.TailwindColors:Main:selectColorGroup")}
                         allowEmpty={false}
                         onValueChange={groupChangeHandler}
-                        ListPreviewElement={OptionWithPreview}
+                        ListPreviewElement={OptionPreview}
                     />
                 </div>
                 {colorsArray.map((item) => {
                     const isActiveGroup = value && value.group == item.group;
                     return (
                         isActiveGroup && (
                             <div className={style.list}>
-                                {item.values.map((entry) => (
-                                    <button
-                                        key={item.group + entry.strength}
-                                        className={[
-                                            style.item,
-                                            isActiveGroup && entry.strength == value.strength && style.itemactive,
-                                        ].join(" ")}
-                                        style={{ backgroundColor: entry.color }}
-                                        title={entry.label}
-                                        onClick={() => handleColorClick(item.group, entry.strength)}
-                                    ></button>
-                                ))}
+                                {item.values.map((entry) => {
+                                    const current = entry.strength == value.strength;
+                                    const itemHighlight = highlight && current;
+                                    const itemActive = current && !highlight;
+                                    const itemDefault = !itemHighlight && !itemActive;
+
+                                    return (
+                                        <button
+                                            key={item.group + entry.strength}
+                                            className={clsx(style.item, itemDefault && style.itemDefault, itemActive && style.itemActive, itemHighlight && style.itemHighlight)}
+                                            style={{ backgroundColor: entry.color }}
+                                            title={entry.label}
+                                            onClick={() => handleColorClick(item.group, entry.strength)}
+                                        ></button>
+                                    )
+                                })}
                             </div>
                         )
                     );

Resources/Private/Editor/src/Colors/style.module.css

@@ -45,10 +45,15 @@
   flex: 1;
 }
 
-.itemactive,
-.item:hover,
-.item:focus {
-  box-shadow: 0 0 0 2px #00adee;
+.itemActive,
+.itemDefault:hover,
+.itemDefault:focus {
+  box-shadow: 0 0 0 2px var(--colors-PrimaryBlue);
+  z-index: 2;
+}
+
+.itemHighlight {
+  box-shadow: 0 0 0 2px var(--colors-Warn);
   z-index: 1;
 }
 

Resources/Private/Editor/src/Groups/index.js

@@ -2,7 +2,7 @@ import React, { PureComponent } from "react";
 import PropTypes from "prop-types";
 import { IconButton, SelectBox } from "@neos-project/react-ui-components";
 import { neos } from "@neos-project/neos-ui-decorators";
-import OptionWithPreview from "../Helper/OptionWithPreview";
+import OptionPreview from "../OptionPreview";
 import style from "./style.module.css";
 
 const neosifier = neos((globalRegistry) => ({
@@ -39,7 +39,7 @@ class Editor extends PureComponent {
     };
 
     render() {
-        let { value, options, i18nRegistry, config } = this.props;
+        let { value, options, i18nRegistry, config, highlight } = this.props;
 
         options = Object.assign({}, this.constructor.defaultOptions, options);
         if (options.colors) {
@@ -94,14 +94,15 @@ class Editor extends PureComponent {
         };
 
         return (
-            <div className={disabled && style.disabled}>
+            <div className={Boolean(disabled) && style.disabled}>
                 <SelectBox
                     options={selectBoxOptions}
                     value={value}
                     placeholder={placeholder || i18nRegistry.translate("Carbon.TailwindColors:Main:selectColorGroup")}
                     allowEmpty={allowEmpty}
                     onValueChange={onValueChange}
-                    ListPreviewElement={OptionWithPreview}
+                    ListPreviewElement={OptionPreview}
+                    className={Boolean(highlight) && style.highlight}
                 />
             </div>
         );

Resources/Private/Editor/src/Groups/style.module.css

@@ -14,3 +14,8 @@
 .disabled > * {
   pointer-events: none;
 }
+
+.highlight {
+  border-radius: 2px;
+  box-shadow: 0 0 0 2px var(--colors-Warn);
+}

Resources/Private/Editor/src/OptionPreview/index.js

@@ -0,0 +1,62 @@
+// @ts-ignore
+import React, { PureComponent, Fragment } from "react";
+import PropTypes from "prop-types";
+import { nanoid } from "nanoid";
+import style from "./style.module.css";
+import clsx from "clsx";
+
+export default class OptionPreview extends PureComponent {
+    static propTypes = {
+        option: PropTypes.shape({
+            label: PropTypes.string.isRequired,
+            colors: PropTypes.arrayOf(PropTypes.string),
+        }),
+    };
+
+    render() {
+        const { option, onClick, isHighlighted, onMouseEnter } = this.props;
+        const { colors, label } = option;
+
+        const length = colors.length;
+        const stop = 100 / length;
+        const id = "bg-" + nanoid();
+        const width = 90;
+        const height = 60;
+
+        return (
+            <button
+                className={clsx(style.preview, isHighlighted && style.highlighted)}
+                onClick={onClick}
+                onMouseEnter={onMouseEnter}
+                type="button"
+            >
+                <svg
+                    height={height}
+                    width={width}
+                    version="1.1"
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlnsXlink="http://www.w3.org/1999/xlink"
+                    preserveAspectRatio="none"
+                    className="pointer-events-none size-full"
+                >
+                    <defs>
+                        <linearGradient x1="0%" y1="100%" x2="100%" y2="100%" id={id}>
+                            {colors.map((color, index) => {
+                                const start = stop * index + "%";
+                                const end = stop * (index + 1) + "%";
+                                return (
+                                    <Fragment key={index}>
+                                        <stop stopColor={color} offset={start}></stop>
+                                        <stop stopColor={color} offset={end}></stop>
+                                    </Fragment>
+                                );
+                            })}
+                        </linearGradient>
+                    </defs>
+                    <rect fill={`url(#${id})`} x="0" y="0" width={width} height={height}></rect>
+                </svg>
+                <span title={label}>{label}</span>
+            </button>
+        )
+    }
+}

Resources/Private/Editor/src/OptionPreview/style.module.css

@@ -0,0 +1,27 @@
+.preview {
+  cursor: pointer;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: calc(var(--spacing-GoldenUnit) - 10px);
+  padding: 5px var(--spacing-Full);
+  overflow: hidden;
+  display: flex;
+  gap: var(--spacing-Full);
+  align-items: center;
+  border: 0;
+  background: none;
+  border-radius: 0;
+  color: white;
+  width: 100%;
+
+  & svg {
+    display: block;
+    margin-left: calc(var(--spacing-Full) * -1);
+    margin-block: -5px;
+    height: 60px;
+  }
+}
+
+.highlighted {
+  background-color: var(--colors-PrimaryBlue);
+}