Merge branch 'main' into maximus-sidebar-scroll-anchor-578

Author: maximusmith529

.github/workflows/playwright.yml

@@ -1,4 +1,4 @@
-name: Testing for visual regression on old theme
+name: Running Playwright test on UI
 
 # Run the workflow when code is pushed or when a pull request is created
 on:
@@ -25,19 +25,16 @@ jobs:
           - name: Install dependencies and playwright browsers
             run: cd tests && npm ci && npx playwright install --with-deps
           - name: Run Playwright tests
-            id: test-visual
+            id: test-ui
             run: |
               make tests | tee output.log
-              if grep -q -e "Error: A snapshot doesn't exist at" -e "Screenshot comparison failed" output.log; then
-                echo "Playwright tests failed due to a snapshot issue."
-                exit 1
-              elif grep -q "failed" output.log; then
-                echo "Playwright tests failed due to a non-snapshot issue."
+              if grep -q "failed" output.log; then
+                echo "Playwright tests failed. Please view the Playwright report to see full error."
                 exit 1
               fi
           - uses: actions/upload-artifact@v4
             id: artifact-upload
-            if: ${{ !cancelled() && failure() && steps.test-visual.conclusion == 'failure' }}
+            if: ${{ !cancelled() && failure() && steps.test-ui.conclusion == 'failure' }}
             with:
               name: playwright-report
               path: tests/playwright-report/
@@ -47,10 +44,9 @@ jobs:
             if: ${{ failure() }}
             with:
               script: |
-                const body = `### <span aria-hidden="true">❌</span> Playwright visual snapshot differences were detected.
+                const body = `### <span aria-hidden="true">❌</span> Playwright differences were detected.
                 
