fix: prevent global style pollution in external fields

measuredco · Nov 3, 2023 · 429731d · 429731d
1 parent 5b4fc92
commit 429731d
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 13 deletions.
diff --git a/packages/core/components/ExternalInput/index.tsx b/packages/core/components/ExternalInput/index.tsx
@@ -104,21 +104,26 @@ export const ExternalInput = ({
 
           <div className={getClassNameModal("tableWrapper")}>
             <table className={getClassNameModal("table")}>
-              <thead>
-                <tr>
+              <thead className={getClassNameModal("thead")}>
+                <tr className={getClassNameModal("tr")}>
                   {keys.map((key) => (
-                    <th key={key} style={{ textAlign: "left" }}>
+                    <th
+                      key={key}
+                      className={getClassNameModal("th")}
+                      style={{ textAlign: "left" }}
+                    >
                       {key}
                     </th>
                   ))}
                 </tr>
               </thead>
-              <tbody>
+              <tbody className={getClassNameModal("tbody")}>
                 {data.map((item, i) => {
                   return (
                     <tr
                       key={i}
                       style={{ whiteSpace: "nowrap" }}
+                      className={getClassNameModal("tr")}
                       onClick={(e) => {
                         onChange(mapProp(item));
 
@@ -128,7 +133,9 @@ export const ExternalInput = ({
                       }}
                     >
                       {keys.map((key) => (
-                        <td key={key}>{item[key]}</td>
+                        <td key={key} className={getClassNameModal("td")}>
+                          {item[key]}
+                        </td>
                       ))}
                     </tr>
                   );

diff --git a/packages/core/components/ExternalInput/styles.module.css b/packages/core/components/ExternalInput/styles.module.css
@@ -69,49 +69,53 @@
 }
 
 .ExternalInputModal-table {
+  border-collapse: unset;
   border-spacing: 0px;
   color: var(--puck-color-neutral-4);
   position: relative;
 }
 
-.ExternalInputModal-table thead {
+.ExternalInputModal-thead {
   position: sticky;
   top: 0;
 }
 
-.ExternalInputModal-table th {
+.ExternalInputModal-th {
   border-bottom: 1px solid var(--puck-color-grey-8);
   border-top: 1px solid var(--puck-color-grey-8);
   font-weight: 700;
   padding: 16px 24px;
   opacity: 0.9;
 }
 
-.ExternalInputModal-table td {
+.ExternalInputModal-td {
+  font-family: var(--puck-font-stack);
   padding: 16px 24px;
 }
 
-.ExternalInputModal-table tr:nth-of-type(n) {
+.ExternalInputModal-tr:nth-of-type(n) {
   background-color: white;
 }
 
-.ExternalInputModal-table tr:nth-of-type(2n) {
+.ExternalInputModal-tr:nth-of-type(2n) {
   background-color: var(--puck-color-grey-10);
 }
 
-.ExternalInputModal-table tr td:first-of-type {
+.ExternalInputModal-tr .ExternalInputModal-td:first-of-type {
   font-weight: 500;
 }
 
-.ExternalInputModal-table tbody tr:hover {
+.ExternalInputModal-tbody .ExternalInputModal-tr:hover {
   background: var(--puck-color-grey-11);
   color: var(--puck-color-azure-4);
   cursor: pointer;
   position: relative;
   margin-left: -5px;
 }
 
-.ExternalInputModal-table tbody tr:hover td:first-of-type {
+.ExternalInputModal-tbody
+  .ExternalInputModal-tr:hover
+  .ExternalInputModal-td:first-of-type {
   border-left: 4px solid var(--puck-color-azure-4);
   padding-left: 20px;
 }