rewrite color picker to support no (mixed) colors & fix focus handling

packages/excalidraw/actions/actionProperties.tsx

@@ -335,7 +335,8 @@ export const actionChangeStrokeColor = register({
           appState,
           (element) => element.strokeColor,
           true,
-          appState.currentItemStrokeColor,
+          (hasSelection) =>
+            !hasSelection ? appState.currentItemStrokeColor : null,
         )}
         onChange={(color) => updateData({ currentItemStrokeColor: color })}
         elements={elements}
@@ -353,6 +354,10 @@ export const actionChangeBackgroundColor = register({
   perform: (elements, appState, value, app) => {
     if (!value.currentItemBackgroundColor) {
       return {
+        appState: {
+          ...appState,
+          ...value,
+        },
         captureUpdate: CaptureUpdateAction.EVENTUALLY,
       };
     }
@@ -409,7 +414,8 @@ export const actionChangeBackgroundColor = register({
           appState,
           (element) => element.backgroundColor,
           true,
-          appState.currentItemBackgroundColor,
+          (hasSelection) =>
+            !hasSelection ? appState.currentItemBackgroundColor : null,
         )}
         onChange={(color) => updateData({ currentItemBackgroundColor: color })}
         elements={elements}

packages/excalidraw/components/ColorPicker/ColorInput.tsx

@@ -19,6 +19,7 @@ interface ColorInputProps {
   onChange: (color: string) => void;
   label: string;
   colorPickerType: ColorPickerType;
+  placeholder?: string;
 }
 
 export const ColorInput = ({
@@ -26,6 +27,7 @@ export const ColorInput = ({
   onChange,
   label,
   colorPickerType,
+  placeholder,
 }: ColorInputProps) => {
   const device = useDevice();
   const [innerValue, setInnerValue] = useState(color);
@@ -93,6 +95,7 @@ export const ColorInput = ({
           }
           event.stopPropagation();
         }}
+        placeholder={placeholder}
       />
       {/* TODO reenable on mobile with a better UX */}
       {!device.editor.isMobile && (

packages/excalidraw/components/ColorPicker/ColorPicker.scss

@@ -69,6 +69,17 @@
       }
     }
 
+    .color-picker__button-outline {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      svg {
+        color: var(--color-gray-60);
+        width: 1.25rem;
+        height: 1.25rem;
+      }
+    }
+
     &.active {
       .color-picker__button-outline {
         position: absolute;

packages/excalidraw/components/ColorPicker/ColorPicker.tsx

@@ -18,6 +18,7 @@ import { useExcalidrawContainer } from "../App";
 import { ButtonSeparator } from "../ButtonSeparator";
 import { activeEyeDropperAtom } from "../EyeDropper";
 import { PropertiesPopover } from "../PropertiesPopover";
+import { slashIcon } from "../icons";
 
 import { ColorInput } from "./ColorInput";
 import { Picker } from "./Picker";
@@ -54,7 +55,11 @@ export const getColor = (color: string): string | null => {
 
 interface ColorPickerProps {
   type: ColorPickerType;
-  color: string;
+  /**
+   * null indicates no color should be displayed as active
+   * (e.g. when multiple shapes selected with different colors)
+   */
+  color: string | null;
   onChange: (color: string) => void;
   label: string;
   elements: readonly ExcalidrawElement[];
@@ -91,22 +96,21 @@ const ColorPickerPopupContent = ({
     <div>
       <PickerHeading>{t("colorPicker.hexCode")}</PickerHeading>
       <ColorInput
-        color={color}
+        color={color || ""}
         label={label}
         onChange={(color) => {
           onChange(color);
         }}
         colorPickerType={type}
+        placeholder={t("colorPicker.color")}
       />
     </div>
   );
 
-  const popoverRef = useRef<HTMLDivElement>(null);
+  const colorPickerContentRef = useRef<HTMLDivElement>(null);
 
   const focusPickerContent = () => {
-    popoverRef.current
+    colorPickerContentRef.current?.focus();
-      ?.querySelector<HTMLDivElement>(".color-picker-content")
-      ?.focus();
   };
 
   return (
@@ -133,6 +137,7 @@ const ColorPickerPopupContent = ({
     >
       {palette ? (
         <Picker
+          ref={colorPickerContentRef}
           palette={palette}
           color={color}
           onChange={(changedColor) => {
@@ -185,7 +190,7 @@ const ColorPickerTrigger = ({
   color,
   type,
 }: {
-  color: string;
+  color: string | null;
   label: string;
   type: ColorPickerType;
 }) => {
@@ -193,8 +198,9 @@ const ColorPickerTrigger = ({
     <Popover.Trigger
       type="button"
       className={clsx("color-picker__button active-color properties-trigger", {
-        "is-transparent": color === "transparent" || !color,
+        "is-transparent": !color || color === "transparent",
-        "has-outline": !isColorDark(color, COLOR_OUTLINE_CONTRAST_THRESHOLD),
+        "has-outline":
+          !color || !isColorDark(color, COLOR_OUTLINE_CONTRAST_THRESHOLD),
       })}
       aria-label={label}
       style={color ? { "--swatch-color": color } : undefined}
@@ -204,7 +210,7 @@ const ColorPickerTrigger = ({
           : t("labels.showBackground")
       }
     >
-      <div className="color-picker__button-outline" />
+      <div className="color-picker__button-outline">{!color && slashIcon}</div>
     </Popover.Trigger>
   );
 };

packages/excalidraw/components/ColorPicker/CustomColorList.tsx

@@ -8,7 +8,7 @@ import { activeColorPickerSectionAtom } from "./colorPickerUtils";
 
 interface CustomColorListProps {
   colors: string[];
-  color: string;
+  color: string | null;
   onChange: (color: string) => void;
   label: string;
 }

packages/excalidraw/components/ColorPicker/Picker.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useImperativeHandle, useState } from "react";
 
 import { EVENT } from "@excalidraw/common";
 
@@ -30,7 +30,7 @@ import { colorPickerKeyNavHandler } from "./keyboardNavHandlers";
 import type { ColorPickerType } from "./colorPickerUtils";
 
 interface PickerProps {
-  color: string;
+  color: string | null;
   onChange: (color: string) => void;
   label: string;
   type: ColorPickerType;
@@ -42,7 +42,9 @@ interface PickerProps {
   onEscape: (event: React.KeyboardEvent | KeyboardEvent) => void;
 }
 
-export const Picker = ({
+export const Picker = React.forwardRef(
+  (
+    {
       color,
       onChange,
       label,
@@ -53,7 +55,9 @@ export const Picker = ({
       children,
       onEyeDropperToggle,
       onEscape,
-}: PickerProps) => {
+    }: PickerProps,
+    ref,
+  ) => {
     const [customColors] = React.useState(() => {
       if (type === "canvasBackground") {
         return [];
@@ -72,12 +76,12 @@ export const Picker = ({
 
     useEffect(() => {
       if (!activeColorPickerSection) {
-      const isCustom = isCustomColor({ color, palette });
+        const isCustom = !!color && isCustomColor({ color, palette });
         const isCustomButNotInList = isCustom && !customColors.includes(color);
 
         setActiveColorPickerSection(
           isCustomButNotInList
-          ? "hex"
+            ? null
             : isCustom
             ? "custom"
             : colorObj?.shade != null
@@ -116,9 +120,14 @@ export const Picker = ({
         document.removeEventListener(EVENT.KEYUP, keyup, { capture: true });
       };
     }, [colorObj, onEyeDropperToggle]);
-
     const pickerRef = React.useRef<HTMLDivElement>(null);
 
+    useImperativeHandle(ref, () => pickerRef.current!);
+
+    useEffect(() => {
+      pickerRef?.current?.focus();
+    }, []);
+
     return (
       <div role="dialog" aria-modal="true" aria-label={t("labels.colorPicker")}>
         <div
@@ -165,7 +174,6 @@ export const Picker = ({
             <PickerHeading>{t("colorPicker.colors")}</PickerHeading>
             <PickerColorList
               color={color}
-            label={label}
               palette={palette}
               onChange={onChange}
               activeShade={activeShade}
@@ -174,10 +182,11 @@ export const Picker = ({
 
           <div>
             <PickerHeading>{t("colorPicker.shades")}</PickerHeading>
-          <ShadeList hex={color} onChange={onChange} palette={palette} />
+            <ShadeList color={color} onChange={onChange} palette={palette} />
           </div>
           {children}
         </div>
       </div>
     );
-};
+  },
+);

packages/excalidraw/components/ColorPicker/PickerColorList.tsx

@@ -17,9 +17,8 @@ import type { TranslationKeys } from "../../i18n";
 
 interface PickerColorListProps {
   palette: ColorPaletteCustom;
-  color: string;
+  color: string | null;
   onChange: (color: string) => void;
-  label: string;
   activeShade: number;
 }
 
@@ -27,11 +26,10 @@ const PickerColorList = ({
   palette,
   color,
   onChange,
-  label,
   activeShade,
 }: PickerColorListProps) => {
   const colorObj = getColorNameAndShadeFromColor({
-    color: color || "transparent",
+    color,
     palette,
   });
   const [activeColorPickerSection, setActiveColorPickerSection] = useAtom(

packages/excalidraw/components/ColorPicker/ShadeList.tsx

@@ -13,14 +13,14 @@ import {
 } from "./colorPickerUtils";
 
 interface ShadeListProps {
-  hex: string;
+  color: string | null;
   onChange: (color: string) => void;
   palette: ColorPaletteCustom;
 }
 
-export const ShadeList = ({ hex, onChange, palette }: ShadeListProps) => {
+export const ShadeList = ({ color, onChange, palette }: ShadeListProps) => {
   const colorObj = getColorNameAndShadeFromColor({
-    color: hex || "transparent",
+    color: color || "transparent",
     palette,
   });
 

packages/excalidraw/components/ColorPicker/TopPicks.tsx

@@ -14,7 +14,7 @@ import type { ColorPickerType } from "./colorPickerUtils";
 interface TopPicksProps {
   onChange: (color: string) => void;
   type: ColorPickerType;
-  activeColor: string;
+  activeColor: string | null;
   topPicks?: readonly string[];
 }
 

packages/excalidraw/components/ColorPicker/colorPickerUtils.ts

@@ -11,11 +11,14 @@ export const getColorNameAndShadeFromColor = ({
   color,
 }: {
   palette: ColorPaletteCustom;
-  color: string;
+  color: string | null;
 }): {
   colorName: ColorPickerColor;
   shade: number | null;
 } | null => {
+  if (!color) {
+    return null;
+  }
   for (const [colorName, colorVal] of Object.entries(palette)) {
     if (Array.isArray(colorVal)) {
       const shade = colorVal.indexOf(color);

packages/excalidraw/components/ColorPicker/keyboardNavHandlers.ts

@@ -109,7 +109,7 @@ interface ColorPickerKeyNavHandlerProps {
   event: React.KeyboardEvent;
   activeColorPickerSection: ActiveColorPickerSectionAtomType;
   palette: ColorPaletteCustom;
-  color: string;
+  color: string | null;
   onChange: (color: string) => void;
   customColors: string[];
   setActiveColorPickerSection: (
@@ -270,7 +270,7 @@ export const colorPickerKeyNavHandler = ({
   }
 
   if (activeColorPickerSection === "custom") {
-    const indexOfColor = customColors.indexOf(color);
+    const indexOfColor = color != null ? customColors.indexOf(color) : 0;
 
     const newColorIndex = arrowHandler(
       event.key,

packages/excalidraw/components/icons.tsx

@@ -595,6 +595,14 @@ export const bucketFillIcon = createIcon(
   tablerIconProps,
 );
 
+// simple / icon
+export const slashIcon = createIcon(
+  <g strokeWidth={1.5}>
+    <path d="M6 18l12 -12" />
+  </g>,
+  tablerIconProps,
+);
+
 export const ExportImageIcon = createIcon(
   <g strokeWidth="1.25">
     <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>

packages/excalidraw/locales/en.json

@@ -558,6 +558,7 @@
     }
   },
   "colorPicker": {
+    "color": "Color",
     "mostUsedCustomColors": "Most used custom colors",
     "colors": "Colors",
     "shades": "Shades",