[#311] patch fix for table fragment not loading as block, restyling t…

…able block
adobe · Jun 27, 2023 · 37b39ba · 37b39ba
1 parent edb4564
commit 37b39ba
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 1 deletion.
diff --git a/blocks/header/header.css b/blocks/header/header.css
@@ -11,6 +11,12 @@
  }
 }
 
+/* fix for fragment rendering main twice causing extra div
+* can be removed if the fragement bug is fixed */
+.header-wrapper > .header:not(.block) {
+ display: none;
+}
+
 .gnav-wrapper {
  position: relative;
  background: #FFF;

diff --git a/blocks/table/table.css b/blocks/table/table.css
@@ -1,5 +1,37 @@
+.table {
+ max-width: 100%;
+ overflow-x: auto;
+ border: 1px solid var(--bg-color-grey);
+ padding: var(--spacing-xxs) var(--spacing-xxs) var(--spacing-xs);
+}
+
+.table tbody {
+ width: 100%;
+}
+
+.table td,
+body main .table td p {
+ font-size: var(--type-body-s-size);
+ line-height: var(--type-body-s-lh);
+ color: var(--color-light-grey-600);
+}
+
 .table td {
- color: #768390;
+ padding: var(--spacing-xxs) var(--spacing-xxs) 0 var(--spacing-xxs);
+}
+
+body main .table td p {
+ padding-left: 0; 
+}
+
+.table tr:first-of-type {
+ border-bottom: 1px solid var(--bg-color-grey);
+}
+
+.table tr:first-of-type td {
+ text-transform: uppercase;
+ padding-top: var(--spacing-xxs);
+ padding-bottom: var(--spacing-xxs);
 }
 
 .table td:first-child {

diff --git a/blocks/table/table.js b/blocks/table/table.js
@@ -1,3 +1,4 @@
 export default function decorate() {
  // nothing to do here
+ // ?? console.log here for block by fragment will have no effect
 }
diff --git a/scripts/scripts.js b/scripts/scripts.js
@@ -740,13 +740,28 @@ export async function decorateGuideTemplateCodeBlock() {
  });
 }
 
+// patch fix for table not being rendered as block in fragment
+export function decorateFragmentTable(main) {
+ if (!main) return;
+ const tables = main.querySelectorAll('table');
+ if (tables) {
+ tables.forEach((table) => {
+ if (table.classList.contains('block')) return;
+ const tableWrapper = createTag('div', { class: 'table' });
+ table.parentNode.insertBefore(tableWrapper, table);
+ tableWrapper.appendChild(table);
+ });
+ }
+}
+
 export function decorateGuideTemplate(main) {
  if (!document.body.classList.contains('guides-template') || !main) return;
  addMessageBoxOnGuideTemplate(main);
  decorateGuideTemplateHeadings(main);
  decorateGuideTemplateHero(main);
  decorateGuideTemplateLinks(main);
  decorateGuideTemplateCodeBlock();
+ decorateFragmentTable(main); // ususally only use fragment in doc detail
 }
 
 /**
@@ -823,6 +838,7 @@ export function decorateMain(main) {
  decorateGuideTemplate(main);
  decorateBlocks(main);
  decorateTitleSection(main);
+ // decorateTableBlock(main);
 }
 
 /**