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

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

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

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',
+});

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 {

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