Merge branch 'master' into display-plugin-verison

jenkinsci · Dec 18, 2024 · b4ac5a3 · b4ac5a3
2 parents d4aa135 + 1036666
commit b4ac5a3
Show file tree

Hide file tree

Showing 8 changed files with 125 additions and 43 deletions.
diff --git a/src/main/resources/io/jenkins/plugins/designlibrary/AppBar/index.jelly b/src/main/resources/io/jenkins/plugins/designlibrary/AppBar/index.jelly
@@ -3,16 +3,18 @@
   <s:layout>
     <s:section title="${%topAppBar}" description="${%topAppBar.description}">
       <s:group>
-        <s:preview fullWidth="true" noBottomPadding="true">
-          <l:app-bar title="Page title" subtitle="3">
-            <button class="jenkins-button jenkins-button--primary">
-              <l:icon src="symbol-add-outline plugin-ionicons-api" />
-              Primary action
-            </button>
-            <button class="jenkins-button">Secondary</button>
-            <button class="jenkins-button">Secondary</button>
-            <t:help href="https://www.jenkins.io" />
-          </l:app-bar>
+        <s:preview fullWidth="true">
+          <div class="jdl-app-bars-page__example jdl-app-bars-page__example--top">
+            <l:app-bar title="Page title" subtitle="3">
+              <button class="jenkins-button jenkins-button--primary">
+                <l:icon src="symbol-add-outline plugin-ionicons-api" />
+                Primary
+              </button>
+              <button class="jenkins-button">Secondary</button>
+              <button class="jenkins-button">Secondary</button>
+              <t:help href="https://www.jenkins.io" />
+            </l:app-bar>
+          </div>
         </s:preview>
         <s:code file="topAppBar.jelly" />
       </s:group>
@@ -32,16 +34,23 @@
     <s:section title="${%bottomAppBar}" description="${%bottomAppBar.description}">
       <s:group>
         <s:preview fullWidth="true">
-          <p class="jdl-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lobortis accumsan lorem vel maximus. Vestibulum malesuada velit elementum, finibus arcu nec, maximus eros. Donec varius lacus at orci ultrices volutpat. Nulla ex dui, fringilla a sem a, imperdiet auctor enim. Aliquam ipsum orci, volutpat quis porta sit amet, commodo et sem.</p>
-          <p class="jdl-paragraph">Maecenas a elit eget est aliquam consectetur dapibus eu nibh. Suspendisse potenti. Fusce tristique nisl ut malesuada sollicitudin. Praesent sed nisl nibh. Etiam tincidunt enim sit amet eleifend maximus. Aenean molestie congue est, eu vehicula ex vulputate nec. Duis commodo, arcu a malesuada facilisis, purus ex imperdiet dolor, nec rhoncus nibh nisi eu ex. Vivamus varius eleifend sollicitudin.</p>
-          <f:bottomButtonBar>
-            <div class="jenkins-buttons-row">
-              <button class="jenkins-button jenkins-button--primary">
-                Primary control
-              </button>
-              <button class="jenkins-button">Secondary</button>
+          <div class="jdl-app-bars-page__example jdl-app-bars-page__example--bottom">
+            <div class="jdl-app-bars-page__skeleton">
+              <div />
+              <div />
+              <div />
+              <div />
+              <div />
             </div>
-          </f:bottomButtonBar>
+            <f:bottomButtonBar>
+              <div class="jenkins-buttons-row">
+                <button class="jenkins-button jenkins-button--primary">
+                  Save
+                </button>
+                <button class="jenkins-button">Apply</button>
+              </div>
+            </f:bottomButtonBar>
+          </div>
         </s:preview>
         <s:code file="bottomAppBar.jelly" />
       </s:group>

diff --git a/src/main/resources/scss/abstracts/_overrides.scss b/src/main/resources/scss/abstracts/_overrides.scss
@@ -1,12 +1,14 @@
 :root {
   --jdl-spacing: var(--section-padding);
   --jdl-border-width: 1.5px;
-  --jdl-border: var(--jdl-border-width) solid color-mix(in srgb, var(--text-color-secondary) 9%, transparent);
+  --jdl-border: var(--jdl-border-width) solid color-mix(in srgb, var(--text-color-secondary) 9%, var(--card-background));
+  --jdl-border-translucent: var(--jdl-border-width) solid color-mix(in srgb, var(--text-color-secondary) 9%, transparent);
   --jdl-box-shadow: 0 0 0 var(--jdl-border-width) color-mix(in srgb, currentColor 5%, transparent),
   0 10px 15px rgba(0, 0, 0, 0.05);
 
   @media (prefers-contrast: more) {
     --jdl-border: var(--jdl-border-width) solid var(--text-color);
+    --jdl-border-translucent: var(--jdl-border-width) solid var(--text-color);
     --jdl-box-shadow: 0 0 0 var(--jdl-border-width) var(--text-color);
   }
 }

diff --git a/src/main/resources/scss/components/_component-sample.scss b/src/main/resources/scss/components/_component-sample.scss
@@ -10,24 +10,11 @@
   gap: 1rem;
   border-radius: 0.66rem;
   border: var(--jdl-border);