-                View the [Playwright report](${{ steps.artifact-upload.outputs.artifact-url }}) 
-                **To approve the snapshot changes and update the snapshots, please comment:** /approve-snapshots`;
+                View the [Playwright report](${{ steps.artifact-upload.outputs.artifact-url }})`;
 
                 await github.rest.issues.createComment({
                   issue_number: context.issue.number,

.github/workflows/update-screenshot.yml

@@ -5,18 +5,18 @@ WRITE_FLAG := --write
 list help::
 	$(info Available Make targets:)
 	@echo "<COMMON>"
-	@echo "		  list | help:  		Print these available make targets"
+	@echo "		  list | help:  	Print these available make targets"
 	@echo "<LINTING AND FORMATTING>"
 	@echo "		 biome-format: 		Runs the biome formatter."
 	@echo "		   biome-lint: 		Runs the biome linter."
 	@echo "		    biome-all:		Runs both the lint and formatting commands."
 	@echo "	   build-example-site:		Builds hugo exampleSite."
-	@echo "  (Set BIOME_ARGS to add additional arguments to biome command (ex: make biome-all BIOME_ARGS=write))"
+	@echo "(Set BIOME_ARGS to add additional arguments to biome command (ex: make biome-all BIOME_ARGS=write))"
 	@echo "<PRE-COMMIT>"
 	@echo "	     setup-pre-commit:		Sets up pre-commit (assuming it is installed)"
 	@echo "<PLAYWRIGHT TESTS>"
-	@echo "		 	tests: 		Runs playwright against the old theme."
-	@echo "     tests-update-screenshots:		Runs playwright against the old theme."
+	@echo "		 	tests: 		Runs playwright against the new theme."
+	@echo "     tests-update-screenshots:		Runs playwright against the new theme."
 
 .PHONY: biome-format biome-lint biome-all setup-pre-commit tests build-example-site
 FLAG :=

Makefile

@@ -426,12 +426,9 @@ ol li:last-child {
       "content"
       "footer";
 
-    .text-content {
-      margin-block-start: 1rem;
-    }
-
     .breadcrumb-layout {
       align-items: center;
+      display: flex;
       padding: var(--space-xs) 0;
 
       &::after {
@@ -1264,11 +1261,6 @@ main {
   }
 }
 
-/* Handles different flow-gap of list page  */
-.list-page.text-content {
-  grid-template-rows: calc(70px + var(--flow-gap)) max-content;
-}
-
 /* MARK: Qualtrics
 */
 
@@ -1390,42 +1382,42 @@ atomic-search-box {
   width: 18.5rem;
   display: flex;
   align-items: center;
-}
 
-atomic-search-box::part(input) {
-  height: 2.25rem;
-  font-size: var(--font-step--1);
-  padding: 0.5rem 1rem;
-  box-sizing: border-box;
-}
+  &::part(input) {
+    height: 2.25rem;
+    font-size: var(--font-step--1);
+    padding: 0.5rem 1rem;
+    box-sizing: border-box;
+  }
 
-atomic-search-box::part(textarea-expander) {
-  white-space: nowrap;
-  overflow-x: auto;
-  overflow-y: hidden;
-  resize: none;
-}
+  &::part(textarea-expander) {
+    white-space: nowrap;
+    overflow-x: auto;
+    overflow-y: hidden;
+    resize: none;
+  }
 
-atomic-search-box::part(textarea) {
-  padding-left: 0;
-  padding-right: 0;
-  font-weight: 400;
-}
+  &::part(textarea) {
+    padding-left: 0;
+    padding-right: 0;
+    font-weight: 400;
+  }
 
-atomic-search-box::part(wrapper) {
-  height: 100%;
-  display: flex;
-  flex-direction: row-reverse;
-  align-items: center;
-}
+  &::part(wrapper) {
+    height: 100%;
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+  }
 
-atomic-search-box::part(submit-button) {
-  order: -1;
-  padding-right: 0;
-}
+  &::part(submit-button) {
+    order: -1;
+    padding-right: 0;
+  }
 
-atomic-search-box::part(submit-button-wrapper) {
-  margin: 0;
+  &::part(submit-button-wrapper) {
+    margin: 0;
+  }
 }
 
 atomic-search-interface#search-standalone-header {
@@ -1456,6 +1448,12 @@ body:not(:has(.main-layout)) header atomic-search-interface {
   display: block;
 }
 
+body:has(atomic-refine-modal[is-open=""]) {
+  /* Lock scrolling when modal is up */
+  position: fixed;
+  width: 100%;
+}
+
 @media (max-width: 88rem) {
   /* Show on pages with sidebar if it is hidden */
   body:has(.sidebar-layout) header atomic-search-interface {
@@ -1911,6 +1909,7 @@ a:hover {
 
 .list-header-container {
   display: flex;
+  margin-top: var(--space-s);
   gap: 1.5rem;
   align-items: center;
   justify-content: start;

assets/css/v2/style.css

@@ -6,6 +6,7 @@ weight: 200
 
 ## tab-group
 
+<div data-testid="tabs-test__basic">
 {{<tabs name="common_steps_for_nginx_oss_and_plus">}}
 
 {{%tab name="Call Outs"%}}
@@ -65,6 +66,7 @@ nginx -s reload
 
 
 {{</tabs>}}
+</div>
 
 
 ## Much nested tab group

exampleSite/content/test-product/tab-group/tab-group.md

@@ -2,6 +2,6 @@ module github.com/nginxinc/docs
 
 go 1.23
 
-require github.com/nginxinc/nginx-hugo-theme v0.41.27 // indirect
+require github.com/nginxinc/nginx-hugo-theme v1.0.4 // indirect
 
 replace github.com/nginxinc/nginx-hugo-theme => ../

exampleSite/go.mod

@@ -1,7 +1,7 @@
 {{ define "main"}}
 
-<div class="content no-sidebar">
-    <div class="not-found-container">
+<div class="content no-sidebar" data-testid="content">
+    <div class="not-found-container" data-testid="not-found-container">
         <h1 class="info-header">
           HTTP 404 - Page not found
         </h1>

layouts/404.html

@@ -44,17 +44,17 @@
     <input type="checkbox" id="search-standalone-header-panel" class="search-standalone-header-panel" hidden/>
     <input type="checkbox" id="sidebar-panel" class="sidebar-panel" hidden/>
     <div class="grid-container">
-        <aside class="sidebar">
+        <aside class="sidebar" data-testid="sidebar">
             {{ partial "sidebar-v2.html" . }}
         </aside>
 
-        <header class="header">
+        <header class="header" data-testid="header">
             {{ block "header" . }}{{end}}
         </header>
 
         {{ block "main" . }}{{ end }}
 
-        <footer class="footer">
+        <footer class="footer" data-testid="footer">
           {{ block "footer-v2" . }}
             {{ partial "footer-v2.html" . }}
           {{ end }}

layouts/_default/baseof.html

@@ -1,8 +1,8 @@
 {{ define "main" }}
 
-<main class="content" role="main">
+<main class="content" role="main" data-testid="content">
     <div data-cms-edit="content" class="text-content list-page">
-        <div class="breadcrumb-layout">
+        <div class="breadcrumb-layout" data-grid="wide">
         {{ if not .IsHome }}
             {{ if not (in .Params.display_breadcrumb "false" ) }}
             {{ partial "breadcrumb" .}}
@@ -30,7 +30,7 @@ <h1>{{ .Title }}</h1>
 
     <h2> In this section </h2>
     <div class="card-section">
-        <div class="card-section-content card-grid">
+        <div class="card-section-content card-grid" data-testid="header-search-dropdown">
         {{ range .Pages.ByWeight }}
             <a href="{{ .Permalink }}" alt="{{ .Title }}" class="card" data-grid="first-two-thirds">
             <div class="card-container">

layouts/_default/list.html

@@ -1,5 +1,5 @@
 {{ define "main" }}
-<main class="content">
+<main class="content" data-testid="content">
     <!-- Replace icons -->
     {{ $content := partial "icon-replacement.html" (dict "content" .Content) }}