revert: chore(modal): remove e2e tests that are covered by dedicated …

…openClose commonTests helper (#8392) (#8471) This reverts commit 6e7cff1. ## Summary @Elijbet requested that I revert her commit from #8392 because it mistakenly contained unrelated changes.
Esri · Dec 21, 2023 · 4bedf99 · 4bedf99
1 parent 6e7cff1
commit 4bedf99
Show file tree

Hide file tree

Showing 78 changed files with 2,338 additions and 2,260 deletions.
diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
@@ -4659,9 +4659,6 @@ export namespace Components {
           * Specifies the number of columns the component should span.
          */
         "colSpan": number;
-        /**
-          * When true, prevents user interaction.  Notes:  This prop should use the
-         */
         "disabled": boolean;
         /**
           * Use this property to override individual strings used by the component.
@@ -12090,9 +12087,6 @@ declare namespace LocalJSX {
           * Specifies the number of columns the component should span.
          */
         "colSpan"?: number;
-        /**
-          * When true, prevents user interaction.  Notes:  This prop should use the
-         */
         "disabled"?: boolean;
         /**
           * Use this property to override individual strings used by the component.

diff --git a/packages/calcite-components/src/components/chip/chip.tsx b/packages/calcite-components/src/components/chip/chip.tsx
@@ -328,10 +328,10 @@ export class Chip
       this.selectionMode === "multiple" && this.selected
         ? ICONS.checked
         : this.selectionMode === "multiple"
-          ? ICONS.unchecked
-          : this.selected
-            ? ICONS.checkedSingle
-            : undefined;
+        ? ICONS.unchecked
+        : this.selected
+        ? ICONS.checkedSingle
+        : undefined;
 
     return (
       <div
@@ -379,10 +379,10 @@ export class Chip
       this.selectionMode === "multiple" && this.interactive
         ? "checkbox"
         : this.selectionMode !== "none" && this.interactive
-          ? "radio"
-          : this.interactive
-            ? "button"
-            : undefined;
+        ? "radio"
+        : this.interactive
+        ? "button"
+        : undefined;
     return (
       <Host>
         <InteractiveContainer disabled={disabled}>

diff --git a/packages/calcite-components/src/components/color-picker/color-picker.tsx b/packages/calcite-components/src/components/color-picker/color-picker.tsx
@@ -110,7 +110,7 @@ export class ColorPicker
 
     if (alphaChannel && format !== "auto" && !alphaCompatible(format)) {
       console.warn(
-        `ignoring alphaChannel as the current format (${format}) does not support alpha`,
+        `ignoring alphaChannel as the current format (${format}) does not support alpha`
       );
       this.alphaChannel = false;
     }
@@ -218,7 +218,7 @@ export class ColorPicker
    * @see [ColorValue](https://github.com/Esri/calcite-design-system/blob/main/src/components/color-picker/interfaces.ts#L10)
    */
   @Prop({ mutable: true }) value: ColorValue | null = normalizeHex(
-    hexify(DEFAULT_COLOR, this.alphaChannel),
+    hexify(DEFAULT_COLOR, this.alphaChannel)
   );
 
   @Watch("value")
@@ -261,15 +261,15 @@ export class ColorPicker
         : Color(
             value != null && typeof value === "object" && alphaCompatible(this.mode)
               ? normalizeColor(value as RGBA | HSVA | HSLA)
-              : value,
+              : value
           );
     const colorChanged = !colorEqual(color, this.color);
 
     if (modeChanged || colorChanged) {
       this.internalColorSet(
         color,
         this.alphaChannel && !(this.mode.endsWith("a") || this.mode.endsWith("a-css")),
-        "internal",
+        "internal"
       );
     }
   }
@@ -368,7 +368,7 @@ export class ColorPicker
 
   private handleTabActivate = (event: Event): void => {
     this.channelMode = (event.currentTarget as HTMLElement).getAttribute(
-      "data-color-mode",
+      "data-color-mode"
     ) as ColorMode;
 
     this.updateChannelsFromColor(this.color);
@@ -389,7 +389,7 @@ export class ColorPicker
       this.captureColorFieldColor(
         this.colorFieldScopeLeft + arrowKeyToXYOffset[key].x || 0,
         this.colorFieldScopeTop + arrowKeyToXYOffset[key].y || 0,
-        false,
+        false
       );
     }
   };
