fix: add missing styles for map scale bar control (#10414)

Author: sissbruecker

packages/map/src/styles/vaadin-map-base-styles.js

@@ -151,11 +151,20 @@ export const mapStyles = css`
   }
 
   .ol-scale-bar-inner {
+    display: flex;
     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-singlebar-even {
+    background: #000;
+  }
+
+  .ol-scale-singlebar-odd {
+    background: #fff;
+  }
+
   .ol-scale-step-marker {
     display: none;
   }

packages/map/test/visual/base/map.test.js

@@ -42,6 +42,12 @@ describe('map', () => {
       element.configuration.getControls().push(new OverviewMap({ label: '', collapseLabel: '' }));
       await visualDiff(div, 'controls-all-controls');
     });
+
+    it('scale bar', async () => {
+      // Add scale line using bar mode
+      element.configuration.getControls().push(new ScaleLine({ bar: true, text: true }));
+      await visualDiff(div, 'controls-scale-bar');
+    });
   });
 
   describe('theme', () => {

packages/map/test/visual/base/screenshots/map/baseline/controls-scale-bar.png

@@ -44,6 +44,12 @@ describe('map', () => {
       element.configuration.getControls().push(new OverviewMap({ label: '', collapseLabel: '' }));
       await visualDiff(div, 'controls-all-controls');
     });
+
+    it('scale bar', async () => {
+      // Add scale line using bar mode
+      element.configuration.getControls().push(new ScaleLine({ bar: true, text: true }));
+      await visualDiff(div, 'controls-scale-bar');
+    });
   });
 
   describe('theme', () => {