fix docs examples & add focus state

orpic · Sep 7, 2020 · eed4e72 · eed4e72
1 parent 8d2456c
commit eed4e72
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 10 deletions.
diff --git a/docs/docs/modal-examples.mdx b/docs/docs/modal-examples.mdx
@@ -5,7 +5,9 @@ hide_title: true
 sidebar_label: Modal
 title: React Modal
 description: Create React Modal using reactjs-popup
----import SimpleModal from './../examples/SimpleModal.js';
+---
+
+import SimpleModal from './../examples/SimpleModal.js';
 
 import CustomModal from './../examples/CustomModal.js';
 
@@ -15,7 +17,7 @@ import CustomModal from './../examples/CustomModal.js';
 
 To create a simple modal with reactjs-popup you just need to add the 'modal' attribute to your popup component.
 
-```jsx live=true
+```jsx
 const Modal = () => (
   <Popup trigger={<button className="button"> Open Modal </button>} modal>
     <span> Modal content </span>
@@ -41,9 +43,9 @@ export default () => (
   >
     {close => (
       <div className="modal">
-        <a className="close" onClick={close}>
+        <button className="close" onClick={close}>
           &times;
-        </a>
+        </button>
         <div className="header"> Modal Title </div>
         <div className="content">
           {' '}

diff --git a/docs/docs/tooltip-examples.mdx b/docs/docs/tooltip-examples.mdx
@@ -70,7 +70,7 @@ const ToolTipPositions = () => (
           </button>
         }
         position={position}
-        on="hover"
+        on={['hover', 'focus']}
         arrow={position !== 'center center'}
       >
         <Card title={position} />

diff --git a/docs/examples/CustomModal.js b/docs/examples/CustomModal.js
@@ -21,9 +21,9 @@ const CustomModal = () => (
   >
     {close => (
       <div className="modal">
-        <a className="close" onClick={close}>
+        <button className="close" onClick={close}>
           &times;
-        </a>
+        </button>
         <div className="header"> Modal Title </div>
         <div className="content">
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque, a

diff --git a/docs/examples/Demo.js b/docs/examples/Demo.js
@@ -22,9 +22,9 @@ const CustomModal = () => (
   >
     {close => (
       <div className="modal">
-        <a className="close" onClick={close}>
+        <button className="close" onClick={close}>
           &times;
-        </a>
+        </button>
         <div className="header"> Modal Title </div>
         <div className="content">
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque, a

diff --git a/docs/examples/ToolTipPositions.js b/docs/examples/ToolTipPositions.js
@@ -29,7 +29,7 @@ const ToolTipPositions = () => (
           </button>
         }
         position={position}
-        on="hover"
+        on={['hover', 'focus']}
         arrow={position !== 'center center'}
       >
         <Card title={position} />

diff --git a/docs/examples/index.css b/docs/examples/index.css
@@ -111,6 +111,16 @@ html[data-theme='dark'] .menu-item:not(:first-child) {
   padding: 0.5rem;
 }
 
+/* a[href],
+area[href],
+input:not([disabled]),
+select:not([disabled]),
+textarea:not([disabled]), */
+
+button:not([disabled]):focus-within {
+  border: 2px solid #2196f3;
+}
+
 html[data-theme='dark'] .popup-content {
   background-color: rgb(41, 45, 62);
   color: #fff;