feat: map themes (#3374)

* feat: map component themes

* material theme

* tweaks to the themes

* button active styles

* Update packages/map/src/vaadin-map.js

Co-authored-by: Sascha Ißbrücker <sissbruecker@vaadin.com>

* restore drag-to-zoom styles

* add basic visual tests for themes

* Add styles for ZoomSlider and MousePosition controls

* disable labels for visual tests

* fix linter error

* small fixes to dark themes

* add hint about default control override

Co-authored-by: Sascha Ißbrücker <sissbruecker@vaadin.com>

packages/map/src/vaadin-map.js

@@ -4,6 +4,8 @@
  * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
  */
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import Attribution from 'ol/control/Attribution';
+import Zoom from 'ol/control/Zoom';
 import OpenLayersMap from 'ol/Map.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -60,13 +62,303 @@ class Map extends ElementMixin(ThemableMixin(PolymerElement)) {
           overflow: hidden;
         }
 
+        :host([hidden]) {
+          display: none !important;
+        }
+
         #map {
           width: 100%;
           height: 100%;
         }
 
-        :host([hidden]) {
-          display: none !important;
+        #map,
+        .ol-viewport,
+        .ol-layers {
+          border-radius: inherit;
+          overflow: hidden;
+        }
+
+        #map:fullscreen {
+          border-radius: 0;
+        }
+
+        #map:-webkit-full-screen {
+          border-radius: 0;
+        }
+
+        /* Functional styles, copied from 'ol/ol.css' */
+
+        .ol-box {
+          box-sizing: border-box;
+          border-radius: 2px;
+          border: 1px solid rgba(0, 0, 0, 0.5);
+          background-color: rgba(255, 255, 255, 0.2);
+          box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
+        }
+
+        .ol-unsupported {
+          display: none;
+        }
+
+        .ol-viewport,
+        .ol-unselectable {
+          -webkit-touch-callout: none;
+          -webkit-user-select: none;
+          -moz-user-select: none;
+          -ms-user-select: none;
+          user-select: none;
+          -webkit-tap-highlight-color: transparent;
+        }
+
+        .ol-viewport canvas {
+          all: unset;
+        }
+
+        .ol-selectable {
+          -webkit-touch-callout: default;
+          -webkit-user-select: text;
+          -moz-user-select: text;
+          -ms-user-select: text;
+          user-select: text;
+        }
+
+        .ol-grabbing {
+          cursor: -webkit-grabbing;
+          cursor: -moz-grabbing;
+          cursor: grabbing;
+        }
+
+        .ol-grab {
+          cursor: move;
+          cursor: -webkit-grab;
+          cursor: -moz-grab;
+          cursor: grab;
+        }
+
+        /* Control positioning and styling */
+
+        .ol-overlaycontainer-stopevent {
+          display: grid;
+          grid-template-columns: min-content 1fr min-content;
+          grid-template-rows: min-content 1fr min-content min-content min-content min-content;
+          padding: var(--vaadin-map-controls-inset, 0.25em);
+          box-sizing: border-box;
+          grid-template-areas:
+            'scale mouse-position fullscreen'
+            'overview-map . zoom-extent'
+            'overview-map . compass'
+            'overview-map . zoom-slider'
+            'overview-map . zoom'
+            'overview-map attribution attribution';
+        }
+
+        .ol-mouse-position {
+          grid-area: mouse-position;
+          align-self: start;
+          text-align: center;
+          font-size: 0.625em;
+          color: #000;
+          filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
+        }
+
+        .ol-scale-line,
+        .ol-scale-bar {
+          grid-area: scale;
+          position: relative;
+          pointer-events: none !important;
+          color: #000;
+        }
+
+        .ol-scale-line-inner {
+          border: 1px solid rgba(0, 0, 0, 0.5);
+          border-top: none;
+          font-size: 0.625em;
+          text-align: center;
+          will-change: contents, width, filter;
+          transition: all 0.25s;
+          filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
+        }
+
+        .ol-scale-bar-inner {
+          border: 1px solid rgba(0, 0, 0, 0.5);
+          box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
+          overflow: hidden;
+        }
+
+        .ol-scale-step-marker {
+          display: none;
+        }
+
+        .ol-scale-step-text {
+          position: absolute;
+          top: 0.75em;
+          font-size: 0.625em;
+          color: #000;
+          filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
+          white-space: nowrap;
+          overflow: hidden;
+        }
+
+        .ol-scale-text {
+          position: absolute;
+          font-size: 0.625em;
+          top: 2em;
+          color: #000;
+          white-space: nowrap;
+          filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
+        }
+
+        .ol-scale-singlebar {
+          height: 0.25em;
+          opacity: 0.5;
+        }
+
+        .ol-control {
+          margin: 0.25em;
+        }
+
+        .ol-control button {
+          -webkit-appearance: none;
+          border: 0;
+          margin: 0;
+          padding: 0;
+          background: #fff;
+          font: inherit;
+          color: inherit;
+          width: 1.5em;
+          height: 1.5em;
+        }
+
+        .ol-control button::-moz-focus-inner {
+          border: none;
+          padding: 0;
+        }
+
+        .ol-compass {
+          grid-area: compass;
+          display: block;
+          will-change: transform;
+        }
+
+        .ol-zoom {
+          grid-area: zoom;
+          display: flex;
+          flex-direction: column;
+        }
+
+        .ol-zoom-in:empty::before {
+          content: var(--vaadin-map-icon-zoom-in, '+');
+        }
+
+        .ol-zoom-out:empty::before {
+          content: var(--vaadin-map-icon-zoom-out, '–');
+        }
+
+        .ol-attribution {
+          grid-area: attribution;
+          margin-inline-start: auto !important;
+          display: flex;
+          flex-flow: row-reverse;
+        }
+
+        .ol-attribution.ol-uncollapsible {
+          margin-inline-end: calc(var(--vaadin-map-controls-inset, 0.25em) * -1);
+          margin-block-end: calc(var(--vaadin-map-controls-inset, 0.25em) * -1);
+        }
+
+        .ol-attribution button span:empty::before {
+          content: var(--vaadin-map-icon-attribution-collapse, '▸');
+        }
+
+        .ol-attribution.ol-collapsed button span:empty::before {
+          content: var(--vaadin-map-icon-attribution-expand, 'ℹ');
+        }
+
+        .ol-attribution ul {
+          display: flex;
+          align-items: center;
+          gap: 1em;
+          list-style: none;
+          margin: 0;
+          padding: 0.25em 0.5em;
+          font-size: 0.8em;
+        }
+
+        .ol-attribution.ol-collapsed ul {
+          display: none;
+        }
+
+        .ol-attribution.ol-uncollapsible button {
+          display: none;
+        }
+
+        .ol-rotate {
+          grid-area: compass;
+        }
+
+        .ol-compass:empty::before {
+          content: var(--vaadin-map-icon-compass, '↑');
+        }
+
+        .ol-full-screen {
+          grid-area: fullscreen;
+        }
+
+        .ol-full-screen button:empty::before {
+          content: var(--vaadin-map-icon-fullscreen, '⤢');
+        }
+
+        .ol-full-screen .ol-full-screen-true:empty::before {
+          content: var(--vaadin-map-icon-close, '×');
+        }
+
+        .ol-overviewmap {
+          grid-area: overview-map;
+          align-self: end;
+          width: max-content;
+        }
+
+        .ol-overviewmap button span:empty::before {
+          content: var(--vaadin-map-icon-overview-map-collapse, '▾');
+        }
+
+        .ol-overviewmap.ol-collapsed button span:empty::before {
+          content: var(--vaadin-map-icon-overview-map-expand, '▴');
+        }
+
+        .ol-overviewmap-map {
+          height: 10em;
+          width: 10em;
+          border: 1px solid rgba(0, 0, 0, 0.5);
+        }
+
+        .ol-overviewmap.ol-collapsed .ol-overviewmap-map,
+        .ol-overviewmap.ol-uncollapsible button {
+          display: none;
+        }
+
+        .ol-overviewmap-box {
+          border: 1px dashed rgba(0, 0, 0, 0.5);
+          filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
+          will-change: filter;
+          cursor: move;
+        }
+
+        .ol-zoomslider {
+          grid-area: zoom-slider;
+          height: 8em;
+        }
+
+        .ol-zoomslider button {
+          position: relative;
+          height: 0.5em;
+          display: block;
+          border-radius: inherit;
+        }
+
+        .ol-zoom-extent {
+          grid-area: zoom-extent;
+          align-self: end;
         }
       </style>
       <div id="map"></div>
