Merge pull request #41 from pepabo/update-callout-styles

calloutのスタイルを調整
pepabo · Oct 15, 2024 · 0bb7822 · 0bb7822
2 parents 3ebcd06 + 0206903
commit 0bb7822
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 15 deletions.
diff --git a/packages/callout/_mixins.scss b/packages/callout/_mixins.scss
@@ -14,10 +14,25 @@
 
   ._leading {
     padding-right: adapter.get-spacing-size(s);
+    line-height: inherit;
+  }
+
+  ._body {
+    display: flex;
+    flex-direction: column;
+    margin: 0;
   }
 
   ._title {
-    margin-top: 0;
+    margin-block: 0;
+  }
+
+  ._content > *:first-child {
+    margin-block-start: 0;
+  }
+
+  ._content > *:last-child {
+    margin-block-end: 0;
   }
 
   @include -state-style(map-get($options, color));
@@ -59,12 +74,8 @@
   font-size: adapter.get-font-size($size);
   line-height: adapter.get-line-height($level: $size, $density: normal);
 
-  ._leading {
-    line-height: adapter.get-line-height($level: $size, $density: normal);
-  }
-
-  ._title {
-    padding-bottom: adapter.get-spacing-size(map-get(variables.$title-margin-map, $size));
+  ._body {
+    gap: adapter.get-spacing-size(map-get(variables.$title-margin-map, $size));
   }
 }
 

diff --git a/packages/stories-web/src/callout.stories.tsx b/packages/stories-web/src/callout.stories.tsx
@@ -18,12 +18,14 @@ Index.args = {
 export const Multiline = Template.bind({})
 Multiline.args = {
   children: <>
-    <div className="_title">更新に失敗しました</div>
-    以下の入力内容を確認してください。
-    <ul>
-      <li>郵便番号が入力されていません</li>
-      <li>決済方法が選択されていません</li>
-    </ul>
+    <p className="_title">更新に失敗しました</p>
+    <div className="_content">
+      <p>以下の入力内容を確認してください。</p>
+      <ul>
+        <li>郵便番号が入力されていません</li>
+        <li>決済方法が選択されていません</li>
+      </ul>
+    </div>
   </>,
   color: "negative"
 }
diff --git a/packages/stories-web/src/components/Callout.tsx b/packages/stories-web/src/components/Callout.tsx
@@ -23,8 +23,8 @@ const Callout: FC<Props> = (props: Props) => {
 
   return (
     <div className={wrapperClasses.join(' ')}>
-      <span className="in-icon _leading"></span>
-      <div className="_content">
+      <span className="_leading in-icon"></span>
+      <div className="_body">
         { children }
       </div>
     </div>