@@ -444,8 +444,8 @@ export class ColorPicker
     const limit = isAlphaChannel
       ? OPACITY_LIMITS.max
       : this.channelMode === "rgb"
-        ? RGB_LIMITS[Object.keys(RGB_LIMITS)[channelIndex]]
-        : HSV_LIMITS[Object.keys(HSV_LIMITS)[channelIndex]];
+      ? RGB_LIMITS[Object.keys(RGB_LIMITS)[channelIndex]]
+      : HSV_LIMITS[Object.keys(HSV_LIMITS)[channelIndex]];
 
     let inputValue: string;
 
@@ -492,8 +492,8 @@ export class ColorPicker
       key === "ArrowUp" && shiftKey
         ? complementaryBump
         : key === "ArrowDown" && shiftKey
-          ? -complementaryBump
-          : 0;
+        ? -complementaryBump
+        : 0;
   }
 
   private handleChannelChange = (event: CustomEvent): void => {
@@ -751,15 +751,15 @@ export class ColorPicker
     const noSaved = savedDisabled || hideSaved;
     const [adjustedColorFieldScopeLeft, adjustedColorFieldScopeTop] = this.getAdjustedScopePosition(
       colorFieldScopeLeft,
-      colorFieldScopeTop,
+      colorFieldScopeTop
     );
     const [adjustedHueScopeLeft, adjustedHueScopeTop] = this.getAdjustedScopePosition(
       hueLeft,
-      hueTop,
+      hueTop
     );
     const [adjustedOpacityScopeLeft, adjustedOpacityScopeTop] = this.getAdjustedScopePosition(
       opacityLeft,
-      opacityTop,
+      opacityTop
     );
 
     return (
@@ -992,7 +992,7 @@ export class ColorPicker
               index,
               channelAriaLabels[index],
               direction,
-              isAlphaChannel ? "%" : "",
+              isAlphaChannel ? "%" : ""
             );
           })}
         </div>
@@ -1005,7 +1005,7 @@ export class ColorPicker
     index: number,
     ariaLabel: string,
     direction: Direction,
