fix: ellipsis the title when width is too narrow (#412)

* fix: ellipsis the title when width is too narrow

* test: update snapshots with collapse

Author: mortalYoung

src/components/collapse/base.tsx

@@ -17,6 +17,10 @@ export const collapseHeaderClassName = getBEMElement(
     defaultCollapseClassName,
     'header'
 );
+export const collapseTitleClassName = getBEMElement(
+    collapseHeaderClassName,
+    'title'
+);
 export const collapseContentClassName = getBEMElement(
     defaultCollapseClassName,
     'content'

src/components/collapse/index.tsx

@@ -12,6 +12,7 @@ import {
     collapseHeaderClassName,
     collapseExtraClassName,
     collapseContentClassName,
+    collapseTitleClassName,
 } from './base';
 import { select } from 'mo/common/dom';
 
@@ -371,7 +372,9 @@ export function Collapse(props: ICollapseProps) {
                                             : 'chevron-right'
                                     }
                                 />
-                                {panel.name}
+                                <span className={collapseTitleClassName}>
+                                    {panel.name}
+                                </span>
                                 <div className={collapseExtraClassName}>
                                     {isActive && (
                                         <Toolbar

src/components/collapse/style.scss

@@ -49,6 +49,12 @@ $collapse__extra: #{$collapse}__extra;
         &:focus {
             border-color: var(--list-focusOutline);
         }
+
+        &__title {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
     }
 
     &__extra {

src/workbench/__tests__/__snapshots__/workbench.test.tsx.snap

@@ -134,7 +134,11 @@ exports[`Test Workbench Component Match The WorkbenchView snapshot 1`] = `
                           <span
                             class="codicon codicon-chevron-right"
                           />
-                          打开的编辑器
+                          <span
+                            class="mo-collapse__header__title"
+                          >
+                            打开的编辑器
+                          </span>
                           <div
                             class="mo-collapse__extra"
                           />
@@ -156,7 +160,11 @@ exports[`Test Workbench Component Match The WorkbenchView snapshot 1`] = `
                           <span
                             class="codicon codicon-chevron-right"
                           />
-                          无打开文件夹
+                          <span
+                            class="mo-collapse__header__title"
+                          >
+                            无打开文件夹
+                          </span>
                           <div
                             class="mo-collapse__extra"
                           />
@@ -193,7 +201,11 @@ exports[`Test Workbench Component Match The WorkbenchView snapshot 1`] = `
                           <span
                             class="codicon codicon-chevron-right"
                           />
-                          轮廓
+                          <span
+                            class="mo-collapse__header__title"
+                          >
+                            轮廓
+                          </span>
                           <div
                             class="mo-collapse__extra"
                           />

src/workbench/sidebar/__tests__/__snapshots__/explore.test.tsx.snap

@@ -61,7 +61,11 @@ exports[`The Explorer Component Match Snapshot 1`] = `
           <span
             className="codicon codicon-chevron-right"
           />
-          Open
+          <span
+            className="mo-collapse__header__title"
+          >
+            Open
+          </span>
           <div
             className="mo-collapse__extra"
           />
@@ -84,7 +88,11 @@ exports[`The Explorer Component Match Snapshot 1`] = `
           <span
             className="codicon codicon-chevron-right"
           />
-          test
+          <span
+            className="mo-collapse__header__title"
+          >
+            test
+          </span>
           <div
             className="mo-collapse__extra"
           />