Merge pull request #421 from pixiv/feat/remove-charcoal-styled-from-d…

…ropdownselector feat/remove charcoal styled from dropdownselector
pixiv · Jan 9, 2024 · f104537 · f104537
2 parents a1c0ade + 8911df8
commit f104537
Show file tree

Hide file tree

Showing 10 changed files with 2,304 additions and 291 deletions.
diff --git a/jest.setup.ts b/jest.setup.ts
@@ -28,3 +28,16 @@ jest.mock('@react-aria/overlays', () => ({
   ...jest.requireActual('@react-aria/overlays'),
   Overlay: jest.fn(({ children }: { children: ReactNode }) => children),
 }))
+
+import type { OverlayTriggerProps } from 'react-stately'
+
+jest.mock('react-stately', () => ({
+  ...jest.requireActual('react-stately'),
+  useOverlayTriggerState: (args: OverlayTriggerProps) => {
+    const { useOverlayTriggerState } =
+      jest.requireActual<typeof import('react-stately')>('react-stately')
+    const state = useOverlayTriggerState(args)
+
+    return { ...state, isOpen: true }
+  },
+}))
diff --git a/packages/react/src/components/DropdownSelector/DropdownMenuItem.tsx b/packages/react/src/components/DropdownSelector/DropdownMenuItem.tsx
@@ -2,7 +2,6 @@ import styled from 'styled-components'
 import MenuItem, { MenuItemProps } from './MenuItem'
 import { MenuListContext } from './MenuList/MenuListContext'
 import { useContext } from 'react'
-import { theme } from '../../styled'
 import Icon from '../Icon'
 
 export type DropdownMenuItemProps = Omit<MenuItemProps<'div'>, 'as'>
@@ -27,14 +26,31 @@ export default function DropdownMenuItem(props: DropdownMenuItemProps) {
  * アイコンがない時を考慮して20px（16pxのwidthと4pxのgap）の余白をとる
  */
 const StyledSpan = styled.span<{ isSelected?: boolean }>`
-  ${theme((o) => [o.typography(14), o.font.text2])};
+  font-size: 14px;
+  line-height: 22px;
+  color: var(--charcoal-text2);
+  &::before {
+    display: block;
+    width: 0;
+    height: 0;
+    content: '';
+    margin-top: -4px;
+  }
+  &::after {
+    display: block;
+    width: 0;
+    height: 0;
+    content: '';
+    margin-bottom: -4px;
+  }
+
   display: flex;
   align-items: center;
   width: 100%;
   margin-left: ${({ isSelected }) => (isSelected === true ? 0 : 20)}px;
 `
 
 const Text2ColorIcon = styled(Icon)`
-  ${theme((o) => [o.font.text2])}
+  color: var(--charcoal-text2);
   padding-right: 4px;
 `
diff --git a/packages/react/src/components/DropdownSelector/ListItem/__snapshots__/index.story.storyshot b/packages/react/src/components/DropdownSelector/ListItem/__snapshots__/index.story.storyshot
@@ -126,11 +126,8 @@ exports[`Storyshots DropdownSelector/ListItem Basic 1`] = `
 }
 
 .c1:disabled,
-.c1[aria-disabled]:not([aria-disabled=false]) {
+.c1[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
-}
-
-.c1[aria-disabled="true"] {
   cursor: default;
 }
 

diff --git a/packages/react/src/components/DropdownSelector/ListItem/index.tsx b/packages/react/src/components/DropdownSelector/ListItem/index.tsx
@@ -1,6 +1,5 @@
 import { ReactNode } from 'react'
 import styled from 'styled-components'
-import { theme } from '../../../styled'
 
 export type CustomJSXElement =
   | keyof JSX.IntrinsicElements
@@ -44,15 +43,18 @@ const ItemDiv = styled.div`
   cursor: pointer;
   outline: none;
 
-  ${theme((o) => [o.padding.horizontal(16), o.disabled])}
+  padding-right: 16px;
+  padding-left: 16px;
 
-  &[aria-disabled="true"] {
+  &:disabled,
+  &[aria-disabled]:not([aria-disabled='false']) {
+    opacity: 0.32;
     cursor: default;
   }
 
   :hover,
   :focus,
   :focus-within {
-    ${theme((o) => [o.bg.surface3])}
+    background-color: var(--charcoal-surface3);
   }
 `
diff --git a/packages/react/src/components/DropdownSelector/MenuItemGroup/index.tsx b/packages/react/src/components/DropdownSelector/MenuItemGroup/index.tsx
@@ -23,7 +23,7 @@ export default function MenuItemGroup(props: MenuItemGroupProps) {
 
 const TextSpan = styled.span`
   display: block;
-  color: ${({ theme }) => theme.color.text3};
+  color: var(--charcoal-text3);
   font-size: 12px;
   font-weight: bold;
   padding: 12px 0 8px 16px;

diff --git a/packages/react/src/components/DropdownSelector/MenuList/__snapshots__/index.story.storyshot b/packages/react/src/components/DropdownSelector/MenuList/__snapshots__/index.story.storyshot
@@ -22,11 +22,8 @@ exports[`Storyshots DropdownSelector/MenuList Basic 1`] = `
 }
 
 .c2:disabled,
-.c2[aria-disabled]:not([aria-disabled=false]) {
+.c2[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
-}
-
-.c2[aria-disabled="true"] {
   cursor: default;
 }
 
@@ -233,11 +230,8 @@ exports[`Storyshots DropdownSelector/MenuList Disabled 1`] = `
 }
 
 .c2:disabled,
-.c2[aria-disabled]:not([aria-disabled=false]) {
+.c2[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
-}
-
-.c2[aria-disabled="true"] {
   cursor: default;
 }
 
@@ -315,11 +309,8 @@ exports[`Storyshots DropdownSelector/MenuList Group 1`] = `
 }
 
 .c5:disabled,
-.c5[aria-disabled]:not([aria-disabled=false]) {
+.c5[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
-}
-
-.c5[aria-disabled="true"] {
   cursor: default;
 }
 
@@ -336,7 +327,7 @@ exports[`Storyshots DropdownSelector/MenuList Group 1`] = `
 
 .c2 {
   display: block;
-  color: #858585;
+  color: var(--charcoal-text3);
   font-size: 12px;
   font-weight: bold;
   padding: 12px 0 8px 16px;

diff --git a/packages/react/src/components/DropdownSelector/Popover/index.tsx b/packages/react/src/components/DropdownSelector/Popover/index.tsx
@@ -2,7 +2,6 @@ import { RefObject, useContext, useRef } from 'react'
 import { ReactNode } from 'react'
 import { DismissButton, Overlay, usePopover } from '@react-aria/overlays'
 import styled from 'styled-components'
-import { theme } from '../../../styled'
 import { ModalBackgroundContext } from '../../Modal/ModalBackgroundContext'
 import { usePreventScroll } from './usePreventScroll'
 
@@ -74,11 +73,9 @@ const DropdownPopoverDiv = styled.div`
   list-style: none;
   overflow: auto;
   max-height: inherit;
-
-  ${theme((o) => [
-    o.bg.background1,
-    o.border.default,
-    o.borderRadius(8),
-    o.padding.vertical(8),
-  ])}
+  background-color: var(--charcoal-background1);
+  border: solid 1px var(--charcoal-border-default);
+  border-radius: 8px;
+  padding-top: 8px;
+  padding-bottom: 8px;
 `