Use iTwinUI-react components to get consistent styling.

common/changes/@itwin/map-layers/geo-maplayers_ui_button_2022-04-06-12-22.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/map-layers",
+      "comment": "Use iTwinUI-react components to get consistent styling. Alos fixed bug with elevation correction control.",
+      "type": "none"
+    }
+  ],
+  "packageName": "@itwin/map-layers"
+}

extensions/map-layers/src/ui/widget/AttachLayerPopupButton.tsx

@@ -333,12 +333,16 @@ function AttachLayerPanel({ isOverlay, onLayerAttached, onHandleOutsideClick }:
                   (!!iTwinId && !!iModelId && layerNameUnderCursor && layerNameUnderCursor === source.name) &&
                   <>
                     <Button
+                      size="small"
+                      styleType="borderless"
                       className="map-source-list-entry-button"
                       title={editLayerDefButtonTitle}
                       onClick={onItemEditButtonClicked}>
                       <UiCore.Icon iconSpec="icon-edit" />
                     </Button>
                     <Button
+                      size="small"
+                      styleType="borderless"
                       className="map-source-list-entry-button"
                       title={removeLayerDefButtonTitle}
                       onClick={(event: React.MouseEvent) => { onItemRemoveButtonClicked(source, event); }}>
@@ -436,10 +440,10 @@ export function AttachLayerPopupButton(props: AttachLayerPopupButtonProps) {
 
     if (props.buttonType === undefined || props.buttonType === AttachLayerButtonType.Icon) {
       button = (
-        <button ref={buttonRef} className="map-manager-attach-layer-button" title={popupOpen ? hideAttachLayerLabel : showAttachLayerLabel}
+        <Button size="small" styleType="borderless" ref={buttonRef} className="map-manager-attach-layer-button" title={popupOpen ? hideAttachLayerLabel : showAttachLayerLabel}
           onClick={togglePopup}>
           <UiCore.WebFontIcon iconName="icon-add" />
-        </button>
+        </Button>
       );
     } else {
       const determineStyleType = () => {

extensions/map-layers/src/ui/widget/BasemapPanel.scss

@@ -5,7 +5,7 @@
 @import "~@itwin/core-react/lib/cjs/core-react/index";
 
 $divider-color: $buic-background-toolbutton-stroke;
-$hovered-icon-color: $buic-foreground-primary-tone;
+$hovered-icon-color: $buic-foreground-primary;
 
 .map-manager-basemap {
   display: flex;
@@ -24,20 +24,10 @@ $hovered-icon-color: $buic-foreground-primary-tone;
     width: 100%;
     margin-top: 5px;
 
-    .map-transparency-popup-button {
-      background-color: transparent;
-      margin-left: 5px;
-      width: 40px;
-      border: none;
-      color: $buic-foreground-body;
-
-      &:hover {
-        color: $hovered-icon-color;
-      }
-    }
   }
 
   .map-manager-base-label {
+    margin-left: 2px;
     padding-right: 10px;
   }
 
@@ -51,15 +41,9 @@ $hovered-icon-color: $buic-foreground-primary-tone;
       overflow: hidden;
     }
 
-    button.map-manager-base-item-visibility {
-      border: none;
-      margin-right: 4px;
-      background-color: transparent;
-      color: $buic-foreground-body;
 
-      &:hover {
-        color: $hovered-icon-color;
-      }
+    .map-manager-base-item-select {
+      width: 100%;  // makes the Select control fill empty space on the right
     }
 
     button.map-manager-base-settings-button {
@@ -69,6 +53,7 @@ $hovered-icon-color: $buic-foreground-primary-tone;
       color: $buic-foreground-body;
 
       &:hover {
+        background-color: transparent;
         color: $hovered-icon-color;
       }
     }

extensions/map-layers/src/ui/widget/BasemapPanel.tsx

@@ -10,7 +10,7 @@ import { BaseMapLayerSettings, ColorByName, ColorDef, ImageMapLayerSettings, Map
 import { DisplayStyleState } from "@itwin/core-frontend";
 import { WebFontIcon } from "@itwin/core-react";
 import { ColorPickerDialog, ColorSwatch } from "@itwin/imodel-components-react";
-import { Select, SelectOption } from "@itwin/itwinui-react";
+import { Button, Select, SelectOption } from "@itwin/itwinui-react";
 import * as React from "react";
 import { MapLayersUI } from "../../mapLayers";
 import "./BasemapPanel.scss";
@@ -152,11 +152,11 @@ export function BasemapPanel() {
   return (
     <>
       <div className="map-manager-base-item" >
-        <button className="map-manager-item-visibility" title={toggleVisibility} onClick={handleVisibilityChange}>
+        <Button size="small" styleType="borderless"  title={toggleVisibility} onClick={handleVisibilityChange}>
           <WebFontIcon iconName={baseMapVisible ? "icon-visibility" : "icon-visibility-hide-2"} />
-        </button>
+        </Button>
         <span className="map-manager-base-label">{baseLayerLabel}</span>
-        <Select options={baseMapOptions} placeholder={selectBaseMapLabel} value={selectedBaseMapValue.value} onChange={handleBaseMapSelection} size="small" />
+        <Select className="map-manager-base-item-select" options={baseMapOptions} placeholder={selectBaseMapLabel} value={selectedBaseMapValue.value} onChange={handleBaseMapSelection} size="small" />
         {
           baseIsColor &&
           <ColorSwatch className="map-manager-base-item-color" colorDef={ColorDef.fromJSON(bgColor)} round={false} onColorPick={handleBgColorClick} />

extensions/map-layers/src/ui/widget/MapLayerDroppable.tsx

@@ -54,8 +54,9 @@ export function MapLayerDroppable(props: MapLayerDroppableProps) {
       <div className="map-manager-source-item" data-id={rubric.source.index} key={activeLayer.name}
         {...dragProvided.draggableProps}
         ref={dragProvided.innerRef} >
-        <button className="map-manager-item-visibility" title={toggleVisibility} onClick={() => { props.onItemVisibilityToggleClicked(activeLayer); }}>
-          <Icon iconSpec={activeLayer.visible ? "icon-visibility" : "icon-visibility-hide-2"} /></button>
+        <Button size="small" styleType="borderless" className="map-manager-item-visibility" title={toggleVisibility} onClick={() => { props.onItemVisibilityToggleClicked(activeLayer); }}>
+          <Icon iconSpec={activeLayer.visible ? "icon-visibility" : "icon-visibility-hide-2"} />
+        </Button>
         <span className="map-manager-item-label" {...dragProvided.dragHandleProps}>{activeLayer.name}</span>
         <div className="map-manager-item-sub-layer-container">
           {activeLayer.subLayers && activeLayer.subLayers.length > 1 &&
@@ -64,7 +65,8 @@ export function MapLayerDroppable(props: MapLayerDroppableProps) {
         </div>
         {activeLayer.provider?.status === MapLayerImageryProviderStatus.RequireAuth &&
           <Button
-            className="map-manager-item-requireAuth"
+            size="small"
+            styleType="borderless"
             onClick={() => {
               const indexInDisplayStyle = props.activeViewport?.displayStyle.findMapLayerIndexByNameAndSource(activeLayer.name, activeLayer.source, activeLayer.isOverlay);
               if (indexInDisplayStyle !== undefined && indexInDisplayStyle >= 0) {

extensions/map-layers/src/ui/widget/MapLayerManager.scss

@@ -6,24 +6,8 @@
 @import "~@itwin/itwinui-css/scss/style/typography";
 
 $divider-color: $buic-background-toolbutton-stroke;
-$hovered-icon-color: $buic-foreground-primary-tone;
-
-button.map-manager-item-visibility {
-  background-color: transparent;
-  border: none;
-  color: $buic-foreground-body;
-  background-color: transparent;
-
-  &:hover {
-    color: $hovered-icon-color;
-  }
-
-  &:focus {
-    outline: none;
-    box-shadow: $uicore-button-focus-boxshadow;
-  }
-}
-
+$hovered-icon-color: $buic-foreground-primary;
+$default-icon-height: 20px;
 .map-manager-layer-host {
   margin: 0 6px;
   height: 100%;
@@ -55,20 +39,12 @@ button.map-manager-item-visibility {
     padding-left: 10px;
   }
 
-  button.map-manager-item-requireAuthIcon {
-    color: $buic-foreground-warning;
-  }
-
   .map-manager-header-buttons-group {
     margin-left: auto;
     border: none;
     display: flex;
     padding-right: 5px;
   }
-
-  .map-manager-toggle {
-    height: 24px;
-  }
 }
 
 .map-manager-container {
@@ -88,31 +64,15 @@ button.map-manager-item-visibility {
   .map-manager-layer-wrapper {
     border: 1px solid #ccc;
     margin-bottom: 15px;
+    padding: 10px;
   }
 
   .map-manager-underlays,
   .map-manager-overlays {
     display: flex;
     align-content: center;
-    margin-top: 8px;
-    padding-left: 10px;
-
     .map-manager-attach-layer-button {
-      background-color: transparent;
       margin-left: auto;
-      width: 40px;
-      border: none;
-      color: $buic-foreground-body;
-      margin-right: 2px;
-
-      &:hover {
-        color: $hovered-icon-color;
-      }
-
-      &:focus {
-        box-shadow: $uicore-button-focus-boxshadow;
-        outline: none;
-      }
     }
   }
 
@@ -184,6 +144,10 @@ button.map-manager-item-visibility {
     margin: 1em 0 1em 0;
   }
 
+  .map-manager-item-menu {
+    padding: 5px;
+  }
+
   .map-manager-header {
     display: flex;
     flex-direction: column;
@@ -241,12 +205,6 @@ button.map-manager-item-visibility {
     width: 465px;
     min-width: 3em;
   }
-
-  .map-manager-item-visibility {
-    width: 40px;
-    margin-right: 20px;
-  }
-
   .map-manager-item-transparency {
     max-width: 160px;
     width: 160px;
@@ -273,104 +231,21 @@ button.map-manager-item-visibility {
     /* Required for text-overflow to do anything */
     white-space: nowrap;
     overflow: hidden;
+    margin-left: 2px;
   }
-
-  .map-manager-item-settings-button {
-    background-color: $buic-background-1;
-    color: $buic-foreground-body;
-    border: none;
-
-    &:hover {
-      color: $hovered-icon-color;
-    }
-
-    &:focus {
-      box-shadow: $uicore-button-focus-boxshadow;
-      outline: none;
-    }
-
-    .core-context-menu-container {
-      .core-context-menu-item {
-        >.core-context-menu-icon {
-          flex-shrink: 1;
-          flex-grow: 0;
-          width: 0;
-        }
-
-        .core-slider.core-slider-minMax {
-          min-width: 100px;
-        }
-      }
-    }
-  }
-
   .map-manager-item-transparency {
     margin-right: 6px;
   }
 
-  button.map-manager-item-visibility {
-    border: none;
+  .map-manager-item-visibility {
     margin: 0 2px;
-    background-color: $buic-background-1;
-    color: $buic-foreground-body;
-
-    &:hover {
-      color: $hovered-icon-color;
-    }
-
-    &:focus {
-      outline: none;
-      box-shadow: $uicore-button-focus-boxshadow;
-    }
   }
 
-  button.map-manager-item-requireAuth {
-    background-color: transparent;
-    border: none;
-    color: $buic-foreground-warning;
-    background-color: transparent;
-
-    &:hover {
-      color: $hovered-icon-color;
-    }
-
-    &:focus {
-      outline: none;
-      box-shadow: $uicore-button-focus-boxshadow;
-    }
+  .map-layer-settings {
+    margin-left: 2px;
   }
 }
 
-.map-layer-settings {
-  border: none;
-  background-color: $buic-background-1;
-  color: $buic-foreground-body;
-  margin-left: 2px;
-
-  &:hover {
-    color: $hovered-icon-color;
-  }
-
-  &:focus {
-    box-shadow: $uicore-button-focus-boxshadow;
-    outline: none;
-  }
-}
-
-.map-manager-item-sub-layer-button {
-  border: none;
-  background-color: $buic-background-1;
-  color: $buic-foreground-body;
-
-  &:hover {
-    color: $hovered-icon-color;
-  }
-
-  &:focus {
-    box-shadow: $uicore-button-focus-boxshadow;
-    outline: none;
-  }
-}
 
 .map-manager-item-sub-layer-container {
   @include uicore-z-index(dialog-popup);
@@ -481,19 +356,6 @@ button.map-manager-item-visibility {
       button.map-source-list-entry-button {
         height: auto;
         padding: 0 4px 0 4px;
-        margin: 0;
-        background-color: transparent;
-        border: none;
-        color: $buic-foreground-body;
-
-        &:hover {
-          color: $hovered-icon-color;
-        }
-
-        &:focus {
-          outline: none;
-          box-shadow: $uicore-button-focus-boxshadow;
-        }
       }
 
       .map-source-list-entry-name {