@arcgis/core 4.23.0-next.20220123 → 4.23.0-next.20220128

package/assets/esri/themes/base/_mixins.scss

@@ -510,7 +510,10 @@
 
   appearance: none;
 
-  @extend [class^="esri-icon-"];
+  @each $icomoon-selector in $icomoon-selectors {
+    @extend #{$icomoon-selector};
+  }
+  
   @extend .esri-icon-left;
 
   &:hover:not(:disabled) {

package/assets/esri/themes/base/icons/style.scss

@@ -1,5 +1,15 @@
 @import "variables";
 
+$icomoon-selectors: '[class^="esri-icon-"]', '[class*=" esri-icon-"]';
+
+@mixin icomoonIconSelector($selectorPrefix:"", $selectorSuffix:"") {
+  @each $icomoon-selector in $icomoon-selectors {
+    #{$selectorPrefix}#{$icomoon-selector}#{$selectorSuffix} {
+      @content;
+    }
+  }
+}
+
 @font-face {
   font-family: "#{$icomoon-font-family}";
   src: url("#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?#{$icomoon-font-version}")
@@ -12,8 +22,7 @@
   font-style: normal;
 }
 
-[class^="esri-icon-"],
-[class*=" esri-icon-"] {
+@include icomoonIconSelector() {
   /* use !important to prevent issues with browser extensions that change fonts */
   font-family: "#{$icomoon-font-family}" !important;
   speak: none;

package/assets/esri/themes/base/widgets/_BasemapLayerList.scss

@@ -144,8 +144,10 @@
     width: $side-spacing; // Matches side padding on items that don't have this toggle.
     cursor: pointer;
   }
-  .esri-basemap-layer-list__child-toggle [class*="esri-icon"] {
-    line-height: 1.2em;
+  .esri-basemap-layer-list__child-toggle {
+    @include icomoonIconSelector() {
+      line-height: 1.2em;
+    }
   }
   .esri-basemap-layer-list__child-toggle .esri-basemap-layer-list__child-toggle-icon--opened,
   .esri-basemap-layer-list__child-toggle .esri-basemap-layer-list__child-toggle-icon--closed-rtl,
@@ -210,9 +212,10 @@
     animation: esri-fade-in-down 250ms ease-in-out;
     transform-origin: center top;
   }
-  .esri-basemap-layer-list__item-error-message [class^="esri-icon-"],
-  .esri-basemap-layer-list__item-error-message [class*="esri-icon-"] {
-    margin-right: 0.3rem;
+  .esri-basemap-layer-list__item-error-message {
+    @include icomoonIconSelector() {
+      margin-right: 0.3rem;
+    }
   }
   .esri-basemap-layer-list__item--error {
     .esri-basemap-layer-list__item-error-message {
@@ -427,12 +430,12 @@
     .esri-basemap-layer-list__item:after {
       animation: looping-progresss-bar-ani $looping-progress-bar-params reverse;
     }
-    .esri-basemap-layer-list__item-error-message [class^="esri-icon-"],
-    .esri-basemap-layer-list__item-error-message [class*="esri-icon-"] {
-      margin-right: 0;
-      margin-left: 0.3rem;
+    .esri-basemap-layer-list__item-error-message {
+      @include icomoonIconSelector() {
+        margin-right: 0;
+        margin-left: 0.3rem;
+      }
     }
-
     .esri-basemap-layer-list__item--selectable .esri-basemap-layer-list__item-container {
       border-left: none;
       border-right: $border-size--active solid transparent;

package/assets/esri/themes/base/widgets/_CoordinateConversion.scss

@@ -11,8 +11,10 @@
   .esri-coordinate-conversion.esri-disabled {
     pointer-events: none;
     color: $interactive-font-color--disabled;
-    [class*="esri-icon-"]:before {
-      color: $interactive-font-color--disabled;
+    @include icomoonIconSelector() {
+      &:before {
+        color: $interactive-font-color--disabled;
+      }
     }
   }
   .esri-coordinate-conversion--no-basemap {

package/assets/esri/themes/base/widgets/_Directions.scss

@@ -182,9 +182,11 @@
     }
   }
 
-  .esri-search__sources-button [class*="esri-icon"] {
-    position: relative;
-    left: 1px;
+  .esri-search__sources-button {
+    @include icomoonIconSelector() {
+      position: relative;
+      left: 1px;
+    }
   }
 
   .esri-directions__stop-input {

package/assets/esri/themes/base/widgets/_Editor.scss

@@ -189,8 +189,11 @@
     background-color: $background-color--active;
     color: $interactive-font-color;
   }
-  .esri-editor__feature-list-item[class^="esri-icon"] {
-    padding-right: $font-size * 0.2;
+
+  .esri-editor__feature-list-item {
+    @include icomoonIconSelector("&") {
+      padding-right: $font-size * 0.2;
+    }
   }
 
   .esri-editor__feature-list-item--disabled {

package/assets/esri/themes/base/widgets/_ElevationProfile.scss

@@ -389,11 +389,13 @@
     }
 
     &__slope-value {
-      > [class^="esri-icon"] {
-        font-size: $statistics-font-size; // Keep the icon small.
+      > {
+        @include icomoonIconSelector() {
+          font-size: $statistics-font-size; // Keep the icon small.
 
-        &:not(:first-child) {
-          margin-inline-start: $statistics-slope-values-spacing;
+          &:not(:first-child) {
+            margin-inline-start: $statistics-slope-values-spacing;
+          }
         }
       }
     }

package/assets/esri/themes/base/widgets/_FeatureTable.scss

@@ -13,6 +13,12 @@
       padding: 0;
     }
 
+    .esri-grid--no-column-menu {
+      .esri-column__menu-container {
+        display: none;
+      }
+    }
+
     .esri-grid__grid {
       height: 100%;
       width: 100%;

package/assets/esri/themes/base/widgets/_ItemList.scss

@@ -99,7 +99,7 @@
       background-color: var(--calcite-ui-foreground-2);
     }
 
-    &[class^="esri-icon"] {
+    @include icomoonIconSelector("&") {
       padding-right: $font-size * 0.2;
     }
 

package/assets/esri/themes/base/widgets/_LayerList.scss

@@ -81,8 +81,10 @@
     width: $side-spacing; // Matches side padding on items that don't have this toggle.
     cursor: pointer;
   }
-  .esri-layer-list__child-toggle [class*="esri-icon"] {
-    line-height: 1.2em;
+  .esri-layer-list__child-toggle {
+    @include icomoonIconSelector() {
+      line-height: 1.2em;
+    }
   }
   .esri-layer-list__child-toggle .esri-layer-list__child-toggle-icon--opened,
   .esri-layer-list__child-toggle .esri-layer-list__child-toggle-icon--closed-rtl,
@@ -145,9 +147,10 @@
     animation: esri-fade-in-down 250ms ease-in-out;
     transform-origin: center top;
   }
-  .esri-layer-list__item-error-message [class^="esri-icon-"],
-  .esri-layer-list__item-error-message [class*="esri-icon-"] {
-    margin-right: 0.3rem;
+  .esri-layer-list__item-error-message {
+    @include icomoonIconSelector() {
+      margin-right: 0.3rem;
+    }
   }
   .esri-layer-list__item--error {
     .esri-layer-list__item-error-message {
@@ -353,10 +356,11 @@
     .esri-layer-list__item:after {
       animation: looping-progresss-bar-ani $looping-progress-bar-params reverse;
     }
-    .esri-layer-list__item-error-message [class^="esri-icon-"],
-    .esri-layer-list__item-error-message [class*="esri-icon-"] {
-      margin-right: 0;
-      margin-left: 0.3rem;
+    .esri-layer-list__item-error-message {
+      @include icomoonIconSelector() {
+        margin-right: 0;
+        margin-left: 0.3rem;
+      }
     }
     .esri-layer-list__item-container {
       border-left: none;

package/assets/esri/themes/base/widgets/_Popup.scss

@@ -302,8 +302,10 @@
     > .esri-popup__action-toggle {
       flex: 0 1 auto;
     }
-    .esri-popup__icon,
-    [class*="esri-icon"] {
+    .esri-popup__icon {
+      margin: 0 $side-spacing--quarter;
+    }
+    @include icomoonIconSelector() {
       margin: 0 $side-spacing--quarter;
     }
   }

package/assets/esri/themes/base/widgets/_Print.scss

@@ -158,13 +158,22 @@
     justify-content: space-between;
   }
 
-  .esri-print__advanced-options-section [class*="esri-icon"],
-  .esri-print__size-container [class*="esri-icon"] {
-    background: transparent;
+  .esri-print__advanced-options-section {
+    @include icomoonIconSelector() {
+      background: transparent;
+    }
+  }
+
+  .esri-print__size-container {
+    @include icomoonIconSelector() {
+      background: transparent;
+    }
   }
 
-  .esri-print__size-container [class*="esri-icon"] {
-    align-self: flex-end;
+  .esri-print__size-container {
+    @include icomoonIconSelector() {
+      align-self: flex-end;
+    }
   }
 
   .esri-print__size-container button {
@@ -197,9 +206,11 @@
     padding: $cap-spacing 0;
   }
 
-  .esri-print__export-panel-container [class*="esri-icon"] {
-    margin-right: 0.5em;
-    margin-top: 0.15em;
+  .esri-print__export-panel-container {
+    @include icomoonIconSelector() {
+      margin-right: 0.5em;
+      margin-top: 0.15em;
+    }
   }
 
   .esri-print__exported-file-link-title {
@@ -238,9 +249,11 @@
       border-left-width: 1px;
       border-right-width: 0;
     }
-    .esri-print__export-panel-container [class*="esri-icon"] {
-      margin-right: 0;
-      margin-left: 0.5em;
+    .esri-print__export-panel-container {
+      @include icomoonIconSelector() {
+        margin-right: 0;
+        margin-left: 0.5em;
+      }
     }
     .esri-print__advanced-options-button[aria-expanded="false"] .esri-print__advanced-options-button-icon--closed {
       display: none;

package/assets/esri/themes/base/widgets/_Search.scss

@@ -115,8 +115,10 @@ $search_width: 240px !default;
     height: 1px;
     width: 1px;
   }
-  .esri-search__suggestions-menu [class^="esri-icon"] {
-    vertical-align: middle;
+  .esri-search__suggestions-menu {
+    @include icomoonIconSelector() {
+      vertical-align: middle;
+    }
   }
   .esri-search__suggestions-menu .esri-menu__header:first-child,
   .esri-search__suggestions-menu ul:first-child {

package/assets/esri/themes/base/widgets/_TableList.scss

@@ -77,9 +77,10 @@
     animation: esri-fade-in-down 250ms ease-in-out;
     transform-origin: center top;
   }
-  .esri-table-list__item-error-message [class^="esri-icon-"],
-  .esri-table-list__item-error-message [class*="esri-icon-"] {
-    margin-right: 0.3rem;
+  .esri-table-list__item-error-message {
+    @include icomoonIconSelector() {
+      margin-right: 0.3rem;
+    }
   }
   .esri-table-list__item--error {
     .esri-table-list__item-error-message {
@@ -267,10 +268,11 @@
     .esri-table-list__item:after {
       animation: looping-progresss-bar-ani $looping-progress-bar-params reverse;
     }
-    .esri-table-list__item-error-message [class^="esri-icon-"],
-    .esri-table-list__item-error-message [class*="esri-icon-"] {
-      margin-right: 0;
-      margin-left: 0.3rem;
+    .esri-table-list__item-error-message {
+      @include icomoonIconSelector() {
+        margin-right: 0;
+        margin-left: 0.3rem;
+      }
     }
     .esri-table-list__item--selectable .esri-table-list__item-container {
       border-left: none;

package/assets/esri/themes/base/widgets/_Weather.scss

@@ -18,6 +18,18 @@
       gap: $side-spacing--half;
     }
 
+    &__warning {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: $side-spacing--half;
+      font-size: $font-size--small;
+
+      calcite-icon {
+        color: var(--calcite-ui-warning);
+      }
+    }
+
     &__coverage-slider calcite-slider {
       margin: -7px; // Align slider to the buttons, header, etc
     }

package/assets/esri/themes/base/widgets/_Widget.scss

@@ -180,8 +180,10 @@
       background-color: $background-color--active;
       border-left-color: $border-color--active;
     }
-    &__list-item [class^="esri-icon"] {
-      padding-right: $font-size * 0.2;
+    &__list-item {
+      @include icomoonIconSelector() {
+        padding-right: $font-size * 0.2;
+      }
     }
   }
 
@@ -331,12 +333,12 @@
       font-size: $font-size;
       font-family: $font-family;
     }
-    [class*="esri-icon"] {
+    @include icomoonIconSelector() {
       padding: 0 $side-spacing--half;
     }
   }
 
-  [class*="esri-icon"] {
+  @include icomoonIconSelector() {
     font-size: $icon-size;
     display: inline-block;
   }
@@ -397,12 +399,17 @@
 
   // Disabled
   .esri-disabled a,
-  .esri-disabled [class*="esri-icon"],
   .esri-disabled [role="menu"],
   .esri-disabled [role="checkbox"] {
     color: $interactive-font-color--disabled;
   }
 
+  .esri-disabled {
+    @include icomoonIconSelector() {
+      color: $interactive-font-color--disabled;
+    }
+  }
+
   .keynav-mode {
     .esri-widget {
       //  Saving this for when we can toggle a key-nav class
@@ -548,9 +555,11 @@
     .esri-select {
       background-position: left 50%;
     }
-    .esri-menu__list-item [class^="esri-icon"] {
-      padding-right: 0;
-      padding-left: floor($font-size * 0.2);
+    .esri-menu__list-item {
+      @include icomoonIconSelector() {
+        padding-right: 0;
+        padding-left: floor($font-size * 0.2);
+      }
     }
     .esri-menu__list-item {
       border-left: none;
@@ -573,7 +582,7 @@
     width: 1px;
   }
 
-  [class^="esri-icon"] {
+  @include icomoonIconSelector() {
     // fixes IE11 bug where animation will continue after animation class is removed
     // https://devtopia.esri.com/WebGIS/arcgis-js-api/issues/4784
     animation: none;