Merge pull request #453 from Esri/upgrade-components

js 4.29 and more calcite 2.0.0
Esri · Dec 6, 2023 · afe5bbf · afe5bbf
2 parents 1359aa8 + e64f9e3
commit afe5bbf
Show file tree

Hide file tree

Showing 32 changed files with 83 additions and 88 deletions.
diff --git a/src/assets/styles/calcite-web.min.css b/src/assets/styles/calcite-web.min.css
diff --git a/src/assets/styles/styles.scss b/src/assets/styles/styles.scss
@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-@import "calcite-web.min";
-
 /*#region Basic Overrides*/
 
 html, body {
@@ -24,6 +22,7 @@ html, body {
     flex
     overflow-y-hidden;
   background-color: $solutions-background-color;
+  margin: 0px;
 }
 
 h1 {

diff --git a/src/components/crowdsource-manager/crowdsource-manager.css b/src/components/crowdsource-manager/crowdsource-manager.css
@@ -17,7 +17,7 @@
 :host {
   display: block;
   --calcite-label-margin-bottom: 0px;
-  --solutions-theme-foreground-color: var(--calcite-ui-foreground-1);
+  --solutions-theme-foreground-color: var(--calcite-color-foreground-1);
 }
 
 .padding-1-2 {
@@ -78,16 +78,16 @@
 }
 
 .border {
-  border: 1px solid var(--calcite-ui-border-3);
+  border: 1px solid var(--calcite-color-border-3);
 }
 
 .border-bottom {
-  border-bottom: 1px solid var(--calcite-ui-border-3);
+  border-bottom: 1px solid var(--calcite-color-border-3);
 }
 
 .border-sides {
-  border-left: 1px solid var(--calcite-ui-border-3);
-  border-right: 1px solid var(--calcite-ui-border-3);
+  border-left: 1px solid var(--calcite-color-border-3);
+  border-right: 1px solid var(--calcite-color-border-3);
 }
 
 .position-relative {

diff --git a/src/components/edit-card/edit-card.css b/src/components/edit-card/edit-card.css
@@ -35,7 +35,7 @@
 }
 
 #feature-form {
-  --calcite-ui-background: none;
+  --calcite-color-background: none;
   padding-top: 0px;
 }
 
@@ -50,11 +50,11 @@
 .esri-editor__prompt--danger {
   position: relative !important;
   width: 100% !important;
-  background-color: var(--calcite-ui-foreground-1) !important;
+  background-color: var(--calcite-color-foreground-1) !important;
 }
 
 .esri-feature__content-node {
-  background-color: var(--calcite-ui-foreground-1) !important;
+  background-color: var(--calcite-color-foreground-1) !important;
 }
 
 .esri-editor__panel-toolbar {

diff --git a/src/components/info-card/info-card.css b/src/components/info-card/info-card.css
@@ -50,7 +50,7 @@
 }
 
 .top-border {
-  border-top: 1px solid var(--calcite-ui-border-1);
+  border-top: 1px solid var(--calcite-color-border-1);
 }
 
 .min-width-100 {
@@ -63,6 +63,6 @@
 
 .esri-features__container {
   padding: 0.5rem !important;
-  background-color: var(--calcite-ui-foreground-1) !important;
+  background-color: var(--calcite-color-foreground-1) !important;
   height: 100% !important;
 }
diff --git a/src/components/layer-table/layer-table.css b/src/components/layer-table/layer-table.css
@@ -35,15 +35,15 @@
 }
 
 .table-border {
-  border: 1px solid var(--calcite-ui-border-2);
+  border: 1px solid var(--calcite-color-border-2);
 }
 
 .border-end {
-  border-inline-end: 1px solid var(--calcite-ui-border-2);
+  border-inline-end: 1px solid var(--calcite-color-border-2);
 }
 
 .border-bottom {
-  border-bottom: 1px solid var(--calcite-ui-border-2);
+  border-bottom: 1px solid var(--calcite-color-border-2);
 }
 
 .padding-5 {
@@ -81,28 +81,28 @@ html[dir="rtl"] .bottom-left {
 }
 
 .background {
-  background-color: var(--calcite-ui-background);
+  background-color: var(--calcite-color-background);
 }
 
 .text-color {
-  color: var(--calcite-ui-text-1);
+  color: var(--calcite-color-text-1);
 }
 
 .align-center {
   align-items: center;
 }
 
 .danger-color {
-  color: var(--calcite-ui-danger);
+  color: var(--calcite-color-status-danger);
 }
 
 .esri-feature-table vaadin-grid {
   border: none !important;
 }
 
 vaadin-grid-cell-content {
-  padding: var(--lumo-space-xs) var(--lumo-space-m) !important;
   font-size: 14px !important;
+  color: var(--calcite-color-text-3) !important;
 }
 
 .share-action {
@@ -117,7 +117,7 @@ html[dir="rtl"] .share-action {
 .disabled {
   cursor: default !important;
   user-select: none;
-  opacity: var(--calcite-ui-opacity-disabled);
+  opacity: var(--calcite-opacity-disabled);
   pointer-events: none;
 }
 

diff --git a/src/components/layout-manager/layout-manager.css b/src/components/layout-manager/layout-manager.css
@@ -35,7 +35,7 @@
 }
 
 .icon-color {
-  --calcite-ui-icon-color: var(--calcite-ui-brand);
+  --calcite-color-icon-color: var(--calcite-color-brand);
 }
 
 .icon {
@@ -45,7 +45,7 @@
 .tooltip-message {
   padding: 5px 8px;
   font-weight: var(--calcite-font-weight-normal);
-  color: var(--calcite-ui-text-2);
+  color: var(--calcite-color-text-2);
 }
 
 .header-text {

diff --git a/src/components/map-draw-tools/map-draw-tools.css b/src/components/map-draw-tools/map-draw-tools.css
@@ -19,7 +19,7 @@
 }
 
 .border {
-  outline: 1px solid var(--calcite-ui-border-input);
+  outline: 1px solid var(--calcite-color-border-input);
 }
 
 .div-visible {

diff --git a/src/components/map-layer-picker/map-layer-picker.css b/src/components/map-layer-picker/map-layer-picker.css
@@ -20,14 +20,12 @@
 
 .map-layer-picker-container {
   width: 100%;
-  height: 100%;
 }
 
 .map-layer-picker {
   position: relative;
   width: 100%;
   display: inline-block;
-  height: 100%;
 }
 
 .padding-bottom-1 {
@@ -50,7 +48,7 @@
 .disabled {
   cursor: default !important;
   user-select: none;
-  opacity: var(--calcite-ui-opacity-disabled);
+  opacity: var(--calcite-opacity-disabled);
   pointer-events: none;
 }
 
@@ -69,3 +67,7 @@
 .padding-start-1 {
   padding-inline-start: 1rem;
 }
+
+.cursor-default {
+  cursor: default;
+}
diff --git a/src/components/map-layer-picker/map-layer-picker.tsx b/src/components/map-layer-picker/map-layer-picker.tsx
@@ -312,7 +312,7 @@ export class MapLayerPicker {
    */
   protected _getSingleLayerPlaceholder(): VNode {
     return (
-      <div class="layer-picker-label-container">
+      <div class="layer-picker-label-container cursor-default">
         <calcite-icon icon="layers" scale="s"/>
         <calcite-label class="no-bottom-margin padding-start-1">
           {this.selectedName}

diff --git a/src/components/map-picker/map-picker.css b/src/components/map-picker/map-picker.css
@@ -16,7 +16,7 @@
 
 :host {
   display: block;
-  --solutions-theme-foreground-color: var(--calcite-ui-foreground-1);
+  --solutions-theme-foreground-color: var(--calcite-color-foreground-1);
 }
 
 .width-full {
@@ -35,7 +35,7 @@
   border-width: 0px;
   border-bottom-width: 1px;
   border-style: solid;
-  border-color: var(--calcite-ui-border-3);
+  border-color: var(--calcite-color-border-3);
 }
 
 .action-bar-size {
@@ -49,7 +49,7 @@
   flex-direction: column;
   overflow: hidden;
   animation: calcite-scrim-fade-in var(--calcite-internal-animation-timing-medium) ease-in-out;
-  background-color: var(--calcite-ui-background);
+  background-color: var(--calcite-color-background);
   z-index: 1000;
   width: 100%;
   height: fit-content;

diff --git a/src/components/map-search/map-search.css b/src/components/map-search/map-search.css
@@ -20,5 +20,5 @@
 
 .search-widget {
   width: 100% !important;
-  border: 1px solid var(--calcite-ui-border-input);
+  border: 1px solid var(--calcite-color-border-input);
 }
diff --git a/src/components/map-select-tools/map-select-tools.css b/src/components/map-select-tools/map-select-tools.css
@@ -43,7 +43,7 @@
 
 .search-widget {
   width: 100% !important;
-  border: 1px solid var(--calcite-ui-border-input);
+  border: 1px solid var(--calcite-color-border-input);
 }
 
 .w-100 {
@@ -59,7 +59,7 @@
 }
 
 .end-border {
-  border-inline-end: 1px solid var(--calcite-ui-border-2);
+  border-inline-end: 1px solid var(--calcite-color-border-2);
 }
 
 .search-distance {
@@ -72,7 +72,7 @@
 }
 
 .border-bottom {
-  border-bottom: 1px solid var(--calcite-ui-border-2);
+  border-bottom: 1px solid var(--calcite-color-border-2);
 }
 
 .tooltip-container {
@@ -84,11 +84,11 @@
 }
 
 .icon {
-  --calcite-ui-icon-color: var(--calcite-ui-brand);
+  --calcite-color-icon-color: var(--calcite-color-brand);
 }
 
 .tooltip-message {
   padding: 5px 8px;
   font-weight: var(--calcite-font-weight-normal);
-  color: var(--calcite-ui-text-2);
+  color: var(--calcite-color-text-2);
 }
diff --git a/src/components/map-tools/map-tools.css b/src/components/map-tools/map-tools.css
@@ -41,7 +41,7 @@
 }
 
 .border-bottom {
-  border-bottom: 1px solid var(--calcite-ui-border-3);
+  border-bottom: 1px solid var(--calcite-color-border-3);
 }
 
 .box-shadow {

diff --git a/src/components/public-notification/public-notification.css b/src/components/public-notification/public-notification.css
@@ -27,7 +27,7 @@
   border-width: 0px;
   border-bottom-width: 1px;
   border-style: solid;
-  border-color: var(--calcite-ui-border-3);
+  border-color: var(--calcite-color-border-3);
 }
 
 .action-bar-size {
@@ -88,9 +88,9 @@
 
 .info-blue {
   /* This would be better but not the right color in light theme */
-  /* color: var(--calcite-ui-info); */
+  /* color: var(--calcite-color-info); */
 
-  /* This is --calcite-ui-info value for dark theme*/
+  /* This is --calcite-color-info value for dark theme*/
   color: #00A0FF;
 }
 
@@ -116,15 +116,15 @@
 }
 
 .border-bottom {
-  border-bottom: 1px solid var(--calcite-ui-border-2);
+  border-bottom: 1px solid var(--calcite-color-border-2);
 }
 
 .padding-start-1-2 {
   padding-inline-start: 0.5rem;
 }
 
 .list-border {
-  border: 1px solid var(--calcite-ui-border-2);
+  border: 1px solid var(--calcite-color-border-2);
 }
 
 .margin-sides-1 {
@@ -161,7 +161,7 @@
 }
 
 .main-background {
-  background-color: var(--calcite-ui-foreground-2);
+  background-color: var(--calcite-color-foreground-2);
 }
 
 .position-right {
@@ -179,7 +179,7 @@
 }
 
 .list-label {
-  color: var(--calcite-ui-text-1);
+  color: var(--calcite-color-text-1);
 }
 
 .list-label,
@@ -193,7 +193,7 @@
 
 .list-description {
   margin-block-start: 0.125rem;
-  color: var(--calcite-ui-text-3);
+  color: var(--calcite-color-text-3);
 }
 
 .img-container {
@@ -208,9 +208,9 @@
 .background-override {
   height: 100%;
   width: 100%;
-  --calcite-ui-foreground-3: var(--calcite-ui-brand);
-  --calcite-ui-foreground-2: var(--calcite-ui-brand-hover);
-  --calcite-ui-text-1: var(--calcite-ui-text-inverse)
+  --calcite-color-foreground-3: var(--calcite-color-brand);
+  --calcite-color-foreground-2: var(--calcite-color-brand-hover);
+  --calcite-color-text-1: var(--calcite-color-text-inverse)
 }
 
 .word-wrap-anywhere {

diff --git a/src/components/public-notification/public-notification.tsx b/src/components/public-notification/public-notification.tsx
@@ -993,7 +993,7 @@ export class PublicNotification {
                 </div>
                 <div class="padding-1 display-flex">
                   <calcite-button
-                    disabled={!this._downloadActive}
+                    disabled={!this._downloadActive || this._fetchingData}
                     loading={this._fetchingData}
                     onClick={() => void this._export()}
                     width="full"