feat: ActionDialog と MessageDialog に副題を追加 (#1812)

kufu · Aug 23, 2021 · e2a6344 · e2a6344
1 parent 221a147
commit e2a6344
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 31 deletions.
diff --git a/src/components/Dialog/ActionDialog.tsx b/src/components/Dialog/ActionDialog.tsx
@@ -15,6 +15,7 @@ type ElementProps = Omit<HTMLAttributes<HTMLDivElement>, keyof Props>
 export const ActionDialog: React.VFC<Props & ElementProps> = ({
   children,
   title,
+  subtitle,
   closeText,
   actionText,
   actionTheme,
@@ -51,9 +52,10 @@ export const ActionDialog: React.VFC<Props & ElementProps> = ({
   }, [onClickAction, onClickClose, props.isOpen])
 
   return createPortal(
-    <DialogContentInner ariaLabel={title} className={className} {...props}>
+    <DialogContentInner ariaLabel={`${subtitle} ${title}`} className={className} {...props}>
       <ActionDialogContentInner
         title={title}
+        subtitle={subtitle}
         closeText={closeText}
         actionText={actionText}
         actionTheme={actionTheme}

diff --git a/src/components/Dialog/ActionDialogContentInner.tsx b/src/components/Dialog/ActionDialogContentInner.tsx
@@ -4,8 +4,10 @@ import styled, { css } from 'styled-components'
 import { Theme, useTheme } from '../../hooks/useTheme'
 
 import { useOffsetHeight } from './dialogHelper'
+import { Stack } from '../Layout'
 import { DangerButton, PrimaryButton, SecondaryButton } from '../Button'
 import { FaCheckCircleIcon, FaExclamationTriangleIcon } from '../Icon'
+import { Text } from '../Text'
 import { Loader } from '../Loader'
 import { useClassNames } from './useClassNames'
 
@@ -18,6 +20,7 @@ export type BaseProps = {
    * Title of the dialog.
    */
   title: string
+  subtitle?: string
   /**
    * Label of close button.
    */
@@ -65,6 +68,7 @@ export type ActionDialogContentInnerProps = BaseProps & {
 export const ActionDialogContentInner: VFC<ActionDialogContentInnerProps> = ({
   children,
   title,
+  subtitle,
   closeText,
   actionText,
   actionTheme,
@@ -89,9 +93,16 @@ export const ActionDialogContentInner: VFC<ActionDialogContentInnerProps> = ({
 
   return (
     <>
-      <Title themes={theme} ref={titleRef} className={classNames.title}>
-        {title}
-      </Title>
+      <TitleArea gap={0.25} themes={theme} ref={titleRef} className={classNames.titleArea}>
+        {subtitle && (
+          <Text as="p" size="S" leading="TIGHT" color="TEXT_GREY" className={classNames.subtitle}>
+            {subtitle}
+          </Text>
+        )}
+        <Text as="p" size="L" leading="TIGHT" className={classNames.title}>
+          {title}
+        </Text>
+      </TitleArea>
       <Body offsetHeight={offsetHeight} className={classNames.body}>
         {children}
       </Body>
@@ -129,17 +140,12 @@ export const ActionDialogContentInner: VFC<ActionDialogContentInnerProps> = ({
   )
 }
 
-const Title = styled.p<{ themes: Theme }>`
-  ${({ themes: { fontSize, border, spacing } }) => {
-    return css`
-      margin: 0;
-      padding: ${spacing.XS} ${spacing.S};
-      border-bottom: ${border.shorthand};
-      font-size: ${fontSize.L};
-      line-height: 1;
-    `
-  }}
-`
+const TitleArea = styled(Stack)<{ themes: Theme }>(
+  ({ themes: { border, spacing } }) => css`
+    border-bottom: ${border.shorthand};
+    padding: ${spacing.XS} ${spacing.S};
+  `,
+)
 const Body = styled.div<{ offsetHeight: number }>`
   ${({ offsetHeight }) => {
     return css`

diff --git a/src/components/Dialog/Dialog.stories.tsx b/src/components/Dialog/Dialog.stories.tsx
@@ -143,6 +143,7 @@ export const Message_Dialog: Story = () => {
       <MessageDialog
         isOpen={isOpen}
         title="MessageDialog"
+        subtitle="副題"
         description={<p>{dummyText} </p>}
         closeText="Close"
         onClickClose={onClickClose}
@@ -189,6 +190,7 @@ export const Action_Dialog: Story = () => {
       <ActionDialog
         isOpen={isOpen}
         title="ActionDialog"
+        subtitle="副題"
         closeText="Close"
         actionText="Execute"
         actionTheme="primary"

diff --git a/src/components/Dialog/MessageDialog.tsx b/src/components/Dialog/MessageDialog.tsx
@@ -16,6 +16,7 @@ type ElementProps = Omit<HTMLAttributes<HTMLDivElement>, keyof Props>
 
 export const MessageDialog: React.VFC<Props & ElementProps> = ({
   title,
+  subtitle,
   description,
   closeText,
   onClickClose,
@@ -40,9 +41,10 @@ export const MessageDialog: React.VFC<Props & ElementProps> = ({
   }, [onClickClose, props.isOpen])
 
   return createPortal(
-    <DialogContentInner ariaLabel={title} className={className} {...props}>
+    <DialogContentInner ariaLabel={`${subtitle} ${title}`} className={className} {...props}>
       <MessageDialogContentInner
         title={title}
+        subtitle={subtitle}
         description={description}
         closeText={closeText}
         onClickClose={handleClickClose}

diff --git a/src/components/Dialog/MessageDialogContentInner.tsx b/src/components/Dialog/MessageDialogContentInner.tsx
@@ -5,13 +5,16 @@ import { Theme, useTheme } from '../../hooks/useTheme'
 import { useClassNames } from './useClassNames'
 
 import { useOffsetHeight } from './dialogHelper'
+import { Stack } from '../Layout'
 import { SecondaryButton } from '../Button'
+import { Text } from '../Text'
 
 export type BaseProps = {
   /**
    * Title of the dialog.
    */
   title: string
+  subtitle?: string
   /**
    * Description of the dialog.
    */
@@ -31,6 +34,7 @@ export type MessageDialogContentInnerProps = BaseProps & {
 
 export const MessageDialogContentInner: VFC<MessageDialogContentInnerProps> = ({
   title,
+  subtitle,
   description,
   closeText,
   onClickClose,
@@ -41,9 +45,16 @@ export const MessageDialogContentInner: VFC<MessageDialogContentInnerProps> = ({
 
   return (
     <>
-      <Title themes={theme} ref={titleRef} className={classNames.title}>
-        {title}
-      </Title>
+      <TitleArea gap={0.25} themes={theme} ref={titleRef} className={classNames.titleArea}>
+        {subtitle && (
+          <Text as="p" size="S" leading="TIGHT" color="TEXT_GREY" className={classNames.subtitle}>
+            {subtitle}
+          </Text>
+        )}
+        <Text as="p" size="L" leading="TIGHT" className={classNames.title}>
+          {title}
+        </Text>
+      </TitleArea>
       <Description themes={theme} offsetHeight={offsetHeight} className={classNames.description}>
         {description}
       </Description>
@@ -56,18 +67,12 @@ export const MessageDialogContentInner: VFC<MessageDialogContentInnerProps> = ({
   )
 }
 
-const Title = styled.p<{ themes: Theme }>`
-  ${({ themes }) => {
-    const { fontSize, spacingByChar, border } = themes
-    return css`
-      margin: 0;
-      padding: ${spacingByChar(1)} ${spacingByChar(1.5)};
-      border-bottom: ${border.shorthand};
-      font-size: ${fontSize.L};
-      line-height: 1;
-    `
-  }}
-`
+const TitleArea = styled(Stack)<{ themes: Theme }>(
+  ({ themes: { border, spacing } }) => css`
+    border-bottom: ${border.shorthand};
+    padding: ${spacing.XS} ${spacing.S};
+  `,
+)
 const Description = styled.div<{ themes: Theme; offsetHeight: number }>`
   ${({ themes: { fontSize, spacingByChar }, offsetHeight }) => {
     return css`

diff --git a/src/components/Dialog/useClassNames.ts b/src/components/Dialog/useClassNames.ts
@@ -9,7 +9,9 @@ export function useClassNames() {
       wrapper: generate('wrapper'),
       dialog: generate(),
       background: generate('background'),
+      titleArea: generate('titleArea'),
       title: generate('title'),
+      subtitle: generate('subtitle'),
       body: generate('body'),
       description: generate('description'),
       actionArea: generate('actionArea'),