Feat/dashboard styling (#8236)

* Styling (dark mode not checked yet) * Added section title styles * Cleanup, comments, and a few fixes * Changed default gap and padding * update default spacing size in tests * ignore linter rules * Fixed a whoopsie * Refactored section focus ring to be visible with padding 0 * Min padding-bottom to avoid extra overflow due to offset resize button * Combined overflow properties because lint * Resize-handle offset capped to gap/padding --------- Co-authored-by: Tomi Virkki <virkki@vaadin.com>
vaadin · Nov 29, 2024 · 86e36af · 86e36af
1 parent de17f90
commit 86e36af
Show file tree

Hide file tree

Showing 6 changed files with 230 additions and 106 deletions.
diff --git a/packages/dashboard/src/vaadin-dashboard-layout-mixin.js b/packages/dashboard/src/vaadin-dashboard-layout-mixin.js
@@ -24,6 +24,7 @@ export const DashboardLayoutMixin = (superClass) =>
         :host {
           display: block;
           overflow: hidden;
+          width: 100%;
         }
 
         :host([hidden]) {
@@ -36,13 +37,20 @@ export const DashboardLayoutMixin = (superClass) =>
 
         #grid {
           box-sizing: border-box;
+
+          /* Padding around dashboard edges */
           --_vaadin-dashboard-default-padding: 1rem;
           --_vaadin-dashboard-padding: max(
             0px,
             var(--vaadin-dashboard-padding, var(--_vaadin-dashboard-default-padding))
           );
           padding: var(--_vaadin-dashboard-padding);
 
+          /* Gap between widgets */
+          --_vaadin-dashboard-default-gap: 1rem;
+          --_vaadin-dashboard-gap: max(0px, var(--vaadin-dashboard-gap, var(--_vaadin-dashboard-default-gap)));
+          gap: var(--_vaadin-dashboard-gap);
+
           /* Default min and max column widths */
           --_vaadin-dashboard-default-col-min-width: 25rem;
           --_vaadin-dashboard-default-col-max-width: 1fr;
@@ -86,9 +94,6 @@ export const DashboardLayoutMixin = (superClass) =>
           );
 
           grid-auto-rows: var(--_vaadin-dashboard-row-height);
-          --_vaadin-dashboard-default-gap: 1rem;
-          --_vaadin-dashboard-gap: max(0px, var(--vaadin-dashboard-gap, var(--_vaadin-dashboard-default-gap)));
-          gap: var(--_vaadin-dashboard-gap);
         }
 
         ::slotted(*) {

diff --git a/packages/dashboard/src/vaadin-dashboard-widget.js b/packages/dashboard/src/vaadin-dashboard-widget.js
@@ -139,11 +139,11 @@ class DashboardWidget extends DashboardItemMixin(ElementMixin(ThemableMixin(Poly
           content: '';
           z-index: 2;
           position: absolute;
-          inset-inline-start: 0;
-          top: 0;
+          top: -1px;
           width: var(--_vaadin-dashboard-widget-resizer-width, 0);
           height: var(--_vaadin-dashboard-widget-resizer-height, 0);
           background: rgba(0, 0, 0, 0.1);
+          border-radius: inherit;
         }
       `,
       super.styles,

diff --git a/packages/dashboard/test/dashboard-layout.test.ts b/packages/dashboard/test/dashboard-layout.test.ts
@@ -26,7 +26,7 @@ const [defaultSpacing, defaultMinimumColumnWidth] = (() => {
   document.body.appendChild(div);
   div.style.width = '1rem';
   const minColWidth = div.offsetWidth * 25;
-  div.style.width = 'var(--lumo-space-l)';
+  div.style.width = 'var(--lumo-space-m)';
   const spacing = div.offsetWidth;
   div.remove();
   return [spacing, minColWidth];

diff --git a/packages/dashboard/theme/lumo/vaadin-dashboard-layout-styles.js b/packages/dashboard/theme/lumo/vaadin-dashboard-layout-styles.js
@@ -2,8 +2,8 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themab
 
 export const dashboardLayoutStyles = css`
   #grid {
-    --_vaadin-dashboard-default-gap: var(--lumo-space-l);
-    --_vaadin-dashboard-default-padding: var(--lumo-space-l);
+    --_vaadin-dashboard-default-gap: var(--lumo-space-m);
+    --_vaadin-dashboard-default-padding: var(--lumo-space-m);
   }
 `;
 

diff --git a/packages/dashboard/theme/lumo/vaadin-dashboard-section-styles.js b/packages/dashboard/theme/lumo/vaadin-dashboard-section-styles.js
@@ -7,14 +7,78 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themab
 import { dashboardWidgetAndSection } from './vaadin-dashboard-widget-styles.js';
 
 const section = css`
+  /* stylelint-disable rule-empty-line-before */
+
   :host {
-    --_focus-ring-spacing-max-offset: calc(min(var(--_vaadin-dashboard-gap), var(--_vaadin-dashboard-padding)) / 2);
+    --_section-outline-offset: calc(min(var(--_vaadin-dashboard-gap), var(--_vaadin-dashboard-padding)) / 3);
+    --_focus-ring-offset: calc((var(--_section-outline-offset) - var(--_focus-ring-width)));
+    border-radius: var(--lumo-border-radius-l);
+  }
+
+  header {
+    margin-bottom: calc(-1 * var(--_section-outline-offset));
+    line-height: var(--lumo-line-height-s);
+    padding-inline: var(--lumo-space-s);
+    min-height: var(--lumo-size-l);
+  }
+
+  [part='title'] {
+    font-size: var(--lumo-font-size-xl);
+    font-weight: 600;
+  }
+
+  /* Section states */
+
+  :host([editable]) {
+    outline: 1px solid var(--lumo-contrast-10pct);
+    outline-offset: calc(var(--_section-outline-offset) - 1px);
+    background: var(--lumo-contrast-5pct);
+    box-shadow: 0 0 0 var(--_section-outline-offset) var(--lumo-contrast-5pct);
+  }
+  :host([editable]) header {
+    padding-inline: var(--lumo-space-xs);
+  }
+
+  :host([focused])::after {
+    content: '';
+    display: block;
+    position: absolute;
+    inset: 0;
+    border-radius: var(--lumo-border-radius-l);
+    z-index: 9;
+    outline: var(--_focus-ring-width) solid var(--_focus-ring-color);
+    outline-offset: var(--_focus-ring-offset);
+  }
+
+  :host([selected]) {
+    background: var(--lumo-primary-color-10pct);
+    box-shadow: 0 0 0 var(--_section-outline-offset) var(--lumo-primary-color-10pct);
+  }
+  :host([selected]:not([focused])) {
+    outline-color: var(--lumo-primary-color-50pct);
   }
 
   :host([move-mode]) ::slotted(*) {
     --_vaadin-dashboard-widget-opacity: 0.3;
     --_vaadin-dashboard-widget-filter: blur(10px);
   }
+
+  :host([dragging]) {
+    background: var(--vaadin-dashboard-drop-target-background-color);
+    outline: var(--vaadin-dashboard-drop-target-border);
+    box-shadow: 0 0 0 var(--_section-outline-offset) var(--vaadin-dashboard-drop-target-background-color);
+  }
+
+  /* Accessible move mode controls */
+
+  [part~='move-backward-button'] {
+    inset-inline-start: calc(-1 * var(--_section-outline-offset));
+  }
+
+  [part~='move-forward-button'] {
+    inset-inline-end: calc(-1 * var(--_section-outline-offset));
+    transform: translateY(-50%);
+  }
 `;
 
 registerStyles('vaadin-dashboard-section', [dashboardWidgetAndSection, section], {