More button styles

Author: pomber

packages/mdx/src/mini-editor/code-browser.scss

@@ -1,3 +1,5 @@
+@import "../utils/mixins.scss";
+
 .ch-code-browser {
   display: flex;
   height: 100%;
@@ -45,9 +47,10 @@
 }
 
 .ch-code-browser-button {
+  @include button-reset;
+
   width: 1.5em;
   height: 1.5em;
-  cursor: pointer;
   min-width: 1.5em;
   min-height: 1.5em;
   position: absolute;

packages/mdx/src/mini-editor/dialog.scss

@@ -1,3 +1,5 @@
+@import "../utils/mixins.scss";
+
 .ch-no-scroll {
   overflow: hidden;
 }
@@ -15,10 +17,11 @@
 }
 
 .ch-expand-close {
+  @include button-reset;
+
   position: absolute;
   top: 10px;
   right: 10px;
-  cursor: pointer;
   color: white;
   width: 26px;
   height: 26px;

packages/mdx/src/mini-editor/editor-frame.tsx

@@ -167,7 +167,7 @@ function TabsContainer({
       )}
       {showFrameButtons ? <FrameButtons /> : <div />}
       {tabs.map(({ title, active, style }) => (
-        <button
+        <div
           key={title}
           title={title}
           data-ch-tab={panel}
@@ -198,10 +198,9 @@ function TabsContainer({
             ),
           }}
           onClick={onTabClick && (() => onTabClick(title))}
-          type="button"
         >
           <TabTitle title={title} />
-        </button>
+        </div>
       ))}
       <div style={{ flex: 1, minWidth: "0.8em" }} />
       {button}

packages/mdx/src/mini-editor/expand-button.tsx

@@ -94,44 +94,50 @@ function ExpandIcon({
   className?: string
 }) {
   return (
-    <svg
+    <button
+      type="button"
+      title="Expand"
       style={style}
       onClick={onClick}
       className={className}
-      fill="none"
-      stroke="currentColor"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      role="button"
     >
-      <title>Expand</title>
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth={2}
-        d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"
-      />
-    </svg>
+      <svg
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"
+        />
+      </svg>
+    </button>
   )
 }
 function CloseButton({ onClick }: { onClick: () => void }) {
   return (
-    <svg
+    <button
       onClick={onClick}
       className="ch-expand-close"
-      fill="none"
-      stroke="currentColor"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      role="button"
+      type="button"
+      title="Close"
     >
-      <title>Close</title>
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth={2}
-        d="M6 18L18 6M6 6l12 12"
-      />
-    </svg>
+      <svg
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M6 18L18 6M6 6l12 12"
+        />
+      </svg>
+    </button>
   )
 }

packages/mdx/src/mini-editor/index.scss

@@ -3,6 +3,7 @@
 @import "../smooth-code/index.scss";
 @import "./dialog.scss";
 @import "./code-browser.scss";
+@import "../utils/mixins.scss";
 
 /** tabs */
 
@@ -24,8 +25,6 @@
   color: rgba(255, 255, 255, 0.5);
   min-width: 0;
   border-bottom: 1px solid;
-  border-left: 1px solid transparent;
-  border-top: 1px solid transparent;
 }
 
 .ch-editor-tab-active {
@@ -98,23 +97,11 @@
 }
 
 .ch-editor-button {
+  @include button-reset;
+
   width: 1.5em;
   height: 1.5em;
-  cursor: pointer;
   min-width: 1.5em;
   min-height: 1.5em;
   margin-right: 0.8em;
-
-  &[type="button"] {
-    background-color: transparent;
-    border: 1px solid transparent;
-    color: inherit;
-  }
-
-  svg {
-    width: 1.5em;
-    height: 1.5em;
-    min-width: 1.5em;
-    min-height: 1.5em;
-  }
 }

packages/mdx/src/smooth-code/copy-button.tsx

@@ -14,6 +14,7 @@ export function CopyButton({
   return (
     <button
       type="button"
+      title="Copy code"
       className={className}
       style={style}
       onClick={() => {
@@ -30,8 +31,6 @@ export function CopyButton({
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <title>Copy</title>
-
         {copied ? (
           <path
             strokeLinecap="round"

packages/mdx/src/smooth-code/index.scss

@@ -1,3 +1,5 @@
+@import "../utils/mixins.scss";
+
 .ch-code-line-number {
   user-select: none;
   text-align: right;
@@ -28,10 +30,11 @@
 }
 
 .ch-code-button {
+  @include button-reset;
+
   position: absolute;
   top: 10px;
   right: 10px;
   width: 1.1em;
   height: 1.1em;
-  cursor: pointer;
 }

packages/mdx/src/utils/mixins.scss

@@ -0,0 +1,11 @@
+@mixin button-reset {
+  -webkit-appearance: button;
+  background-color: transparent;
+  background-image: none;
+  cursor: pointer;
+  color: inherit;
+  margin: 0;
+  padding: 0;
+  border: none;
+  font-size: inherit;
+}