@charcoal-ui/react 2.0.0-alpha.2 → 2.0.0-alpha.20

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

@@ -0,0 +1,195 @@
+import React from 'react'
+import { Story } from '../../_lib/compat'
+import Modal, { ModalDismissButton, Props } from '.'
+import { OverlayProvider } from '@react-aria/overlays'
+import { useOverlayTriggerState } from 'react-stately'
+import Button from '../Button'
+import {
+  ModalAlign,
+  ModalBody,
+  ModalButtons,
+  ModalHeader,
+} from './ModalPlumbing'
+import styled from 'styled-components'
+import { theme } from '../../styled'
+import TextField from '../TextField'
+
+export default {
+  title: 'Modal',
+  component: Modal,
+  args: {
+    title: 'Title',
+  },
+  argTypes: {
+    size: {
+      options: ['S', 'M', 'L'],
+      control: {
+        type: 'inline-radio',
+      },
+    },
+    bottomSheet: {
+      options: ['full', 'true', 'false'],
+      mapping: { full: 'full', true: true, false: false },
+      control: {
+        type: 'inline-radio',
+      },
+    },
+  },
+}
+
+const DefaultStory = (args: Props) => {
+  const state = useOverlayTriggerState({})
+  return (
+    // Application must be wrapped in an OverlayProvider so that it can be
+    // hidden from screen readers when a modal opens.
+    <OverlayProvider>
+      <Button onClick={() => state.open()}>Open Modal</Button>
+
+      <Modal
+        isOpen={state.isOpen}
+        onClose={() => state.close()}
+        isDismissable
+        {...args}
+      >
+        <ModalHeader />
+        <ModalBody>
+          <ModalVStack>
+            <StyledModalText>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod
+              placeat tenetur, necessitatibus laudantium cumque exercitationem
+              provident. Quaerat iure enim, eveniet dolores earum odio quo
+              possimus fugiat aspernatur, numquam, commodi repellat.
+            </StyledModalText>
+            <ModalAlign>
+              <TextField
+                showLabel
+                label="Name"
+                placeholder="Nagisa"
+              ></TextField>
+            </ModalAlign>
+            <ModalAlign>
+              <TextField
+                showLabel
+                label="Country"
+                placeholder="Tokyo"
+              ></TextField>
+            </ModalAlign>
+          </ModalVStack>
+          <ModalButtons>
+            <Button variant="Primary" onClick={() => state.close()} fixed>
+              Apply
+            </Button>
+            <Button onClick={() => state.close()} fixed>
+              Cancel
+            </Button>
+          </ModalButtons>
+        </ModalBody>
+      </Modal>
+    </OverlayProvider>
+  )
+}
+
+const ModalVStack = styled.div`
+  display: grid;
+  gap: 24px;
+`
+
+const StyledModalText = styled(ModalAlign)`
+  ${theme((o) => [o.font.text2, o.typography(14)])}
+`
+
+export const Default: Story<Props> = DefaultStory.bind({})
+
+const FullBottomSheetStory = (args: Props) => {
+  const state = useOverlayTriggerState({})
+  return (
+    // Application must be wrapped in an OverlayProvider so that it can be
+    // hidden from screen readers when a modal opens.
+    <OverlayProvider>
+      <Button onClick={() => state.open()}>Open Modal</Button>
+
+      <Modal
+        isOpen={state.isOpen}
+        onClose={() => state.close()}
+        isDismissable
+        bottomSheet="full"
+        {...args}
+      >
+        <ModalHeader />
+        <ModalBody>
+          <ModalVStack>
+            <StyledModalText>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod
+              placeat tenetur, necessitatibus laudantium cumque exercitationem
+              provident. Quaerat iure enim, eveniet dolores earum odio quo
+              possimus fugiat aspernatur, numquam, commodi repellat.
+            </StyledModalText>
+            <ModalAlign>
+              <TextField
+                showLabel
+                label="Name"
+                placeholder="Nagisa"
+              ></TextField>
+            </ModalAlign>
+            <ModalAlign>
+              <TextField
+                showLabel
+                label="Country"
+                placeholder="Tokyo"
+              ></TextField>
+            </ModalAlign>
+          </ModalVStack>
+          <ModalButtons>
+            <Button variant="Primary" onClick={() => state.close()} fixed>
+              Apply
+            </Button>
+            <Button onClick={() => state.close()} fixed>
+              Cancel
+            </Button>
+          </ModalButtons>
+        </ModalBody>
+      </Modal>
+    </OverlayProvider>
+  )
+}
+
+export const FullBottomSheet: Story<Props> = FullBottomSheetStory.bind({})
+
+const BottomSheetStory = (args: Props) => {
+  const state = useOverlayTriggerState({})
+  return (
+    // Application must be wrapped in an OverlayProvider so that it can be
+    // hidden from screen readers when a modal opens.
+    <OverlayProvider>
+      <Button onClick={() => state.open()}>Open Modal</Button>
+
+      <Modal
+        isOpen={state.isOpen}
+        onClose={() => state.close()}
+        bottomSheet
+        isDismissable
+        {...args}
+      >
+        <ModalHeader />
+        <ModalBody>
+          <ModalVStack>
+            <StyledModalText>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod
+              placeat tenetur, necessitatibus laudantium cumque exercitationem
+              provident. Quaerat iure enim, eveniet dolores earum odio quo
+              possimus fugiat aspernatur, numquam, commodi repellat.
+            </StyledModalText>
+          </ModalVStack>
+          <ModalButtons>
+            <Button variant="Danger" onClick={() => state.close()} fixed>
+              削除する
+            </Button>
+            <ModalDismissButton>キャンセル</ModalDismissButton>
+          </ModalButtons>
+        </ModalBody>
+      </Modal>
+    </OverlayProvider>
+  )
+}
+
+export const BottomSheet: Story<Props> = BottomSheetStory.bind({})

