Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(modal): remove e2e tests that are covered by dedicated openClose commonTests helper #8392

Merged
merged 4 commits into from
Dec 21, 2023
Merged

chore(modal): remove e2e tests that are covered by dedicated openClose commonTests helper #8392

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b95045f
chore(modal): update e2e tests with the dedicated openClose commonTes…
Elijbet Dec 11, 2023
c0e9227
merge main
Elijbet Dec 20, 2023
357d34b
merge main
Elijbet Dec 21, 2023
d4eb6ca
Merge branch 'main' into elijbet/8391-update-e2e-modal-with-openClose…
Elijbet Dec 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions packages/calcite-components/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4659,6 +4659,9 @@ 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.
Expand Down Expand Up @@ -12087,6 +12090,9 @@ 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.
Expand Down
16 changes: 8 additions & 8 deletions packages/calcite-components/src/components/chip/chip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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}>
Expand Down
56 changes: 28 additions & 28 deletions packages/calcite-components/src/components/color-picker/color-picker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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")
Expand Down Expand Up @@ -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",
);
}
}
Expand Down Expand Up @@ -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);
Expand All @@ -389,7 +389,7 @@ export class ColorPicker
this.captureColorFieldColor(
this.colorFieldScopeLeft + arrowKeyToXYOffset[key].x || 0,
this.colorFieldScopeTop + arrowKeyToXYOffset[key].y || 0,
false
false,
);
}
};
Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -492,8 +492,8 @@ export class ColorPicker
key === "ArrowUp" && shiftKey
? complementaryBump
: key === "ArrowDown" && shiftKey
? -complementaryBump
: 0;
? -complementaryBump
: 0;
}

private handleChannelChange = (event: CustomEvent): void => {
Expand Down Expand Up @@ -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 (
Expand Down Expand Up @@ -992,7 +992,7 @@ export class ColorPicker
index,
channelAriaLabels[index],
direction,
isAlphaChannel ? "%" : ""
isAlphaChannel ? "%" : "",
);
})}
</div>
Expand All @@ -1005,7 +1005,7 @@ export class ColorPicker
index: number,
ariaLabel: string,
direction: Direction,
suffix?: string
suffix?: string,
): VNode => {
return (
<calcite-input-number
Expand Down Expand Up @@ -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})`,
);
}

Expand All @@ -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`,
);
}

Expand All @@ -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`,
);
}

Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -1234,7 +1234,7 @@ export class ColorPicker
this.drawOpacitySlider();
}
},
throttleFor60FpsInMs
throttleFor60FpsInMs,
);

private drawColorField(): void {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -1298,7 +1298,7 @@ export class ColorPicker

this.internalColorSet(
this.baseColorFieldColor.hsv().saturationv(saturation).value(value),
skipEqual
skipEqual,
);
};

Expand All @@ -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;

Expand All @@ -1346,7 +1346,7 @@ export class ColorPicker
if (context === "all" || context === "opacity-slider") {
this.setCanvasContextSize(
this.opacitySliderRenderingContext?.canvas,
adjustedSliderDimensions
adjustedSliderDimensions,
);
}
}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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 => {
Expand Down
94 changes: 48 additions & 46 deletions packages/calcite-components/src/components/combobox/combobox.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -333,34 +333,36 @@ 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>
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 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 {
Expand Down Expand Up @@ -491,29 +493,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>
<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>
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>
</div>`;
</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>`;

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