refactor(theme): improve active style for previewer

umijs · Aug 20, 2020 · 6de385c · 6de385c
1 parent 074a080
commit 6de385c
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 16 deletions.
diff --git a/packages/theme-default/src/builtins/Previewer.less b/packages/theme-default/src/builtins/Previewer.less
@@ -14,7 +14,8 @@
   }
 
   &-target {
-    border-color: #3d62d2;
+    border-color: fade(@c-primary, 50%);
+    box-shadow: 0 0 0 5px fade(@c-primary, 5%);
   }
 
   &-desc {
@@ -32,19 +33,18 @@
       margin-bottom: 0;
     }
 
-    &[title] {
+    &[data-title] {
       position: relative;
       padding-top: 1.2em;
-      pointer-events: none;
 
-      &::before {
-        content: attr(title);
+      > a:first-child {
         position: absolute;
         top: 0;
         left: 1em;
         margin-left: -4px;
         padding: 0 4px;
         color: @c-heading;
+        font-size: inherit;
         font-weight: 500;
         background-color: #fff;
         transform: translateY(-50%);

diff --git a/packages/theme-default/src/builtins/Previewer.tsx b/packages/theme-default/src/builtins/Previewer.tsx
@@ -9,6 +9,7 @@ import {
   useCopy,
   useLocaleProps,
   Link,
+  AnchorLink,
   IPreviewerComponentProps,
 } from 'dumi/theme';
 import SourceCode from './SourceCode';
@@ -79,15 +80,15 @@ const Previewer: React.FC<IPreviewerProps> = oProps => {
       >
         {props.children}
       </div>
-      <div
-        className="__dumi-default-previewer-desc"
-        onClick={() => {
-          history.push(`#${props.identifier}`);
-        }}
-        title={props.title}
-        // eslint-disable-next-line
-        dangerouslySetInnerHTML={{ __html: props.description }}
-      />
+      <div className="__dumi-default-previewer-desc" data-title={props.title}>
+        {props.title && <AnchorLink to={`#${props.identifier}`}>{props.title}</AnchorLink>}
+        {props.description && (
+          <div
+            // eslint-disable-next-line
+            dangerouslySetInnerHTML={{ __html: props.description }}
+          />
+        )}
+      </div>
       <div className="__dumi-default-previewer-actions">
         {openCSB && (
           <button

diff --git a/packages/theme-default/src/test/index.test.tsx b/packages/theme-default/src/test/index.test.tsx
@@ -196,7 +196,7 @@ describe('default theme', () => {
               }}
               dependencies={{}}
             >
-              <>demo-1</>
+              <>demo-1 Content</>
             </Previewer>
             <Previewer
               title="demo-2"
@@ -212,7 +212,7 @@ describe('default theme', () => {
               }}
               dependencies={{}}
             >
-              <>demo-2</>
+              <>demo-2 Content</>
             </Previewer>
           </>
         </Layout>