package/src/components/Modal/index.tsx

@@ -0,0 +1,226 @@
+import React, { useContext, useRef } from 'react'
+import {
+  OverlayContainer,
+  OverlayProps,
+  useModal,
+  useOverlay,
+  usePreventScroll,
+} from '@react-aria/overlays'
+import styled, { css, useTheme } from 'styled-components'
+import { theme } from '../../styled'
+import { FocusScope } from '@react-aria/focus'
+import { useDialog } from '@react-aria/dialog'
+import { AriaDialogProps } from '@react-types/dialog'
+import { columnSystem, COLUMN_UNIT, GUTTER_UNIT } from '@charcoal-ui/foundation'
+import { unreachable } from '../../_lib'
+import { maxWidth } from '@charcoal-ui/utils'
+import { useMedia } from '@charcoal-ui/styled'
+import { animated, useTransition, easings } from 'react-spring'
+import Button, { ButtonProps } from '../Button'
+import IconButton from '../IconButton'
+
+export type Props = OverlayProps &
+  AriaDialogProps & {
+    children: React.ReactNode
+    zIndex?: number
+    title: string
+    size?: 'S' | 'M' | 'L'
+    bottomSheet?: boolean | 'full'
+
+    // NOTICE: デフォルト値を与えてはならない
+    // （たとえば document.body をデフォルト値にすると SSR できなくなる）
+    portalContainer?: HTMLElement
+  }
+
+const DEFAULT_Z_INDEX = 10
+
+export default function Modal({
+  children,
+  zIndex = DEFAULT_Z_INDEX,
+  portalContainer,
+  ...props
+}: Props) {
+  const {
+    title,
+    size = 'M',
+    bottomSheet = false,
+    isDismissable,
+    onClose,
+    isOpen = false,
+  } = props
+
+  const ref = useRef<HTMLDivElement>(null)
+  const { overlayProps, underlayProps } = useOverlay(props, ref)
+
+  usePreventScroll()
+  const { modalProps } = useModal()
+
+  const { dialogProps, titleProps } = useDialog(props, ref)
+
+  const theme = useTheme()
+  const isMobile = useMedia(maxWidth(theme.breakpoint.screen1)) ?? false
+  const transitionEnabled = isMobile && bottomSheet !== false
+  const transition = useTransition(isOpen, {
+    from: {
+      transform: 'translateY(100%)',
+      backgroundColor: 'rgba(0, 0, 0, 0)',
+    },
+    enter: {
+      transform: 'translateY(0%)',
+      backgroundColor: 'rgba(0, 0, 0, 0.4)',
+    },
+    leave: {
+      transform: 'translateY(100%)',
+      backgroundColor: 'rgba(0, 0, 0, 0)',
+    },
+    config: transitionEnabled
+      ? { duration: 400, easing: easings.easeOutQuart }
+      : { duration: 0 },
+  })
+  const showDismiss = !isMobile || bottomSheet !== true
+
+  return transition(
+    ({ backgroundColor, transform }, item) =>
+      item && (
+        <OverlayContainer portalContainer={portalContainer}>
+          <ModalBackground
+            zIndex={zIndex}
+            {...underlayProps}
+            style={transitionEnabled ? { backgroundColor } : {}}
+          >
+            <FocusScope contain restoreFocus autoFocus>
+              <ModalDialog
+                ref={ref}
+                {...overlayProps}
+                {...modalProps}
+                {...dialogProps}
+                style={transitionEnabled ? { transform } : {}}
+                size={size}
+                bottomSheet={bottomSheet}
+              >
+                <ModalContext.Provider
+                  value={{ titleProps, title, close: onClose, showDismiss }}
+                >
+                  {children}
+                  {isDismissable === true && (
+                    <ModalCrossButton
+                      size="S"
+                      icon="24/Close"
+                      onClick={onClose}
+                    />
+                  )}
+                </ModalContext.Provider>
+              </ModalDialog>
+            </FocusScope>
+          </ModalBackground>
+        </OverlayContainer>
+      )
+  )
+}
+
+const ModalContext = React.createContext<{
+  titleProps: React.HTMLAttributes<HTMLElement>
+  title: string
+  close?: () => void
+  showDismiss: boolean
+}>({
+  titleProps: {},
+  title: '',
+  close: undefined,
+  showDismiss: true,
+})
+
+const ModalBackground = animated(styled.div<{ zIndex: number }>`
+  z-index: ${({ zIndex }) => zIndex};
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  ${theme((o) => [o.bg.surface4])}
+`)
+
+const ModalDialog = animated(styled.div<{
+  size: 'S' | 'M' | 'L'
+  bottomSheet: boolean | 'full'
+}>`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: ${(p) =>
+    p.size === 'S'
+      ? columnSystem(3, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2
+      : p.size === 'M'
+      ? columnSystem(4, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2
+      : // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      p.size === 'L'
+      ? columnSystem(6, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2
+      : unreachable(p.size)}px;
+
+  ${theme((o) => [o.bg.background1, o.borderRadius(24)])}
+
+  @media ${({ theme }) => maxWidth(theme.breakpoint.screen1)} {
+    ${(p) =>
+      p.bottomSheet === 'full'
+        ? css`
+            top: auto;
+            bottom: 0;
+            left: 0;
+            transform: none;
+            border-radius: 0;
+            width: 100%;
+            height: 100%;
+          `
+        : p.bottomSheet
+        ? css`
+            top: auto;
+            bottom: 0;
+            left: 0;
+            transform: none;
+            border-radius: 0;
+            width: 100%;
+          `
+        : css`
+            width: calc(100% - 48px);
+          `}
+  }
+`)
+
+const ModalCrossButton = styled(IconButton)`
+  position: absolute;
+  top: 8px;
+  right: 8px;
+
+  ${theme((o) => [o.font.text3.hover.press])}
+`
+
+export function ModalTitle(props: React.HTMLAttributes<HTMLHeadingElement>) {
+  const { titleProps, title } = useContext(ModalContext)
+  return (
+    <ModalHeading {...titleProps} {...props}>
+      {title}
+    </ModalHeading>
+  )
+}
+
+const ModalHeading = styled.h3`
+  margin: 0;
+  font-weight: inherit;
+  font-size: inherit;
+`
+
+export function ModalDismissButton({ children, ...props }: ButtonProps) {
+  const { close, showDismiss } = useContext(ModalContext)
+
+  if (!showDismiss) {
+    return null
+  }
+
+  return (
+    <Button {...props} onClick={close} fixed>
+      {children}
+    </Button>
+  )
+}

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

