chore: スタイル無しボタンの定義の整理 (#1710)

* chore: rename unstyled button and simplify importing * chore: modify to use common unstyled button
kufu · Jul 1, 2021 · b55cc3d · b55cc3d
1 parent f82fe2c
commit b55cc3d
Show file tree

Hide file tree

Showing 9 changed files with 14 additions and 42 deletions.
diff --git a/src/components/BackgroundJobsPanel/BackgroundJobsPanel.tsx b/src/components/BackgroundJobsPanel/BackgroundJobsPanel.tsx
@@ -4,8 +4,7 @@ import { useId } from '../../hooks/useId'
 
 import { Theme, useTheme } from '../../hooks/useTheme'
 import { Base } from '../Base'
-import { SecondaryButton } from '../Button'
-import { ResetButton } from '../Button/ResetButton'
+import { SecondaryButton, UnstyledButton } from '../Button'
 import { FaMinusIcon, FaTimesIcon, FaWindowMaximizeIcon } from '../Icon'
 import { JobIcon } from './JobIcon'
 import { OmittableJobText } from './OmittableJobText'
@@ -195,7 +194,7 @@ const JobDesc = styled(OmittableJobText)<{ themes: Theme }>(
     `
   },
 )
-const CancelButton = styled(ResetButton)<{ themes: Theme }>(
+const CancelButton = styled(UnstyledButton)<{ themes: Theme }>(
   ({ themes: { color, fontSize, spacingByChar } }) => {
     return css`
       flex-shrink: 0;

diff --git a/src/components/Button/ResetButton.tsx → src/components/Button/UnstyledButton.tsx b/src/components/Button/ResetButton.tsx → src/components/Button/UnstyledButton.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-export const ResetButton = styled.button`
+export const UnstyledButton = styled.button`
   appearance: none;
   display: inline;
   align-items: stretch;

diff --git a/src/components/Button/index.ts b/src/components/Button/index.ts
@@ -3,3 +3,4 @@ export { SecondaryButton, SecondaryButtonAnchor } from './SecondaryButton'
 export { DangerButton, DangerButtonAnchor } from './DangerButton'
 export { SkeletonButton, SkeletonButtonAnchor } from './SkeletonButton'
 export { TextButton, TextButtonAnchor } from './TextButton'
+export { UnstyledButton } from './UnstyledButton'
diff --git a/src/components/Calendar/CalendarTable.tsx b/src/components/Calendar/CalendarTable.tsx
@@ -5,7 +5,7 @@ import dayjs from 'dayjs'
 import { Theme, useTheme } from '../../hooks/useTheme'
 import { useClassNames } from './useClassNames'
 import { daysInWeek, getMonthArray, isBetween } from './calendarHelper'
-import { ResetButton } from './ResetButton'
+import { UnstyledButton } from '../Button'
 
 type Props = {
   current: Date
@@ -136,7 +136,7 @@ const DateCell = styled.span<{ themes: Theme; isToday?: boolean; isSelected?: bo
     `}
   `}
 `
-const CellButton = styled(ResetButton)<{ themes: Theme }>(
+const CellButton = styled(UnstyledButton)<{ themes: Theme }>(
   ({ themes }) => css`
     display: flex;
     align-items: center;

diff --git a/src/components/Calendar/ResetButton.tsx b/src/components/Calendar/ResetButton.tsx
diff --git a/src/components/Calendar/YearPicker.tsx b/src/components/Calendar/YearPicker.tsx
@@ -3,7 +3,7 @@ import styled, { css } from 'styled-components'
 
 import { Theme, useTheme } from '../../hooks/useTheme'
 import { useClassNames } from './useClassNames'
-import { ResetButton } from './ResetButton'
+import { UnstyledButton } from '../Button'
 
 type Props = {
   selectedYear?: number
@@ -120,7 +120,7 @@ const YearWrapper = styled.span<{ themes: Theme; isThisYear?: boolean; isSelecte
     `
   },
 )
-const YearButton = styled(ResetButton)<{ themes: Theme }>`
+const YearButton = styled(UnstyledButton)<{ themes: Theme }>`
   width: 25%;
   height: 43px;
   display: flex;

diff --git a/src/components/ComboBox/MultiComboBox.tsx b/src/components/ComboBox/MultiComboBox.tsx
@@ -15,7 +15,7 @@ import { useClassNames } from './useClassNames'
 
 import { FaCaretDownIcon, FaTimesCircleIcon } from '../Icon'
 import { useListBox } from './useListBox'
-import { ResetButton } from '../Button/ResetButton'
+import { UnstyledButton } from '../Button'
 import { Item } from './types'
 
 type Props<T> = {
@@ -375,7 +375,7 @@ const SelectedItemLabel = styled.span<{ themes: Theme }>`
     `
   }}
 `
-const DeleteButton = styled(ResetButton)<{ themes: Theme; disabled: boolean }>`
+const DeleteButton = styled(UnstyledButton)<{ themes: Theme; disabled: boolean }>`
   ${({ themes: { spacingByChar, shadow }, disabled }) => {
     return css`
       padding: calc(${spacingByChar(0.5)} - ${borderWidth}px);

diff --git a/src/components/ComboBox/SingleComboBox.tsx b/src/components/ComboBox/SingleComboBox.tsx
@@ -15,7 +15,7 @@ import { useClassNames } from './useClassNames'
 
 import { Input } from '../Input'
 import { FaCaretDownIcon, FaTimesCircleIcon } from '../Icon'
-import { ResetButton } from '../Button/ResetButton'
+import { UnstyledButton } from '../Button'
 import { useListBox } from './useListBox'
 import { Item } from './types'
 
@@ -310,7 +310,7 @@ const CaretDownWrapper = styled.span<{ themes: Theme }>(({ themes }) => {
     border-left: ${border.shorthand};
   `
 })
-const ClearButton = styled(ResetButton)<{ themes: Theme }>`
+const ClearButton = styled(UnstyledButton)<{ themes: Theme }>`
   ${({ themes }) => {
     const { spacingByChar } = themes
     return css`

diff --git a/src/components/SideNav/SideNavItem.tsx b/src/components/SideNav/SideNavItem.tsx
@@ -3,7 +3,7 @@ import styled, { css } from 'styled-components'
 
 import { Theme, useTheme } from '../../hooks/useTheme'
 import { isTouchDevice } from '../../libs/ua'
-import { ResetButton } from '../Button/ResetButton'
+import { UnstyledButton } from '../Button'
 import { useClassNames } from './useClassNames'
 
 export type SideNavSizeType = 'default' | 's'
@@ -77,7 +77,7 @@ const Wrapper = styled.li<{ themes: Theme }>`
   }}
 `
 
-const Button = styled(ResetButton)<{ themes: Theme }>`
+const Button = styled(UnstyledButton)<{ themes: Theme }>`
   ${({ themes }) => {
     const { fontSize, spacingByChar } = themes