refactor: prefer part names over ids in dashboard selectors (#8190)

packages/dashboard/src/vaadin-dashboard-styles.js

@@ -25,8 +25,8 @@ export const dashboardWidgetAndSectionStyles = css`
     visibility: hidden;
   }
 
-  :host(:not([editable])) #drag-handle,
-  :host(:not([editable])) #remove-button,
+  :host(:not([editable])) [part~='move-button'],
+  :host(:not([editable])) [part~='remove-button'],
   :host(:not([editable])) #focus-button,
   :host(:not([editable])) #focus-button-wrapper,
   :host(:not([editable])) .mode-controls {
@@ -70,39 +70,39 @@ export const dashboardWidgetAndSectionStyles = css`
   }
 
   /* Move-mode buttons */
-  #move-backward,
-  #move-forward,
-  #move-apply {
+  [part~='move-backward-button'],
+  [part~='move-forward-button'],
+  [part~='move-apply-button'] {
     position: absolute;
     top: 50%;
   }
 
-  #move-backward {
+  [part~='move-backward-button'] {
     inset-inline-start: 0;
     transform: translateY(-50%);
   }
 
-  #move-forward {
+  [part~='move-forward-button'] {
     inset-inline-end: 0;
     transform: translateY(-50%);
   }
 
-  #move-apply {
+  [part~='move-apply-button'] {
     left: 50%;
     transform: translate(-50%, -50%);
   }
 
-  :host([first-child]) #move-backward,
-  :host([last-child]) #move-forward {
+  :host([first-child]) [part~='move-backward-button'],
+  :host([last-child]) [part~='move-forward-button'] {
     display: none;
   }
 
   /* Resize-mode buttons */
-  #resize-shrink-width,
-  #resize-shrink-height,
-  #resize-grow-width,
-  #resize-grow-height,
-  #resize-apply {
+  [part~='resize-shrink-width-button'],
+  [part~='resize-shrink-height-button'],
+  [part~='resize-grow-width-button'],
+  [part~='resize-grow-height-button'],
+  [part~='resize-apply-button'] {
     position: absolute;
   }
 
@@ -136,19 +136,19 @@ export const dashboardWidgetAndSectionStyles = css`
     transform: translateY(-50%) translateX(100%);
   }
 
-  #resize-shrink-height {
+  [part~='resize-shrink-height-button'] {
     bottom: 0;
     left: 50%;
     transform: translateX(-50%) translateY(-100%);
   }
 
-  #resize-grow-height {
+  [part~='resize-grow-height-button'] {
     top: 100%;
     left: 50%;
     transform: translateX(-50%) translateY(-100%);
   }
 
-  #resize-apply {
+  [part~='resize-apply-button'] {
     left: 50%;
     top: 50%;
 

packages/dashboard/src/vaadin-dashboard-widget.js

@@ -118,16 +118,16 @@ class DashboardWidget extends DashboardItemMixin(ElementMixin(ThemableMixin(Poly
           display: none !important;
         }
 
-        :host(:not([editable])) #resize-handle {
+        :host(:not([editable])) [part~='resize-button'] {
           display: none;
         }
 
-        #content {
+        [part~='content'] {
           flex: 1;
           overflow: hidden;
         }
 
-        #resize-handle {
+        [part~='resize-button'] {
           position: absolute;
           bottom: 0;
           inset-inline-end: 0;

packages/dashboard/test/helpers.ts

@@ -192,7 +192,7 @@ export function expectLayout(dashboard: HTMLElement, layout: Array<Array<number
 }
 
 export function getDraggable(element: Element): Element {
-  return element.shadowRoot!.querySelector('#drag-handle')!;
+  return element.shadowRoot!.querySelector('[part~="move-button"]')!;
 }
 
 type TestDragEvent = Event & {
@@ -304,7 +304,7 @@ export function fireResizeEnd(dragOverTarget: Element): void {
 }
 
 export function getRemoveButton(section: DashboardWidget | DashboardSection): HTMLElement {
-  return section.shadowRoot!.querySelector('#remove-button') as HTMLElement;
+  return section.shadowRoot!.querySelector('[part~="remove-button"]') as HTMLElement;
 }
 
 export function describeBidirectional(name: string, tests: () => void): void {
@@ -323,35 +323,35 @@ export function describeBidirectional(name: string, tests: () => void): void {
 }
 
 export function getMoveForwardButton(element: HTMLElement): HTMLElement {
-  return element.shadowRoot!.querySelector('#move-forward') as HTMLElement;
+  return element.shadowRoot!.querySelector('[part~="move-forward-button"]') as HTMLElement;
 }
 
 export function getMoveBackwardButton(element: HTMLElement): HTMLElement {
-  return element.shadowRoot!.querySelector('#move-backward') as HTMLElement;
+  return element.shadowRoot!.querySelector('[part~="move-backward-button"]') as HTMLElement;
 }
 
 export function getMoveApplyButton(element: HTMLElement): HTMLElement {
-  return element.shadowRoot!.querySelector('#move-apply') as HTMLElement;
+  return element.shadowRoot!.querySelector('[part~="move-apply-button"]') as HTMLElement;
 }
 
 export function getResizeApplyButton(element: HTMLElement): HTMLElement {
-  return element.shadowRoot!.querySelector('#resize-apply') as HTMLElement;
+  return element.shadowRoot!.querySelector('[part~="resize-apply-button"]') as HTMLElement;
 }
 
 export function getResizeShrinkWidthButton(element: HTMLElement): HTMLElement {
-  return element.shadowRoot!.querySelector('#resize-shrink-width') as HTMLElement;
+  return element.shadowRoot!.querySelector('[part~="resize-shrink-width-button"]') as HTMLElement;
 }
 
 export function getResizeGrowWidthButton(element: HTMLElement): HTMLElement {
-  return element.shadowRoot!.querySelector('#resize-grow-width') as HTMLElement;
+  return element.shadowRoot!.querySelector('[part~="resize-grow-width-button"]') as HTMLElement;
 }
 
 export function getResizeShrinkHeightButton(element: HTMLElement): HTMLElement {
-  return element.shadowRoot!.querySelector('#resize-shrink-height') as HTMLElement;
+  return element.shadowRoot!.querySelector('[part~="resize-shrink-height-button"]') as HTMLElement;
 }
 
 export function getResizeGrowHeightButton(element: HTMLElement): HTMLElement {
-  return element.shadowRoot!.querySelector('#resize-grow-height') as HTMLElement;
+  return element.shadowRoot!.querySelector('[part~="resize-grow-height-button"]') as HTMLElement;
 }
 
 /**

packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js

@@ -79,13 +79,13 @@ const dashboardWidgetAndSection = css`
   }
 
   /* Drag handle styling */
