Merge pull request #32 from pepabo/add-table-appearance-bg-and-border

Tableコンポーネントで背景色とボーダーのパターンを追加します
pepabo · Jul 10, 2024 · d0710e6 · d0710e6
2 parents 10ed364 + c46141d
commit d0710e6
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 0 deletions.
diff --git a/packages/stories-web/src/components/Table.tsx b/packages/stories-web/src/components/Table.tsx
@@ -7,13 +7,17 @@ export interface Props extends HTMLProps {
   children: ReactNode
   density?: Density
   size?: Extract<Size, 's' | 'm' | 'l'>
+  hasBackground?: boolean
+  hasGridBorder?: boolean
 }
 
 const Table: FC<Props> = (props: Props) => {
   const {
     children,
     density,
     size,
+    hasBackground,
+    hasGridBorder,
     ...rest
   } = props;
 
@@ -27,6 +31,14 @@ const Table: FC<Props> = (props: Props) => {
     classes.push(`-size-${size}`)
   }
 
+  if (hasBackground) {
+    classes.push(`-has-background`)
+  }
+
+  if (hasGridBorder) {
+    classes.push(`-has-grid-border`)
+  }
+
   return (
     <table
       className={classes.join(' ')}

diff --git a/packages/stories-web/src/table.stories.tsx b/packages/stories-web/src/table.stories.tsx
@@ -31,6 +31,12 @@ Index.args = {
         <td className="-align-right">9,000,000</td>
         <td>スウェーデン語</td>
       </tr>
+      <tr>
+        <td>日本</td>
+        <td>東京</td>
+        <td className="-align-right">120,000,000</td>
+        <td>日本語</td>
+      </tr>
     </tbody>
   ),
   density: 'normal',

diff --git a/packages/table/_mixins.scss b/packages/table/_mixins.scss
@@ -62,6 +62,22 @@
   td {
     border-bottom: adapter.get-table-border-size() solid adapter.get-border-color($brightness: light, $name: mid_emphasis);
   }
+
+  @if map.get($option, hasBackground) == true {
+    @include -background-rule;
+  }
+
+  @if map.get($option, hasGirdBorder) == true {
+    @include -grid-border;
+  }
+
+  &.-has-background {
+    @include -background-rule;
+  }
+
+  &.-has-grid-border {
+    @include -grid-border;
+  }
 }
 
 @mixin -align() {
@@ -77,3 +93,18 @@
     @include style;
   }
 }
+
+@mixin -background-rule {
+  tr:nth-child(even) td {
+    background-color: adapter.get-surface-color(light, secondary);
+  }
+  tr:nth-child(odd) td {
+    background-color: adapter.get-surface-color(light, primary);
+  }
+}
+
+@mixin -grid-border {
+  th, td {
+    border: adapter.get-table-border-size() solid adapter.get-border-color($brightness: light, $name: mid_emphasis);
+  }
+}
diff --git a/packages/table/_variables.scss b/packages/table/_variables.scss
@@ -1,4 +1,6 @@
 $default-option: (
+  has-background: false,
+  has-grid-border: false,
   density: normal,
   size: m,
 );