-    suffix?: string,
+    suffix?: string
   ): VNode => {
     return (
       <calcite-input-number
@@ -1048,7 +1048,7 @@ export class ColorPicker
 
   private showIncompatibleColorWarning(value: ColorValue, format: Format): void {
     console.warn(
-      `ignoring color value (${value}) as it is not compatible with the current format (${format})`,
+      `ignoring color value (${value}) as it is not compatible with the current format (${format})`
     );
   }
 
@@ -1066,7 +1066,7 @@ export class ColorPicker
 
       if (warn) {
         console.warn(
-          `setting format to (${alphaMode}) as the provided one (${mode}) does not support alpha`,
+          `setting format to (${alphaMode}) as the provided one (${mode}) does not support alpha`
         );
       }
 
@@ -1078,7 +1078,7 @@ export class ColorPicker
 
       if (warn) {
         console.warn(
-          `setting format to (${nonAlphaMode}) as the provided one (${mode}) does not support alpha`,
+          `setting format to (${nonAlphaMode}) as the provided one (${mode}) does not support alpha`
         );
       }
 
@@ -1113,7 +1113,7 @@ export class ColorPicker
   private internalColorSet(
     color: Color | null,
     skipEqual = true,
-    context: ColorPicker["internalColorUpdateContext"] = "user-interaction",
+    context: ColorPicker["internalColorUpdateContext"] = "user-interaction"
   ): void {
     if (skipEqual && colorEqual(color, this.color)) {
       return;
@@ -1234,7 +1234,7 @@ export class ColorPicker
         this.drawOpacitySlider();
       }
     },
-    throttleFor60FpsInMs,
+    throttleFor60FpsInMs
   );
 
   private drawColorField(): void {
@@ -1270,7 +1270,7 @@ export class ColorPicker
 
   private setCanvasContextSize(
     canvas: HTMLCanvasElement,
-    { height, width }: { height: number; width: number },
+    { height, width }: { height: number; width: number }
   ): void {
     if (!canvas) {
       return;
@@ -1298,7 +1298,7 @@ export class ColorPicker
 
     this.internalColorSet(
       this.baseColorFieldColor.hsv().saturationv(saturation).value(value),
-      skipEqual,
+      skipEqual
     );
   };
 
@@ -1325,7 +1325,7 @@ export class ColorPicker
   };
 
   private updateCanvasSize(
-    context: "all" | "color-field" | "hue-slider" | "opacity-slider" = "all",
+    context: "all" | "color-field" | "hue-slider" | "opacity-slider" = "all"
   ): void {
     const { dimensions } = this;
 
@@ -1346,7 +1346,7 @@ export class ColorPicker
     if (context === "all" || context === "opacity-slider") {
       this.setCanvasContextSize(
         this.opacitySliderRenderingContext?.canvas,
-        adjustedSliderDimensions,
+        adjustedSliderDimensions
       );
     }
   }
@@ -1383,7 +1383,7 @@ export class ColorPicker
     radius: number,
     x: number,
     y: number,
-    color: Color,
+    color: Color
   ): void {
     const startAngle = 0;
     const endAngle = 2 * Math.PI;
@@ -1521,7 +1521,7 @@ export class ColorPicker
     height: number,
     width: number,
     x: number,
-    y: number,
+    y: number
   ): void {
     const radius = height / 2 + 1;
     context.beginPath();
@@ -1591,8 +1591,8 @@ export class ColorPicker
     return closeToEdge === 0
       ? x
       : closeToEdge === -1
-        ? remap(x, 0, width, radius, radius * 2)
-        : remap(x, 0, width, width - radius * 2, width - radius);
+      ? remap(x, 0, width, radius, radius * 2)
+      : remap(x, 0, width, width - radius * 2, width - radius);
   }
 
   private storeOpacityScope = (node: HTMLDivElement): void => {

diff --git a/packages/calcite-components/src/components/combobox/combobox.stories.ts b/packages/calcite-components/src/components/combobox/combobox.stories.ts
@@ -333,36 +333,34 @@ export const nestedItems = (): string => html`
   </div>
 `;
 
-export const longItems_TestOnly = (): string =>
-  html`<style>
-      calcite-combobox {
-        width: 260px;
-      }
-      calcite-combobox-item {
-        width: 260px;
-      }
-    </style>
-    <calcite-combobox open>
-      <calcite-combobox-item text-label="Layers">
-        <calcite-combobox-item text-label="Enriched USA Census Tract Areas Aug29"></calcite-combobox-item>
-        <calcite-combobox-item text-label="Viewer_Reservable_Equipments_Capacity_V2_WFL1"></calcite-combobox-item>
-      </calcite-combobox-item>
-    </calcite-combobox>`;
-
-export const disabled_TestOnly = (): string =>
-  html`<calcite-combobox disabled>
-    <calcite-combobox-item value="Trees" text-label="Trees">
-      <calcite-combobox-item value="Pine" text-label="Pine"></calcite-combobox-item>
-      <calcite-combobox-item value="Sequoia" disabled text-label="Sequoia"></calcite-combobox-item>
-      <calcite-combobox-item value="Douglas Fir" text-label="Douglas Fir"></calcite-combobox-item>
-    </calcite-combobox-item>
-    <calcite-combobox-item value="Flowers" text-label="Flowers" disabled>
-      <calcite-combobox-item value="Daffodil" text-label="Daffodil"></calcite-combobox-item>
-      <calcite-combobox-item value="Black Eyed Susan" text-label="Black Eyed Susan"></calcite-combobox-item>
-      <calcite-combobox-item value="Nasturtium" text-label="Nasturtium"></calcite-combobox-item>
+export const longItems_TestOnly = (): string => html`<style>
+    calcite-combobox {
+      width: 260px;
+    }
+    calcite-combobox-item {
+      width: 260px;
+    }
+  </style>
+  <calcite-combobox open>
+    <calcite-combobox-item text-label="Layers">
+      <calcite-combobox-item text-label="Enriched USA Census Tract Areas Aug29"></calcite-combobox-item>
+      <calcite-combobox-item text-label="Viewer_Reservable_Equipments_Capacity_V2_WFL1"></calcite-combobox-item>
     </calcite-combobox-item>
   </calcite-combobox>`;
 
+export const disabled_TestOnly = (): string => html`<calcite-combobox disabled>
+  <calcite-combobox-item value="Trees" text-label="Trees">
+    <calcite-combobox-item value="Pine" text-label="Pine"></calcite-combobox-item>
+    <calcite-combobox-item value="Sequoia" disabled text-label="Sequoia"></calcite-combobox-item>
+    <calcite-combobox-item value="Douglas Fir" text-label="Douglas Fir"></calcite-combobox-item>
+  </calcite-combobox-item>
+  <calcite-combobox-item value="Flowers" text-label="Flowers" disabled>
+    <calcite-combobox-item value="Daffodil" text-label="Daffodil"></calcite-combobox-item>
+    <calcite-combobox-item value="Black Eyed Susan" text-label="Black Eyed Susan"></calcite-combobox-item>
+    <calcite-combobox-item value="Nasturtium" text-label="Nasturtium"></calcite-combobox-item>
+  </calcite-combobox-item>
+</calcite-combobox>`;
+
 export const flipPlacements_TestOnly = (): string => html`
   <style>
     .my-combobox {
@@ -493,29 +491,29 @@ export const singleLongLabel_TestOnly = (): string => html`
   </calcite-combobox>
 `;
 
-export const withPlaceholderIcon_TestOnly = (): string =>
-  html` <calcite-combobox
-    id="labelFour"
-    label="test"
-    placeholder="${text("placeholder", "select folder")}"
-    placeholder-icon="${text("placeholder-icon", "select")}"
-    max-items="6"
-    selection-mode="single"
-    scale="s"
-  >
-    <calcite-combobox-item value="root" text-label="username" icon="home"></calcite-combobox-item>
+export const withPlaceholderIcon_TestOnly = (): string => html` <calcite-combobox
+  id="labelFour"
+  label="test"
+  placeholder="${text("placeholder", "select folder")}"
+  placeholder-icon="${text("placeholder-icon", "select")}"
+  max-items="6"
+  selection-mode="single"
+  scale="s"
+>
+  <calcite-combobox-item value="root" text-label="username" icon="home"></calcite-combobox-item>
+  <calcite-combobox-item value="1" text-label="Folder 1" icon="folder"></calcite-combobox-item>
+  <calcite-combobox-item value="2" text-label="Folder 2" icon="folder"></calcite-combobox-item>
+</calcite-combobox>`;
+
+export const withoutPlaceholderIcon_TestOnly = (): string => html` <div
+  style="width:400px;max-width:100%;background-color:white;padding:100px"
+>
+  <calcite-combobox placeholder="${text("placeholder", "select folder")}" selection-mode="multiple" open>
+    <calcite-combobox-item value="root" text-label="username" icon="home" selected></calcite-combobox-item>
     <calcite-combobox-item value="1" text-label="Folder 1" icon="folder"></calcite-combobox-item>
     <calcite-combobox-item value="2" text-label="Folder 2" icon="folder"></calcite-combobox-item>
-  </calcite-combobox>`;
-
-export const withoutPlaceholderIcon_TestOnly = (): string =>
-  html` <div style="width:400px;max-width:100%;background-color:white;padding:100px">
-    <calcite-combobox placeholder="${text("placeholder", "select folder")}" selection-mode="multiple" open>
-      <calcite-combobox-item value="root" text-label="username" icon="home" selected></calcite-combobox-item>
-      <calcite-combobox-item value="1" text-label="Folder 1" icon="folder"></calcite-combobox-item>
-      <calcite-combobox-item value="2" text-label="Folder 2" icon="folder"></calcite-combobox-item>
-    </calcite-combobox>
-  </div>`;
+  </calcite-combobox>
+</div>`;
 
 export const scrollingWithoutMaxItems_TestOnly = (): string => html`
   <div style="width:400px;max-width:100%;background-color:white;padding:100px">