@@ -1,6 +1,6 @@
 import { action } from '@storybook/addon-actions'
 import React from 'react'
-import { css } from 'styled-components'
+import styled from 'styled-components'
 import { Story } from '../../_lib/compat'
 import Clickable from '../Clickable'
 import TextField, {
@@ -9,6 +9,7 @@ import TextField, {
   TextFieldProps,
 } from '.'
 import { px } from '@charcoal-ui/utils'
+import IconButton from '../IconButton'
 
 export default {
   title: 'TextField',
@@ -24,13 +25,13 @@ export default {
   },
 }
 
+const Container = styled.div`
+  display: grid;
+  gap: ${({ theme }) => px(theme.spacing[24])};
+`
+
 const Template: Story<Partial<TextFieldProps>> = (args) => (
-  <div
-    css={css`
-      display: grid;
-      gap: ${({ theme }) => px(theme.spacing[24])};
-    `}
-  >
+  <Container>
     <TextField
       label="Label"
       requiredText="*必須"
@@ -57,7 +58,7 @@ const Template: Story<Partial<TextFieldProps>> = (args) => (
       {...(args as Partial<MultiLineTextFieldProps>)}
       multiline
     />
-  </div>
+  </Container>
 )
 
 export const Default = Template.bind({})
@@ -91,3 +92,23 @@ export const AutoHeight: Story<Partial<MultiLineTextFieldProps>> = (args) => (
 AutoHeight.args = {
   autoHeight: true,
 }
+
+export const PrefixIcon: Story<Partial<SingleLineTextFieldProps>> = (args) => (
+  <TextField
+    label="Label"
+    placeholder="Icon prefix"
+    prefix={
+      <PrefixIconWrap>
+        <pixiv-icon name="16/Search" />
+      </PrefixIconWrap>
+    }
+    suffix={<IconButton variant="Overlay" icon={'16/Remove'} size="XS" />}
+    {...args}
+  />
+)
+
+const PrefixIconWrap = styled.div`
+  color: ${({ theme }) => theme.color.text4};
+  margin-top: 2px;
+  margin-right: 4px;
+`

package/src/components/TextField/index.tsx

@@ -1,9 +1,15 @@
 import { useTextField } from '@react-aria/textfield'
 import { useVisuallyHidden } from '@react-aria/visually-hidden'
-import React, { useCallback, useEffect, useRef, useState } from 'react'
+import React, {
+  ReactNode,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
 import styled, { css } from 'styled-components'
 import FieldLabel, { FieldLabelProps } from '../FieldLabel'
-import createTheme from '@charcoal-ui/styled'
+import { createTheme } from '@charcoal-ui/styled'
 
 const theme = createTheme(styled)
 
@@ -32,8 +38,8 @@ export interface SingleLineTextFieldProps extends TextFieldBaseProps {
   readonly multiline?: false
   readonly rows?: never
   readonly type?: string
-  readonly prefix?: string
-  readonly suffix?: string
+  readonly prefix?: ReactNode
+  readonly suffix?: ReactNode
 }
 
 export interface MultiLineTextFieldProps extends TextFieldBaseProps {
@@ -94,8 +100,8 @@ const SingleLineTextField = React.forwardRef<
     invalid = false,
     assistiveText,
     maxLength,
-    prefix = '',
-    suffix = '',
+    prefix = null,
+    suffix = null,
   } = props
 
   const { visuallyHiddenProps } = useVisuallyHidden()
@@ -184,9 +190,9 @@ const SingleLineTextField = React.forwardRef<
         />
         <SuffixContainer ref={suffixRef}>
           <Affix>{suffix}</Affix>
-          {showCount && maxLength && (
+          {showCount && (
             <SingleLineCounter>
-              {count}/{maxLength}
+              {maxLength !== undefined ? `${count}/${maxLength}` : count}
             </SingleLineCounter>
           )}
         </SuffixContainer>
@@ -290,16 +296,23 @@ const MultiLineTextField = React.forwardRef<
         required={required}
         subLabel={subLabel}
         {...labelProps}
-        {...(showLabel ? visuallyHiddenProps : {})}
+        {...(!showLabel ? visuallyHiddenProps : {})}
       />
-      <StyledTextareaContainer rows={rows}>
+      <StyledTextareaContainer
+        invalid={invalid}
+        rows={showCount ? rows + 1 : rows}
+      >
         <StyledTextarea
           ref={mergeRefs(textareaRef, forwardRef, ariaRef)}
-          invalid={invalid}
           rows={rows}
+          noBottomPadding={showCount}
           {...inputProps}
         />
-        {showCount && <MultiLineCounter>{count}</MultiLineCounter>}
+        {showCount && (
+          <MultiLineCounter>
+            {maxLength !== undefined ? `${count}/${maxLength}` : count}
+          </MultiLineCounter>
+        )}
       </StyledTextareaContainer>
       {assistiveText != null && assistiveText.length !== 0 && (
         <AssistiveText
@@ -370,8 +383,6 @@ const StyledInput = styled.input<{
   height: calc(100% / 0.875);
   font-size: calc(14px / 0.875);
   line-height: calc(22px / 0.875);
-  padding-top: calc(9px / 0.875);
-  padding-bottom: calc(9px / 0.875);
   padding-left: calc((8px + ${(p) => p.extraLeftPadding}px) / 0.875);
   padding-right: calc((8px + ${(p) => p.extraRightPadding}px) / 0.875);
   border-radius: calc(4px / 0.875);
@@ -392,21 +403,35 @@ const StyledInput = styled.input<{
   }
 `
 
-const StyledTextareaContainer = styled.div<{ rows: number }>`
-  display: grid;
+const StyledTextareaContainer = styled.div<{ rows: number; invalid: boolean }>`
   position: relative;
+  overflow: hidden;
+  padding: 0 8px;
+
+  ${(p) =>
+    theme((o) => [
+      o.bg.surface3.hover,
+      p.invalid && o.outline.assertive,
+      o.font.text2,
+      o.borderRadius(4),
+    ])}
+
+  &:focus-within {
+    ${(p) =>
+      theme((o) => (p.invalid ? o.outline.assertive : o.outline.default))}
+  }
 
   ${({ rows }) => css`
-    max-height: calc(22px * ${rows} + 18px);
+    height: calc(22px * ${rows} + 18px);
   `};
 `
 
-const StyledTextarea = styled.textarea<{ invalid: boolean }>`
+const StyledTextarea = styled.textarea<{ noBottomPadding: boolean }>`
   border: none;
-  box-sizing: border-box;
   outline: none;
   resize: none;
   font-family: inherit;
+  color: inherit;
 
   /* Prevent zooming for iOS Safari */
   transform-origin: top left;
@@ -414,23 +439,16 @@ const StyledTextarea = styled.textarea<{ invalid: boolean }>`
   width: calc(100% / 0.875);
   font-size: calc(14px / 0.875);
   line-height: calc(22px / 0.875);
-  padding: calc(9px / 0.875) calc(8px / 0.875);
-  border-radius: calc(4px / 0.875);
+  padding: calc(9px / 0.875) 0 ${(p) => (p.noBottomPadding ? 0 : '')};
 
-  ${({ rows }) => css`
-    height: calc(22px / 0.875 * ${rows} + 18px / 0.875);
+  ${({ rows = 1 }) => css`
+    height: calc(22px / 0.875 * ${rows});
   `};
 
   /* Display box-shadow for iOS Safari */
   appearance: none;
 
-  ${(p) =>
-    theme((o) => [
-      o.bg.surface3.hover,
-      o.outline.default.focus,
-      p.invalid && o.outline.assertive,
-      o.font.text2,
-    ])}
+  background: none;
 
   &::placeholder {
     ${theme((o) => o.font.text3)}

package/src/components/a11y.test.tsx

@@ -63,6 +63,17 @@ beforeEach(() => {
       return null
     },
   }))
+
+  global.matchMedia = jest.fn().mockImplementation(() => ({
+    matches: true,
+    media: '(max-width: 600px)',
+    addEventListener() {
+      // Do Nothing
+    },
+    removeEventListener() {
+      // Do Nothing
+    },
+  }))
 })
 
 describe.each(themes)('using %s theme', (_name, theme) => {

package/src/index.ts

@@ -30,3 +30,4 @@ export {
   default as TextField,
   type TextFieldProps,
 } from './components/TextField'
+export { default as Icon, type IconProps } from './components/Icon'

package/src/styled.ts

@@ -1,3 +1,3 @@
 import styled from 'styled-components'
-import createTheme from '@charcoal-ui/styled'
+import { createTheme } from '@charcoal-ui/styled'
 export const theme = createTheme(styled)