Skip to content

Commit 6e7cff1

Browse files
ElijbetElijbet
authored
chore(modal): remove e2e tests that are covered by dedicated openClose commonTests helper (#8392)
Remove e2e tests that are covered by the dedicated `openClose commonTests` helper. **Related Issue:** #8391, #7379 ## Summary Remove e2e tests that are covered by dedicated `openClose commonTests` helper to simplify test setup, ensure testing consistency across all `openClose` components, and enhance test maintainability.
1 parent ef8d163 commit 6e7cff1

File tree

78 files changed

+2255
-2333
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

78 files changed

+2255
-2333
lines changed

‎packages/calcite-components/src/components.d.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4659,6 +4659,9 @@ export namespace Components {
46594659
* Specifies the number of columns the component should span.
46604660
*/
46614661
"colSpan": number;
4662+
/**
4663+
* When true, prevents user interaction. Notes: This prop should use the
4664+
*/
46624665
"disabled": boolean;
46634666
/**
46644667
* Use this property to override individual strings used by the component.
@@ -12087,6 +12090,9 @@ declare namespace LocalJSX {
1208712090
* Specifies the number of columns the component should span.
1208812091
*/
1208912092
"colSpan"?: number;
12093+
/**
12094+
* When true, prevents user interaction. Notes: This prop should use the
12095+
*/
1209012096
"disabled"?: boolean;
1209112097
/**
1209212098
* Use this property to override individual strings used by the component.

‎packages/calcite-components/src/components/chip/chip.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -328,10 +328,10 @@ export class Chip
328328
this.selectionMode === "multiple" && this.selected
329329
? ICONS.checked
330330
: this.selectionMode === "multiple"
331-
? ICONS.unchecked
332-
: this.selected
333-
? ICONS.checkedSingle
334-
: undefined;
331+
? ICONS.unchecked
332+
: this.selected
333+
? ICONS.checkedSingle
334+
: undefined;
335335

336336
return (
337337
<div
@@ -379,10 +379,10 @@ export class Chip
379379
this.selectionMode === "multiple" && this.interactive
380380
? "checkbox"
381381
: this.selectionMode !== "none" && this.interactive
382-
? "radio"
383-
: this.interactive
384-
? "button"
385-
: undefined;
382+
? "radio"
383+
: this.interactive
384+
? "button"
385+
: undefined;
386386
return (
387387
<Host>
388388
<InteractiveContainer disabled={disabled}>

‎packages/calcite-components/src/components/color-picker/color-picker.tsx

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ export class ColorPicker
110110

111111
if (alphaChannel && format !== "auto" && !alphaCompatible(format)) {
112112
console.warn(
113-
`ignoring alphaChannel as the current format (${format}) does not support alpha`
113+
`ignoring alphaChannel as the current format (${format}) does not support alpha`,
114114
);
115115
this.alphaChannel = false;
116116
}
@@ -218,7 +218,7 @@ export class ColorPicker
218218
* @see [ColorValue](https://github.com/Esri/calcite-design-system/blob/main/src/components/color-picker/interfaces.ts#L10)
219219
*/
220220
@Prop({ mutable: true }) value: ColorValue | null = normalizeHex(
221-
hexify(DEFAULT_COLOR, this.alphaChannel)
221+
hexify(DEFAULT_COLOR, this.alphaChannel),
222222
);
223223

224224
@Watch("value")
@@ -261,15 +261,15 @@ export class ColorPicker
261261
: Color(
262262
value != null && typeof value === "object" && alphaCompatible(this.mode)
263263
? normalizeColor(value as RGBA | HSVA | HSLA)
264-
: value
264+
: value,
265265
);
266266
const colorChanged = !colorEqual(color, this.color);
267267

268268
if (modeChanged || colorChanged) {
269269
this.internalColorSet(
270270
color,
271271
this.alphaChannel && !(this.mode.endsWith("a") || this.mode.endsWith("a-css")),
272-
"internal"
272+
"internal",
273273
);
274274
}
275275
}
@@ -368,7 +368,7 @@ export class ColorPicker
368368

369369
private handleTabActivate = (event: Event): void => {
370370
this.channelMode = (event.currentTarget as HTMLElement).getAttribute(
371-
"data-color-mode"
371+
"data-color-mode",
372372
) as ColorMode;
373373

374374
this.updateChannelsFromColor(this.color);
@@ -389,7 +389,7 @@ export class ColorPicker
389389
this.captureColorFieldColor(
390390
this.colorFieldScopeLeft + arrowKeyToXYOffset[key].x || 0,
391391
this.colorFieldScopeTop + arrowKeyToXYOffset[key].y || 0,
392-
false
392+
false,
393393
);
394394
}
395395
};
@@ -444,8 +444,8 @@ export class ColorPicker
444444
const limit = isAlphaChannel
445445
? OPACITY_LIMITS.max
446446
: this.channelMode === "rgb"
447-
? RGB_LIMITS[Object.keys(RGB_LIMITS)[channelIndex]]
448-
: HSV_LIMITS[Object.keys(HSV_LIMITS)[channelIndex]];
447+
? RGB_LIMITS[Object.keys(RGB_LIMITS)[channelIndex]]
448+
: HSV_LIMITS[Object.keys(HSV_LIMITS)[channelIndex]];
449449

