From 831f290f848db67b68a2e0118f829876f500245c Mon Sep 17 00:00:00 2001
From: fundon <fundon@pindash.io>
Date: Thu, 20 Mar 2025 02:08:20 +0000
Subject: [PATCH] refactor(editor): edgeless toolbar chevron down icon (#10898)

---
 .../src/embed-linked-doc-block/configs/toolbar.ts      |  4 ++--
 .../src/embed-synced-doc-block/configs/toolbar.ts      |  4 ++--
 .../components/edgeless-note-border-dropdown-menu.ts   |  5 +++--
 .../edgeless-note-display-mode-dropdown-menu.ts        |  4 ++--
 .../components/edgeless-note-shadow-dropdown-menu.ts   |  8 +++-----
 .../src/edgeless/configs/toolbar/alignment.ts          |  4 ++--
 .../src/edgeless/configs/toolbar/text-common.ts        |  7 ++++---
 .../block-root/src/edgeless/configs/toolbar/utils.ts   |  4 ++--
 .../src/highlight-dropdown-menu/dropdown-menu.ts       |  6 +++---
 .../components/src/size-dropdown-menu/dropdown-menu.ts |  6 +++---
 .../affine/components/src/toolbar/chevron-down.ts      |  7 +++++++
 blocksuite/affine/components/src/toolbar/index.ts      |  1 +
 .../components/src/view-dropdown-menu/dropdown-menu.ts |  5 +++--
 .../extensions/editor-config/toolbar/index.ts          | 10 +++++-----
 14 files changed, 42 insertions(+), 33 deletions(-)
 create mode 100644 blocksuite/affine/components/src/toolbar/chevron-down.ts

diff --git a/blocksuite/affine/blocks/block-embed/src/embed-linked-doc-block/configs/toolbar.ts b/blocksuite/affine/blocks/block-embed/src/embed-linked-doc-block/configs/toolbar.ts
index 4390513efe..ed5586ede6 100644
--- a/blocksuite/affine/blocks/block-embed/src/embed-linked-doc-block/configs/toolbar.ts
+++ b/blocksuite/affine/blocks/block-embed/src/embed-linked-doc-block/configs/toolbar.ts
@@ -1,4 +1,5 @@
 import { toast } from '@blocksuite/affine-components/toast';
+import { EditorChevronDown } from '@blocksuite/affine-components/toolbar';
 import {
   type EmbedCardStyle,
   EmbedLinkedDocModel,
@@ -25,7 +26,6 @@ import {
 import { BlockFlavourIdentifier } from '@blocksuite/block-std';
 import { Bound } from '@blocksuite/global/gfx';
 import {
-  ArrowDownSmallIcon,
   CaptionIcon,
   CopyIcon,
   DeleteIcon,
@@ -136,7 +136,7 @@ const openDocActionGroup = {
         .contentPadding="${'8px'}"
         .button=${html`
           <editor-icon-button aria-label="Open doc" .tooltip=${'Open doc'}>
-            ${OpenInNewIcon()} ${ArrowDownSmallIcon()}
+            ${OpenInNewIcon()} ${EditorChevronDown}
           </editor-icon-button>
         `}
       >
diff --git a/blocksuite/affine/blocks/block-embed/src/embed-synced-doc-block/configs/toolbar.ts b/blocksuite/affine/blocks/block-embed/src/embed-synced-doc-block/configs/toolbar.ts
index b652e711a1..5f978c502a 100644
--- a/blocksuite/affine/blocks/block-embed/src/embed-synced-doc-block/configs/toolbar.ts
+++ b/blocksuite/affine/blocks/block-embed/src/embed-synced-doc-block/configs/toolbar.ts
@@ -1,4 +1,5 @@
 import { toast } from '@blocksuite/affine-components/toast';
+import { EditorChevronDown } from '@blocksuite/affine-components/toolbar';
 import { EmbedSyncedDocModel } from '@blocksuite/affine-model';
 import {
   ActionPlacement,
@@ -14,7 +15,6 @@ import { getBlockProps } from '@blocksuite/affine-shared/utils';
 import { BlockFlavourIdentifier } from '@blocksuite/block-std';
 import { Bound } from '@blocksuite/global/gfx';
 import {
-  ArrowDownSmallIcon,
   CaptionIcon,
   CopyIcon,
   DeleteIcon,
@@ -89,7 +89,7 @@ const openDocActionGroup = {
         .contentPadding="${'8px'}"
         .button=${html`
           <editor-icon-button aria-label="Open doc" .tooltip=${'Open doc'}>
-            ${OpenInNewIcon()} ${ArrowDownSmallIcon()}
+            ${OpenInNewIcon()} ${EditorChevronDown}
           </editor-icon-button>
         `}
       >
diff --git a/blocksuite/affine/blocks/block-note/src/components/edgeless-note-border-dropdown-menu.ts b/blocksuite/affine/blocks/block-note/src/components/edgeless-note-border-dropdown-menu.ts
index 735b32b146..2cea67a0c9 100644
--- a/blocksuite/affine/blocks/block-note/src/components/edgeless-note-border-dropdown-menu.ts
+++ b/blocksuite/affine/blocks/block-note/src/components/edgeless-note-border-dropdown-menu.ts
@@ -1,6 +1,7 @@
+import { EditorChevronDown } from '@blocksuite/affine-components/toolbar';
 import { LineWidth, type StrokeStyle } from '@blocksuite/affine-model';
 import { ShadowlessElement } from '@blocksuite/block-std';
-import { ArrowDownSmallIcon, LineStyleIcon } from '@blocksuite/icons/lit';
+import { LineStyleIcon } from '@blocksuite/icons/lit';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 
@@ -15,7 +16,7 @@ export class EdgelessNoteBorderDropdownMenu extends ShadowlessElement {
             aria-label="Border style"
             .tooltip="${'Border style'}"
           >
-            ${LineStyleIcon()} ${ArrowDownSmallIcon()}
+            ${LineStyleIcon()} ${EditorChevronDown}
           </editor-icon-button>
         `}
       >
diff --git a/blocksuite/affine/blocks/block-note/src/components/edgeless-note-display-mode-dropdown-menu.ts b/blocksuite/affine/blocks/block-note/src/components/edgeless-note-display-mode-dropdown-menu.ts
index b9d02eb4ec..b459148698 100644
--- a/blocksuite/affine/blocks/block-note/src/components/edgeless-note-display-mode-dropdown-menu.ts
+++ b/blocksuite/affine/blocks/block-note/src/components/edgeless-note-display-mode-dropdown-menu.ts
@@ -1,6 +1,6 @@
+import { EditorChevronDown } from '@blocksuite/affine-components/toolbar';
 import { NoteDisplayMode } from '@blocksuite/affine-model';
 import { ShadowlessElement } from '@blocksuite/block-std';
-import { ArrowDownSmallIcon } from '@blocksuite/icons/lit';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 
@@ -34,7 +34,7 @@ export class EdgelessNoteDisplayModeDropdownMenu extends ShadowlessElement {
             .labelHeight="${'20px'}"
           >
             <span class="label">${mode}</span>
-            ${ArrowDownSmallIcon()}
+            ${EditorChevronDown}
           </editor-icon-button>
         `}
       >
diff --git a/blocksuite/affine/blocks/block-note/src/components/edgeless-note-shadow-dropdown-menu.ts b/blocksuite/affine/blocks/block-note/src/components/edgeless-note-shadow-dropdown-menu.ts
index 55f1979b89..80ca8850d7 100644
--- a/blocksuite/affine/blocks/block-note/src/components/edgeless-note-shadow-dropdown-menu.ts
+++ b/blocksuite/affine/blocks/block-note/src/components/edgeless-note-shadow-dropdown-menu.ts
@@ -1,8 +1,6 @@
+import { EditorChevronDown } from '@blocksuite/affine-components/toolbar';
 import { ColorScheme, NoteShadow } from '@blocksuite/affine-model';
-import {
-  ArrowDownSmallIcon,
-  NoteShadowDuotoneIcon,
-} from '@blocksuite/icons/lit';
+import { NoteShadowDuotoneIcon } from '@blocksuite/icons/lit';
 import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -119,7 +117,7 @@ export class EdgelessNoteShadowDropdownMenu extends LitElement {
             aria-label="Shadow style"
             .tooltip="${'Shadow style'}"
           >
-            ${NoteShadowDuotoneIcon()} ${ArrowDownSmallIcon()}
+            ${NoteShadowDuotoneIcon()} ${EditorChevronDown}
           </editor-icon-button>
         `}
       >
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/alignment.ts b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/alignment.ts
index fac7743a80..0d22c87b6b 100644
--- a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/alignment.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/alignment.ts
@@ -4,6 +4,7 @@ import {
   EdgelessCRUDIdentifier,
   updateXYWH,
 } from '@blocksuite/affine-block-surface';
+import { EditorChevronDown } from '@blocksuite/affine-components/toolbar';
 import type { ToolbarContext } from '@blocksuite/affine-shared/services';
 import type { GfxModel } from '@blocksuite/block-std/gfx';
 import { Bound } from '@blocksuite/global/gfx';
@@ -14,7 +15,6 @@ import {
   AlignRightIcon,
   AlignTopIcon,
   AlignVerticalCenterIcon,
-  ArrowDownSmallIcon,
   AutoTidyUpIcon,
   DistributeHorizontalIcon,
   DistributeVerticalIcon,
@@ -272,7 +272,7 @@ export function renderAlignmentMenu(
           aria-label="${label}"
           .tooltip="${tooltip ?? label}"
         >
-          ${icon} ${ArrowDownSmallIcon()}
+          ${icon} ${EditorChevronDown}
         </editor-icon-button>
       `}
     >
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/text-common.ts b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/text-common.ts
index 2264958f23..6bc1df7fb6 100644
--- a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/text-common.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/text-common.ts
@@ -6,6 +6,7 @@ import {
   packColor,
   type PickColorEvent,
 } from '@blocksuite/affine-components/color-picker';
+import { EditorChevronDown } from '@blocksuite/affine-components/toolbar';
 import {
   DefaultTheme,
   FontFamily,
@@ -26,7 +27,6 @@ import {
 } from '@blocksuite/affine-shared/utils';
 import type { GfxModel } from '@blocksuite/block-std/gfx';
 import {
-  ArrowDownSmallIcon,
   TextAlignCenterIcon,
   TextAlignLeftIcon,
   TextAlignRightIcon,
@@ -157,7 +157,8 @@ export function createTextActions<
               >
                 <span class="label padding0" style=${styleMap(styleInfo)}
                   >Aa</span
-                >${ArrowDownSmallIcon()}
+                >
+                ${EditorChevronDown}
               </editor-icon-button>
             `}
           >
@@ -285,7 +286,7 @@ export function createTextActions<
                     'key'
                   )}
                 </span>
-                ${ArrowDownSmallIcon()}
+                ${EditorChevronDown}
               </editor-icon-button>
             `}
           >
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/utils.ts b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/utils.ts
index e44138cf50..21443dc2cc 100644
--- a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/utils.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/utils.ts
@@ -1,5 +1,5 @@
+import { EditorChevronDown } from '@blocksuite/affine-components/toolbar';
 import type { ToolbarContext } from '@blocksuite/affine-shared/services';
-import { ArrowDownSmallIcon } from '@blocksuite/icons/lit';
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -31,7 +31,7 @@ export function renderMenu<T>({
           .tooltip="${tooltip ?? label}"
         >
           ${icon ?? renderCurrentMenuItemWith(items, currentValue, 'icon')}
-          ${ArrowDownSmallIcon()}
+          ${EditorChevronDown}
         </editor-icon-button>
       `}
     >
diff --git a/blocksuite/affine/components/src/highlight-dropdown-menu/dropdown-menu.ts b/blocksuite/affine/components/src/highlight-dropdown-menu/dropdown-menu.ts
index e85c58df32..ec164f1185 100644
--- a/blocksuite/affine/components/src/highlight-dropdown-menu/dropdown-menu.ts
+++ b/blocksuite/affine/components/src/highlight-dropdown-menu/dropdown-menu.ts
@@ -1,12 +1,13 @@
 import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
 import { PropTypes, requiredProperties } from '@blocksuite/block-std';
-import { ArrowDownSmallIcon } from '@blocksuite/icons/lit';
 import { LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { html } from 'lit-html';
 import { repeat } from 'lit-html/directives/repeat.js';
 
+import { EditorChevronDown } from '../toolbar';
+
 const colors = [
   'default',
   'red',
@@ -56,8 +57,7 @@ export class HighlightDropdownMenu extends LitElement {
                   'var(--affine-text-primary-color)',
               })}
             ></affine-highlight-duotone-icon>
-
-            ${ArrowDownSmallIcon()}
+            ${EditorChevronDown}
           </editor-icon-button>
         `}
       >
diff --git a/blocksuite/affine/components/src/size-dropdown-menu/dropdown-menu.ts b/blocksuite/affine/components/src/size-dropdown-menu/dropdown-menu.ts
index 8da59ed31b..a34e581b60 100644
--- a/blocksuite/affine/components/src/size-dropdown-menu/dropdown-menu.ts
+++ b/blocksuite/affine/components/src/size-dropdown-menu/dropdown-menu.ts
@@ -1,7 +1,7 @@
 import { stopPropagation } from '@blocksuite/affine-shared/utils';
 import { PropTypes, requiredProperties } from '@blocksuite/block-std';
 import { SignalWatcher } from '@blocksuite/global/lit';
-import { ArrowDownSmallIcon, DoneIcon } from '@blocksuite/icons/lit';
+import { DoneIcon } from '@blocksuite/icons/lit';
 import type { ReadonlySignal, Signal } from '@preact/signals-core';
 import { css, html, LitElement, type TemplateResult } from 'lit';
 import { property, query } from 'lit/decorators.js';
@@ -9,7 +9,7 @@ import { repeat } from 'lit-html/directives/repeat.js';
 import { when } from 'lit-html/directives/when.js';
 import clamp from 'lodash-es/clamp';
 
-import type { EditorMenuButton } from '../toolbar';
+import { EditorChevronDown, type EditorMenuButton } from '../toolbar';
 
 type SizeItem = { key?: string | number; value: number };
 
@@ -145,7 +145,7 @@ export class SizeDropdownMenu extends SignalWatcher(LitElement) {
           >
             ${icon ??
             html`<span class="label">${format?.(size) ?? size}</span>`}
-            ${ArrowDownSmallIcon()}
+            ${EditorChevronDown}
           </editor-icon-button>
         `}
       >
diff --git a/blocksuite/affine/components/src/toolbar/chevron-down.ts b/blocksuite/affine/components/src/toolbar/chevron-down.ts
new file mode 100644
index 0000000000..e63f8e416d
--- /dev/null
+++ b/blocksuite/affine/components/src/toolbar/chevron-down.ts
@@ -0,0 +1,7 @@
+import { ArrowDownSmallIcon } from '@blocksuite/icons/lit';
+
+export const EditorChevronDown = ArrowDownSmallIcon({
+  style: 'display: flex;',
+  width: '16px',
+  height: '16px',
+});
diff --git a/blocksuite/affine/components/src/toolbar/index.ts b/blocksuite/affine/components/src/toolbar/index.ts
index e215c4ef6c..1710ee7ea5 100644
--- a/blocksuite/affine/components/src/toolbar/index.ts
+++ b/blocksuite/affine/components/src/toolbar/index.ts
@@ -8,6 +8,7 @@ import { EditorToolbarSeparator } from './separator.js';
 import { EditorToolbar } from './toolbar.js';
 import { Tooltip } from './tooltip.js';
 
+export { EditorChevronDown } from './chevron-down.js';
 export { ToolbarMoreMenuConfigExtension } from './config.js';
 export { EditorIconButton } from './icon-button.js';
 export {
diff --git a/blocksuite/affine/components/src/view-dropdown-menu/dropdown-menu.ts b/blocksuite/affine/components/src/view-dropdown-menu/dropdown-menu.ts
index e4f8128663..d88b2b1af8 100644
--- a/blocksuite/affine/components/src/view-dropdown-menu/dropdown-menu.ts
+++ b/blocksuite/affine/components/src/view-dropdown-menu/dropdown-menu.ts
@@ -4,7 +4,6 @@ import {
 } from '@blocksuite/affine-shared/services';
 import { PropTypes, requiredProperties } from '@blocksuite/block-std';
 import { SignalWatcher } from '@blocksuite/global/lit';
-import { ArrowDownSmallIcon } from '@blocksuite/icons/lit';
 import type { ReadonlySignal, Signal } from '@preact/signals-core';
 import { LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -12,6 +11,8 @@ import { html } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { repeat } from 'lit-html/directives/repeat.js';
 
+import { EditorChevronDown } from '../toolbar';
+
 @requiredProperties({
   actions: PropTypes.array,
   context: PropTypes.instanceOf(ToolbarContext),
@@ -46,7 +47,7 @@ export class ViewDropdownMenu extends SignalWatcher(LitElement) {
             .iconContainerWidth="${'110px'}"
           >
             <span class="label">${viewType}</span>
-            ${ArrowDownSmallIcon()}
+            ${EditorChevronDown}
           </editor-icon-button>
         `}
       >
diff --git a/packages/frontend/core/src/blocksuite/extensions/editor-config/toolbar/index.ts b/packages/frontend/core/src/blocksuite/extensions/editor-config/toolbar/index.ts
index 4b3150c5ee..98d4c10b61 100644
--- a/packages/frontend/core/src/blocksuite/extensions/editor-config/toolbar/index.ts
+++ b/packages/frontend/core/src/blocksuite/extensions/editor-config/toolbar/index.ts
@@ -35,9 +35,10 @@ import {
 } from '@blocksuite/affine/components/notification';
 import { isPeekable, peek } from '@blocksuite/affine/components/peek';
 import { toast } from '@blocksuite/affine/components/toast';
-import type {
-  MenuContext,
-  MenuItemGroup,
+import {
+  EditorChevronDown,
+  type MenuContext,
+  type MenuItemGroup,
 } from '@blocksuite/affine/components/toolbar';
 import { watch } from '@blocksuite/affine/global/lit';
 import {
@@ -69,7 +70,6 @@ import {
 import { matchModels } from '@blocksuite/affine/shared/utils';
 import type { ExtensionType } from '@blocksuite/affine/store';
 import {
-  ArrowDownSmallIcon,
   CenterPeekIcon,
   CopyAsImgaeIcon,
   CopyIcon,
@@ -617,7 +617,7 @@ function renderOpenDocMenu(
           .contentPadding="${'8px'}"
           .button=${html`
             <editor-icon-button aria-label="Open doc" .tooltip=${'Open doc'}>
-              ${OpenInNewIcon()} ${ArrowDownSmallIcon()}
+              ${OpenInNewIcon()} ${EditorChevronDown}
             </editor-icon-button>
           `}
         >