ページ遷移前後で利用するコンポーネントによってButtonのスタイルが上書きされるバグを修正

packages/react/src/components/Button/__snapshots__/index.test.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`Basic <Button>Hello</Button> 1`] = `
 .c0 {
+  cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -20,7 +21,11 @@ exports[`Basic <Button>Hello</Button> 1`] = `
   margin: 0;
   overflow: visible;
   text-transform: none;
-  cursor: pointer;
+}
+
+.c0:disabled,
+.c0[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
 }
 
 .c0:focus {
@@ -32,11 +37,6 @@ exports[`Basic <Button>Hello</Button> 1`] = `
   padding: 0;
 }
 
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c1 {
   width: -webkit-min-content;
   width: -moz-min-content;
@@ -125,23 +125,41 @@ exports[`Basic <Button>Hello</Button> 1`] = `
 
 exports[`Link <Button to="#">Hello</Button> 1`] = `
 .c0 {
-  color: inherit;
   cursor: pointer;
-}
-
-.c0:focus {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: transparent;
+  padding: 0;
+  border-style: none;
   outline: none;
-}
-
-.c0 .text {
-  top: calc(1em + 2em);
+  color: inherit;
+  text-rendering: inherit;
+  -webkit-letter-spacing: inherit;
+  -moz-letter-spacing: inherit;
+  -ms-letter-spacing: inherit;
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  font: inherit;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
 }
 
 .c0:disabled,
 .c0[aria-disabled]:not([aria-disabled=false]) {
   cursor: default;
 }
 
+.c0:focus {
+  outline: none;
+}
+
+.c0::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
 .c1 {
   width: -webkit-min-content;
   width: -moz-min-content;
@@ -221,7 +239,6 @@ exports[`Link <Button to="#">Hello</Button> 1`] = `
 }
 
 <a
-  aria-disabled={false}
   className="c0 c1"
   href="#"
 >

packages/react/src/components/Clickable/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import styled, { css } from 'styled-components'
+import styled from 'styled-components'
 import {
   LinkProps,
   useComponentAbstraction,
@@ -28,34 +28,33 @@ export type ClickableElement = HTMLButtonElement & HTMLAnchorElement
 const Clickable = React.forwardRef<ClickableElement, ClickableProps>(
   function Clickable(props, ref) {
     const { Link } = useComponentAbstraction()
-    if ('to' in props) {
-      const { onClick, disabled = false, ...rest } = props
-      return (
-        <A<typeof Link>
-          {...rest}
-          as={disabled ? undefined : Link}
-          onClick={disabled ? undefined : onClick}
-          aria-disabled={disabled}
-          ref={ref}
-        />
-      )
-    } else {
-      return <Button {...props} ref={ref} />
+    const isLink = 'to' in props
+    const as = isLink ? Link : 'button'
+    const ariaDisabled = isLink && props.disabled === true ? true : undefined
+    let rest = props
+    if (isLink) {
+      const { disabled, ..._rest } = props
+      rest = _rest
     }
+    return (
+      <StyledClickableDiv
+        {...rest}
+        ref={ref}
+        as={as}
+        aria-disabled={ariaDisabled}
+      />
+    )
   }
 )
 export default Clickable
 
-const clickableCss = css`
-  /* Clickable style */
+const StyledClickableDiv = styled.div`
   cursor: pointer;
 
   ${disabledSelector} {
     cursor: default;
   }
-`
 
-const Button = styled.button`
   /* Reset button appearance */
   appearance: none;
   background: transparent;
@@ -88,21 +87,4 @@ const Button = styled.button`
     border-style: none;
     padding: 0;
   }
-
-  ${clickableCss}
-`
-
-const A = styled.span`
-  /* Reset a-tag appearance */
-  color: inherit;
-
-  &:focus {
-    outline: none;
-  }
-
-  .text {
-    top: calc(1em + 2em);
-  }
-
-  ${clickableCss}
 `