fix(editor): fix styles in editor tab extra (#736)

* fix(editor): fix styles in editor tab extra

* test(components): update tab test cases

Author: mortalYoung

src/components/tabs/__tests__/__snapshots__/tabs.test.tsx.snap

@@ -13,41 +13,35 @@ exports[`The Tabs Components The snapshot 1`] = `
       onContextMenu={[Function]}
     >
       test-title-1
-      <a
-        className="mo-tab__item__op"
+      <div
+        className="mo-tab__item__extra"
+        onClick={[Function]}
         onMouseOut={[Function]}
         onMouseOver={[Function]}
+        role="button"
       >
-        <div
-          className="mo-tab__item__op__button"
-          onClick={[Function]}
-        >
-          <span
-            className="codicon codicon-close"
-          />
-        </div>
-      </a>
+        <span
+          className="codicon codicon-close"
+        />
+      </div>
     </div>
     <div
       className="mo-tab__item"
       onClick={[Function]}
       onContextMenu={[Function]}
     >
       test-title-2
-      <a
-        className="mo-tab__item__op"
+      <div
+        className="mo-tab__item__extra"
+        onClick={[Function]}
         onMouseOut={[Function]}
         onMouseOver={[Function]}
+        role="button"
       >
-        <div
-          className="mo-tab__item__op__button"
-          onClick={[Function]}
-        >
-          <span
-            className="codicon codicon-close"
-          />
-        </div>
-      </a>
+        <span
+          className="codicon codicon-close"
+        />
+      </div>
     </div>
   </div>
 </div>

src/components/tabs/__tests__/tabExtra.test.tsx

@@ -17,8 +17,7 @@ describe('The Tab Component', () => {
     test('Should render with classNames', () => {
         const { container } = render(<TabExtra classNames="test" />);
         const wrapper = container.querySelector('.test');
-        const innerWrapper = wrapper?.querySelector('.test__button');
-        expect(innerWrapper).toBeInTheDocument();
+        expect(wrapper).toBeInTheDocument();
     });
 
     test('Should support to the click event', () => {
@@ -27,10 +26,9 @@ describe('The Tab Component', () => {
                 <TabExtra classNames="test" onClick={fn} />
             );
             const wrapper = container.querySelector('.test');
-            const innerWrapper = wrapper?.querySelector('.test__button');
-            expect(innerWrapper).not.toBeUndefined();
+            expect(wrapper).not.toBeUndefined();
 
-            fireEvent.click(innerWrapper!);
+            fireEvent.click(wrapper!);
         });
     });
 

src/components/tabs/__tests__/tabs.test.tsx

@@ -3,7 +3,12 @@ import { cleanup, fireEvent, render, waitFor } from '@testing-library/react';
 import renderer from 'react-test-renderer';
 import '@testing-library/jest-dom';
 import { Tabs, tabsClassName } from '..';
-import { ITabProps, tabItemActiveClassName, tabItemClassName } from '../tab';
+import {
+    ITabProps,
+    tabItemActiveClassName,
+    tabItemClassName,
+    tabItemExtraClassName,
+} from '../tab';
 import { dragToTargetNode } from '@test/utils';
 
 const mockData: ITabProps[] = [
@@ -98,7 +103,9 @@ describe('The Tabs Components', () => {
         fireEvent.contextMenu(testHeader);
         expect(mockContextFn).toBeCalled();
 
-        fireEvent.mouseOver(testHeader.querySelector('.mo-tab__item__op')!);
+        fireEvent.mouseOver(
+            testHeader.querySelector(`.${tabItemExtraClassName}`)!
+        );
         await waitFor(() => {
             fireEvent.click(testHeader.querySelector('.codicon-close')!);
         });

src/components/tabs/style.scss

@@ -58,41 +58,24 @@
             }
         }
 
-        &:hover {
-            #{$tab}__item__op {
-                opacity: 1;
-            }
-        }
-
-        &__status,
-        &__op {
+        &__extra {
             font-size: 0;
-        }
-
-        &__op {
-            color: var(--icon-foreground);
-            margin-left: 10px;
-            opacity: 0;
-            transform: translateY(1px);
-            width: 20px;
+            padding: 0 4px;
 
-            &__close {
-                cursor: pointer;
-                display: block;
-                font-weight: 500;
-                height: 18px;
-                width: 18px;
+            .codicon-close {
+                opacity: 0;
             }
         }
 
+        &:hover .codicon-close,
+        &--active .codicon-close {
+            opacity: 1;
+        }
+
         &--active {
             background: var(--tab-activeBackground);
             border-bottom-color: var(--tab-activeBorder);
             color: var(--tab-activeForeground);
-
-            #{$tab}__item__op {
-                opacity: 1;
-            }
         }
 
         &--close {

src/components/tabs/tab.tsx

@@ -60,6 +60,7 @@ export const tabItemActiveClassName = getBEMModifier(
     'active'
 );
 export const tabItemLabelClassName = getBEMElement(tabItemClassName, 'label');
+export const tabItemExtraClassName = getBEMElement(tabItemClassName, 'extra');
 
 /**
  * The type definition for The Tab Component
@@ -152,10 +153,7 @@ export function Tab({ tab, active, ...restEvents }: ITabComponent) {
             {name}
             {(typeof closable === 'undefined' || closable) && (
                 <TabExtra
-                    classNames={getBEMElement(
-                        tabItemClassName,
-                        status ? 'status' : 'op'
-                    )}
+                    classNames={tabItemExtraClassName}
                     onClick={(e) => {
                         e.stopPropagation();
                         onCloseTab?.(id);

src/components/tabs/tabExtra.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { getBEMElement } from 'mo/common/className';
 
 interface ITabExtraProps {
     classNames?: string;
@@ -19,17 +18,14 @@ export default ({ onClick, classNames = '', renderStatus }: ITabExtraProps) => {
     };
 
     return (
-        <a
+        <div
+            role="button"
             className={classNames}
+            onClick={onClick}
             onMouseOver={handleMouseOver}
             onMouseOut={handleMouseOut}
         >
-            <div
-                className={getBEMElement(classNames, 'button')}
-                onClick={onClick}
-            >
-                {renderStatus?.(hover)}
-            </div>
-        </a>
+            {renderStatus?.(hover)}
+        </div>
     );
 };

stories/extensions/test/testPane.tsx

@@ -209,6 +209,17 @@ export type GenericClassDecorator<T> = (target: T) => void;`,
             molecule.editor.open(tabData);
         };
 
+        const toggleEditorStatus = () => {
+            const { current } = molecule.editor.getState();
+            if (current?.tab) {
+                molecule.editor.updateTab({
+                    id: current.tab.id,
+                    status:
+                        current.tab.status === 'edited' ? undefined : 'edited',
+                });
+            }
+        };
+
         const updateEntryPage = () => {
             const style: React.CSSProperties = {
                 display: 'flex',
@@ -412,6 +423,9 @@ PARTITIONED BY (DE STRING) LIFECYCLE 1000;
                     <div style={{ marginBottom: 50 }}>
                         <h2>Simple examples:</h2>
                         <Button onClick={newEditor}>New Editor</Button>
+                        <Button onClick={toggleEditorStatus}>
+                            Toggle Editor status
+                        </Button>
                         <Button onClick={updateEntryPage}>
                             Update Entry Page
                         </Button>