refactor(editor): edgeless toolbar chevron down icon (#10898)

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>
         `}
       >

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>
         `}
       >

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>
         `}
       >

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>
         `}
       >

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>
         `}
       >

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>
       `}
     >

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>
             `}
           >

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>
       `}
     >