@arcgis/core 5.2.0-next.14 → 5.2.0-next.16

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

@@ -4,7 +4,7 @@
     padding: var(--esri-widget-padding);
 
     &__notice-error {
-      margin: 0 0 var(--calcite-spacing-xxl);
+      margin: 0 0 var(--calcite-space-2xl);
     }
 
     &__disabled-notice {
@@ -35,7 +35,7 @@
         opacity 250ms,
         margin 250ms;
       opacity: 1;
-      margin-bottom: $cap-spacing--half;
+      margin-bottom: var(--calcite-space-xs);
 
       &:last-child {
         margin-bottom: 0;
@@ -72,17 +72,17 @@
     &__multiple-choice-input__other-choice {
       display: flex;
       flex-direction: column;
-      gap: var(--calcite-spacing-sm);
+      gap: var(--calcite-space-sm);
     }
 
     &__multiple-choice-input__select-all {
       border-block-end: var(--calcite-border-width-sm) solid var(--calcite-color-border-1);
-      padding-block-end: var(--calcite-spacing-sm);
+      padding-block-end: var(--calcite-space-sm);
     }
 
     &__multiple-choice-input__other-choice--with-select-all {
       border-block-start: var(--calcite-border-width-sm) solid var(--calcite-color-border-1);
-      padding-block-start: var(--calcite-spacing-sm);
+      padding-block-start: var(--calcite-space-sm);
     }
 
     &__form-header {
@@ -97,7 +97,7 @@
       width: 100%;
 
       &:not(calcite-checkbox):focus {
-        outline: var(--calcite-spacing-base) solid var(--calcite-color-brand);
+        outline: var(--calcite-space-base) solid var(--calcite-color-brand);
         outline-offset: -2px;
       }
     }
@@ -108,16 +108,16 @@
     }
 
     &__individual-element {
-      margin: var(--calcite-spacing-xxl) 0;
+      margin: var(--calcite-space-2xl) 0;
     }
 
     &__date-input-container {
       display: flex;
       flex-direction: column;
-      gap: var(--calcite-spacing-sm);
+      gap: var(--calcite-space-sm);
 
       .esri-batch-attribute-form__input {
-        margin-bottom: $cap-spacing--quarter;
+        margin-bottom: var(--calcite-space-base);
       }
 
       :last-child {
@@ -126,8 +126,8 @@
     }
 
     &__group {
-      margin: 0 0 $cap-spacing 0;
-      margin-inline: calc(var(--calcite-spacing-md) * -1); // offset to align form elements
+      margin: 0 0 var(--calcite-space-md) 0;
+      margin-inline: calc(var(--calcite-space-md) * -1); // offset to align form elements
       background-color: inherit;
     }
 
@@ -136,10 +136,6 @@
       border-inline-start: 3px solid $border-color;
     }
 
-    &__block {
-      margin-inline: -10px;
-    }
-
     &__relationship-element-input {
       margin-block-end: var(--calcite-space-lg);
 
@@ -174,19 +170,19 @@
     }
 
     &__attachment-element-input {
-      margin: var(--calcite-spacing-xxl) 0;
+      margin: var(--calcite-space-2xl) 0;
     }
 
     &__attachment-element-label {
       @include wordbreak();
 
-      margin-bottom: var(--calcite-spacing-xxs);
+      margin-bottom: var(--calcite-space-2xs);
       color: var(--calcite-color-text-1);
       font-weight: var(--calcite-font-weight-medium);
     }
 
     &__attachment-element-list {
-      margin-block: var(--calcite-spacing-sm);
+      margin-block: var(--calcite-space-sm);
       border-block: var(--calcite-border-width-sm) solid var(--calcite-color-border-3);
     }
 
@@ -195,32 +191,26 @@
 
       @include wordbreak();
 
-      min-block-size: var(--calcite-spacing-xxl);
+      min-block-size: var(--calcite-spae-2xl);
     }
 
     &__attachment-element-list-item-start {
       display: flex;
       align-items: center;
       justify-content: center;
-      border-radius: var(--calcite-corner-radius-s);
-      background-color: var(--calcite-color-foreground-2);
-      block-size: var(--calcite-spacing-xxxl);
-      inline-size: var(--calcite-spacing-xxxl);
+      border-radius: var(--calcite-corner-radius-sm);
+      background-color: var(--calcite-color-surface-3);
+      block-size: var(--calcite-space-3xl);
+      inline-size: var(--calcite-space-3xl);
       color: var(--calcite-color-text-2);
     }
 
-    &__attachment-element-list-item-actions {
-      display: flex;
-      gap: var(--calcite-spacing-xxs);
-      align-items: center;
-    }
-
     &__attachment-element-list-item-staged-indicator {
       display: inline-flex;
       border-radius: 50%;
       background-color: var(--calcite-color-brand);
-      block-size: var(--calcite-spacing-xs);
-      inline-size: var(--calcite-spacing-xs);
+      block-size: var(--calcite-space-xs);
+      inline-size: var(--calcite-space-xs);
     }
 
     &__attachment-element-list-item-thumb {
@@ -235,7 +225,7 @@
     }
 
     &__attachment-element-empty-state {
-      padding-block: var(--calcite-spacing-sm);
+      padding-block: var(--calcite-space-sm);
       color: var(--calcite-color-text-2);
       font-size: var(--calcite-font-size--1);
     }
