feat: WC-274 component can opt for CMS styles (#1127)

wesleyboar · shayanaijaz · web-flow · commit 0b45158a8251 · 2025-07-08T16:07:49.000-05:00
* feat: WC-219 isolate external styles for component * fix: WC-219 change hook ext from jsx to js * fix: WC-219 fix hot reload error, add test The testing might be overkill. It passed before the fix was added. * refactor: WC-219 organize code more cleanly to help in debugging solution to hot reload error in dev * refactor: WC-219 change solution from DOM to CSS KNOWN ISSUES: Does not make CMS content look exactly correct. * chore: WC-219 remove cruft * feat: WC-219 hide navbar, simplify cms content CSS KNOWN ISSUE: CMS content still does not render perfect. * feat: WC-219 match test CMS content perfectly * chore: WC-219 delete shadow dom attempt * refactor: WC-219 rename files * fix: WC-219 missing part of "rename files" commit * chore: WC-219 delete outdated import * fix: WC-219 attrname vs attrName in JSX * fix: WC-219 file accidentally deleted * refactor: WC-219 extract breadcrumbs * fix: header styles overwritten by mimic-cms styles * fix: basic text color too dark cuz it is using portal basic text color instead of cms basic text color * feat!: footer from CMS TO DO: - Make footer conditional. - Fix footer position. BREAKING CHANGE: Footer always shown. Footer position is wrong. * refactor: cms-footer ID changed to just footer * chore: remove unused class * feat: only load CMS footer when necessary * docs: "make CMS styles conditional like … footer" * feat: "make CMS styles conditional like … footer" TODO: - reduce redundant code * docs: delete "make CMS styles conditional …" * fix: move DataFiles CSS back to DataFiles * refactor: simplify cms_styles.html * fix: cms_styles not disabled The style does not support disabled attribute. AI suggested media attribute. Unexpected, but sensible. * chore: restore new line * chore: simplify DataFiles…Breadcrumbs * refactor: CMSWrapper * refactor: clean up so DPM usage is clearer * chore: use `latest` cms image again v4.31.0 (latest) includes the new feature * fix: does not match CMS UI exactly Return CMS code to after <head>, which React/Vite appends with CSS that cms_styles must overwrite. * refactor cms_styles → cms_ui * chore: npm prettier--write client * chore: npm run lint:css * fix: footer on CMS layout * chore: remove duplicate code * chore: remove stray `async` keyword * fix: CMS footer present upon return to regular Portal * fix: DataFilesForDPM.global.css bleed * feat: CMSWrapper useDynamicStylesheets * refactor: move <main> to CMSWrapper only * chore: npm prettier --write client * docs: remove pagination comment * chore: comment format * test: other sample content * feat: navigate sample content * fix: remove tab-content/pane styles * fix: image url and attr whitepsace * fix: whtiespace between HTML tags for DPMRead * chore: npm prettier --write client * fix: misaligned image in <div> missing `container` Also added on design: - https://pprd.digitalrocks.tacc.utexas.edu/datasets/317/ - https://pprd.digitalrocks.tacc.utexas.edu/datasets/218/ * fix: wrong markup for heading Also fixed in design: - https://pprd.digitalrocks.tacc.utexas.edu/datasets/317/ - https://pprd.digitalrocks.tacc.utexas.edu/datasets/218/ * fix: nested container alignement mimics a CMS idiosyncrasy * chore: npm prettier --write client * fix: missing spaces * fix: misaligned nested container * fix: poetry lock * fix: do not import s-footer twice core-styles.cms.css provides it * fix: mirror TACC/Core-CMS-Custom#494 updates TACC/Core-CMS-Custom#494 And those updates made to templates on PPRD DigitalRocks. * deps: Core-Styles v2.45 * enhance: migrate styles from CDN to here * refactor: reorg styles so CMS can load 'em cleanly * chore: use latest corestyles, if used via CDN * chore: core-cms v4.33 via latest * fix: manually revert unintentional change probably related to task.digital-rocks being behind main * Revert "fix: manually revert unintentional change" This reverts commit 90890d2. * fix: condifently revert unintentional changes probably related to task.digital-rocks being behind main * fix: delete stray file probably related to task.digital-rocks being behind main * fix: inaccurate href value * fix: modals, dropdowns, tabs (new bootstrap, v5) Bootstrap v5 changes `data-` attributes for these features. Modals and Dropdowns require new naming. * fix: missing modals data- attr update Related to previous commit * chore: remove `data-tag-change-from` attributes These are cruft from CMS script that changes HTML elements which Django CMS did not allow me to put in a snippet. * fix: tooltips * fix: modal content styles * fix: limit portal modal content styles to portal * fix: dropdown styles * refactor: delete sample components + their styles --------- Co-authored-by: Shayan Khan <skhan@tacc.utexas.edu>
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -70,7 +70,7 @@
   },
   "devDependencies": {
     "@rollup/plugin-eslint": "^8.0.1",
-    "@tacc/core-styles": "^2.39.4",
+    "@tacc/core-styles": "^2.45.0",
     "@testing-library/jest-dom": "^5.0.2",
     "@testing-library/react": "^16.0.1",
     "@types/js-cookie": "^3.0.6",
diff --git a/client/src/components/_common/CMSBreadcrumbs/CMSBreadcrumbs.jsx b/client/src/components/_common/CMSBreadcrumbs/CMSBreadcrumbs.jsx
@@ -0,0 +1,49 @@
+import React from 'react';
+
+export default function CMSBreadcrumbs() {
+  /* TODO: Move to …module.css OR into Core-Styles */
+  /* https://github.com/TACC/Core-CMS/blob/v4.30.0/taccsite_cms/templates/nav_cms_breadcrumbs.html#L4-L11 */
+  const breadcrumbCSS = `
+    .s-breadcrumbs a:not([href]) {
+      opacity: 1;
+      color: unset;
+    }
+  `;
+
+  /* TODO: Migrate to JSX logic (when it exists) */
+  React.useEffect(() => {
+    // Disable href for the current page breadcrumb
+    const crumbs = document.getElementById('cms-breadcrumbs');
+    const secondLink = crumbs && crumbs.querySelector('li:nth-of-type(2) > a');
+    if (secondLink) secondLink.removeAttribute('href');
+  }, []);
+
+  /* TODO: Render based on data param, not as static content */
+  return (
+    <>
+      <style dangerouslySetInnerHTML={{ __html: breadcrumbCSS }} />
+      <nav className="s-breadcrumbs" id="cms-breadcrumbs">
+        <ol itemScope itemType="https://schema.org/BreadcrumbList">
+          <li
+            itemScope
+            itemProp="itemListElement"
+            itemType="https://schema.org/ListItem"
+          >
+            <a href="/" itemProp="item">
+              <span itemProp="name">Index</span>
+            </a>
+            <meta itemProp="position" content="1" />
+          </li>
+          <li
+            itemScope
+            itemProp="itemListElement"
+            itemType="https://schema.org/ListItem"
+          >
+            <span itemProp="name">Browse Datasets</span>
+            <meta itemProp="position" content="2" />
+          </li>
+        </ol>
+      </nav>
+    </>
+  );
+}
diff --git a/client/src/components/_common/CMSBreadcrumbs/index.js b/client/src/components/_common/CMSBreadcrumbs/index.js
@@ -0,0 +1 @@
+export { default } from './CMSBreadcrumbs';
diff --git a/client/src/components/_common/CMSWrapper/CMSWrapper.jsx b/client/src/components/_common/CMSWrapper/CMSWrapper.jsx
@@ -0,0 +1,25 @@
+import React, { useEffect } from 'react';
+
+import PropTypes from 'prop-types';
+
+function CMSWrapper({ children }) {
+  useEffect(() => {
+    // To (de)activate CMS styles on (un)mount
+    window.dispatchEvent(new CustomEvent('cms-styles-activated'));
+    return () => {
+      window.dispatchEvent(new CustomEvent('cms-styles-deactivated'));
+    };
+  }, []);
+
+  return (
+    <main id="mimic-cms" className="container">
+      {children}
+    </main>
+  );
+}
+
+CMSWrapper.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default CMSWrapper;
diff --git a/client/src/components/_common/CMSWrapper/index.js b/client/src/components/_common/CMSWrapper/index.js
@@ -0,0 +1 @@
+export { default } from './CMSWrapper';
diff --git a/client/src/components/_common/index.js b/client/src/components/_common/index.js
@@ -25,6 +25,8 @@ export {
   default as IntroMessage,
   isKnownMessage as isKnownIntroMessage,
 } from './IntroMessage';
+export { default as CMSBreadcrumbs } from './CMSBreadcrumbs';
+export { default as CMSWrapper } from './CMSWrapper';
 export { default as CustomMessage } from './CustomMessage';
 export { default as Pill } from './Pill';
 export { default as TextCopyField } from './TextCopyField';
diff --git a/client/src/index.css b/client/src/index.css
@@ -1,4 +1,6 @@
-@import url('./styles/global.css');
+@import url('./styles/global.css') layer(portal);
+
+@layer portal {
 
 /*
   Sectioning Root
@@ -51,8 +53,7 @@ code {
 /* FAQ: The `html` and `body` boxes are only as tall as their content
         (which may be shorter than window height), cannot have siblings elements
         (would be influenced by force stretch), so force stretch outward. */
-html,
-body {
+body:not(.has-cms-ui) {
   /* As a stretched item */
   position: absolute;
   left: 0;
@@ -75,31 +76,34 @@ body {
 /* FAQ: The `.content` and `#react-root` boxes are only as tall as their content
         (which may be shorter than window height), can have siblings elements
         (would be influenced by force stretch), so gently stretch outward. */
-body {
+body:not(.has-cms-ui) {
   /* As a flex container */
   display: flex;
   flex-direction: column;
 }
-body > .content {
+body:not(.has-cms-ui) .content {
   /* As a flex item */
   flex-grow: 1;
 
   /* As a flex container */
   display: flex;
   flex-direction: column;
 }
-#react-root {
+body:not(.has-cms-ui) #react-root {
   /* As a flex item */
   flex-grow: 1;
 
   /* As a stretched item container */
   position: relative;
 }
-#react-root > :only-child {
+body:not(.has-cms-ui) #react-root > :only-child {
   /* As a stretched item */
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
 }
+
+/* end @layer portal */
+}
diff --git a/client/src/styles/components/bootstrap.tooltip.css b/client/src/styles/components/bootstrap.tooltip.css
@@ -0,0 +1,7 @@
+i[data-bs-toggle="tooltip"] {
+  font-style: normal;
+}
+
+.tooltip-inner {
+    font-size: var(--global-font-size--medium);
+}
diff --git a/client/src/styles/global.css b/client/src/styles/global.css
@@ -4,7 +4,8 @@
 /* SETTINGS */
 @import url('@tacc/core-styles/src/lib/_imports/settings/border.css');
 @import url('./settings/color.css');
-@import url('./settings/font.css');
+@import url('@tacc/core-styles/dist/settings/font.css');
+@import url('@tacc/core-styles/dist/settings/font--portal.css');
 @import url('./settings/space.css');
 
 /* TOOLS */
@@ -29,6 +30,7 @@
 @import url('./components/bootstrap.nav.css');
 @import url('./components/bootstrap.utils.css');
 @import url('./components/bootstrap.button.css');
+@import url('./components/bootstrap.tooltip.css');
 @import url('./components/mui.tabs.css');
 
 /* TRUMPS */
diff --git a/client/src/styles/settings/font.css b/client/src/styles/settings/font.css
diff --git a/server/portal/templates/base.html b/server/portal/templates/base.html
@@ -16,17 +16,18 @@
     <link rel="canonical" href="{{request.get_full_path}}">
     <base href="/">
     {% block head_extra %}{% endblock %}
+    <style>
+      @layer portal, mimic-cms, header;
+      @import url("https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css") layer(portal);
+      @import url("/static/site_cms/css/build/core-styles.theme.default.css") layer(header);
+      @import url("/static/site_cms/css/build/core-styles.header.css") layer(header);
+    </style>
     {% if settings.PORTAL_CSS_FILENAMES|length %}
     <!-- Project CSS -->
       {% for stylesheet in settings.PORTAL_CSS_FILENAMES %}
       <link rel="stylesheet" href="{{ stylesheet }}">
       {% endfor %}
     {% endif %}
-    <!-- Vendor CSS -->
-    <link id="css-bootstrap" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
-    <!-- Header CSS -->
-    <link rel="stylesheet" href="/static/site_cms/css/build/core-styles.theme.default.css">
-    <link rel="stylesheet" href="/static/site_cms/css/build/core-styles.header.css">
 
     {% block styles %}{% endblock %}
   </head>
@@ -38,6 +39,7 @@
       {% block content %}{% endblock %}
     </div>
     {% include 'includes/footer.html' %}
+    {% include 'includes/cms_ui.html' %}
     {% block scripts %}{% endblock %}
     <!-- Bootstrap JS -->
     <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
diff --git a/server/portal/templates/includes/cms_ui.html b/server/portal/templates/includes/cms_ui.html
@@ -0,0 +1,83 @@
+<style id="cms-ui-styles" media="not all">{# i.e. disabled #}
+  @layer mimic-cms, mimic-cms.base, mimic-cms.project;
+
+  @import url(/static/site_cms/css/build/core-styles.base.css) layer(mimic-cms.base);
+  @import url(/static/site_cms/css/build/core-styles.cms.css) layer(mimic-cms.base);
+  @import url(/static/site_cms/css/build/core-cms.css) layer(mimic-cms.project);
+
+  /* To mimic a CMS idiosyncrasy */
+  /* https://github.com/TACC/Core-CMS/blob/v4.31.0/taccsite_cms/templates/base.html#L73-L76 */
+  #cms-content-container.container .container { padding-inline: 0; }
+
+  /* To mimic Bootstrap v4 (which CMS uses) */
+  .workbench-content .container { --bs-gutter-x: 15px; }
+  .workbench-content .row { --bs-gutter-x: 30px; }
+
+  /* To change high-level styles to match CMS */
+  .workbench-wrapper { color: var(--global-color-primary--x-dark); }
+  .workbench-content .container {
+    margin-left: revert-layer;
+    max-width: revert-layer;
+  }
+  .workbench-content .row {
+    margin-right: revert-layer;
+    margin-left: revert-layer;
+  }
+  body { -webkit-font-smoothing: revert; }
+  .c-button { --max-width: auto; }
+
+  /* To change Portal's Bootstrap styles to match CMS */
+  .workbench-wrapper .dropdown-menu,
+  .workbench-wrapper .dropdown-menu::before,
+  .workbench-wrapper .dropdown-menu::after,
+  .workbench-wrapper .dropdown-item,
+  .workbench-wrapper .dropdown-item:focus,
+  .workbench-wrapper .dropdown-item:hover,
+  .workbench-wrapper .dropdown-divider {
+    all: revert-layer;
+  }
+
+  /* To hide navbar */
+  /* TODO: Instead of this, component using CMS styles should not use navbar */
+  #react-root:has(#mimic-cms) .nav-sidebar {
+    display: none;
+  }
+</style>
+
+<script id="cms-ui-script" type="module">
+  let footerEl = null;
+  let footerOriginalMarkup = null;
+
+  const toggleStyles = (enabled) => {
+    const media = (enabled) ? 'all' : 'not all';
+    document.getElementById('cms-ui-styles').media = media;
+  };
+
+  const toggleLayout = (enabled) => {
+    document.body.classList.toggle('has-cms-ui', enabled);
+  };
+
+  const useCMSFooter = async () => {
+    footerEl = document.getElementById('footer');
+    footerOriginalMarkup = footerEl.outerHTML;
+
+    const { replaceFromURL } = await import('/static/site_cms/js/modules/importHTML.js');
+    footerEl = await replaceFromURL('/cms/markup/footer', footerEl);
+  };
+  const restorePortalFooter = () => {
+    footerEl.outerHTML = footerOriginalMarkup;
+  };
+
+  window.addEventListener('cms-styles-activated', async (event) => {
+    console.log(`event: ${event.type}`);
+    toggleStyles(true);
+    toggleLayout(true);
+    await useCMSFooter();
+  });
+  window.addEventListener('cms-styles-deactivated', (event) => {
+    console.log(`event: ${event.type}`);
+    toggleStyles(false);
+    toggleLayout(false);
+    restorePortalFooter();
+  });
+</script>
diff --git a/server/portal/templates/includes/footer.html b/server/portal/templates/includes/footer.html
@@ -1,3 +1,3 @@
 {% load static %}
-<footer class="container-fluid">
+<footer id="footer">
 </footer>

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export { default } from './CMSBreadcrumbs';`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export { default } from './CMSWrapper';`