-  #drag-handle {
+  [part~='move-button'] {
     cursor: move;
     --icon: var(--lumo-icons-drag-handle);
   }
 
   /* Remove button styling */
-  #remove-button {
+  [part~='remove-button'] {
     cursor: pointer;
     --icon: var(--lumo-icons-cross);
   }
@@ -101,7 +101,7 @@ const dashboardWidgetAndSection = css`
   }
 
   /* Content styling */
-  #content {
+  [part~='content'] {
     min-height: var(--lumo-size-m);
     padding: var(--lumo-space-s);
   }
@@ -113,30 +113,30 @@ const dashboardWidgetAndSection = css`
 
   /* Move mode styling */
 
-  #move-backward {
+  [part~='move-backward-button'] {
     inset-inline-start: calc(0px - var(--_focus-ring-spacing-offset));
   }
 
-  #move-forward {
+  [part~='move-forward-button'] {
     inset-inline-end: calc(0px - var(--_focus-ring-spacing-offset));
     transform: translateY(-50%);
   }
 
-  :host(:not([dir='rtl'])) #move-backward,
-  :host([dir='rtl']) #move-forward {
+  :host(:not([dir='rtl'])) [part~='move-backward-button'],
+  :host([dir='rtl']) [part~='move-forward-button'] {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
     --icon: var(--lumo-icons-angle-left);
   }
 
-  :host(:not([dir='rtl'])) #move-forward,
-  :host([dir='rtl']) #move-backward {
+  :host(:not([dir='rtl'])) [part~='move-forward-button'],
+  :host([dir='rtl']) [part~='move-backward-button'] {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
     --icon: var(--lumo-icons-angle-right);
   }
 
-  #move-apply {
+  [part~='move-apply-button'] {
     --icon: var(--lumo-icons-checkmark);
     font-size: var(--lumo-icon-size-m);
   }
@@ -157,8 +157,8 @@ const dashboardWidget = css`
     opacity: 1;
   }
 
-  :host([resize-mode]) #content,
-  :host([move-mode]) #content {
+  :host([resize-mode]) [part~='content'],
+  :host([move-mode]) [part~='content'] {
     opacity: 0.3;
     filter: blur(10px);
   }
@@ -169,37 +169,37 @@ const dashboardWidget = css`
   }
 
   /* Resize handle styling */
-  #resize-handle {
+  [part~='resize-button'] {
     position: absolute;
     bottom: var(--lumo-space-s);
     inset-inline-end: var(--lumo-space-s);
     cursor: se-resize;
     --icon: var(--lumo-icons-resize-handle);
   }
 
-  :host([dir='rtl']) #resize-handle {
+  :host([dir='rtl']) [part~='resize-button'] {
     cursor: sw-resize;
   }
 
-  :host([dir='rtl']) #resize-handle .icon::before {
+  :host([dir='rtl']) [part~='resize-button'] .icon::before {
     transform: scaleX(-1);
   }
 
   /* Resize mode styling */
-  #resize-apply {
+  [part~='resize-apply-button'] {
     --icon: var(--lumo-icons-checkmark);
     font-size: var(--lumo-icon-size-m);
   }
 
-  #resize-grow-width,
-  #resize-shrink-width {
+  [part~='resize-grow-width-button'],
+  [part~='resize-shrink-width-button'] {
     padding-right: 0;
     padding-left: 0;
     min-width: var(--lumo-size-s);
   }
 
-  #resize-grow-height,
-  #resize-shrink-height {
+  [part~='resize-grow-height-button'],
+  [part~='resize-shrink-height-button'] {
     height: var(--lumo-size-s);
     margin: 0;
   }
@@ -226,13 +226,13 @@ const dashboardWidget = css`
     border-bottom-right-radius: 0;
   }
 
-  :host(:not([dir='rtl'])) #resize-shrink-width,
-  :host([dir='rtl']) #resize-grow-width {
+  :host(:not([dir='rtl'])) [part~='resize-shrink-width-button'],
+  :host([dir='rtl']) [part~='resize-grow-width-button'] {
     --icon: var(--lumo-icons-angle-left);
   }
 
-  :host(:not([dir='rtl'])) #resize-grow-width,
-  :host([dir='rtl']) #resize-shrink-width {
+  :host(:not([dir='rtl'])) [part~='resize-grow-width-button'],
+  :host([dir='rtl']) [part~='resize-shrink-width-button'] {
     --icon: var(--lumo-icons-angle-right);
   }
 
@@ -248,7 +248,7 @@ const dashboardWidget = css`
     border-top-right-radius: 0;
   }
 
-  #resize-shrink-height {
+  [part~='resize-shrink-height-button'] {
     --icon: var(--lumo-icons-angle-up);
   }
 `;