@@ -243,19 +233,9 @@
     &__attachment-element-add-actions {
       display: flex;
       flex-direction: column;
-      gap: var(--calcite-spacing-sm);
-      align-items: flex-start;
-      justify-content: flex-start;
-      inline-size: 100%;
-    }
-
-    &__attachment-element-empty-action {
-      display: flex;
-      flex-direction: column;
-      gap: var(--calcite-spacing-sm);
+      gap: var(--calcite-space-sm);
       align-items: flex-start;
       justify-content: flex-start;
-      padding-block-start: var(--calcite-spacing-xs);
       inline-size: 100%;
     }
 
@@ -264,7 +244,7 @@
     }
 
     &__attachment-element-empty-action-hint {
-      line-height: 16px;
+      line-height: var(--calcite-font-line-height-fixed-base);
       color: var(--calcite-color-text-3);
       font-size: var(--calcite-font-size--1);
       font-weight: var(--calcite-font-weight-regular);
@@ -278,8 +258,8 @@
     &__attachment-element-all-panel {
       display: flex;
       flex-direction: column;
-      gap: var(--calcite-spacing-md);
-      padding: var(--calcite-spacing-sm);
+      gap: var(--calcite-space-md);
+      padding: var(--calcite-space-sm);
     }
 
     &__attachment-element-file-input {
@@ -289,8 +269,8 @@
     &__attachment-element-add-panel {
       display: flex;
       flex-direction: column;
-      gap: var(--calcite-spacing-md);
-      padding: var(--calcite-spacing-sm);
+      gap: var(--calcite-space-md);
+      padding: var(--calcite-space-sm);
     }
 
     &__attachment-element-add-dropzone {
@@ -306,35 +286,36 @@
         background-color var(--calcite-animation-timing) ease-in-out,
         box-shadow var(--calcite-animation-timing) ease-in-out;
       border: var(--calcite-border-width-sm) dashed var(--calcite-color-border-input);
-      border-radius: var(--calcite-corner-radius-s);
-      background-color: var(--calcite-color-foreground-1);
-      padding: var(--calcite-spacing-lg) var(--calcite-spacing-md);
+      border-radius: var(--calcite-corner-radius-sm);
+      background-color: var(--calcite-color-surface-2);
+      padding: var(--calcite-space-lg) var(--calcite-space-md);
       min-block-size: 10.875rem;
       inline-size: 100%;
       text-align: center;
     }
 
     &__attachment-element-add-dropzone-icon {
-      margin-block-end: var(--calcite-spacing-sm);
+      margin-block-end: var(--calcite-space-sm);
       color: var(--calcite-color-text-3);
     }
 
     &__attachment-element-add-dropzone-heading {
-      margin-block-end: var(--calcite-spacing-xs);
+      margin-block-end: var(--calcite-space-xs);
       line-height: var(--calcite-font-line-height-fixed-base);
       color: var(--calcite-color-text-1);
       font-size: var(--calcite-font-size-0);
-      font-weight: var(--calcite-font-weight-normal);
+      font-weight: var(--calcite-font-weight-regular);
     }
 
     &__attachment-element-add-dropzone-detail {
-      margin-block-end: var(--calcite-spacing-md);
+      @include wordbreak();
+
+      margin-block-end: var(--calcite-space-md);
       max-inline-size: 13rem;
       line-height: var(--calcite-font-line-height-fixed-base);
-      word-break: break-word;
       color: var(--calcite-color-text-3);
       font-size: var(--calcite-font-size--1);
-      font-weight: var(--calcite-font-weight-normal);
+      font-weight: var(--calcite-font-weight-regular);
     }
 
     &__attachment-element-add-dropzone calcite-button {
@@ -344,26 +325,26 @@
     &__attachment-element-validation-criteria {
       display: flex;
       flex-direction: column;
-      gap: var(--calcite-spacing-xs);
-      padding: var(--calcite-spacing-sm);
+      gap: var(--calcite-space-xs);
+      padding: var(--calcite-space-sm);
     }
 
     &__attachment-element-detail {
       display: flex;
       flex-direction: column;
-      gap: var(--calcite-spacing-md);
-      padding: var(--calcite-spacing-sm);
+      gap: var(--calcite-space-md);
+      padding: var(--calcite-space-sm);
     }
 
     &__attachment-element-detail-metadata-group {
       display: flex;
       flex-direction: column;
-      gap: var(--calcite-spacing-xxs);
+      gap: var(--calcite-space-2xs);
     }
 
     &__attachment-element-detail-file-name-row {
       display: flex;
-      gap: var(--calcite-spacing-xxs);
+      gap: var(--calcite-space-2xs);
       align-items: center;
       inline-size: 100%;
     }
@@ -377,13 +358,13 @@
       box-sizing: border-box;
       display: flex;
       flex-direction: column;
-      gap: var(--calcite-spacing-sm);
+      gap: var(--calcite-space-sm);
       align-items: center;
       justify-content: center;
       border: var(--calcite-border-width-sm) solid var(--calcite-color-border-3);
-      border-radius: var(--calcite-corner-radius-s);
-      background-color: var(--calcite-color-foreground-1);
-      padding: var(--calcite-spacing-sm);
+      border-radius: var(--calcite-corner-radius-sm);
+      background-color: var(--calcite-color-surface-2);
+      padding: var(--calcite-space-sm);
       inline-size: 100%;
     }
 
@@ -402,32 +383,32 @@
     &__attachment-element-detail-actions {
       display: flex;
       flex-wrap: wrap;
-      gap: var(--calcite-spacing-xs);
+      gap: var(--calcite-space-xs);
     }
 
     &__attachment-element-detail-metadata {
       display: flex;
       flex-direction: column;
-      gap: var(--calcite-spacing-md);
-      padding-block-start: var(--calcite-spacing-lg);
+      gap: var(--calcite-space-md);
+      padding-block-start: var(--calcite-space-lg);
     }
 
     &__attachment-element-detail-metadata-label {
       line-height: var(--calcite-font-line-height-fixed-base);
       color: var(--calcite-color-text-2);
       font-size: var(--calcite-font-size--1);
-      font-weight: var(--calcite-font-weight-normal);
+      font-weight: var(--calcite-font-weight-regular);
       font-style: normal;
     }
 
     &__attachment-element-detail-metadata-value {
       @include wordbreak();
 
+      // Is it intentional to mix fixed line height with relative font size?
       line-height: var(--calcite-font-line-height-relative-snug);
-      word-break: break-word;
       color: var(--calcite-color-text-2);
       font-size: var(--calcite-font-size-0);
-      font-weight: var(--calcite-font-weight-normal);
+      font-weight: var(--calcite-font-weight-regular);
       font-style: normal;
     }
 
@@ -435,7 +416,7 @@
       line-height: var(--calcite-font-line-height-relative-snug);
       color: var(--calcite-color-text-3);
       font-size: var(--calcite-font-size--1);
-      font-weight: var(--calcite-font-weight-normal);
+      font-weight: var(--calcite-font-weight-regular);
 
       a {
         display: inline;
@@ -493,8 +474,8 @@
       code {
         border: var(--calcite-border-width-sm) solid var(--calcite-color-border-3);
         border-radius: var(--calcite-corner-radius-xs);
-        background-color: var(--calcite-color-foreground-3);
-        padding: var(--calcite-spacing-xxs);
+        background-color: var(--calcite-color-surface-4);
+        padding: var(--calcite-space-2xs);
         white-space: normal;
         word-break: break-word;
         color: var(--calcite-color-text-2);
@@ -507,7 +488,7 @@
       h3,
       h4,
       h5 {
-        margin-bottom: var(--calcite-spacing-xxs);
+        margin-bottom: var(--calcite-space-2xs);
         line-height: var(--calcite-font-line-height-relative-snug);
         color: var(--calcite-color-text-1);
         font-size: var(--calcite-font-size-0);
@@ -519,7 +500,7 @@
       }
 
       h6 {
-        margin-bottom: var(--calcite-spacing-xxs);
+        margin-bottom: var(--calcite-space-2xs);
         line-height: var(--calcite-font-line-height-relative-snug);
         color: var(--calcite-color-text-2);
         font-size: var(--calcite-font-size--1);
@@ -527,11 +508,11 @@
       }
 
       p {
-        margin-bottom: var(--calcite-spacing-lg);
+        margin-bottom: var(--calcite-space-lg);
         line-height: var(--calcite-font-line-height-relative-snug);
         color: var(--calcite-color-text-3);
         font-size: var(--calcite-font-size--1);
-        font-weight: var(--calcite-font-weight-normal);
+        font-weight: var(--calcite-font-weight-regular);
       }
 
       strong {
@@ -540,7 +521,7 @@
     }
 
     &__utility-network-associations-element-input {
-      margin-block-end: var(--calcite-spacing-md);
+      margin-block-end: var(--calcite-space-md);
 
       .esri-feature-utility-network-associations {
         .esri-feature-element-info__description {
@@ -554,15 +535,6 @@
       }
     }
   }
-
-  [dir="rtl"] {
-    .esri-batch-attribute-form__date-input-part {
-      &:first-child .esri-batch-attribute-form__input {
-        border-right: var(--calcite-spacing-px) solid $border-color;
-        border-left: none;
-      }
-    }
-  }
 }
 
 @if $include_BatchAttributeForm == true {

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

@@ -172,8 +172,6 @@
     }
 
     &__superimpose-tools {
-      position: static;
-      bottom: auto;
       margin: 0;
       box-shadow: none;
       width: 100%;