@@ -99,6 +391,11 @@ class Map extends ElementMixin(ThemableMixin(PolymerElement)) {
     this._configuration = new OpenLayersMap({
       target: this.$.map
     });
+    // Override default controls to remove default labels, which is required to
+    // correctly display icons through pseudo-element
+    this._configuration.getControls().clear();
+    this._configuration.getControls().push(new Zoom({ zoomInLabel: '', zoomOutLabel: '' }));
+    this._configuration.getControls().push(new Attribution());
   }
 }
 

packages/map/test/visual/lumo/map.test.js

@@ -0,0 +1,53 @@
+import { fixtureSync } from '@vaadin/testing-helpers';
+import { visualDiff } from '@web/test-runner-visual-regression';
+import '../../../enable';
+import '../../../theme/lumo/vaadin-map.js';
+import FullScreen from 'ol/control/FullScreen';
+import OverviewMap from 'ol/control/OverviewMap';
+import Rotate from 'ol/control/Rotate';
+import ScaleLine from 'ol/control/ScaleLine';
+import View from 'ol/View';
+
+describe('map', () => {
+  let div, element;
+
+  beforeEach(() => {
+    div = document.createElement('div');
+    div.style.width = '400px';
+    div.style.height = '400px';
+    div.style.position = 'relative';
+    div.style.padding = '10px';
+    element = fixtureSync('<vaadin-map></vaadin-map>', div);
+    element.style.width = '100%';
+    element.style.height = '100%';
+    // Set non-white background to identify controls more clearly
+    element.style.background = '#eadbc8';
+    // Force size refresh
+    element.configuration.updateSize();
+    // Define a viewport
+    element.configuration.setView(
+      new View({
+        center: [0, 0],
+        zoom: 3
+      })
+    );
+  });
+
+  describe('controls', () => {
+    it('all controls', async () => {
+      // Add non-default controls
+      element.configuration.getControls().push(new FullScreen({ label: '', labelActive: '' }));
+      element.configuration.getControls().push(new Rotate({ label: '' }));
+      element.configuration.getControls().push(new ScaleLine());
+      element.configuration.getControls().push(new OverviewMap({ label: '', collapseLabel: '' }));
+      await visualDiff(div, 'controls-all-controls');
+    });
+  });
+
+  describe('theme', () => {
+    it('borderless', async () => {
+      element.setAttribute('theme', 'borderless');
+      await visualDiff(div, 'theme-borderless');
+    });
+  });
+});