Merge pull request #549 from pixiv/toshusai/dropdown-selector-change-…

…styled-to-css

feat: dropdown selector v4 styled to css

packages/react/src/components/DropdownSelector/Divider/index.css

@@ -0,0 +1,11 @@
+.charcoal-menu-group-divider {
+  display: flex;
+}
+
+.charcoal-menu-group-divider::before {
+  content: '';
+  display: block;
+  width: 100%;
+  height: 1px;
+  background: #00000014;
+}

packages/react/src/components/DropdownSelector/Divider/index.tsx

@@ -0,0 +1,5 @@
+import './index.css'
+
+export function Divider() {
+  return <div role="separator" className="charcoal-menu-group-divider" />
+}

packages/react/src/components/DropdownSelector/DropdownMenuItem/index.css

@@ -0,0 +1,20 @@
+.charcoal-dropdown-selector-menu-item {
+  font-size: 14px;
+  line-height: 22px;
+  color: var(--charcoal-text2);
+  padding: 9px 0;
+
+  display: flex;
+  align-items: center;
+  width: 100%;
+  margin-left: 20px;
+}
+
+.charcoal-dropdown-selector-menu-item[data-selected='true'] {
+  margin-left: 0px;
+}
+
+.charcoal-dropdown-selector-menu-item-icon {
+  color: var(--charcoal-text2);
+  padding-right: 4px;
+}

packages/react/src/components/DropdownSelector/DropdownMenuItem/index.tsx

@@ -0,0 +1,34 @@
+import './index.css'
+
+import MenuItem, { MenuItemProps } from '../MenuItem'
+import { MenuListContext } from '../MenuList/MenuListContext'
+import { useContext } from 'react'
+import Icon from '../../Icon'
+
+export type DropdownMenuItemProps = Omit<MenuItemProps, 'as'>
+
+/**
+ * DropdownSelectorの選択肢として使うMenuItem
+ */
+export default function DropdownMenuItem(props: DropdownMenuItemProps) {
+  const { value: ctxValue } = useContext(MenuListContext)
+  const isSelected = props.value === ctxValue
+  const { children, ...rest } = props
+
+  return (
+    <MenuItem {...rest} aria-selected={isSelected}>
+      {isSelected && (
+        <Icon
+          className="charcoal-dropdown-selector-menu-item-icon"
+          name="16/Check"
+        />
+      )}
+      <span
+        className="charcoal-dropdown-selector-menu-item"
+        data-selected={isSelected}
+      >
+        {props.children}
+      </span>
+    </MenuItem>
+  )
+}

packages/react/src/components/DropdownSelector/DropdownPopover.tsx

@@ -19,15 +19,22 @@ export function DropdownPopover({ children, ...props }: DropdownPopoverProps) {
   }, [props.triggerRef, props.isOpen])
 
   useEffect(() => {
-    if (props.isOpen && props.value !== undefined) {
-      // windowのスクロールを維持したまま選択肢をPopoverの中心に表示する
-      const windowScrollY = window.scrollY
-      const windowScrollX = window.scrollX
-      const selectedElement = document.querySelector(
-        `[data-key="${props.value.toString()}"]`
-      ) as HTMLElement | undefined
-      selectedElement?.focus()
-      window.scrollTo(windowScrollX, windowScrollY)
+    if (props.isOpen) {
+      if (props.value !== undefined && props.value !== '') {
+        // windowのスクロールを維持したまま選択肢をPopoverの中心に表示する
+        const windowScrollY = window.scrollY
+        const windowScrollX = window.scrollX
+        const selectedElement = document.querySelector(
+          `[data-key="${props.value.toString()}"]`
+        ) as HTMLElement | undefined
+        selectedElement?.focus()
+        window.scrollTo(windowScrollX, windowScrollY)
+      } else {
+        const el = ref.current?.querySelector("[role='option']")
+        if (el instanceof HTMLElement) {
+          el.focus()
+        }
+      }
     }
   }, [props.value, props.isOpen])
 

packages/react/src/components/DropdownSelector/ListItem/__snapshots__/index.story.storyshot

@@ -2,118 +2,59 @@
 
 exports[`Storybook Tests react/internals/ListItem Basic 1`] = `
 .c0 {
-  list-style: none;
-}
-
-.c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 40px;
-  cursor: pointer;
-  outline: none;
-  padding-right: 16px;
-  padding-left: 16px;
-  -webkit-transition: background-color 0.2s;
-  transition: background-color 0.2s;
-}
-
-.c1:disabled,
-.c1[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-  cursor: default;
-}
-
-.c1:hover:not(disabled):not([aria-disabled='true']),
-.c1:focus:not(disabled):not([aria-disabled='true']),
-.c1:focus-within:not(disabled):not([aria-disabled='true']) {
-  background-color: var(--charcoal-surface3);
-}
-
-.c2 {
   color: red;
 }
 
 <div
   data-dark={false}
 >
   <li
-    className="c0"
-    role="option"
+    className="charcoal-list-item"
   >
-    <div
-      className="c1"
-    >
-      Item
-    </div>
+    Item
   </li>
   <li
-    className="c0"
-    role="option"
+    className="charcoal-list-item"
   >
-    <div
-      className="c1"
-    >
-      <pixiv-icon
-        name="16/Add"
-      />
-       Add
-    </div>
+    <pixiv-icon
+      name="16/Add"
+    />
+     Add
   </li>
-  <li
-    className="c0"
-    role="option"
+  <a
+    className="charcoal-list-item"
+    href="#"
   >
-    <a
-      className="c1"
-      href="#"
-    >
-      Normal Link
-    </a>
-  </li>
-  <li
-    className="c0"
-    role="option"
+    Normal Link
+  </a>
+  <a
+    className="c0 charcoal-list-item"
+    href="#"
   >
-    <a
-      className="c2 c1"
-      href="#"
-    >
-      Custom Link
-    </a>
-  </li>
+    Custom Link
+  </a>
   <li
-    className="c0"
-    role="option"
+    className="charcoal-list-item"
+    onClick={[Function]}
   >
+    Switch
     <div
-      className="c1"
-      onClick={[Function]}
-    >
-      Switch
-      <div
-        style={
-          Object {
-            "marginLeft": "auto",
-          }
+      style={
+        Object {
+          "marginLeft": "auto",
         }
-      >
-        <input
-          checked={false}
-          className="charcoal-switch-input"
-          id="test-id"
-          label="hello"
-          name="hello"
-          onChange={[Function]}
-          role="switch"
-          type="checkbox"
-        />
-      </div>
+      }
+    >
+      <input
+        checked={false}
+        className="charcoal-switch-input"
+        id="test-id"
+        label="hello"
+        name="hello"
+        onChange={[Function]}
+        role="switch"
+        type="checkbox"
+      />
     </div>
   </li>
 </div>

packages/react/src/components/DropdownSelector/ListItem/index.css

@@ -0,0 +1,24 @@
+.charcoal-list-item {
+  list-style: none;
+  display: flex;
+  align-items: center;
+  min-height: 40px;
+  cursor: pointer;
+  outline: none;
+
+  padding-right: 16px;
+  padding-left: 16px;
+
+  transition: background-color 0.2s;
+}
+
+.charcoal-list-item:not([aria-disabled='true']):hover,
+.charcoal-list-item:not([aria-disabled='true']):focus,
+.charcoal-list-item:not([aria-disabled='true']):focus-within {
+  background-color: var(--charcoal-surface3);
+}
+
+.charcoal-list-item[aria-disabled='true'] {
+  opacity: 0.32;
+  cursor: default;
+}