Improve usability of the theme color picker widget. Rename the name o…

mrs.developer.json

@@ -4,7 +4,7 @@
     "package": "@plone/volto",
     "url": "git@github.com:plone/volto.git",
     "https": "https://github.com/plone/volto.git",
-    "tag": "18.2.3"
+    "tag": "18.4.0"
   },
   "volto-button-block": {
     "develop": false,

packages/volto-light-theme/news/455.breaking

@@ -0,0 +1 @@
+Rename the name of the widget from `themingColorPicker` to `themeColorPicker`. @sneridagh

packages/volto-light-theme/news/455.bugfix

@@ -0,0 +1 @@
+Improve usability of the theme color picker widget. Fix error when removing a logo. @sneridagh

packages/volto-light-theme/news/455.internal

@@ -0,0 +1 @@
+Update to latest Volto 18.4.0. @sneridagh

packages/volto-light-theme/package.json

@@ -45,7 +45,9 @@
   },
   "dependencies": {
     "@plone/components": "workspace:^",
-    "uuid": "^11.0.0"
+    "uuid": "^11.0.0",
+    "react-aria-components": "^1.5.0",
+    "react-colorful": "^5.6.1"
   },
   "peerDependencies": {
     "@eeacms/volto-accordion-block": "^10.4.6",

packages/volto-light-theme/src/components/Footer/FooterLogos.tsx

@@ -64,7 +64,7 @@ const FooterLogos = () => {
                 logoInfo.logoHref = logo.logo[0]['@id'];
                 logoInfo.srcAlt = logo['alt'];
                 logoInfo.src = `${flattenToAppURL(logoInfo.logoHref)}/${logo.logo[0].image_scales[logo.logo[0].image_field][0].download}`;
-              } else if (logo?.logo) {
+              } else if (logo?.logo && logo.logo[0]) {
                 logoInfo.logoHref = logo.logo[0]['@id'];
                 logoInfo.srcAlt = logo['alt'];
                 logoInfo.src = `${flattenToAppURL(logoInfo.logoHref)}/@@images/image`;

packages/volto-light-theme/src/components/Widgets/ThemeColorPicker.tsx

@@ -0,0 +1,53 @@
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
+import { HexColorPicker, HexColorInput } from 'react-colorful';
+import { Button, Dialog, DialogTrigger, Popover } from 'react-aria-components';
+import { ColorSwatch, CloseIcon } from '@plone/components';
+
+const ColorPickerWidget = (props: {
+  id: string;
+  title: string;
+  value: string;
+  default: string;
+  onChange: (id: string, value: any) => void;
+}) => {
+  const { id, onChange, value } = props;
+
+  return (
+    <FormFieldWrapper {...props} className="theme-color-picker">
+      <DialogTrigger>
+        <Button className="theme-color-picker-button">
+          <ColorSwatch color={value || '#fff'} />
+        </Button>
+
+        <Popover placement="bottom start">
+          <Dialog className="theme-color-picker-dialog">
+            <HexColorPicker
+              color={value || ''}
+              onChange={(value) => {
+                // edge case for Batman value
+                if (value !== '#NaNNaNNaN') {
+                  onChange(id, value);
+                }
+              }}
+            />
+          </Dialog>
+        </Popover>
+      </DialogTrigger>
+      <HexColorInput
+        color={value || ''}
+        onChange={(value) => onChange(id, value)}
+        prefixed
+      />
+      <Button
+        className="theme-color-picker-reset react-aria-Button"
+        onPress={() => {
+          onChange(id, '');
+        }}
+      >
+        <CloseIcon size="S" />
+      </Button>
+    </FormFieldWrapper>
+  );
+};
+
+export default ColorPickerWidget;

packages/volto-light-theme/src/config/widgets.ts

@@ -1,19 +1,19 @@
 import type { ConfigType } from '@plone/registry';
-import ThemingColorPicker from '../components/Widgets/ThemingColorPicker';
 import BackgroundColorWidget from '../components/Widgets/BackgroundColorWidget';
 import BlockWidthWidget from '../components/Widgets/BlockWidthWidget';
 import BlockAlignmentWidget from '../components/Widgets/BlockAlignmentWidget';
 import ColorPickerWidget from '../components/Widgets/ColorPickerWidget';
 import FooterLogosWidget from '../components/Widgets/FooterLogosWidget';
 import FooterLinksWidget from '../components/Widgets/FooterLinksWidget';
 import SizeWidget from '../components/Widgets/SizeWidget';
+import ThemeColorPicker from '../components/Widgets/ThemeColorPicker';
 
 declare module '@plone/types' {
   export interface WidgetsConfigByWidget {
     BackgroundColorWidget: React.ComponentType<any>;
     blockWidth: React.ComponentType<any>;
     blockAlignment: React.ComponentType<any>;
-    themingColorPicker: typeof ThemingColorPicker;
+    themeColorPicker: typeof ThemeColorPicker;
     footerLogos: typeof FooterLogosWidget;
     footerLinks: typeof FooterLinksWidget;
     sizeWidget: React.ComponentType<any>;
@@ -25,7 +25,7 @@ export default function install(config: ConfigType) {
   config.widgets.widget.blockWidth = BlockWidthWidget;
   config.widgets.widget.blockAlignment = BlockAlignmentWidget;
   config.widgets.widget.color_picker = ColorPickerWidget;
-  config.widgets.widget.themingColorPicker = ThemingColorPicker;
+  config.widgets.widget.themeColorPicker = ThemeColorPicker;
   config.widgets.widget.footerLogos = FooterLogosWidget;
   config.widgets.widget.footerLinks = FooterLinksWidget;
   config.widgets.widget.sizeWidget = SizeWidget;

packages/volto-light-theme/src/theme/_widgets.scss

@@ -29,15 +29,34 @@
   }
 }
 
-.field.color {
+.field.theme-color-picker {
   .eight.wide.column {
     flex-direction: row;
     align-items: center;
 
     input {
+      height: 32px;
       padding-left: 8px;
+      border-bottom-left-radius: 0px;
+      border-top-left-radius: 0px;
       line-height: 1;
     }
+
+    .theme-color-picker-button .react-aria-ColorSwatch {
+      border-bottom-right-radius: 0px;
+      border-top-right-radius: 0px;
+      cursor: pointer;
+    }
+
+    .theme-color-picker-reset {
+      position: absolute;
+      right: 15px;
+
+      &[data-hovered='true'] {
+        cursor: pointer;
+        opacity: 0.7;
+      }
+    }
   }
 }