-
-  &::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-    background: radial-gradient(at 40% 20%, hsl(312, 42%, 60%) 0, transparent 50%),
-    radial-gradient(at 80% 0%, hsl(11, 100%, 56%) 0, transparent 50%),
-    radial-gradient(at 0% 50%, hsl(354, 64%, 72%) 0, transparent 50%),
-    radial-gradient(at 80% 50%, hsl(319, 66%, 64%) 0, transparent 50%),
-    radial-gradient(at 0% 100%, hsl(264, 37%, 59%) 0, transparent 50%),
-    radial-gradient(at 80% 100%, hsl(342, 55%, 41%) 0, transparent 50%),
-    radial-gradient(at 0% 0%, hsla(343, 100%, 76%, 1) 0, transparent 50%);
-    background-attachment: fixed;
-    background-position: center;
-    z-index: -1;
-    opacity: 0.075;
-  }
+  background: linear-gradient(45deg, color-mix(in srgb, var(--pink) 7.5%, transparent),
+          color-mix(in srgb, var(--light-indigo) 7.5%, transparent));
+  background-attachment: fixed;
+  background-position: center;
+  background-clip: padding-box;
 
   &--full-width {
     align-items: unset;

diff --git a/src/main/resources/scss/pages/_app-bars.scss b/src/main/resources/scss/pages/_app-bars.scss
@@ -0,0 +1,84 @@
+.jdl-app-bars-page__example {
+  padding: var(--jdl-spacing);
+  border: var(--jdl-border);
+
+  .jenkins-app-bar {
+    margin-bottom: 0;
+  }
+
+  #bottom-sticker {
+    margin-bottom: calc(var(--jdl-spacing) * -0.5);
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: calc(var(--jdl-spacing) * 2);
+    pointer-events: none;
+    backdrop-filter: blur(20px);
+  }
+
+  &--top {
+    border-top-left-radius: 0.5rem;
+    border-top-right-radius: 0.5rem;
+    margin-bottom: calc(var(--jdl-spacing) * -1);
+    padding-bottom: calc(var(--jdl-spacing) * 2);
+    background: linear-gradient(var(--background) 90%, transparent);
+
+    &::after {
+      bottom: 0;
+      mask-image: linear-gradient(transparent, black 80%);
+    }
+  }
+
+  &--bottom {
+    border-bottom-left-radius: 0.5rem;
+    border-bottom-right-radius: 0.5rem;
+    margin-top: calc(var(--jdl-spacing) * -1);
+    padding-top: calc(var(--jdl-spacing) * 2);
+    background: linear-gradient(transparent, var(--background) 10%);
+
+    &::after {
+      top: 0;
+      mask-image: linear-gradient(black 20%, transparent);
+      border-top-left-radius: calc(0.66rem - var(--jdl-border-width));
+      border-top-right-radius: calc(0.66rem - var(--jdl-border-width));
+    }
+  }
+}
+
+.jdl-app-bars-page__skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-bottom: calc(var(--jdl-spacing) * 0.5);
+
+  div {
+    width: 50%;
+    height: 10px;
+    border-radius: 0.25rem;
+    background: var(--text-color-secondary);
+
+    @media (prefers-contrast: no-preference) {
+      opacity: 0.5;
+    }
+
+    &:nth-of-type(2) {
+      width: 40%;
+    }
+
+    &:nth-of-type(3) {
+      width: 30%;
+    }
+
+    &:nth-of-type(4) {
+      width: 45%;
+    }
+
+    &:nth-of-type(5) {
+      width: 40%;
+    }
+  }
+}
diff --git a/src/main/resources/scss/pages/_home.scss b/src/main/resources/scss/pages/_home.scss
@@ -41,7 +41,7 @@
     left: 0;
     right: 0;
     aspect-ratio: 16 / 7;
-    border: var(--jdl-border);
+    border: var(--jdl-border-translucent);
     border-radius: 1rem;
   }
 }

diff --git a/src/main/resources/scss/pages/_index.scss b/src/main/resources/scss/pages/_index.scss
@@ -1,3 +1,4 @@
+@use "app-bars";
 @use "cards";
 @use "colors";
 @use "conventions";

diff --git a/src/main/webapp/AppBar/bottomAppBar.jelly b/src/main/webapp/AppBar/bottomAppBar.jelly
@@ -1,11 +1,10 @@
 <div>
-  <p>...</p>
   <f:bottomButtonBar>
     <div class="jenkins-buttons-row">
       <button class="jenkins-button jenkins-button--primary">
-        Primary control
+        Save
       </button>
-      <button class="jenkins-button">Secondary</button>
+      <button class="jenkins-button">Apply</button>
     </div>
   </f:bottomButtonBar>
 </div>
diff --git a/src/main/webapp/AppBar/topAppBar.jelly b/src/main/webapp/AppBar/topAppBar.jelly
@@ -2,7 +2,7 @@
   <l:app-bar title="Page title" subtitle="3">
     <button class="jenkins-button jenkins-button--primary">
       <l:icon src="symbol-add" />
-      Primary control
+      Primary
     </button>
     <button class="jenkins-button">Secondary</button>
     <button class="jenkins-button">Secondary</button>