docs(Foundations): common table component styles rewrite

livechat · Jan 29, 2024 · 5c477ba · 5c477ba
1 parent 6425f35
commit 5c477ba
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 35 deletions.
diff --git a/packages/react-components/src/docs/components/Table/Table.scss b/packages/react-components/src/docs/components/Table/Table.scss
@@ -5,39 +5,37 @@ table {
   overflow: hidden;
   border-collapse: separate;
   border-spacing: 0;
-}
-
-table thead {
-  background-color: var(--surface-secondary-default);
-}
-
-table td:first-of-type {
-  display: flex;
-  column-gap: var(--spacing-3);
-  align-items: center;
-}
-
-table td:first-of-type:hover {
-  cursor: pointer;
-}
-
-table tr {
-  border-top: 1px solid var(--border-basic-secondary);
-}
-
-table tr th {
-  padding: 16px 20px;
-  text-align: left;
-}
-
-table td {
-  background: var(--color-white);
-  padding: 16px 20px;
-  font-size: 14px;
-}
 
-table tr:not(:last-of-type) td {
-  border-bottom: 1px solid var(--border-basic-secondary);
+  thead {
+    background-color: var(--surface-secondary-default);
+
+    th {
+      padding: 16px 20px;
+      text-align: left;
+    }
+  }
+
+  tr {
+    &:not(:last-of-type) > td {
+      border-bottom: 1px solid var(--border-basic-secondary);
+    }
+  }
+
+  td {
+    background: var(--color-white);
+    padding: 16px 20px;
+    font-size: 14px;
+
+    .example-field {
+      display: flex;
+      column-gap: var(--spacing-3);
+      align-items: center;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
 }
 
 .no-wrap {

diff --git a/packages/react-components/src/docs/components/Table/Table.tsx b/packages/react-components/src/docs/components/Table/Table.tsx
@@ -36,9 +36,11 @@ export const Table: React.FC<ITable> = ({
               if (key === 'enum') {
                 return (
                   <td onClick={() => handleCopyText(value as string)}>
-                    {renderExample && renderExample(row['value'])}
-                    {row['enum']}
-                    {row['deprecated'] && <i> (deprecated)</i>}
+                    <div className="example-field">
+                      {renderExample && renderExample(row['value'])}
+                      {row['enum']}
+                      {row['deprecated'] && <i> (deprecated)</i>}
+                    </div>
                   </td>
                 );
               }