refactor: rename pointer-arrow variant to arrow

vaadin · Jul 25, 2024 · ed2252c · ed2252c
1 parent a4e056c
commit ed2252c
Show file tree

Hide file tree

Showing 31 changed files with 58 additions and 58 deletions.
diff --git a/packages/popover/src/vaadin-popover-overlay.js b/packages/popover/src/vaadin-popover-overlay.js
@@ -90,7 +90,7 @@ class PopoverOverlay extends PopoverOverlayMixin(DirMixin(ThemableMixin(PolylitM
           width: 0;
         }
 
-        :host([theme~='pointer-arrow']) [part='arrow'] {
+        :host([theme~='arrow']) [part='arrow'] {
           display: block;
         }
       `,

diff --git a/packages/popover/src/vaadin-popover.d.ts b/packages/popover/src/vaadin-popover.d.ts
@@ -47,7 +47,7 @@ export type PopoverEventMap = HTMLElementEventMap & PopoverCustomEventMap;
  *
  * Part name        | Description
  * -----------------|-------------------------------------------
- * `arrow`          | Optional arrow pointing to the target when using `theme="pointer-arrow"`
+ * `arrow`          | Optional arrow pointing to the target when using `theme="arrow"`
  *
  * The following state attributes are available for styling:
  *

diff --git a/packages/popover/src/vaadin-popover.js b/packages/popover/src/vaadin-popover.js
@@ -143,7 +143,7 @@ class PopoverOpenedStateController {
  *
  * Part name        | Description
  * -----------------|-------------------------------------------
- * `arrow`          | Optional arrow pointing to the target when using `theme="pointer-arrow"`
+ * `arrow`          | Optional arrow pointing to the target when using `theme="arrow"`
  *
  * The following state attributes are available for styling:
  *

diff --git a/packages/popover/test/visual/lumo/popover.test.js b/packages/popover/test/visual/lumo/popover.test.js
@@ -44,13 +44,13 @@ describe('popover', () => {
       await visualDiff(div, position);
     });
 
-    it(`${position} pointer arrow`, async () => {
-      element.setAttribute('theme', 'pointer-arrow');
+    it(`${position} arrow`, async () => {
+      element.setAttribute('theme', 'arrow');
       element.position = position;
       await nextUpdate(element);
       target.click();
       await nextRender();
-      await visualDiff(div, `${position}-pointer-arrow`);
+      await visualDiff(div, `${position}-arrow`);
     });
   });
 });
diff --git a/...popover/baseline/bottom-pointer-arrow.png → ...enshots/popover/baseline/bottom-arrow.png b/...popover/baseline/bottom-pointer-arrow.png → ...enshots/popover/baseline/bottom-arrow.png
diff --git a/...ver/baseline/bottom-end-pointer-arrow.png → ...ots/popover/baseline/bottom-end-arrow.png b/...ver/baseline/bottom-end-pointer-arrow.png → ...ots/popover/baseline/bottom-end-arrow.png
diff --git a/...r/baseline/bottom-start-pointer-arrow.png → ...s/popover/baseline/bottom-start-arrow.png b/...r/baseline/bottom-start-pointer-arrow.png → ...s/popover/baseline/bottom-start-arrow.png
diff --git a/...ts/popover/baseline/end-pointer-arrow.png → ...creenshots/popover/baseline/end-arrow.png b/...ts/popover/baseline/end-pointer-arrow.png → ...creenshots/popover/baseline/end-arrow.png
diff --git a/...ver/baseline/end-bottom-pointer-arrow.png → ...ots/popover/baseline/end-bottom-arrow.png b/...ver/baseline/end-bottom-pointer-arrow.png → ...ots/popover/baseline/end-bottom-arrow.png
diff --git a/...opover/baseline/end-top-pointer-arrow.png → ...nshots/popover/baseline/end-top-arrow.png b/...opover/baseline/end-top-pointer-arrow.png → ...nshots/popover/baseline/end-top-arrow.png
diff --git a/.../popover/baseline/start-pointer-arrow.png → ...eenshots/popover/baseline/start-arrow.png b/.../popover/baseline/start-pointer-arrow.png → ...eenshots/popover/baseline/start-arrow.png
diff --git a/...r/baseline/start-bottom-pointer-arrow.png → ...s/popover/baseline/start-bottom-arrow.png b/...r/baseline/start-bottom-pointer-arrow.png → ...s/popover/baseline/start-bottom-arrow.png
diff --git a/...over/baseline/start-top-pointer-arrow.png → ...hots/popover/baseline/start-top-arrow.png b/...over/baseline/start-top-pointer-arrow.png → ...hots/popover/baseline/start-top-arrow.png
diff --git a/...ts/popover/baseline/top-pointer-arrow.png → ...creenshots/popover/baseline/top-arrow.png b/...ts/popover/baseline/top-pointer-arrow.png → ...creenshots/popover/baseline/top-arrow.png
diff --git a/...opover/baseline/top-end-pointer-arrow.png → ...nshots/popover/baseline/top-end-arrow.png b/...opover/baseline/top-end-pointer-arrow.png → ...nshots/popover/baseline/top-end-arrow.png
diff --git a/...over/baseline/top-start-pointer-arrow.png → ...hots/popover/baseline/top-start-arrow.png b/...over/baseline/top-start-pointer-arrow.png → ...hots/popover/baseline/top-start-arrow.png
diff --git a/packages/popover/test/visual/material/popover.test.js b/packages/popover/test/visual/material/popover.test.js
@@ -45,12 +45,12 @@ describe('popover', () => {
     });
 
     it(`${position} pointer arrow`, async () => {
-      element.setAttribute('theme', 'pointer-arrow');
+      element.setAttribute('theme', 'arrow');
       element.position = position;
       await nextUpdate(element);
       target.click();
       await nextRender();
-      await visualDiff(div, `${position}-pointer-arrow`);
+      await visualDiff(div, `${position}-arrow`);
     });
   });
 });
diff --git a/...popover/baseline/bottom-pointer-arrow.png → ...enshots/popover/baseline/bottom-arrow.png b/...popover/baseline/bottom-pointer-arrow.png → ...enshots/popover/baseline/bottom-arrow.png
diff --git a/...ver/baseline/bottom-end-pointer-arrow.png → ...ots/popover/baseline/bottom-end-arrow.png b/...ver/baseline/bottom-end-pointer-arrow.png → ...ots/popover/baseline/bottom-end-arrow.png
diff --git a/...r/baseline/bottom-start-pointer-arrow.png → ...s/popover/baseline/bottom-start-arrow.png b/...r/baseline/bottom-start-pointer-arrow.png → ...s/popover/baseline/bottom-start-arrow.png
diff --git a/...ts/popover/baseline/end-pointer-arrow.png → ...creenshots/popover/baseline/end-arrow.png b/...ts/popover/baseline/end-pointer-arrow.png → ...creenshots/popover/baseline/end-arrow.png
diff --git a/...ver/baseline/end-bottom-pointer-arrow.png → ...ots/popover/baseline/end-bottom-arrow.png b/...ver/baseline/end-bottom-pointer-arrow.png → ...ots/popover/baseline/end-bottom-arrow.png
diff --git a/...opover/baseline/end-top-pointer-arrow.png → ...nshots/popover/baseline/end-top-arrow.png b/...opover/baseline/end-top-pointer-arrow.png → ...nshots/popover/baseline/end-top-arrow.png
diff --git a/.../popover/baseline/start-pointer-arrow.png → ...eenshots/popover/baseline/start-arrow.png b/.../popover/baseline/start-pointer-arrow.png → ...eenshots/popover/baseline/start-arrow.png
diff --git a/...r/baseline/start-bottom-pointer-arrow.png → ...s/popover/baseline/start-bottom-arrow.png b/...r/baseline/start-bottom-pointer-arrow.png → ...s/popover/baseline/start-bottom-arrow.png
diff --git a/...over/baseline/start-top-pointer-arrow.png → ...hots/popover/baseline/start-top-arrow.png b/...over/baseline/start-top-pointer-arrow.png → ...hots/popover/baseline/start-top-arrow.png
diff --git a/...ts/popover/baseline/top-pointer-arrow.png → ...creenshots/popover/baseline/top-arrow.png b/...ts/popover/baseline/top-pointer-arrow.png → ...creenshots/popover/baseline/top-arrow.png
diff --git a/...opover/baseline/top-end-pointer-arrow.png → ...nshots/popover/baseline/top-end-arrow.png b/...opover/baseline/top-end-pointer-arrow.png → ...nshots/popover/baseline/top-end-arrow.png
diff --git a/...over/baseline/top-start-pointer-arrow.png → ...hots/popover/baseline/top-start-arrow.png b/...over/baseline/top-start-pointer-arrow.png → ...hots/popover/baseline/top-start-arrow.png
diff --git a/packages/popover/theme/lumo/vaadin-popover-styles.js b/packages/popover/theme/lumo/vaadin-popover-styles.js
@@ -19,83 +19,83 @@ const popoverOverlay = css`
     padding: var(--lumo-space-xs) var(--lumo-space-s);
   }
 
-  :host([theme~='pointer-arrow']) {
+  :host([theme~='arrow']) {
     --_vaadin-popover-default-offset: calc(var(--lumo-space-s) + var(--vaadin-popover-arrow-size) / 2);
   }
 
   /* top / bottom position */
-  :host([theme~='pointer-arrow'][position^='top']) [part='arrow'],
-  :host([theme~='pointer-arrow'][position^='bottom']) [part='arrow'] {
+  :host([theme~='arrow'][position^='top']) [part='arrow'],
+  :host([theme~='arrow'][position^='bottom']) [part='arrow'] {
     border-left: var(--vaadin-popover-arrow-size) solid transparent;
     border-right: var(--vaadin-popover-arrow-size) solid transparent;
   }
 
-  :host([theme~='pointer-arrow'][position^='bottom'][bottom-aligned]) [part='arrow'],
-  :host([theme~='pointer-arrow'][position^='top'][bottom-aligned]) [part='arrow'] {
+  :host([theme~='arrow'][position^='bottom'][bottom-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='top'][bottom-aligned]) [part='arrow'] {
     bottom: calc(var(--vaadin-popover-arrow-size) * -1);
     border-top: var(--vaadin-popover-arrow-size) solid var(--lumo-base-color);
     filter: drop-shadow(0 2px 1px var(--lumo-shade-10pct));
   }
 
-  :host([theme~='pointer-arrow'][position^='bottom'][top-aligned]) [part='arrow'],
-  :host([theme~='pointer-arrow'][position^='top'][top-aligned]) [part='arrow'] {
+  :host([theme~='arrow'][position^='bottom'][top-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='top'][top-aligned]) [part='arrow'] {
     top: calc(var(--vaadin-popover-arrow-size) * -1);
     border-bottom: var(--vaadin-popover-arrow-size) solid var(--lumo-base-color);
     filter: drop-shadow(0 -2px 1px var(--lumo-shade-10pct));
   }
 
-  :host([theme~='pointer-arrow'][position^='bottom'][start-aligned]) [part='arrow'],
-  :host([theme~='pointer-arrow'][position^='top'][start-aligned]) [part='arrow'] {
+  :host([theme~='arrow'][position^='bottom'][start-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='top'][start-aligned]) [part='arrow'] {
     transform: translateX(-50%);
     inset-inline-start: 1.5rem;
   }
 
-  :host([theme~='pointer-arrow'][position^='bottom'][end-aligned]) [part='arrow'],
-  :host([theme~='pointer-arrow'][position^='top'][end-aligned]) [part='arrow'] {
+  :host([theme~='arrow'][position^='bottom'][end-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='top'][end-aligned]) [part='arrow'] {
     transform: translateX(50%);
     inset-inline-end: 1.5rem;
   }
 
-  :host([theme~='pointer-arrow'][position^='bottom'][arrow-centered]) [part='arrow'],
-  :host([theme~='pointer-arrow'][position^='top'][arrow-centered]) [part='arrow'] {
+  :host([theme~='arrow'][position^='bottom'][arrow-centered]) [part='arrow'],
+  :host([theme~='arrow'][position^='top'][arrow-centered]) [part='arrow'] {
     transform: translateX(-50%);
     inset-inline-start: 50%;
   }
 
   /* start / end position */
-  :host([theme~='pointer-arrow'][position^='start']) [part='arrow'],
-  :host([theme~='pointer-arrow'][position^='end']) [part='arrow'] {
+  :host([theme~='arrow'][position^='start']) [part='arrow'],
+  :host([theme~='arrow'][position^='end']) [part='arrow'] {
     border-top: var(--vaadin-popover-arrow-size) solid transparent;
     border-bottom: var(--vaadin-popover-arrow-size) solid transparent;
   }
 
-  :host([theme~='pointer-arrow'][position^='start'][start-aligned]) [part='arrow'],
-  :host([theme~='pointer-arrow'][position^='end'][start-aligned]) [part='arrow'] {
+  :host([theme~='arrow'][position^='start'][start-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='end'][start-aligned]) [part='arrow'] {
     inset-inline-start: calc(var(--vaadin-popover-arrow-size) * -1);
     border-right: var(--vaadin-popover-arrow-size) solid var(--lumo-base-color);
     filter: drop-shadow(-2px 0 1px var(--lumo-shade-10pct));
   }
 
-  :host([theme~='pointer-arrow'][position^='start'][end-aligned]) [part='arrow'],
-  :host([theme~='pointer-arrow'][position^='end'][end-aligned]) [part='arrow'] {
+  :host([theme~='arrow'][position^='start'][end-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='end'][end-aligned]) [part='arrow'] {
     inset-inline-end: calc(var(--vaadin-popover-arrow-size) * -1);
     border-left: var(--vaadin-popover-arrow-size) solid var(--lumo-base-color);
     filter: drop-shadow(2px 0 1px var(--lumo-shade-10pct));
   }
 
-  :host([theme~='pointer-arrow'][position^='start'][top-aligned]) [part='arrow'],
-  :host([theme~='pointer-arrow'][position^='end'][top-aligned]) [part='arrow'] {
+  :host([theme~='arrow'][position^='start'][top-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='end'][top-aligned]) [part='arrow'] {
     top: 0.5rem;
   }
 
-  :host([theme~='pointer-arrow'][position='start'][top-aligned]) [part='arrow'],
-  :host([theme~='pointer-arrow'][position='end'][top-aligned]) [part='arrow'] {
+  :host([theme~='arrow'][position='start'][top-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position='end'][top-aligned]) [part='arrow'] {
     top: 50%;
     transform: translateY(-50%);
   }
 
-  :host([theme~='pointer-arrow'][position^='start'][bottom-aligned]) [part='arrow'],
-  :host([theme~='pointer-arrow'][position^='end'][bottom-aligned]) [part='arrow'] {
+  :host([theme~='arrow'][position^='start'][bottom-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='end'][bottom-aligned]) [part='arrow'] {
     bottom: 0.5rem;
   }
 `;

diff --git a/packages/popover/theme/material/vaadin-popover-styles.js b/packages/popover/theme/material/vaadin-popover-styles.js
@@ -16,83 +16,83 @@ const popoverOverlay = css`
     padding: 0.25rem 0.5rem;
   }
 
-  :host([theme~='pointer-arrow']) {
+  :host([theme~='arrow']) {
     --_vaadin-popover-default-offset: calc(0.25rem + var(--vaadin-popover-arrow-size) / 1.25);
   }
 
   /* top / bottom position */
-  :host([theme~='pointer-arrow'][position^='top']) [part='arrow'],
-  :host([theme~='pointer-arrow'][position^='bottom']) [part='arrow'] {
+  :host([theme~='arrow'][position^='top']) [part='arrow'],
+  :host([theme~='arrow'][position^='bottom']) [part='arrow'] {
     border-left: var(--vaadin-popover-arrow-size) solid transparent;
     border-right: var(--vaadin-popover-arrow-size) solid transparent;
   }
 
-  :host([theme~='pointer-arrow'][position^='bottom'][bottom-aligned]) [part='arrow'],
-  :host([theme~='pointer-arrow'][position^='top'][bottom-aligned]) [part='arrow'] {
+  :host([theme~='arrow'][position^='bottom'][bottom-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='top'][bottom-aligned]) [part='arrow'] {
     bottom: calc(var(--vaadin-popover-arrow-size) * -1);
     border-top: var(--vaadin-popover-arrow-size) solid var(--material-background-color);
     filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.14));
   }
 
-  :host([theme~='pointer-arrow'][position^='bottom'][top-aligned]) [part='arrow'],
-  :host([theme~='pointer-arrow'][position^='top'][top-aligned]) [part='arrow'] {
+  :host([theme~='arrow'][position^='bottom'][top-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='top'][top-aligned]) [part='arrow'] {
     top: calc(var(--vaadin-popover-arrow-size) * -1);
     border-bottom: var(--vaadin-popover-arrow-size) solid var(--material-background-color);
     filter: drop-shadow(0 -2px 1px rgba(0, 0, 0, 0.14));
   }
 
-  :host([theme~='pointer-arrow'][position^='bottom'][start-aligned]) [part='arrow'],
-  :host([theme~='pointer-arrow'][position^='top'][start-aligned]) [part='arrow'] {
+  :host([theme~='arrow'][position^='bottom'][start-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='top'][start-aligned]) [part='arrow'] {
     transform: translateX(-50%);
     inset-inline-start: 1.5rem;
   }
 
-  :host([theme~='pointer-arrow'][position^='bottom'][end-aligned]) [part='arrow'],
-  :host([theme~='pointer-arrow'][position^='top'][end-aligned]) [part='arrow'] {
+  :host([theme~='arrow'][position^='bottom'][end-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='top'][end-aligned]) [part='arrow'] {
     transform: translateX(50%);
     inset-inline-end: 1.5rem;
   }
 
-  :host([theme~='pointer-arrow'][position^='bottom'][arrow-centered]) [part='arrow'],
-  :host([theme~='pointer-arrow'][position^='top'][arrow-centered]) [part='arrow'] {
+  :host([theme~='arrow'][position^='bottom'][arrow-centered]) [part='arrow'],
+  :host([theme~='arrow'][position^='top'][arrow-centered]) [part='arrow'] {
     transform: translateX(-50%);
     inset-inline-start: 50%;
   }
 
   /* start / end position */
-  :host([theme~='pointer-arrow'][position^='start']) [part='arrow'],
-  :host([theme~='pointer-arrow'][position^='end']) [part='arrow'] {
+  :host([theme~='arrow'][position^='start']) [part='arrow'],
+  :host([theme~='arrow'][position^='end']) [part='arrow'] {
     border-top: var(--vaadin-popover-arrow-size) solid transparent;
     border-bottom: var(--vaadin-popover-arrow-size) solid transparent;
   }
 
-  :host([theme~='pointer-arrow'][position^='start'][start-aligned]) [part='arrow'],
-  :host([theme~='pointer-arrow'][position^='end'][start-aligned]) [part='arrow'] {
+  :host([theme~='arrow'][position^='start'][start-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='end'][start-aligned]) [part='arrow'] {
     inset-inline-start: calc(var(--vaadin-popover-arrow-size) * -1);
     border-right: var(--vaadin-popover-arrow-size) solid var(--material-background-color);
     filter: drop-shadow(-2px 0 1px rgba(0, 0, 0, 0.14));
   }
 
-  :host([theme~='pointer-arrow'][position^='start'][end-aligned]) [part='arrow'],
-  :host([theme~='pointer-arrow'][position^='end'][end-aligned]) [part='arrow'] {
+  :host([theme~='arrow'][position^='start'][end-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='end'][end-aligned]) [part='arrow'] {
     inset-inline-end: calc(var(--vaadin-popover-arrow-size) * -1);
     border-left: var(--vaadin-popover-arrow-size) solid var(--material-background-color);
     filter: drop-shadow(2px 0 1px rgba(0, 0, 0, 0.14));
   }
 
-  :host([theme~='pointer-arrow'][position^='start'][top-aligned]) [part='arrow'],
-  :host([theme~='pointer-arrow'][position^='end'][top-aligned]) [part='arrow'] {
+  :host([theme~='arrow'][position^='start'][top-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='end'][top-aligned]) [part='arrow'] {
     top: 0.5rem;
   }
 
-  :host([theme~='pointer-arrow'][position='start'][top-aligned]) [part='arrow'],
-  :host([theme~='pointer-arrow'][position='end'][top-aligned]) [part='arrow'] {
+  :host([theme~='arrow'][position='start'][top-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position='end'][top-aligned]) [part='arrow'] {
     top: 50%;
     transform: translateY(-50%);
   }
 
-  :host([theme~='pointer-arrow'][position^='start'][bottom-aligned]) [part='arrow'],
-  :host([theme~='pointer-arrow'][position^='end'][bottom-aligned]) [part='arrow'] {
+  :host([theme~='arrow'][position^='start'][bottom-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='end'][bottom-aligned]) [part='arrow'] {
     bottom: 0.5rem;
   }
 `;