Merge pull request #131 from 8845musign/modal-fix-header-and-footer

Modals with Sticky Hedaer & Sticky Footter

.storybook/decorators/ResetCssDecorator.tsx

@@ -0,0 +1,28 @@
+import { type FC, type PropsWithChildren, useEffect } from 'react';
+
+export const resetCss = {
+  none: 'none',
+  modernCss: 'modern css reset',
+} as const;
+
+export const ResetCssDecorator: FC<
+  PropsWithChildren<{
+    applyResetCss: (typeof resetCss)[keyof typeof resetCss];
+  }>
+> = ({ children, applyResetCss }) => {
+  useEffect(() => {
+    const link = document.querySelector<HTMLLinkElement>('#reset-css');
+
+    if (!link) {
+      return;
+    }
+
+    if (applyResetCss === resetCss.modernCss) {
+      link.href = '/styles/modern-css-reset.css';
+    } else {
+      link.href = '';
+    }
+  });
+
+  return <>{children}</>;
+};

.storybook/preview-head.html

@@ -1,3 +1,5 @@
+<link type="text/css" rel="stylesheet" href="" id="reset-css"/>
+
 <script>
   document.documentElement.setAttribute('lang', 'ja');
 </script>

.storybook/preview.tsx

@@ -0,0 +1,37 @@
+import '@ubie/design-tokens/dist/tokens.css';
+import { Preview } from '@storybook/react';
+// @ts-ignore
+import { resetCss, ResetCssDecorator } from './decorators/ResetCssDecorator';
+
+export const parameters = {
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};
+export const tags = ['autodocs'];
+
+const preview: Preview = {
+  globalTypes: {
+    resetCss: {
+      description: 'Global theme for components',
+      defaultValue: resetCss.modernCss,
+      toolbar: {
+        title: 'Reset CSS',
+        icon: 'markup',
+        items: [resetCss.none, resetCss.modernCss],
+      },
+    },
+  },
+  decorators: [
+    (story, context) => {
+      const applyResetCss = context.globals.resetCss || resetCss.none;
+
+      return <ResetCssDecorator applyResetCss={applyResetCss}>{story()}</ResetCssDecorator>;
+    },
+  ],
+};
+
+export default preview;

.storybook/public/styles/modern-css-reset.css

@@ -0,0 +1,76 @@
+/* Andy-set-studio/modern-css-reset https://github.com/Andy-set-studio/modern-css-reset  */
+
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+/* Remove default margin */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+    margin: 0;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul[role="list"],
+ol[role="list"] {
+    list-style: none;
+}
+
+/* Set core root defaults */
+html:focus-within {
+    scroll-behavior: smooth;
+}
+
+/* Set core body defaults */
+body {
+    min-height: 100vh;
+    text-rendering: optimizespeed;
+    line-height: 1.5;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+    text-decoration-skip-ink: auto;
+}
+
+/* Make images easier to work with */
+img,
+picture {
+    display: block;
+    max-width: 100%;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+    font: inherit;
+}
+
+/* Remove all animations and transitions for people that prefer not to see them */
+@media (prefers-reduced-motion: reduce) {
+    html:focus-within {
+        scroll-behavior: auto;
+    }
+
+    *,
+    *::before,
+    *::after {
+        transition-duration: 0.01ms !important;
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        scroll-behavior: auto !important;
+    }
+}

package.json

@@ -137,5 +137,8 @@
   "bugs": {
     "url": "https://github.com/ubie-oss/ubie-ui/issues"
   },
-  "homepage": "https://github.com/ubie-oss/ubie-ui#readme"
+  "homepage": "https://github.com/ubie-oss/ubie-ui#readme",
+  "dependencies": {
+    "debounce": "^2.1.0"
+  }
 }

src/components/ActionHalfModal/ActionHalfModal.module.css

@@ -32,56 +32,83 @@
   max-width: 600px;
   max-height: calc(100% - 24px);
   margin: 0 auto;
+  overflow-y: hidden;
   background: #fff;
   border-radius: 12px;
   border-end-start-radius: 0;
   border-end-end-radius: 0;
   transform: translate3d(-50%, 0, 0);
 }
 
-.dialog.bodyScroll {
-  overflow-y: auto;
-}
-
 .dialog.fullscreen {
   height: calc(100% - 24px);
 }
 
+.scrollContainer {
+  height: 100%;
+  overflow-y: auto;
+}
+
 .mainContent {
   display: flex;
   flex-direction: column;
-  gap: var(--size-spacing-lg);
-  padding: var(--size-spacing-lg) var(--size-spacing-md);
 }
 
 .mainContent.headerLess {
   padding-top: var(--size-spacing-xl);
 }
 
 .mainContent.fullscreen {
-  flex-grow: 1;
+  min-height: 100%;
 }
 
 .header {
+  padding: var(--size-spacing-lg) var(--size-spacing-md);
   font-size: var(--text-heading-xs-size);
   font-weight: bold;
   line-height: var(--text-heading-xs-line);
   text-align: center;
   white-space: pre-wrap;
+  background-color: var(--color-ubie-white);
 
   /* May receive focus in the initial display. */
   outline: none;
 }
 
+.header.sticky {
+  position: sticky;
+  top: 0;
+}
+
+.header.sticky.canScroll {
+  border-bottom: 1px solid var(--color-border);
+}
+
+.body {
+  padding-right: var(--size-spacing-md);
+  padding-left: var(--size-spacing-md);
+}
+
 .body.fullscreen {
-  height: 100%;
+  flex: 1;
   min-height: 400px;
   overflow: hidden;
 }
 
 .buttonContainer {
   display: grid;
   gap: var(--size-spacing-md);
+  padding: var(--size-spacing-lg) var(--size-spacing-md) var(--size-spacing-md);
+  background-color: var(--color-ubie-white);
+}
+
+.buttonContainer.sticky {
+  position: sticky;
+  bottom: 0;
+}
+
+.buttonContainer.sticky.canScroll {
+  border-top: 1px solid var(--color-border);
 }
 
 .overlayEnter {

src/components/ActionHalfModal/ActionHalfModal.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { useCallback, useState } from 'react';
+import { ComponentProps, useCallback, useState } from 'react';
 import { ActionHalfModal } from './ActionHalfModal';
 
 export default {
@@ -34,7 +34,9 @@ const LongBody = () => (
 const defaultArgs = {
   header: 'モーダル',
   children: <LongBody />,
-};
+  stickyHeader: false,
+  stickyFooter: false,
+} as const satisfies Partial<ComponentProps<typeof ActionHalfModal>>;
 
 export const Default: Story = {
   render: (args) => {
@@ -302,3 +304,33 @@ export const WithHeroAndFullScreen: Story = {
     ),
   },
 };
+
+export const StickyHeaderAndFooter: Story = {
+  render: (args) => {
+    const [open, setOpen] = useState(true);
+
+    const onClose = useCallback(() => {
+      setOpen(false);
+    }, []);
+
+    return (
+      <>
+        <button type="button" onClick={() => setOpen(true)}>
+          Open Modal
+        </button>
+        <ActionHalfModal
+          primaryActionLabel="アクション"
+          onPrimaryAction={onClose}
+          {...args}
+          open={open}
+          onClose={onClose}
+        />
+      </>
+    );
+  },
+  args: {
+    ...defaultArgs,
+    stickyHeader: true,
+    stickyFooter: true,
+  },
+};