chore: Dialogのscroll部分をStackではなくSection，かつ必要なflex系styleのみ設定することで余計な処理…

…をskipする
kufu · Feb 7, 2025 · cdb1b63 · cdb1b63
1 parent 21f116e
commit cdb1b63
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 9 deletions.
diff --git a/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx b/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx
@@ -6,6 +6,7 @@ import { type DecoratorsType } from '../../../hooks/useDecorators'
 import { Button } from '../../Button'
 import { Cluster, Stack } from '../../Layout'
 import { ResponseMessage } from '../../ResponseMessage'
+import { Section } from '../../SectioningContent'
 import { DialogBody, type Props as DialogBodyProps } from '../DialogBody'
 import { DialogHeader, type Props as DialogHeaderProps } from '../DialogHeader'
 import { dialogContentInner } from '../dialogInnerStyle'
@@ -98,9 +99,8 @@ export const ActionDialogContentInner: FC<ActionDialogContentInnerProps> = ({
   }, [])
 
   return (
-    // HINT: bodyをスクロールできるようにするため、Sectionではなく、Stack[as="section"][gap=0]を使用する必要がある
-    // eslint-disable-next-line smarthr/best-practice-for-layouts, smarthr/a11y-heading-in-sectioning-content
-    <Stack as="section" gap={0} className={styles.wrapper}>
+    // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content
+    <Section className={styles.wrapper}>
       <DialogHeader title={title} subtitle={subtitle} titleTag={titleTag} titleId={titleId} />
       <DialogBody contentPadding={contentPadding} contentBgColor={contentBgColor}>
         {children}
@@ -128,7 +128,7 @@ export const ActionDialogContentInner: FC<ActionDialogContentInnerProps> = ({
           </div>
         )}
       </Stack>
-    </Stack>
+    </Section>
   )
 }
 

diff --git a/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialogContentInner.tsx b/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialogContentInner.tsx
@@ -12,6 +12,7 @@ import { type DecoratorsType } from '../../../hooks/useDecorators'
 import { Button } from '../../Button'
 import { Cluster, Stack } from '../../Layout'
 import { ResponseMessage } from '../../ResponseMessage'
+import { Section } from '../../SectioningContent'
 import { DialogBody, Props as DialogBodyProps } from '../DialogBody'
 import { DialogHeader, type Props as DialogHeaderProps } from '../DialogHeader'
 import { dialogContentInner } from '../dialogInnerStyle'
@@ -123,9 +124,8 @@ export const FormDialogContentInner: FC<FormDialogContentInnerProps> = ({
   }, [])
 
   return (
-    // HINT: bodyをスクロールできるようにするため、Sectionではなく、Stack[as="section"][gap=0]を使用する必要がある
-    // eslint-disable-next-line smarthr/best-practice-for-layouts, smarthr/a11y-heading-in-sectioning-content, smarthr/a11y-prohibit-sectioning-content-in-form
-    <Stack as="section" gap={0} className={styles.wrapper}>
+    // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content, smarthr/a11y-prohibit-sectioning-content-in-form
+    <Section className={styles.wrapper}>
       <DialogHeader title={title} subtitle={subtitle} titleTag={titleTag} titleId={titleId} />
       <form onSubmit={handleSubmitAction} className={styles.form}>
         <DialogBody contentPadding={contentPadding} contentBgColor={contentBgColor}>
@@ -154,7 +154,7 @@ export const FormDialogContentInner: FC<FormDialogContentInnerProps> = ({
           )}
         </Stack>
       </form>
-    </Stack>
+    </Section>
   )
 }
 

diff --git a/packages/smarthr-ui/src/components/Dialog/dialogInnerStyle.ts b/packages/smarthr-ui/src/components/Dialog/dialogInnerStyle.ts
@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants'
 
 export const dialogContentInner = tv({
   slots: {
-    wrapper: 'shr-max-h-[calc(100dvh-theme(spacing.2))]',
+    wrapper: 'shr-flex shr-flex-col shr-max-h-[calc(100dvh-theme(spacing.2))]',
     actionArea: [
       'smarthr-ui-Dialog-actionArea',
       'shr-border-t-shorthand shr-px-1.5 shr-py-1 shr-flex-[0_0_auto] shr-sticky shr-bottom-0 shr-z-1 shr-bg-white shr-rounded-b-m',