fix(GovAlta#1466): apply padding when variant=relaxed

syedszeeshan · Apr 18, 2024 · 139ebc4 · 139ebc4
1 parent 2b48790
commit 139ebc4
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 46 deletions.
diff --git a/libs/web-components/src/assets/css/components.css b/libs/web-components/src/assets/css/components.css
@@ -80,13 +80,8 @@ goa-table table {
   border-collapse: collapse;
 }
 
-/* goa-table.relaxed td {
+goa-table.relaxed td {
   padding: 1rem;
-} */
-
-goa-table div.relaxed ::slotted(td) {
-  padding: 5rem;
-  background-color: yellow;
 }
 
 goa-table.sticky thead {
@@ -100,6 +95,10 @@ goa-table td {
   border-bottom: 1px solid var(--goa-color-greyscale-200);
 }
 
+goa-table td.relaxed {
+  padding: 2rem;
+}
+
 goa-table thead th {
   background-color: var(--goa-color-greyscale-white);
   color: var(--goa-color-text-secondary);

diff --git a/libs/web-components/src/components/table/Table.svelte b/libs/web-components/src/components/table/Table.svelte
@@ -53,14 +53,10 @@
     _isTableRoot = slot.assignedElements()[0].tagName === "TABLE";
 
     if(slot) {
-      document.querySelectorAll("goa-table").forEach(tbl => {
-        findRelaxedTdsAndApplyStyles(tbl);
-      });
+      addClassRelaxedTds(slot);
 
       slot.addEventListener("slotchange", () => {
-        document.querySelectorAll("goa-table").forEach(tbl => {
-          findRelaxedTdsAndApplyStyles(tbl);
-        });
+        addClassRelaxedTds(slot);
       });
     }
 
@@ -127,26 +123,26 @@
     );
   }
 
-  function findRelaxedTdsAndApplyStyles(t: Element) {
-    const shadowRoot = t.shadowRoot;
-    shadowRoot?.querySelectorAll('div.relaxed').forEach( () => {
-        const slot = shadowRoot?.querySelector('slot');
-        slot?.assignedElements().forEach(tbody => {
-          if(tbody.tagName === 'TBODY') {
-            tbody.childNodes.forEach(tr => {
-            if(tr.nodeName === "TR") {
-              tr.childNodes.forEach(td => {
-                if(td.nodeName === "TD") {
-                    (td as HTMLTableCellElement).style.padding = '3rem' //TODO: Confirm the exact padding reqd with Thomas
-                }
-              });
-            }
-            });
-          }
-        });
-      });
+  function parentHasRelaxedClass(slot: HTMLSlotElement): boolean {
+    const parentNode = slot.parentNode;
+    if (parentNode instanceof HTMLElement) {
+      return parentNode.classList.contains('relaxed');
+    }
+    return false;
   }
 
+  function addClassRelaxedTds(slot: HTMLSlotElement) {
+    if(parentHasRelaxedClass(slot)) {
+      const tds = slot
+                  ?.assignedElements()
+                  .find((el) => el.tagName === "TBODY" || el.tagName === "TABLE")
+                  ?.getElementsByTagName("TD") || [];
+
+      for (let i = 0; i < tds?.length; i++) {
+        tds[i].classList.add('relaxed');
+      }
+    }
+  }
 </script>
 
 <div
@@ -161,7 +157,7 @@
   {#if _isTableRoot}
     <slot />
   {:else}
-    <table style={width && "width: 100%;"}>
+    <table style={width && "width: 100%;"} class="{variant}">
       <slot />
     </table>
   {/if}
@@ -179,19 +175,4 @@
   table {
     border-collapse: collapse;
   }
-
-/* TODO:  cleanup code and Comments before PR */
-
-/* ::slotted works */
-div.relaxed :global(::slotted(div)) {
-  color: red;
-  background-color: yellow;
-}
-
-/* ::slotted doesn't work - b/c td is nested  tbody > tr > td */
-div.relaxed :global(::slotted(td)) {
-  padding: 5rem;
-  color: green;
-}
-
 </style>