@charcoal-ui/react 3.3.0-beta.0 → 3.4.0

package/src/components/DropdownSelector/index.story.tsx

@@ -4,6 +4,10 @@ import { Story } from '../../_lib/compat'
 import { Divider } from './Divider'
 import MenuItemGroup from './MenuItemGroup'
 import DropdownMenuItem from './DropdownMenuItem'
+import Modal from '../Modal'
+import { ModalBody, ModalHeader } from '../Modal/ModalPlumbing'
+import styled from 'styled-components'
+import Button from '../Button'
 
 export default {
   title: 'DropdownSelector',
@@ -26,6 +30,7 @@ export const Playground: Story<DropdownSelectorProps> = (
   const [selected, setSelected] = useState('50')
   return (
     <div style={{ width: 288 }}>
+      <Button></Button>
       <DropdownSelector
         {...props}
         onChange={(value) => {
@@ -51,27 +56,78 @@ Playground.args = { ...baseProps }
 export const Basic: Story<DropdownSelectorProps> = (
   props: DropdownSelectorProps
 ) => {
-  const [selected, setSelected] = useState('')
   return (
     <div style={{ width: 288 }}>
-      <DropdownSelector
-        {...props}
-        onChange={(value) => {
-          setSelected(value)
-        }}
-        value={selected}
-        label="label"
-      >
-        <DropdownMenuItem value={'10'}>Apple</DropdownMenuItem>
-        <DropdownMenuItem value={'20'}>Banana</DropdownMenuItem>
-        <DropdownMenuItem value={'30'}>Orange</DropdownMenuItem>
-      </DropdownSelector>
+      <PlaygroundDropdownSelector {...props} />
     </div>
   )
 }
 
 Basic.args = { ...baseProps }
 
+function PlaygroundDropdownSelector(props: Partial<DropdownSelectorProps>) {
+  const [selected, setSelected] = useState('10')
+  return (
+    <DropdownSelector
+      {...props}
+      onChange={(value) => {
+        setSelected(value)
+      }}
+      value={selected}
+      label="label"
+    >
+      <DropdownMenuItem value={'10'}>Apple</DropdownMenuItem>
+      <DropdownMenuItem value={'20'}>Banana</DropdownMenuItem>
+      <DropdownMenuItem value={'30'}>Orange</DropdownMenuItem>
+    </DropdownSelector>
+  )
+}
+
+const DummyBox = styled.div`
+  border: solid 1px ${({ theme }) => theme.border.default.color};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 256px;
+`
+
+export const InModal: Story<DropdownSelectorProps> = () => {
+  const [open, setOpen] = useState(true)
+  return (
+    <div
+      style={{
+        height: '10px',
+      }}
+    >
+      <button onClick={() => setOpen(true)}>open</button>
+      <Modal
+        bottomSheet="full"
+        title="modal"
+        isOpen={open}
+        isDismissable
+        onClose={() => {
+          setOpen(false)
+        }}
+      >
+        <ModalHeader />
+        <ModalBody>
+          <div
+            style={{
+              padding: '16px',
+            }}
+          >
+            <DummyBox>256px</DummyBox>
+            <PlaygroundDropdownSelector />
+            <DummyBox>256px</DummyBox>
+            <PlaygroundDropdownSelector />
+            <DummyBox>256px</DummyBox>
+          </div>
+        </ModalBody>
+      </Modal>
+    </div>
+  )
+}
+
 export const InFormTag: Story<DropdownSelectorProps> = (
   props: DropdownSelectorProps
 ) => {

package/src/components/Icon/__snapshots__/index.story.storyshot

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Icon Default 1`] = `
+<div
+  data-dark={false}
+>
+  <pixiv-icon
+    name="16/Add"
+    scale={1}
+  />
+</div>
+`;

package/src/components/{Button/__snapshots__/index.test.tsx.snap → IconButton/__snapshots__/index.story.storyshot}

@@ -1,7 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Basic <Button>Hello</Button> 1`] = `
+exports[`Storyshots IconButton Default M 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,16 +37,17 @@ 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;
-  width: min-content;
-  display: inline-grid;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  width: 40px;
+  height: 40px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -50,43 +56,21 @@ exports[`Basic <Button>Hello</Button> 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  white-space: nowrap;
-  color: var(--charcoal-text2);
-  background-color: var(--charcoal-surface3);
-  font-size: 14px;
-  line-height: 22px;
-  font-weight: bold;
-  padding-right: 24px;
-  padding-left: 24px;
+  color: var(--charcoal-text3);
+  background-color: var(--charcoal-transparent);
   border-radius: 999999px;
-  -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
-  transition: 0.2s color,0.2s background-color,0.2s box-shadow;
-  height: 40px;
-}
-
-.c1:hover:not(:disabled):not([aria-disabled]),
-.c1:hover[aria-disabled=false] {
-  color: var(--charcoal-text2-hover);
-}
-
-.c1:active:not(:disabled):not([aria-disabled]),
-.c1:active[aria-disabled=false] {
-  color: var(--charcoal-text2-press);
+  -webkit-transition: 0.2s background-color,0.2s box-shadow;
+  transition: 0.2s background-color,0.2s box-shadow;
 }
 
 .c1:hover:not(:disabled):not([aria-disabled]),
 .c1:hover[aria-disabled=false] {
-  background-color: var(--charcoal-surface3-hover);
+  background-color: var(--charcoal-transparent-hover);
 }
 
 .c1:active:not(:disabled):not([aria-disabled]),
 .c1:active[aria-disabled=false] {
-  background-color: var(--charcoal-surface3-press);
+  background-color: var(--charcoal-transparent-press);
 }
 
 .c1:disabled,
@@ -115,26 +99,44 @@ exports[`Basic <Button>Hello</Button> 1`] = `
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
-<button
-  className="c0 c1"
-  disabled={false}
+<div
+  data-dark={false}
 >
-  Hello
-</button>
+  <button
+    className="c0 c1"
+    height={40}
+    size="M"
+    title="close"
+    width={40}
+  >
+    <pixiv-icon
+      name="24/Close"
+    />
+  </button>
+</div>
 `;
 
-exports[`Link <Button to="#">Hello</Button> 1`] = `
+exports[`Storyshots IconButton Overlay M 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,
@@ -142,11 +144,26 @@ exports[`Link <Button to="#">Hello</Button> 1`] = `
   cursor: default;
 }
 
+.c0:focus {
+  outline: none;
+}
+
+.c0::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
 .c1 {
-  width: -webkit-min-content;
-  width: -moz-min-content;
-  width: min-content;
-  display: inline-grid;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  width: 40px;
+  height: 40px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -155,43 +172,21 @@ exports[`Link <Button to="#">Hello</Button> 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  white-space: nowrap;
-  color: var(--charcoal-text2);
-  background-color: var(--charcoal-surface3);
-  font-size: 14px;
-  line-height: 22px;
-  font-weight: bold;
-  padding-right: 24px;
-  padding-left: 24px;
+  color: var(--charcoal-text5);
+  background-color: var(--charcoal-surface4);
   border-radius: 999999px;
-  -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
-  transition: 0.2s color,0.2s background-color,0.2s box-shadow;
-  height: 40px;
-}
-
-.c1:hover:not(:disabled):not([aria-disabled]),
-.c1:hover[aria-disabled=false] {
-  color: var(--charcoal-text2-hover);
-}
-
-.c1:active:not(:disabled):not([aria-disabled]),
-.c1:active[aria-disabled=false] {
-  color: var(--charcoal-text2-press);
+  -webkit-transition: 0.2s background-color,0.2s box-shadow;
+  transition: 0.2s background-color,0.2s box-shadow;
 }
 
 .c1:hover:not(:disabled):not([aria-disabled]),
 .c1:hover[aria-disabled=false] {
-  background-color: var(--charcoal-surface3-hover);
+  background-color: var(--charcoal-surface4-hover);
 }
 
 .c1:active:not(:disabled):not([aria-disabled]),
 .c1:active[aria-disabled=false] {
-  background-color: var(--charcoal-surface3-press);
+  background-color: var(--charcoal-surface4-press);
 }
 
 .c1:disabled,
@@ -220,11 +215,19 @@ exports[`Link <Button to="#">Hello</Button> 1`] = `
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
-<a
-  aria-disabled={false}
-  className="c0 c1"
-  href="#"
+<div
+  data-dark={false}
 >
-  Hello
-</a>
+  <button
+    className="c0 c1"
+    height={40}
+    size="M"
+    title="close"
+    width={40}
+  >
+    <pixiv-icon
+      name="24/Close"
+    />
+  </button>
+</div>
 `;

package/src/components/LoadingSpinner/__snapshots__/index.story.storyshot

@@ -0,0 +1,81 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots LoadingSpinner Basic 1`] = `
+.c0 {
+  box-sizing: content-box;
+  margin: auto;
+  padding: 16px;
+  border-radius: 8px;
+  font-size: 48px;
+  width: 48px;
+  height: 48px;
+  opacity: 0.84;
+  color: var(--charcoal-text4);
+  background-color: var(--charcoal-background1);
+}
+
+.c1 {
+  width: 1em;
+  height: 1em;
+  border-radius: 1em;
+  background-color: currentColor;
+  -webkit-animation: cNZOgq 1s both ease-out;
+  animation: cNZOgq 1s both ease-out;
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+}
+
+.c1[data-reset-animation] {
+  -webkit-animation: none;
+  animation: none;
+}
+
+<div
+  data-dark={false}
+>
+  <div
+    className="c0 basic"
+    role="progressbar"
+    size={48}
+  >
+    <div
+      className="c1"
+      role="presentation"
+    />
+  </div>
+</div>
+`;
+
+exports[`Storyshots LoadingSpinner Icon 1`] = `
+.c0 {
+  width: 1em;
+  height: 1em;
+  border-radius: 1em;
+  background-color: currentColor;
+  -webkit-animation: cNZOgq 1s both ease-out;
+  animation: cNZOgq 1s both ease-out;
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+}
+
+.c0[data-reset-animation] {
+  -webkit-animation: none;
+  animation: none;
+}
+
+<div
+  data-dark={false}
+>
+  <div
+    css="
+        font-size: 12px;
+        color: #B1CC29;
+      "
+  >
+    <div
+      className="c0"
+      role="presentation"
+    />
+  </div>
+</div>
+`;

package/src/components/Modal/Dialog/index.tsx

@@ -0,0 +1,82 @@
+import { forwardRef } from 'react'
+import * as React from 'react'
+import styled, { css } from 'styled-components'
+import { useDialog } from '@react-aria/dialog'
+import { columnSystem, COLUMN_UNIT, GUTTER_UNIT } from '@charcoal-ui/foundation'
+import { unreachable } from '../../../_lib'
+import { maxWidth } from '@charcoal-ui/utils'
+import { animated } from 'react-spring'
+import { useForwardedRef } from '../../../_lib/useForwardedRef'
+import { Size, BottomSheet } from '..'
+
+export const Dialog = forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof AnimatedStyledDialogDiv>
+>(function Dialog(props, forwardRef) {
+  const ref = useForwardedRef(forwardRef)
+  const { dialogProps } = useDialog(
+    {
+      role: 'dialog',
+    },
+    ref
+  )
+
+  return (
+    <AnimatedStyledDialogDiv
+      {...props}
+      role={dialogProps.role}
+      tabIndex={dialogProps.tabIndex}
+      aria-labelledby={dialogProps['aria-labelledby']}
+      onBlur={dialogProps.onBlur}
+      ref={ref}
+    />
+  )
+})
+
+const AnimatedStyledDialogDiv = animated(styled.div<{
+  size: Size
+  bottomSheet: BottomSheet
+}>`
+  margin: auto;
+  position: relative;
+  height: fit-content;
+  width: ${(p) => {
+    switch (p.size) {
+      case 'S': {
+        return columnSystem(3, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2
+      }
+      case 'M': {
+        return columnSystem(4, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2
+      }
+      case 'L': {
+        return columnSystem(6, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2
+      }
+      default: {
+        return unreachable(p.size)
+      }
+    }
+  }}px;
+
+  background-color: ${({ theme }) => theme.color.background1};
+  border-radius: 24px;
+
+  @media ${({ theme }) => maxWidth(theme.breakpoint.screen1)} {
+    max-width: 440px;
+    width: calc(100% - 48px);
+    ${(p) =>
+      p.bottomSheet !== false &&
+      css`
+        max-width: unset;
+        width: 100%;
+        border-radius: 0;
+        margin: auto 0 0 0;
+        ${p.bottomSheet === 'full' &&
+        css`
+          min-height: 100%;
+        `}
+      `}
+  }
+  :focus {
+    outline: none;
+  }
+`)

package/src/components/Modal/ModalBackgroundContext.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react'
+
+/**
+ * ModalBackgroundのElementが入ったコンテキスト
+ */
+export const ModalBackgroundContext = React.createContext<HTMLElement | null>(
+  null
+)

package/src/components/Modal/ModalPlumbing.tsx

@@ -1,20 +1,32 @@
-import { ModalTitle } from '.'
-import styled from 'styled-components'
+import { BottomSheet, ModalContext, ModalTitle } from '.'
+import styled, { css } from 'styled-components'
 import { theme } from '../../styled'
+import { useContext } from 'react'
+import { maxWidth } from '@charcoal-ui/utils'
 
 export function ModalHeader() {
+  const modalCtx = useContext(ModalContext)
   return (
-    <ModalHeaderRoot>
+    <ModalHeaderRoot $bottomSheet={modalCtx.bottomSheet}>
       <StyledModalTitle />
     </ModalHeaderRoot>
   )
 }
 
-const ModalHeaderRoot = styled.div`
+const ModalHeaderRoot = styled.div<{
+  $bottomSheet: BottomSheet
+}>`
   height: 64px;
   display: grid;
   align-content: center;
   justify-content: center;
+  @media ${({ theme }) => maxWidth(theme.breakpoint.screen1)} {
+    ${(p) =>
+      p.$bottomSheet !== false &&
+      css`
+        height: 48px;
+      `}
+  }
 `
 
 const StyledModalTitle = styled(ModalTitle)`