450450
let inputValue: string;
451451

@@ -492,8 +492,8 @@ export class ColorPicker
492492
key === "ArrowUp" && shiftKey
493493
? complementaryBump
494494
: key === "ArrowDown" && shiftKey
495-
? -complementaryBump
496-
: 0;
495+
? -complementaryBump
496+
: 0;
497497
}
498498

499499
private handleChannelChange = (event: CustomEvent): void => {
@@ -751,15 +751,15 @@ export class ColorPicker
751751
const noSaved = savedDisabled || hideSaved;
752752
const [adjustedColorFieldScopeLeft, adjustedColorFieldScopeTop] = this.getAdjustedScopePosition(
753753
colorFieldScopeLeft,
754-
colorFieldScopeTop
754+
colorFieldScopeTop,
755755
);
756756
const [adjustedHueScopeLeft, adjustedHueScopeTop] = this.getAdjustedScopePosition(
757757
hueLeft,
758-
hueTop
758+
hueTop,
759759
);
760760
const [adjustedOpacityScopeLeft, adjustedOpacityScopeTop] = this.getAdjustedScopePosition(
761761
opacityLeft,
762-
opacityTop
762+
opacityTop,
763763
);
764764

765765
return (
@@ -992,7 +992,7 @@ export class ColorPicker
992992
index,
993993
channelAriaLabels[index],
994994
direction,
995-
isAlphaChannel ? "%" : ""
995+
isAlphaChannel ? "%" : "",
996996
);
997997
})}
998998
</div>
@@ -1005,7 +1005,7 @@ export class ColorPicker
10051005
index: number,
10061006
ariaLabel: string,
10071007
direction: Direction,
1008-
suffix?: string
1008+
suffix?: string,
10091009
): VNode => {
10101010
return (
10111011
<calcite-input-number
@@ -1048,7 +1048,7 @@ export class ColorPicker
10481048

10491049
private showIncompatibleColorWarning(value: ColorValue, format: Format): void {
10501050
console.warn(
1051-
`ignoring color value (${value}) as it is not compatible with the current format (${format})`
1051+
`ignoring color value (${value}) as it is not compatible with the current format (${format})`,
10521052
);
10531053
}
10541054

@@ -1066,7 +1066,7 @@ export class ColorPicker
10661066

10671067
if (warn) {
10681068
console.warn(
1069-
`setting format to (${alphaMode}) as the provided one (${mode}) does not support alpha`
1069+
`setting format to (${alphaMode}) as the provided one (${mode}) does not support alpha`,
10701070
);
10711071
}
10721072

@@ -1078,7 +1078,7 @@ export class ColorPicker
10781078

10791079
if (warn) {
10801080
console.warn(
1081-
`setting format to (${nonAlphaMode}) as the provided one (${mode}) does not support alpha`
1081+
`setting format to (${nonAlphaMode}) as the provided one (${mode}) does not support alpha`,
10821082
);
10831083
}
10841084

@@ -1113,7 +1113,7 @@ export class ColorPicker
11131113
private internalColorSet(
11141114
color: Color | null,
11151115
skipEqual = true,
1116-
context: ColorPicker["internalColorUpdateContext"] = "user-interaction"
1116+
context: ColorPicker["internalColorUpdateContext"] = "user-interaction",
11171117
): void {
11181118
if (skipEqual && colorEqual(color, this.color)) {
11191119
return;
@@ -1234,7 +1234,7 @@ export class ColorPicker
12341234
this.drawOpacitySlider();
12351235
}
12361236
},
1237-
throttleFor60FpsInMs
1237+
throttleFor60FpsInMs,
12381238
);
12391239

12401240
private drawColorField(): void {
@@ -1270,7 +1270,7 @@ export class ColorPicker
12701270

12711271
private setCanvasContextSize(
12721272
canvas: HTMLCanvasElement,
1273-
{ height, width }: { height: number; width: number }
1273+
{ height, width }: { height: number; width: number },
12741274
): void {
12751275
if (!canvas) {
12761276
return;
@@ -1298,7 +1298,7 @@ export class ColorPicker
12981298

12991299
this.internalColorSet(
13001300
this.baseColorFieldColor.hsv().saturationv(saturation).value(value),
1301-
skipEqual
1301+
skipEqual,
13021302
);
13031303
};
13041304

@@ -1325,7 +1325,7 @@ export class ColorPicker
13251325
};
13261326

13271327
private updateCanvasSize(
1328-
context: "all" | "color-field" | "hue-slider" | "opacity-slider" = "all"
1328+
context: "all" | "color-field" | "hue-slider" | "opacity-slider" = "all",
13291329
): void {
13301330
const { dimensions } = this;
13311331

@@ -1346,7 +1346,7 @@ export class ColorPicker
13461346
if (context === "all" || context === "opacity-slider") {
13471347
this.setCanvasContextSize(
13481348
this.opacitySliderRenderingContext?.canvas,
1349-
adjustedSliderDimensions
1349+
adjustedSliderDimensions,
13501350
);
13511351
}
13521352
}
@@ -1383,7 +1383,7 @@ export class ColorPicker
13831383
radius: number,
13841384
x: number,
13851385
y: number,
1386-
color: Color
1386+
color: Color,
13871387
): void {
13881388
const startAngle = 0;
13891389
const endAngle = 2 * Math.PI;
@@ -1521,7 +1521,7 @@ export class ColorPicker
15211521
height: number,
15221522
width: number,
15231523
x: number,
1524-
y: number
1524+
y: number,
15251525
): void {
15261526
const radius = height / 2 + 1;
15271527
context.beginPath();
@@ -1591,8 +1591,8 @@ export class ColorPicker
15911591
return closeToEdge === 0
15921592
? x
15931593
: closeToEdge === -1
1594-
? remap(x, 0, width, radius, radius * 2)
1595-
: remap(x, 0, width, width - radius * 2, width - radius);
1594+
? remap(x, 0, width, radius, radius * 2)
1595+
: remap(x, 0, width, width - radius * 2, width - radius);
15961596
}
15971597

15981598
private storeOpacityScope = (node: HTMLDivElement): void => {

‎packages/calcite-components/src/components/combobox/combobox.stories.ts

Lines changed: 48 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -333,34 +333,36 @@ export const nestedItems = (): string => html`
333333
</div>
334334
`;
335335

336-
export const longItems_TestOnly = (): string => html`<style>
337-
calcite-combobox {
338-
width: 260px;
339-
}
340-
calcite-combobox-item {
341-
width: 260px;
342-
}
343-
</style>
344-
<calcite-combobox open>
345-
<calcite-combobox-item text-label="Layers">
346-
<calcite-combobox-item text-label="Enriched USA Census Tract Areas Aug29"></calcite-combobox-item>
347-
<calcite-combobox-item text-label="Viewer_Reservable_Equipments_Capacity_V2_WFL1"></calcite-combobox-item>
336+
export const longItems_TestOnly = (): string =>
337+
html`<style>
338+
calcite-combobox {
339+
width: 260px;
340+
}
341+
calcite-combobox-item {
342+
width: 260px;
343+
}
344+
</style>
345+
<calcite-combobox open>
346+
<calcite-combobox-item text-label="Layers">
347+
<calcite-combobox-item text-label="Enriched USA Census Tract Areas Aug29"></calcite-combobox-item>
348+
<calcite-combobox-item text-label="Viewer_Reservable_Equipments_Capacity_V2_WFL1"></calcite-combobox-item>
349+
</calcite-combobox-item>
350+
</calcite-combobox>`;
351+
352+
export const disabled_TestOnly = (): string =>
353+
html`<calcite-combobox disabled>
354+
<calcite-combobox-item value="Trees" text-label="Trees">
355+
<calcite-combobox-item value="Pine" text-label="Pine"></calcite-combobox-item>
356+
<calcite-combobox-item value="Sequoia" disabled text-label="Sequoia"></calcite-combobox-item>
357+
<calcite-combobox-item value="Douglas Fir" text-label="Douglas Fir"></calcite-combobox-item>
358+
</calcite-combobox-item>
359+
<calcite-combobox-item value="Flowers" text-label="Flowers" disabled>
360+
<calcite-combobox-item value="Daffodil" text-label="Daffodil"></calcite-combobox-item>
361+
<calcite-combobox-item value="Black Eyed Susan" text-label="Black Eyed Susan"></calcite-combobox-item>
362+
<calcite-combobox-item value="Nasturtium" text-label="Nasturtium"></calcite-combobox-item>
348363
</calcite-combobox-item>
349364
</calcite-combobox>`;
350365

351-
export const disabled_TestOnly = (): string => html`<calcite-combobox disabled>
352-
<calcite-combobox-item value="Trees" text-label="Trees">
353-
<calcite-combobox-item value="Pine" text-label="Pine"></calcite-combobox-item>
354-
<calcite-combobox-item value="Sequoia" disabled text-label="Sequoia"></calcite-combobox-item>
355-
<calcite-combobox-item value="Douglas Fir" text-label="Douglas Fir"></calcite-combobox-item>
356-
</calcite-combobox-item>
357-
<calcite-combobox-item value="Flowers" text-label="Flowers" disabled>
358-
<calcite-combobox-item value="Daffodil" text-label="Daffodil"></calcite-combobox-item>
359-
<calcite-combobox-item value="Black Eyed Susan" text-label="Black Eyed Susan"></calcite-combobox-item>
360-
<calcite-combobox-item value="Nasturtium" text-label="Nasturtium"></calcite-combobox-item>
361-
</calcite-combobox-item>
362-
</calcite-combobox>`;
363-
364366
export const flipPlacements_TestOnly = (): string => html`
365367
<style>
366368
.my-combobox {
@@ -491,29 +493,29 @@ export const singleLongLabel_TestOnly = (): string => html`
491493
</calcite-combobox>
492494
`;
493495

494-
export const withPlaceholderIcon_TestOnly = (): string => html` <calcite-combobox
495-
id="labelFour"
496-
label="test"
497-
placeholder="${text("placeholder", "select folder")}"
498-
placeholder-icon="${text("placeholder-icon", "select")}"
499-
max-items="6"
500-
selection-mode="single"
501-
scale="s"
502-
>
503-
<calcite-combobox-item value="root" text-label="username" icon="home"></calcite-combobox-item>
504-
<calcite-combobox-item value="1" text-label="Folder 1" icon="folder"></calcite-combobox-item>
505-
<calcite-combobox-item value="2" text-label="Folder 2" icon="folder"></calcite-combobox-item>
506-
</calcite-combobox>`;
507-
508-
export const withoutPlaceholderIcon_TestOnly = (): string => html` <div
509-
style="width:400px;max-width:100%;background-color:white;padding:100px"
510-
>
511-
<calcite-combobox placeholder="${text("placeholder", "select folder")}" selection-mode="multiple" open>
512-
<calcite-combobox-item value="root" text-label="username" icon="home" selected></calcite-combobox-item>
496+
export const withPlaceholderIcon_TestOnly = (): string =>
497+
html` <calcite-combobox
498+
id="labelFour"
499+
label="test"
500+
placeholder="${text("placeholder", "select folder")}"
501+
placeholder-icon="${text("placeholder-icon", "select")}"
502+
max-items="6"
503+
selection-mode="single"
504+
scale="s"
505+
>
506+
<calcite-combobox-item value="root" text-label="username" icon="home"></calcite-combobox-item>
513507
<calcite-combobox-item value="1" text-label="Folder 1" icon="folder"></calcite-combobox-item>
514508
<calcite-combobox-item value="2" text-label="Folder 2" icon="folder"></calcite-combobox-item>
515-
</calcite-combobox>
516-
</div>`;
509+
</calcite-combobox>`;
510+
511+
export const withoutPlaceholderIcon_TestOnly = (): string =>
512+
html` <div style="width:400px;max-width:100%;background-color:white;padding:100px">
513+
<calcite-combobox placeholder="${text("placeholder", "select folder")}" selection-mode="multiple" open>
514+
<calcite-combobox-item value="root" text-label="username" icon="home" selected></calcite-combobox-item>
515+
<calcite-combobox-item value="1" text-label="Folder 1" icon="folder"></calcite-combobox-item>
516+
<calcite-combobox-item value="2" text-label="Folder 2" icon="folder"></calcite-combobox-item>
517+
</calcite-combobox>
518+
</div>`;
517519

518520
export const scrollingWithoutMaxItems_TestOnly = (): string => html`
519521
<div style="width:400px;max-width:100%;background-color:white;padding:100px">

0 commit comments

Comments
 (0)