fix(editor): should keep color on custom color button (#11773)

Closes: [BS-3167](https://linear.app/affine-design/issue/BS-3167/自定义按钮显示错误)

blocksuite/affine/components/src/color-picker/utils.ts

@@ -321,7 +321,7 @@ export const calcCustomButtonStyle = (
     return { '--b': b, '--c': c };
   }
 
-  if (color.startsWith('---')) {
+  if (color.startsWith('--')) {
     if (!color.endsWith('transparent')) {
       b = 'var(--affine-background-overlay-panel-color)';
       c = keepColor(

packages/frontend/core/src/desktop/dialogs/import/index.tsx

@@ -241,6 +241,7 @@ const ImportOptionItem = ({
   suffixTooltip,
   type,
   onImport,
+  ...props
 }: {
   label: string;
   prefixIcon: ReactElement<SVGAttributes<SVGElement>>;
@@ -251,7 +252,7 @@ const ImportOptionItem = ({
 }) => {
   const t = useI18n();
   return (
-    <div className={style.importItem} onClick={() => onImport(type)}>
+    <div className={style.importItem} onClick={() => onImport(type)} {...props}>
       {prefixIcon}
       <div className={style.importItemLabel}>{t[label]()}</div>
       {suffixIcon && (
@@ -292,9 +293,9 @@ const ImportOptions = ({
               suffixIcon={suffixIcon}
               suffixTooltip={suffixTooltip}
               label={label}
-              data-testid={testId}
               type={type}
               onImport={onImport}
+              data-testid={testId}
             />
           )
         )}

tests/affine-local/e2e/blocksuite/color-picker.spec.ts

@@ -0,0 +1,111 @@
+import { test } from '@affine-test/kit/playwright';
+import { importFile } from '@affine-test/kit/utils/attachment';
+import {
+  clickEdgelessModeButton,
+  dragView,
+  locateToolbar,
+} from '@affine-test/kit/utils/editor';
+import { openHomePage } from '@affine-test/kit/utils/load-page';
+import {
+  clickNewPageButton,
+  getBlockSuiteEditorTitle,
+  waitForEditorLoad,
+} from '@affine-test/kit/utils/page-logic';
+import { expect } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  await openHomePage(page);
+  await clickNewPageButton(page);
+  await waitForEditorLoad(page);
+});
+
+test('should keep color on custom color button', async ({ page }) => {
+  await page.getByTestId('header-dropDownButton').click();
+  await page.getByTestId('editor-option-menu-import').click();
+
+  const importDialog = page.getByTestId('import-dialog');
+  await expect(importDialog).toBeVisible();
+
+  const importSnapshot = importDialog.getByTestId(
+    'editor-option-menu-import-snapshot'
+  );
+
+  const completeButton = importDialog.getByRole('button', { name: 'Complete' });
+
+  await importFile(page, 'v1-color-palettes-snapshot.zip', async () => {
+    await importSnapshot.click();
+  });
+
+  await completeButton.click();
+
+  await waitForEditorLoad(page);
+
+  const title = getBlockSuiteEditorTitle(page);
+  await expect(title).toContainText('Getting Started');
+
+  await clickEdgelessModeButton(page);
+
+  const toolbar = locateToolbar(page);
+
+  const colorPicker = toolbar.locator('edgeless-color-picker-button');
+
+  // frame
+  {
+    const frameTitle = page.locator('affine-frame-title');
+
+    await frameTitle.click();
+
+    await expect(toolbar).toBeVisible();
+
+    const backgroundButton = toolbar.getByLabel('Background');
+    const colorButton = backgroundButton
+      .locator('edgeless-color-button')
+      .first();
+    const color = await colorButton.locator('svg').getAttribute('fill');
+
+    expect(color).not.toBeNull();
+
+    await backgroundButton.click();
+
+    const customColorButton = colorPicker.locator(
+      'edgeless-color-custom-button'
+    );
+    const keptColor = await customColorButton.evaluate(e =>
+      e.style.getPropertyValue('--c')
+    );
+
+    expect(keptColor.startsWith('#')).toBe(true);
+    expect(keptColor.length).toBe(7);
+    expect(color).toBe(keptColor);
+  }
+
+  // shape
+  {
+    await dragView(page, [5425 - 10, 2658 - 10], [5425 + 20, 2658 + 20]);
+
+    await expect(toolbar).toBeVisible();
+
+    const colorButton = toolbar.getByLabel(/^Color$/);
+
+    await colorButton.click();
+
+    const fillCustomColorButton = colorPicker
+      .locator('edgeless-color-custom-button')
+      .first();
+    const strokeCustomColorButton = colorPicker
+      .locator('edgeless-color-custom-button')
+      .last();
+
+    const fillKeptColor = await fillCustomColorButton.evaluate(e =>
+      e.style.getPropertyValue('--c')
+    );
+    const strokeKeptColor = await strokeCustomColorButton.evaluate(e =>
+      e.style.getPropertyValue('--c')
+    );
+
+    expect(fillKeptColor.length).toBe(7);
+    expect(fillKeptColor.startsWith('#')).toBe(true);
+    expect(strokeKeptColor.length).toBe(7);
+    expect(strokeKeptColor.startsWith('#')).toBe(true);
+  }
+});

tests/kit/src/utils/attachment.ts

@@ -4,7 +4,11 @@ import { Path } from '../playwright';
 
 const fixturesDir = Path.dir(import.meta.url).join('../../../fixtures');
 
-export async function importAttachment(page: Page, file: string) {
+export async function importFile(
+  page: Page,
+  file: string,
+  fn?: (page: Page) => Promise<void>
+) {
   await page.evaluate(() => {
     // Force fallback to input[type=file] in tests
     // See https://github.com/microsoft/playwright/issues/8850
@@ -13,9 +17,15 @@ export async function importAttachment(page: Page, file: string) {
 
   const fileChooser = page.waitForEvent('filechooser');
 
-  // open slash menu
-  await page.keyboard.type('/attachment', { delay: 50 });
-  await page.keyboard.press('Enter');
+  if (fn) await fn(page);
 
   await (await fileChooser).setFiles(fixturesDir.join(file).value);
 }
+
+export async function importAttachment(page: Page, file: string) {
+  // open slash menu
+  await importFile(page, file, async page => {
+    await page.keyboard.type('/attachment', { delay: 50 });
+    await page.keyboard.press('Enter');
+  });
+}