fix: add close transition & optimization example

hellof2e · Nov 9, 2022 · 13e3a60 · 13e3a60
1 parent 2c1f018
commit 13e3a60
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 21 deletions.
diff --git a/packages/quark/src/popup/doc-react.en-US.md b/packages/quark/src/popup/doc-react.en-US.md
@@ -16,20 +16,15 @@ import { Popup } from "@quarkd/quark-react";
 export default () => {
   const [open, setOpen] = useState(false);
 
-  const handleClsoe = () => {
-    setOpen(false);
-  };
+  const handleClose = () => setOpen(false);
+  const handleOpen = () => setOpen(true);
 
   return (
     <div>
-      <div
-        onClick={() => {
-          setOpen(true);
-        }}
-      >
+      <div onClick={handleOpen}>
         Basic Usage
       </div>
-      <PopUp open={open} onClosed={handleClsoe}>
+      <PopUp open={open} onClosed={handleClose}>
         <div>First Line</div>
         <div>Second Line</div>
         <div>Third Line</div>

diff --git a/packages/quark/src/popup/doc-react.zh-CN.md b/packages/quark/src/popup/doc-react.zh-CN.md
@@ -16,20 +16,15 @@ import { Popup } from "@quarkd/quark-react";
 export default () => {
   const [open, setOpen] = useState(false);
 
-  const handleClsoe = () => {
-    setOpen(false);
-  };
+  const handleClose = () => setOpen(false);
+  const handleOpen = () => setOpen(true);
 
   return (
     <div>
-      <div
-        onClick={() => {
-          setOpen(true);
-        }}
-      >
+      <div onClick={handleOpen}>
         基本使用
       </div>
-      <PopUp open={open} onClosed={handleClsoe}>
+      <PopUp open={open} onClosed={handleClose}>
         <div>第二行</div>
         <div>第三行</div>
         <div>第四行</div>

diff --git a/packages/quark/src/popup/index.tsx b/packages/quark/src/popup/index.tsx
@@ -118,12 +118,12 @@ class QuarkPopup extends QuarkElement {
       <Fragment>
         <div class="quark-popup" ref={this.wrap}>
           {this.closeable && this.position === "bottom" && (
-            <div
+            <button
               class="quark-popup-close-btn"
               onClick={this.handleCloseBtnClick}
             >
               <quark-icon-close size="24" />
-            </div>
+            </button>
           )}
           <slot></slot>
         </div>

diff --git a/packages/quark/src/popup/style.css b/packages/quark/src/popup/style.css
@@ -30,6 +30,7 @@
 
 :host .quark-popup {
   display: flex;
+  padding: 24px;
   flex-direction: column;
   justify-content: flex-start;
   box-sizing: border-box;
@@ -55,8 +56,10 @@
   right: quark-hSpacingXs;
   top: quark-vSpacingXs;
   border: 0;
-  color: #bcc4cc;
+  color: #00000073;
+  transition: color .3s;
   font-size: 20px;
+  background: 0 0;
   padding: 0;
   width: 40px;
   height: 40px;
@@ -66,6 +69,9 @@
   justify-content: center;
   cursor: pointer;
 }
+:host .quark-popup-close-btn :hover {
+  color: #bcc4cc;
+}
 
 :host([safearea][position="bottom"]) .quark-popup {
   padding-bottom: constant(safe-area-inset-bottom);