Merge pull request #403 from pixiv/toshusai/fix-clickable-style

ページ遷移前後で利用するコンポーネントによってButtonのスタイルが上書きされるバグを修正
pixiv · Oct 31, 2023 · 5eb9caf · 5eb9caf
2 parents 399bf17 + a97b008
commit 5eb9caf
Show file tree

Hide file tree

Showing 9 changed files with 238 additions and 222 deletions.
diff --git a/packages/react/src/components/Button/__snapshots__/index.story.storyshot b/packages/react/src/components/Button/__snapshots__/index.story.storyshot
diff --git a/packages/react/src/components/Clickable/__snapshots__/index.story.storyshot b/packages/react/src/components/Clickable/__snapshots__/index.story.storyshot
@@ -2,6 +2,7 @@
 
 exports[`Storyshots Clickable Button 1`] = `
 .c0 {
+  cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -20,7 +21,11 @@ exports[`Storyshots Clickable 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[`Storyshots Clickable Button 1`] = `
   padding: 0;
 }
 
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 <div
   data-dark={false}
 >
@@ -51,28 +51,45 @@ exports[`Storyshots Clickable Button 1`] = `
 
 exports[`Storyshots Clickable Link 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;
+}
+
 <div
   data-dark={false}
 >
   <a
-    aria-disabled={false}
     className="c0"
     href="#"
     onClick={[Function]}

diff --git a/packages/react/src/components/Clickable/index.tsx b/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}
 `
diff --git a/packages/react/src/components/DropdownSelector/Popover/__snapshots__/index.story.storyshot b/packages/react/src/components/DropdownSelector/Popover/__snapshots__/index.story.storyshot
@@ -2,6 +2,7 @@
 
 exports[`Storyshots DropdownSelector/Popover Basic 1`] = `
 .c0 {
+  cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -20,7 +21,11 @@ exports[`Storyshots DropdownSelector/Popover Basic 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[`Storyshots DropdownSelector/Popover Basic 1`] = `
   padding: 0;
 }
 
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c1 {
   width: -webkit-min-content;
   width: -moz-min-content;

diff --git a/packages/react/src/components/DropdownSelector/__snapshots__/index.story.storyshot b/packages/react/src/components/DropdownSelector/__snapshots__/index.story.storyshot
@@ -402,6 +402,7 @@ exports[`Storyshots DropdownSelector In Form Tag 1`] = `
 
 exports[`Storyshots DropdownSelector In Modal 1`] = `
 .c11 {
+  cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -420,7 +421,11 @@ exports[`Storyshots DropdownSelector In Modal 1`] = `
   margin: 0;
   overflow: visible;
   text-transform: none;
-  cursor: pointer;
+}
+
+.c11:disabled,
+.c11[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
 }
 
 .c11:focus {
@@ -432,11 +437,6 @@ exports[`Storyshots DropdownSelector In Modal 1`] = `
   padding: 0;
 }
 
-.c11:disabled,
-.c11[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c7 {
   display: inline-block;
   width: 100%;
@@ -844,7 +844,7 @@ exports[`Storyshots DropdownSelector In Modal 1`] = `
           </div>
         </div>
         <button
-          className="c11 c12 c13 sc-gWXbKe c13"
+          className="c11 c12 c13 sc-hiCibw c13"
           height={32}
           onClick={[Function]}
           size="S"
@@ -862,6 +862,7 @@ exports[`Storyshots DropdownSelector In Modal 1`] = `
 
 exports[`Storyshots DropdownSelector Playground 1`] = `
 .c0 {
+  cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -880,7 +881,11 @@ exports[`Storyshots DropdownSelector Playground 1`] = `
   margin: 0;
   overflow: visible;
   text-transform: none;
-  cursor: pointer;
+}
+
+.c0:disabled,
+.c0[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
 }
 
 .c0:focus {
@@ -892,11 +897,6 @@ exports[`Storyshots DropdownSelector Playground 1`] = `
   padding: 0;
 }
 
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c1 {
   width: -webkit-min-content;
   width: -moz-min-content;

diff --git a/packages/react/src/components/IconButton/__snapshots__/index.story.storyshot b/packages/react/src/components/IconButton/__snapshots__/index.story.storyshot
@@ -2,6 +2,7 @@
 
 exports[`Storyshots IconButton Default M 1`] = `
 .c0 {
+  cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -20,7 +21,11 @@ exports[`Storyshots IconButton Default M 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[`Storyshots IconButton Default M 1`] = `
   padding: 0;
 }
 
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c1 {
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -118,6 +118,7 @@ exports[`Storyshots IconButton Default M 1`] = `
 
 exports[`Storyshots IconButton Overlay M 1`] = `
 .c0 {
+  cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -136,7 +137,11 @@ exports[`Storyshots IconButton Overlay M 1`] = `
   margin: 0;
   overflow: visible;
   text-transform: none;
-  cursor: pointer;
+}
+
+.c0:disabled,
+.c0[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
 }
 
 .c0:focus {
@@ -148,11 +153,6 @@ exports[`Storyshots IconButton Overlay M 1`] = `
   padding: 0;
 }
 
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c1 {
   -webkit-user-select: none;
   -moz-user-select: none;