+
@@ -532,15 +536,15 @@ export class InputDatePicker
aria-describedby={this.placeholderTextId}
aria-expanded={toAriaBoolean(this.open)}
aria-haspopup="dialog"
- class={`input ${
- this.layout === "vertical" && this.range ? `no-bottom-border` : ``
- }`}
+ class={{
+ [CSS.input]: true,
+ [CSS.inputNoBottomBorder]: this.layout === "vertical" && this.range,
+ }}
disabled={disabled}
icon="calendar"
onCalciteInputTextInput={this.calciteInternalInputInputHandler}
onCalciteInternalInputTextBlur={this.calciteInternalInputBlurHandler}
onCalciteInternalInputTextFocus={this.startInputFocus}
- onFocus={this.startEndInputFocus}
placeholder={this.localeData?.placeholder}
readOnly={readOnly}
role="combobox"
@@ -570,8 +574,8 @@ export class InputDatePicker
>
{this.range && this.layout === "horizontal" && (
-
+
+
@@ -624,15 +630,14 @@ export class InputDatePicker
aria-expanded={toAriaBoolean(this.open)}
aria-haspopup="dialog"
class={{
- input: true,
- "border-top-color-one": this.layout === "vertical" && this.range,
+ [CSS.input]: true,
+ [CSS.inputBorderTopColorOne]: this.layout === "vertical" && this.range,
}}
disabled={disabled}
icon="calendar"
onCalciteInputTextInput={this.calciteInternalInputInputHandler}
onCalciteInternalInputTextBlur={this.calciteInternalInputBlurHandler}
onCalciteInternalInputTextFocus={this.endInputFocus}
- onFocus={this.startEndInputFocus}
placeholder={this.localeData?.placeholder}
readOnly={readOnly}
role="combobox"
@@ -670,6 +675,8 @@ export class InputDatePicker
@Element() el: HTMLCalciteInputDatePickerElement;
+ private currentOpenInput: "start" | "end";
+
private datePickerEl: HTMLCalciteDatePickerElement;
private dialogId = `date-picker-dialog--${guid()}`;
@@ -694,8 +701,6 @@ export class InputDatePicker
@State() focusedInput: "start" | "end" = "start";
- private lastBlurredInput: "start" | "end" | "none" = "none";
-
@State() private localeData: DateLocaleData;
private startInput: HTMLCalciteInputElement;
@@ -739,14 +744,32 @@ export class InputDatePicker
//
//--------------------------------------------------------------------------
- private onInputWrapperClick = () => {
- if (this.range && this.lastBlurredInput !== "none" && this.open) {
- // we keep the date-picker open when moving between inputs
- } else {
+ private onInputWrapperPointerDown = (): void => {
+ this.currentOpenInput = this.focusedInput;
+ };
+
+ private onInputWrapperClick = (event: MouseEvent) => {
+ const { range, endInput, startInput, currentOpenInput } = this;
+ if (!range || !this.open) {
this.open = !this.open;
+ return;
}
- this.lastBlurredInput = "none";
+ const currentTarget = event.currentTarget as HTMLDivElement;
+ const position = currentTarget.getAttribute("data-position") as "start" | "end";
+ const path = event.composedPath();
+ const wasToggleClicked = path.find((el: HTMLElement) => {
+ return el.classList?.contains(CSS.toggleIcon);
+ });
+
+ if (wasToggleClicked) {
+ const targetInput = position === "start" ? startInput : endInput;
+ targetInput.setFocus();
+ }
+
+ if (currentOpenInput === position) {
+ this.open = !this.open;
+ }
};
setFilteredPlacements = (): void => {
@@ -766,7 +789,6 @@ export class InputDatePicker
}
onBeforeOpen(): void {
- this.reposition(true);
this.calciteInputDatePickerBeforeOpen.emit();
}
@@ -792,7 +814,6 @@ export class InputDatePicker
this.restoreInputFocus();
this.focusOnOpen = false;
this.datePickerEl.reset();
- this.reposition(true);
}
setStartInput = (el: HTMLCalciteInputElement): void => {
@@ -803,9 +824,8 @@ export class InputDatePicker
this.endInput = el;
};
- deactivate = (): void => {
+ private blurHandler = (): void => {
this.open = false;
- this.lastBlurredInput = "none";
};
private commitValue(): void {
@@ -886,12 +906,6 @@ export class InputDatePicker
this.focusedInput = "start";
};
- startEndInputFocus = (event: FocusEvent): void => {
- const blurredEl = event.relatedTarget as HTMLElement;
- this.lastBlurredInput =
- blurredEl === this.startInput ? "start" : blurredEl === this.endInput ? "end" : "none";
- };
-
endInputFocus = (): void => {
this.focusedInput = "end";
};
diff --git a/packages/calcite-components/src/components/input-date-picker/resources.ts b/packages/calcite-components/src/components/input-date-picker/resources.ts
index e79b51c7e74..5c3a881fab2 100644
--- a/packages/calcite-components/src/components/input-date-picker/resources.ts
+++ b/packages/calcite-components/src/components/input-date-picker/resources.ts
@@ -1,6 +1,15 @@
export const CSS = {
assistiveText: "assistive-text",
+ calendarWrapper: "calendar-wrapper",
+ calendarWrapperEnd: "calendar-wrapper--end",
+ horizontalArrowContainer: "horizontal-arrow-container",
+ inputBorderTopColorOne: "border-top-color-one",
+ inputContainer: "input-container",
+ inputNoBottomBorder: "no-bottom-border",
+ inputWrapper: "input-wrapper",
+ input: "input",
menu: "menu-container",
menuActive: "menu-container--active",
toggleIcon: "toggle-icon",
+ verticalArrowContainer: "vertical-arrow-container",
};
diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx
index 0e26fa6cd5d..36cfbbf7f68 100644
--- a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx
+++ b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx
@@ -172,16 +172,15 @@ export class InputTimePicker
@Prop({ reflect: true, mutable: true }) open = false;
@Watch("open")
- openHandler(open: boolean): void {
+ openHandler(): void {
onToggleOpenCloseComponent(this);
+
if (this.disabled || this.readOnly) {
this.open = false;
return;
}
- if (open) {
- this.reposition(true);
- }
+ this.reposition(true);
}
/** When `true`, interaction is prevented and the component is displayed with lower opacity. */
diff --git a/packages/calcite-components/src/components/input/input.e2e.ts b/packages/calcite-components/src/components/input/input.e2e.ts
index e54a6f85a2b..080db981a62 100644
--- a/packages/calcite-components/src/components/input/input.e2e.ts
+++ b/packages/calcite-components/src/components/input/input.e2e.ts
@@ -2006,7 +2006,7 @@ describe("calcite-input", () => {
},
{
type: "url",
- value: "http://www.example.com",
+ value: "http://www.esri.com",
},
{
type: "week",
diff --git a/packages/calcite-components/src/components/list-item/list-item.e2e.ts b/packages/calcite-components/src/components/list-item/list-item.e2e.ts
index 6ffe4f73cd8..ae6705b3fb7 100755
--- a/packages/calcite-components/src/components/list-item/list-item.e2e.ts
+++ b/packages/calcite-components/src/components/list-item/list-item.e2e.ts
@@ -275,4 +275,27 @@ describe("calcite-list-item", () => {
expect(calciteListItemClose).toHaveReceivedEventTimes(1);
});
+
+ it("should fire calciteListItemToggle event when opened and closed", async () => {
+ const page = await newE2EPage({
+ html: html`;
+ /**
+ * Fires when the open button is clicked.
+ */
+ @Event({ cancelable: false }) calciteListItemToggle: EventEmitter;
+
/**
*
* @internal
@@ -397,7 +402,7 @@ export class ListItem
}
return (
-
+
@@ -491,7 +496,7 @@ export class ListItem
icon={ICONS.close}
key="close-action"
label={messages.close}
- onClick={this.closeClickHandler}
+ onClick={this.handleCloseClick}
text={messages.close}
/>
) : null}
@@ -593,7 +598,7 @@ export class ListItem
[CSS.contentContainerHasCenterContent]: hasCenterContent,
}}
key="content-container"
- onClick={this.itemClicked}
+ onClick={this.handleItemClick}
role="gridcell"
// eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
ref={(el) => (this.contentEl = el)}
@@ -669,36 +674,36 @@ export class ListItem
this.calciteInternalListItemChange.emit();
}
- closeClickHandler = (): void => {
+ private handleCloseClick = (): void => {
this.closed = true;
this.calciteListItemClose.emit();
};
- handleContentSlotChange = (event: Event): void => {
+ private handleContentSlotChange = (event: Event): void => {
this.hasCustomContent = slotChangeHasAssignedElement(event);
};
- handleActionsStartSlotChange = (event: Event): void => {
+ private handleActionsStartSlotChange = (event: Event): void => {
this.hasActionsStart = slotChangeHasAssignedElement(event);
};
- handleActionsEndSlotChange = (event: Event): void => {
+ private handleActionsEndSlotChange = (event: Event): void => {
this.hasActionsEnd = slotChangeHasAssignedElement(event);
};
- handleContentStartSlotChange = (event: Event): void => {
+ private handleContentStartSlotChange = (event: Event): void => {
this.hasContentStart = slotChangeHasAssignedElement(event);
};
- handleContentEndSlotChange = (event: Event): void => {
+ private handleContentEndSlotChange = (event: Event): void => {
this.hasContentEnd = slotChangeHasAssignedElement(event);
};
- handleContentBottomSlotChange = (event: Event): void => {
+ private handleContentBottomSlotChange = (event: Event): void => {
this.hasContentBottom = slotChangeHasAssignedElement(event);
};
- setSelectionDefaults(): void {
+ private setSelectionDefaults(): void {
const { parentListEl, selectionMode, selectionAppearance } = this;
if (!parentListEl) {
@@ -714,7 +719,7 @@ export class ListItem
}
}
- handleOpenableChange(slotEl: HTMLSlotElement): void {
+ private handleOpenableChange(slotEl: HTMLSlotElement): void {
if (!slotEl) {
return;
}
@@ -736,15 +741,20 @@ export class ListItem
}
}
- handleDefaultSlotChange = (event: Event): void => {
+ private handleDefaultSlotChange = (event: Event): void => {
this.handleOpenableChange(event.target as HTMLSlotElement);
};
- toggleOpen = (): void => {
- this.open = !this.open;
+ private handleToggleClick = (): void => {
+ this.toggle();
+ };
+
+ private toggle = (value = !this.open): void => {
+ this.open = value;
+ this.calciteListItemToggle.emit();
};
- itemClicked = (event: PointerEvent): void => {
+ private handleItemClick = (event: PointerEvent): void => {
if (event.defaultPrevented) {
return;
}
@@ -753,7 +763,7 @@ export class ListItem
this.calciteInternalListItemActive.emit();
};
- toggleSelected = (shiftKey: boolean): void => {
+ private toggleSelected = (shiftKey: boolean): void => {
const { selectionMode, selected } = this;
if (this.disabled) {
@@ -772,13 +782,13 @@ export class ListItem
this.calciteListItemSelect.emit();
};
- getGridCells(): HTMLTableCellElement[] {
+ private getGridCells(): HTMLTableCellElement[] {
return [this.handleGridEl, this.actionsStartEl, this.contentEl, this.actionsEndEl].filter(
(el) => el && !el.hidden
);
}
- handleItemKeyDown = (event: KeyboardEvent): void => {
+ private handleItemKeyDown = (event: KeyboardEvent): void => {
if (event.defaultPrevented) {
return;
}
@@ -802,7 +812,7 @@ export class ListItem
const nextIndex = currentIndex + 1;
if (currentIndex === -1) {
if (!open && openable) {
- this.open = true;
+ this.toggle(true);
this.focusCell(null);
} else if (cells[0]) {
this.focusCell(cells[0]);
@@ -816,7 +826,7 @@ export class ListItem
if (currentIndex === -1) {
this.focusCell(null);
if (open && openable) {
- this.open = false;
+ this.toggle(false);
} else {
this.calciteInternalFocusPreviousItem.emit();
}
@@ -829,11 +839,11 @@ export class ListItem
}
};
- focusCellNull = (): void => {
+ private focusCellNull = (): void => {
this.focusCell(null);
};
- focusCell = (focusEl: HTMLTableCellElement, saveFocusIndex = true): void => {
+ private focusCell = (focusEl: HTMLTableCellElement, saveFocusIndex = true): void => {
const { parentListEl } = this;
if (saveFocusIndex) {
diff --git a/packages/calcite-components/src/components/list/list.e2e.ts b/packages/calcite-components/src/components/list/list.e2e.ts
index 451634335b1..9ad63ed58fd 100755
--- a/packages/calcite-components/src/components/list/list.e2e.ts
+++ b/packages/calcite-components/src/components/list/list.e2e.ts
@@ -6,7 +6,7 @@ import { debounceTimeout } from "./resources";
import { CSS } from "../list-item/resources";
import { DEBOUNCE_TIMEOUT as FILTER_DEBOUNCE_TIMEOUT } from "../filter/resources";
import { GlobalTestProps, dragAndDrop, isElementFocused, getFocusedElementProp } from "../../tests/utils";
-import { DragDetail } from "../../utils/sortableComponent";
+import { ListDragDetail } from "./interfaces";
const placeholder = placeholderImage({
width: 140,
@@ -733,6 +733,10 @@ describe("calcite-list", () => {
oldIndex: number;
startCalledTimes: number;
endCalledTimes: number;
+ endNewIndex: number;
+ endOldIndex: number;
+ startNewIndex: number;
+ startOldIndex: number;
}>;
it("works using a mouse", async () => {
@@ -746,16 +750,20 @@ describe("calcite-list", () => {
testWindow.oldIndex = -1;
testWindow.startCalledTimes = 0;
testWindow.endCalledTimes = 0;
- list.addEventListener("calciteListOrderChange", (event: CustomEvent) => {
+ list.addEventListener("calciteListOrderChange", (event: CustomEvent) => {
testWindow.calledTimes++;
testWindow.newIndex = event?.detail?.newIndex;
testWindow.oldIndex = event?.detail?.oldIndex;
});
- list.addEventListener("calciteListDragEnd", () => {
+ list.addEventListener("calciteListDragEnd", (event: CustomEvent) => {
testWindow.endCalledTimes++;
+ testWindow.endNewIndex = event.detail.newIndex;
+ testWindow.endOldIndex = event.detail.oldIndex;
});
- list.addEventListener("calciteListDragStart", () => {
+ list.addEventListener("calciteListDragStart", (event: CustomEvent) => {
testWindow.startCalledTimes++;
+ testWindow.startNewIndex = event.detail.newIndex;
+ testWindow.startOldIndex = event.detail.oldIndex;
});
});
@@ -785,6 +793,10 @@ describe("calcite-list", () => {
newIndex: testWindow.newIndex,
endCalledTimes: testWindow.endCalledTimes,
startCalledTimes: testWindow.startCalledTimes,
+ endNewIndex: testWindow.endNewIndex,
+ endOldIndex: testWindow.endOldIndex,
+ startNewIndex: testWindow.startNewIndex,
+ startOldIndex: testWindow.startOldIndex,
};
});
@@ -793,6 +805,10 @@ describe("calcite-list", () => {
expect(results.endCalledTimes).toBe(1);
expect(results.oldIndex).toBe(0);
expect(results.newIndex).toBe(1);
+ expect(results.startNewIndex).toBe(null);
+ expect(results.startOldIndex).toBe(0);
+ expect(results.endNewIndex).toBe(1);
+ expect(results.endOldIndex).toBe(0);
});
it("supports dragging items between lists", async () => {
diff --git a/packages/calcite-components/src/components/list/list.tsx b/packages/calcite-components/src/components/list/list.tsx
index b10cd486b6f..44331d6c61f 100755
--- a/packages/calcite-components/src/components/list/list.tsx
+++ b/packages/calcite-components/src/components/list/list.tsx
@@ -616,12 +616,12 @@ export class List
this.connectObserver();
}
- onDragEnd(): void {
- this.calciteListDragEnd.emit();
+ onDragEnd(detail: ListDragDetail): void {
+ this.calciteListDragEnd.emit(detail);
}
- onDragStart(): void {
- this.calciteListDragStart.emit();
+ onDragStart(detail: ListDragDetail): void {
+ this.calciteListDragStart.emit(detail);
}
onDragSort(detail: ListDragDetail): void {
diff --git a/packages/calcite-components/src/components/list/usage/Advanced.md b/packages/calcite-components/src/components/list/usage/Advanced.md
index 8a9365ad85e..2776d15f963 100644
--- a/packages/calcite-components/src/components/list/usage/Advanced.md
+++ b/packages/calcite-components/src/components/list/usage/Advanced.md
@@ -4,7 +4,7 @@
label="Dog"
description="Also known as Canis familiaris, a carnivorous mammal closely related to the gray wolf that has been domesticated as a pet."
>
-
-
-
-
+
-
+
```
diff --git a/packages/calcite-components/src/components/list/usage/Nested.md b/packages/calcite-components/src/components/list/usage/Nested.md
index df2dcbf6640..1f1f2f0b1a1 100644
--- a/packages/calcite-components/src/components/list/usage/Nested.md
+++ b/packages/calcite-components/src/components/list/usage/Nested.md
@@ -4,11 +4,16 @@
label="United States of America"
description="A country located in North America consisting of 50 states."
>
-
-
+
+
+
+
+
+
+
```
diff --git a/packages/calcite-components/src/components/menu-item/menu-item.e2e.ts b/packages/calcite-components/src/components/menu-item/menu-item.e2e.ts
index f8beb28371b..057d12bf700 100644
--- a/packages/calcite-components/src/components/menu-item/menu-item.e2e.ts
+++ b/packages/calcite-components/src/components/menu-item/menu-item.e2e.ts
@@ -50,6 +50,39 @@ describe("calcite-menu-item", () => {
expect(eventSpy).toHaveReceivedEventTimes(1);
});
+ describe("href support", () => {
+ const testHref = "#nature";
+ const testEl = ` => {
- // opening and closing of submenu is handled here. Any other functionality is bubbled to parent menu.
- if (event.key === " " || event.key === "Enter") {
- this.selectMenuItem(event);
- if (
- this.hasSubmenu &&
- (!this.href || (this.href && event.target === this.dropdownActionEl))
- ) {
- this.open = !this.open;
+ const { hasSubmenu, href, layout, open, submenuItems } = this;
+ const key = event.key;
+ const targetIsDropdown = event.target === this.dropdownActionEl;
+ if (key === " " || key === "Enter") {
+ if (hasSubmenu && (!href || (href && targetIsDropdown))) {
+ this.open = !open;
}
- event.preventDefault();
- } else if (event.key === "Escape") {
- if (this.open) {
+ if (!(href && targetIsDropdown) && key !== "Enter") {
+ this.selectMenuItem(event);
+ }
+ if (key === " " || (href && targetIsDropdown)) {
+ event.preventDefault();
+ }
+ } else if (key === "Escape") {
+ if (open) {
this.open = false;
return;
}
this.calciteInternalMenuItemKeyEvent.emit({ event });
event.preventDefault();
- } else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+ } else if (key === "ArrowDown" || key === "ArrowUp") {
event.preventDefault();
- if (
- (event.target === this.dropdownActionEl || !this.href) &&
- this.hasSubmenu &&
- !this.open &&
- this.layout === "horizontal"
- ) {
+ if ((targetIsDropdown || !href) && hasSubmenu && !open && layout === "horizontal") {
this.open = true;
return;
}
this.calciteInternalMenuItemKeyEvent.emit({
event,
- children: this.submenuItems,
- isSubmenuOpen: this.open && this.hasSubmenu,
+ children: submenuItems,
+ isSubmenuOpen: open && hasSubmenu,
});
- } else if (event.key === "ArrowLeft") {
+ } else if (key === "ArrowLeft") {
event.preventDefault();
this.calciteInternalMenuItemKeyEvent.emit({
event,
- children: this.submenuItems,
+ children: submenuItems,
isSubmenuOpen: true,
});
- } else if (event.key === "ArrowRight") {
+ } else if (key === "ArrowRight") {
event.preventDefault();
- if (
- (event.target === this.dropdownActionEl || !this.href) &&
- this.hasSubmenu &&
- !this.open &&
- this.layout === "vertical"
- ) {
+ if ((targetIsDropdown || !href) && hasSubmenu && !open && layout === "vertical") {
this.open = true;
return;
}
this.calciteInternalMenuItemKeyEvent.emit({
event,
- children: this.submenuItems,
- isSubmenuOpen: this.open && this.hasSubmenu,
+ children: submenuItems,
+ isSubmenuOpen: open && hasSubmenu,
});
}
};
diff --git a/packages/calcite-components/src/components/menu/menu.tsx b/packages/calcite-components/src/components/menu/menu.tsx
index 42d212c7440..9136fc47e7c 100644
--- a/packages/calcite-components/src/components/menu/menu.tsx
+++ b/packages/calcite-components/src/components/menu/menu.tsx
@@ -9,6 +9,7 @@ import {
Watch,
Method,
VNode,
+ forceUpdate,
} from "@stencil/core";
import { focusElement, focusElementInGroup, slotChangeGetAssignedElements } from "../../utils/dom";
import {
@@ -26,11 +27,6 @@ import {
updateMessages,
} from "../../utils/t9n";
import { MenuMessages } from "./assets/menu/t9n";
-import {
- GlobalAttrComponent,
- unwatchGlobalAttributes,
- watchGlobalAttributes,
-} from "../../utils/globalAttributes";
type Layout = "horizontal" | "vertical";
@@ -42,12 +38,22 @@ type Layout = "horizontal" | "vertical";
},
assetsDirs: ["assets"],
})
-export class CalciteMenu
- implements GlobalAttrComponent, LocalizedComponent, T9nComponent, LoadableComponent
-{
+export class CalciteMenu implements LocalizedComponent, T9nComponent, LoadableComponent {
//--------------------------------------------------------------------------
//
- // Public Properties
+ // Global attributes
+ //
+ //--------------------------------------------------------------------------
+
+ @Watch("role")
+ handleGlobalAttributesChanged(): void {
+ forceUpdate(this);
+ this.setMenuItemLayout(this.menuItems, this.layout);
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Properties
//
//--------------------------------------------------------------------------
@@ -102,10 +108,6 @@ export class CalciteMenu
updateMessages(this, this.effectiveLocale);
}
- @State() globalAttributes = {
- role: "menubar",
- };
-
menuItems: HTMLCalciteMenuItemElement[] = [];
//--------------------------------------------------------------------------
@@ -117,7 +119,6 @@ export class CalciteMenu
connectedCallback(): void {
connectLocalized(this);
connectMessages(this);
- watchGlobalAttributes(this, ["role"]);
}
async componentWillLoad(): Promise {
@@ -132,7 +133,6 @@ export class CalciteMenu
disconnectedCallback(): void {
disconnectLocalized(this);
disconnectMessages(this);
- unwatchGlobalAttributes(this);
}
//--------------------------------------------------------------------------
@@ -220,13 +220,17 @@ export class CalciteMenu
setMenuItemLayout(items: HTMLCalciteMenuItemElement[], layout: Layout): void {
items.forEach((item) => {
item.layout = layout;
- if (this.globalAttributes.role === "menubar") {
+ if (this.getEffectiveRole() === "menubar") {
item.isTopLevelItem = true;
item.topLevelMenuLayout = this.layout;
}
});
}
+ private getEffectiveRole(): string {
+ return this.el.getAttribute("role") || "menubar";
+ }
+
// --------------------------------------------------------------------------
//
// Render Methods
@@ -236,7 +240,7 @@ export class CalciteMenu
render(): VNode {
return (
-
diff --git a/packages/calcite-components/src/components/modal/modal.e2e.ts b/packages/calcite-components/src/components/modal/modal.e2e.ts
index eea592cbe82..6f97b2481e4 100644
--- a/packages/calcite-components/src/components/modal/modal.e2e.ts
+++ b/packages/calcite-components/src/components/modal/modal.e2e.ts
@@ -1,10 +1,10 @@
-import { newE2EPage } from "@stencil/core/testing";
+import { E2EPage, newE2EPage } from "@stencil/core/testing";
import { focusable, hidden, openClose, renders, slots, t9n } from "../../tests/commonTests";
import { html } from "../../../support/formatting";
import { CSS, SLOTS } from "./resources";
import { GlobalTestProps, isElementFocused, newProgrammaticE2EPage, skipAnimations } from "../../tests/utils";
-describe("calcite-modal properties", () => {
+describe("calcite-modal", () => {
describe("renders", () => {
renders("calcite-modal", { display: "flex", visible: false });
});
@@ -26,6 +26,10 @@ describe("calcite-modal properties", () => {
slots("calcite-modal", SLOTS);
});
+ describe("translation support", () => {
+ t9n("calcite-modal");
+ });
+
it("should hide closeButton when disabled", async () => {
const page = await newE2EPage();
await page.setContent(").beforeClose)
- );
+ const mockCallBack = jest.fn().mockReturnValue(() => Promise.reject());
+ await page.exposeFunction("beforeClose", mockCallBack);
- const modal = await page.find("calcite-modal");
- modal.setProperty("open", false);
- await page.waitForChanges();
+ await page.setContent(`).beforeClose)
+ );
-it("should remain open with rejected 'beforeClose' promise'", async () => {
- const page = await newE2EPage();
+ const modal = await page.find("calcite-modal");
+ modal.setProperty("open", false);
+ await page.waitForChanges();
- await page.exposeFunction("beforeClose", () => Promise.reject());
- await page.setContent(`).beforeClose)
- );
+ it("should remain open with rejected 'beforeClose' promise'", async () => {
+ const page = await newE2EPage();
- const modal = await page.find("calcite-modal");
- modal.setProperty("open", false);
- await page.waitForChanges();
+ await page.exposeFunction("beforeClose", () => Promise.reject());
+ await page.setContent(`).beforeClose)
+ );
-describe("opening and closing behavior", () => {
- it("opens and closes", async () => {
- const page = await newE2EPage();
- await page.setContent(html`
- `
- );
- const modal = await page.find("calcite-modal");
- const opened = page.waitForEvent("calciteModalOpen");
- modal.setProperty("open", true);
- await page.waitForChanges();
- await opened;
+ await page.waitForChanges();
+ await beforeOpenSpy;
+ await openSpy;
- expect(await isElementFocused(page, `.${CSS.close}`, { shadowed: true })).toBe(true);
- await page.keyboard.press("Tab");
- expect(await isElementFocused(page, `#${button1Id}`)).toBe(true);
- await page.keyboard.press("Tab");
- expect(await isElementFocused(page, `#${button2Id}`)).toBe(true);
+ expect(beforeOpenSpy).toHaveReceivedEventTimes(1);
+ expect(openSpy).toHaveReceivedEventTimes(1);
- await page.keyboard.press("Tab");
- expect(await isElementFocused(page, `.${CSS.close}`, { shadowed: true })).toBe(true);
- await page.keyboard.down("Shift");
- await page.keyboard.press("Tab");
- expect(await isElementFocused(page, `#${button2Id}`)).toBe(true);
+ await page.evaluate(() => {
+ const modal = document.querySelector("calcite-modal");
+ modal.open = false;
+ });
- await page.keyboard.press("Tab");
- expect(await isElementFocused(page, `#${button1Id}`)).toBe(true);
- });
+ await page.waitForChanges();
+ await beforeCloseSpy;
+ await closeSpy;
- it("restores focus to previously focused element when closed", async () => {
- const initiallyFocusedId = "initially-focused";
- const initiallyFocusedIdSelector = `#${initiallyFocusedId}`;
- const page = await newE2EPage();
- await page.setContent(
- html`
-
-
- `
- );
- await skipAnimations(page);
- const modal = await page.find("calcite-modal");
-
- await modal.setProperty("open", true);
- await page.waitForChanges();
- expect(await isElementFocused(page, `#${button1Id}`)).toBe(true);
+ describe("calcite-modal accessibility checks", () => {
+ it("traps focus within the modal when open", async () => {
+ const button1Id = "button1";
+ const button2Id = "button2";
+ const page = await newE2EPage();
+ await page.setContent(
+ html`
+ `
+ );
+ const modal = await page.find("calcite-modal");
+ const opened = page.waitForEvent("calciteModalOpen");
+ modal.setProperty("open", true);
+ await page.waitForChanges();
+ await opened;
+
+ expect(await isElementFocused(page, `.${CSS.close}`, { shadowed: true })).toBe(true);
+ await page.keyboard.press("Tab");
+ expect(await isElementFocused(page, `#${button1Id}`)).toBe(true);
+ await page.keyboard.press("Tab");
+ expect(await isElementFocused(page, `#${button2Id}`)).toBe(true);
+
+ await page.keyboard.press("Tab");
+ expect(await isElementFocused(page, `.${CSS.close}`, { shadowed: true })).toBe(true);
+ await page.keyboard.down("Shift");
+ await page.keyboard.press("Tab");
+ expect(await isElementFocused(page, `#${button2Id}`)).toBe(true);
+
+ await page.keyboard.press("Tab");
+ expect(await isElementFocused(page, `#${button1Id}`)).toBe(true);
+ });
- await page.keyboard.press("Tab");
- expect(await isElementFocused(page, `#${button2Id}`)).toBe(true);
+ it("restores focus to previously focused element when closed", async () => {
+ const initiallyFocusedId = "initially-focused";
+ const initiallyFocusedIdSelector = `#${initiallyFocusedId}`;
+ const page = await newE2EPage();
+ await page.setContent(
+ html`
+
+
+ `
+ );
+ await skipAnimations(page);
+ const modal = await page.find("calcite-modal");
+
+ await modal.setProperty("open", true);
+ await page.waitForChanges();
+ expect(await isElementFocused(page, `#${button1Id}`)).toBe(true);
+
+ await page.keyboard.press("Tab");
+ expect(await isElementFocused(page, `#${button2Id}`)).toBe(true);
+
+ await page.keyboard.press("Tab");
+ expect(await isElementFocused(page, `#${button1Id}`)).toBe(true);
+ await page.keyboard.down("Shift");
+ await page.keyboard.press("Tab");
+ expect(await isElementFocused(page, `#${button2Id}`)).toBe(true);
+ await page.keyboard.press("Tab");
+ expect(await isElementFocused(page, `#${button1Id}`)).toBe(true);
+ });
});
describe("setFocus", () => {
@@ -595,7 +599,7 @@ describe("calcite-modal accessibility checks", () => {
it("closes and allows re-opening when Close button is clicked", async () => {
const page = await newE2EPage();
- await page.setContent(` {
+ return page.evaluate(() => document.documentElement.style.overflow === "hidden");
+ }
+
+ it("correctly sets overflow style on document when opened/closed", async () => {
+ const page = await newE2EPage();
+ await page.setContent(`
-
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
```
diff --git a/packages/calcite-components/src/components/scrim/usage/Loading-scrim-panel.md b/packages/calcite-components/src/components/scrim/usage/Loading-scrim-panel.md
index bbb0f5095f3..8adce8b3548 100644
--- a/packages/calcite-components/src/components/scrim/usage/Loading-scrim-panel.md
+++ b/packages/calcite-components/src/components/scrim/usage/Loading-scrim-panel.md
@@ -1,12 +1,30 @@
```html
-
I'm a panel that is not loading.
-This content can have any zIndex and it will not be placed above
-.
-.
-.
-.
+The content below can have any zIndex and it will not be placed above.
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit libero sint eveniet suscipit voluptatibus esse + neque ipsa cum placeat sequi deserunt hic facere sunt quisquam nostrum itaque officia, labore maiores obcaecati + repudiandae rerum! Debitis, delectus enim, dignissimos excepturi, accusantium ullam aspernatur quae numquam optio + porro laudantium. A eaque accusantium quo? +
+-
+
- + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit ipsum vitae doloribus praesentium numquam iure + harum, sequi quibusdam at odio. + +
- + Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt at aliquam suscipit nostrum, nulla dolor sunt + eum, quasi tenetur similique voluptatem corrupti neque voluptatum sint! + +
- + Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam corporis quos, dolorem veritatis aliquid aut nihil + sint velit obcaecati praesentium? + +
-
-
+
- ...
+ 
```
diff --git a/packages/calcite-components/src/components/shell-panel/usage/With-flow.md b/packages/calcite-components/src/components/shell-panel/usage/With-flow.md
index 156b4fcb2c9..89eceb22efb 100644
--- a/packages/calcite-components/src/components/shell-panel/usage/With-flow.md
+++ b/packages/calcite-components/src/components/shell-panel/usage/With-flow.md
@@ -6,8 +6,8 @@
- ...
- ...
+
+ 
```
diff --git a/packages/calcite-components/src/components/shell-panel/usage/With-panel.md b/packages/calcite-components/src/components/shell-panel/usage/With-panel.md
index 385bfcb3177..819170a6081 100644
--- a/packages/calcite-components/src/components/shell-panel/usage/With-panel.md
+++ b/packages/calcite-components/src/components/shell-panel/usage/With-panel.md
@@ -5,6 +5,6 @@
...
+
```
diff --git a/packages/calcite-components/src/components/shell/usage/Advanced.md b/packages/calcite-components/src/components/shell/usage/Advanced.md
index 4b0fe649805..d3d659467e9 100644
--- a/packages/calcite-components/src/components/shell/usage/Advanced.md
+++ b/packages/calcite-components/src/components/shell/usage/Advanced.md
@@ -9,61 +9,79 @@ Renders a shell with leading and trailing floating panels, action bar/pad, block
-
-
+
-
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+ 
+
-
+
```
diff --git a/packages/calcite-components/src/components/shell/usage/With-panels.md b/packages/calcite-components/src/components/shell/usage/With-panels.md
index 4cba3fe15f7..cc1c5402da7 100644
--- a/packages/calcite-components/src/components/shell/usage/With-panels.md
+++ b/packages/calcite-components/src/components/shell/usage/With-panels.md
@@ -2,18 +2,37 @@ Renders a shell with a header and panels on the left and right sides of the app.
```html
-
- Leading panel! (on the left side, since this is a LTR app)
-
- Trailing panel! (right side)
-
- Center Row! (center bottom)
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
diff --git a/packages/calcite-components/src/components/split-button/usage/Basic.md b/packages/calcite-components/src/components/split-button/usage/Basic.md
index 92d2d0f1eb9..ce03023a9de 100644
--- a/packages/calcite-components/src/components/split-button/usage/Basic.md
+++ b/packages/calcite-components/src/components/split-button/usage/Basic.md
@@ -1,9 +1,9 @@
```html
-
+
- Option 2
- Option 3
- Option 4
+ Trails
+ Lakes
+ Rivers
```
diff --git a/packages/calcite-components/src/components/stack/readme.md b/packages/calcite-components/src/components/stack/readme.md
index 1398d8ac883..45a2adaee9b 100644
--- a/packages/calcite-components/src/components/stack/readme.md
+++ b/packages/calcite-components/src/components/stack/readme.md
@@ -11,7 +11,7 @@
My great chip
Hello World
-
+
+
My great chip
diff --git a/packages/calcite-components/src/components/stack/usage/Basic.md b/packages/calcite-components/src/components/stack/usage/Basic.md
index b3d65047608..4c3f3017ff0 100644
--- a/packages/calcite-components/src/components/stack/usage/Basic.md
+++ b/packages/calcite-components/src/components/stack/usage/Basic.md
@@ -3,7 +3,7 @@
My great chip
Hello World
-
+
+
My great chip
diff --git a/packages/calcite-components/src/components/stepper/stepper.e2e.ts b/packages/calcite-components/src/components/stepper/stepper.e2e.ts
index c37cc28a9c1..cc6539013ad 100644
--- a/packages/calcite-components/src/components/stepper/stepper.e2e.ts
+++ b/packages/calcite-components/src/components/stepper/stepper.e2e.ts
@@ -798,10 +798,10 @@ describe("calcite-stepper", () => {
it("should emit calciteStepperItemChange on user interaction", async () => {
const page = await newE2EPage();
await page.setContent(html`
-
+
-
+
@@ -811,27 +811,26 @@ describe("calcite-stepper", () => {
const stepper = await page.find("calcite-stepper");
const [actionStart, actionEnd] = await page.findAll("calcite-stepper >>> calcite-action");
- const [stepperItem1] = await page.findAll("calcite-stepper-item");
const eventSpy = await stepper.spyOnEvent("calciteStepperItemChange");
expect(eventSpy).toHaveReceivedEventTimes(0);
+ // shouldn't emit change event when disabled element is visible
await actionEnd.click();
await page.waitForChanges();
- expect(eventSpy).toHaveReceivedEventTimes(1);
+ expect(eventSpy).toHaveReceivedEventTimes(0);
- await actionStart.click();
+ await actionEnd.click();
await page.waitForChanges();
- expect(eventSpy).toHaveReceivedEventTimes(2);
+ expect(eventSpy).toHaveReceivedEventTimes(1);
// shouldn't emit change event when disabled element is visible
- stepperItem1.setProperty("disabled", true);
await actionStart.click();
await page.waitForChanges();
- expect(eventSpy).toHaveReceivedEventTimes(2);
+ expect(eventSpy).toHaveReceivedEventTimes(1);
- await actionEnd.click();
+ await actionStart.click();
await page.waitForChanges();
- expect(eventSpy).toHaveReceivedEventTimes(3);
+ expect(eventSpy).toHaveReceivedEventTimes(2);
});
});
});
diff --git a/packages/calcite-components/src/components/stepper/stepper.tsx b/packages/calcite-components/src/components/stepper/stepper.tsx
index a2805837f08..625ca1dba4d 100644
--- a/packages/calcite-components/src/components/stepper/stepper.tsx
+++ b/packages/calcite-components/src/components/stepper/stepper.tsx
@@ -118,8 +118,7 @@ export class Stepper implements LocalizedComponent, T9nComponent {
* Fires when the active `calcite-stepper-item` changes.
*
*/
- @Event({ cancelable: false })
- calciteStepperItemChange: EventEmitter;
+ @Event({ cancelable: false }) calciteStepperItemChange: EventEmitter;
/**
* Fires when the active `calcite-stepper-item` changes.
@@ -242,7 +241,6 @@ export class Stepper implements LocalizedComponent, T9nComponent {
@Listen("calciteInternalStepperItemSelect")
updateItem(event: CustomEvent): void {
const { position } = event.detail;
-
if (typeof position === "number") {
this.currentActivePosition = position;
this.selectedItem = event.target as HTMLCalciteStepperItemElement;
@@ -506,7 +504,7 @@ export class Stepper implements LocalizedComponent, T9nComponent {
}
if (
- this.currentActivePosition &&
+ typeof this.currentActivePosition === "number" &&
currentActivePosition !== this.currentActivePosition &&
!this.items[this.currentActivePosition].disabled
) {
diff --git a/packages/calcite-components/src/components/stepper/usage/Basic.md b/packages/calcite-components/src/components/stepper/usage/Basic.md
index 443b1409e17..7db2e28a814 100644
--- a/packages/calcite-components/src/components/stepper/usage/Basic.md
+++ b/packages/calcite-components/src/components/stepper/usage/Basic.md
@@ -1,14 +1,34 @@
```html
-
- Step 1 Content Goes Here
+
+
+
- Step 2 Content Goes Here
-
- Step 3 Content Goes Here
+
+
+
-
- Step 4 Content Goes Here
+
+
+
+
+
+
+
```
diff --git a/packages/calcite-components/src/components/switch/usage/Basic.md b/packages/calcite-components/src/components/switch/usage/Basic.md
index 5a3f7951db5..225663c12d9 100644
--- a/packages/calcite-components/src/components/switch/usage/Basic.md
+++ b/packages/calcite-components/src/components/switch/usage/Basic.md
@@ -1,3 +1,7 @@
```html
-
+
```
diff --git a/packages/calcite-components/src/components/tab/tab.scss b/packages/calcite-components/src/components/tab/tab.scss
index 1a794bcdf7b..0877bde5694 100644
--- a/packages/calcite-components/src/components/tab/tab.scss
+++ b/packages/calcite-components/src/components/tab/tab.scss
@@ -13,6 +13,10 @@
@apply block h-full w-full overflow-auto;
}
+.content {
+ @apply box-border;
+}
+
.scale-s .content {
@apply text-n2h py-1;
}
diff --git a/packages/calcite-components/src/components/table-cell/table-cell.scss b/packages/calcite-components/src/components/table-cell/table-cell.scss
index c8f1206a6ec..493332b12ba 100644
--- a/packages/calcite-components/src/components/table-cell/table-cell.scss
+++ b/packages/calcite-components/src/components/table-cell/table-cell.scss
@@ -4,12 +4,10 @@
* These properties can be overridden using the component's tag as selector.
*
* @prop --calcite-table-cell-background: Specifies the background color of the component.
- * @prop --calcite-table-cell-border-color: Specifies the border color of the component.
*/
:host {
- --calcite-internal-table-cell-background-internal: var(--calcite-table-cell-background, transparent);
- --calcite-internal-table-cell-border-color-internal: var(--calcite-table-cell-border-color, transparent);
+ --calcite-internal-table-cell-background: var(--calcite-table-cell-background, transparent);
@apply contents;
}
@@ -58,8 +56,7 @@ td {
}
.selected-cell:not(.number-cell):not(.footer-cell) {
- --calcite-table-cell-background: var(--calcite-color-foreground-current);
- background: var(--calcite-color-foreground-current);
+ --calcite-internal-table-cell-background: var(--calcite-color-foreground-current);
}
.selection-cell.selected-cell {
diff --git a/packages/calcite-components/src/components/table/interfaces.ts b/packages/calcite-components/src/components/table/interfaces.ts
index 90f24e94c7f..96a7a7e9fbd 100644
--- a/packages/calcite-components/src/components/table/interfaces.ts
+++ b/packages/calcite-components/src/components/table/interfaces.ts
@@ -9,6 +9,4 @@ export interface TableRowFocusEvent {
export type RowType = "head" | "body" | "foot";
-export type TableAppearance = "bordered" | "simple" | "bordered-zebra" | "simple-zebra";
-
export type TableLayout = "auto" | "fixed";
diff --git a/packages/calcite-components/src/components/table/resources.ts b/packages/calcite-components/src/components/table/resources.ts
index 93646dda10f..7b5eb0af9e0 100644
--- a/packages/calcite-components/src/components/table/resources.ts
+++ b/packages/calcite-components/src/components/table/resources.ts
@@ -1,6 +1,6 @@
export const CSS = {
bordered: "bordered",
- zebra: "zebra",
+ striped: "striped",
selectionArea: "selection-area",
paginationArea: "pagination-area",
container: "container",
diff --git a/packages/calcite-components/src/components/table/table.e2e.ts b/packages/calcite-components/src/components/table/table.e2e.ts
index d50d1e7e011..bcf88a8e5b1 100644
--- a/packages/calcite-components/src/components/table/table.e2e.ts
+++ b/packages/calcite-components/src/components/table/table.e2e.ts
@@ -62,7 +62,7 @@ describe("calcite-table", () => {
defaultValue: "none",
},
{
- propertyName: "zebra",
+ propertyName: "striped",
defaultValue: false,
},
]);
diff --git a/packages/calcite-components/src/components/table/table.scss b/packages/calcite-components/src/components/table/table.scss
index 48c20fc0a76..00c83d0695f 100644
--- a/packages/calcite-components/src/components/table/table.scss
+++ b/packages/calcite-components/src/components/table/table.scss
@@ -57,7 +57,7 @@ tbody {
}
}
-.zebra {
+.striped {
::slotted(calcite-table-row:nth-child(2n + 1)) {
--calcite-table-row-background: var(--calcite-color-foreground-2);
}
diff --git a/packages/calcite-components/src/components/table/table.stories.ts b/packages/calcite-components/src/components/table/table.stories.ts
index 9cfe4e47a22..766b2c5ed43 100644
--- a/packages/calcite-components/src/components/table/table.stories.ts
+++ b/packages/calcite-components/src/components/table/table.stories.ts
@@ -21,7 +21,7 @@ export const simple = (): string =>
caption="${text("caption", "Simple table")}"
${boolean("numbered", false)}
${boolean("bordered", false)}
- ${boolean("zebra", false)}
+ ${boolean("striped", false)}
caption="Simple table"
>
@@ -50,7 +50,7 @@ export const simple = (): string =>
`;
-export const simpleZebra_TestOnly = (): string => html`
+export const simpleStriped_TestOnly = (): string => html`
`;
-export const borderedZebra_TestOnly = (): string => html`
+export const borderedStriped_TestOnly = (): string => html`
+
+
+
+ cell
+ cell
+ cell
+ cell
+
+
+ cell
+ cell
+ cell
+ cell
+
+
+ cell
+ cell
+ cell
+ cell
+
+ `;
+
+export const deprecatedZebraStriped_TestOnly = (): string => html`
`;
-export const disabledRows_TestOnly = (): string => html`
+export const disabledRows_TestOnly = (): string => html`
@@ -318,7 +353,7 @@ export const rowSpanAndColSpan_TestOnly = (): string => html` html`
@@ -359,7 +394,7 @@ export const rowSpanAndColSpanNumbered_TestOnly = (): string => html` html`
@@ -956,8 +991,36 @@ export const localized_TestOnly = (): string => html`
`;
+export const tableCellCssBackgroundVariable_TestOnly = (): string =>
+ html`
+
+
+
+ cell
+ cell
+ cell
+ cell
+
+
+ cell
+ cell
+ cell
+ cell
+
+
+ cell
+ cell
+ cell
+ cell
+
+ `;
+
export const darkModeRTL_TestOnly = (): string =>
- html`
+ html`
+ html`
I'm a panel that is not loading.
-I have a loading spinner over my content.
-.
-.
-.
-.
-
+ Loading
+
```
diff --git a/packages/calcite-components/src/components/shell-panel/usage/With-custom-element.md b/packages/calcite-components/src/components/shell-panel/usage/With-custom-element.md
index 887158714a7..453c06cf22c 100644
--- a/packages/calcite-components/src/components/shell-panel/usage/With-custom-element.md
+++ b/packages/calcite-components/src/components/shell-panel/usage/With-custom-element.md
@@ -8,7 +8,7 @@ Add `calcite-match-height` to a wrapping element to ensure proper height, scroll
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit libero sint eveniet suscipit voluptatibus esse + neque ipsa cum placeat sequi deserunt hic facere sunt quisquam nostrum itaque officia, labore maiores obcaecati + repudiandae rerum! Debitis, delectus enim, dignissimos excepturi, accusantium ullam aspernatur quae numquam optio + porro laudantium. A eaque accusantium quo? +
+-
+
- + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit ipsum vitae doloribus praesentium numquam iure + harum, sequi quibusdam at odio. + +
- + Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt at aliquam suscipit nostrum, nulla dolor sunt + eum, quasi tenetur similique voluptatem corrupti neque voluptatum sint! + +
- + Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam corporis quos, dolorem veritatis aliquid aut nihil + sint velit obcaecati praesentium? + +
Cool thing.
++ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugiat, reiciendis est quisquam dolor deserunt saepe + corrupti temporibus a totam adipisci accusantium ex non quidem et veritatis asperiores molestias eligendi + provident magni nostrum, vero, laboriosam cupiditate! +
+Shell Header: My App
Shell Content
Step 1 content
Step 2 content
+ In this step, choose a group from the list to make changes. Make sure to select the right one for your updates.
+
+
+ Now, compile the member list. Add or remove members as needed. Ensure the list is accurate before proceeding to
+ the next step.
+
+
+ In this step, set individual properties for each member. Customize their details to meet your requirements.
+
+
+ Review the changes you've made in the previous steps. Once confirmed, proceed to complete the process. This step
+ is currently disabled.
+
+
diff --git a/packages/calcite-components/src/components/tabs/tabs.stories.ts b/packages/calcite-components/src/components/tabs/tabs.stories.ts
index d7497dc1af1..d5a7cd1f3ca 100644
--- a/packages/calcite-components/src/components/tabs/tabs.stories.ts
+++ b/packages/calcite-components/src/components/tabs/tabs.stories.ts
@@ -346,7 +346,7 @@ export const inlineTabsJustifyAgainstTheStartOfTheNavWidth_TestOnly = (): string
`;
-export const TabChildrenWithPercentageHeights = (): string => html`
+export const Tab100PercentHeightNoVerticalScroll = (): string => html`
Boats
@@ -356,7 +356,21 @@ export const TabChildrenWithPercentageHeights = (): string => html`
`;
-TabChildrenWithPercentageHeights.parameters = {
+Tab100PercentHeightNoVerticalScroll.parameters = {
+ chromatic: { delay: 1000 },
+};
+
+export const Tab200PercentHeightWithVerticalScroll = (): string => html`
+
+
+ Boats
+
+
+
+
+`;
+Tab200PercentHeightWithVerticalScroll.parameters = {
chromatic: { delay: 1000 },
};
@@ -378,3 +392,71 @@ export const updateIndicatorOffset_TestOnly = (): string => html`
updateIndicatorOffset_TestOnly.parameters = {
chromatic: { delay: 1000 },
};
+
+export const fixedHeightNoVerticalScrollbar_TestOnly = (): string => html`
+
+
+ Watercraft
+ Automobiles
+ Aircrafts
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+export const noVerticalScrollbarInsideShellPanel_TestOnly = (): string => html`
+
+
+
+
+
+ Watercraft
+ Automobiles
+ Aircrafts
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
diff --git a/packages/calcite-components/src/components/tabs/usage/Basic.md b/packages/calcite-components/src/components/tabs/usage/Basic.md
index 4fdb091da55..eeda316ee85 100644
--- a/packages/calcite-components/src/components/tabs/usage/Basic.md
+++ b/packages/calcite-components/src/components/tabs/usage/Basic.md
@@ -3,11 +3,12 @@
```html
- Tab 1 Title
- Tab 2 Title
+ Dogs
+ Cats
+ Bears
-
- Tab 1 Content
- Tab 2 Content
+ 
```
diff --git a/packages/calcite-components/src/components/tabs/usage/Bordered.md b/packages/calcite-components/src/components/tabs/usage/Bordered.md
index e610210899b..8cc9d0b58d6 100644
--- a/packages/calcite-components/src/components/tabs/usage/Bordered.md
+++ b/packages/calcite-components/src/components/tabs/usage/Bordered.md
@@ -1,14 +1,12 @@
```html
-
+
- Tab 1 Title
- Tab 2 Title
- Tab 3 Title
- Tab 4 Title
+ Dogs
+ Cats
+ Bears
- Tab 1 Content
- Tab 2 Content
- Tab 3 Content
- Tab 4 Content
+
```
diff --git a/packages/calcite-components/src/components/tile-select-group/usage/Basic.md b/packages/calcite-components/src/components/tile-select-group/usage/Basic.md
new file mode 100644
index 00000000000..85d1f632e0e
--- /dev/null
+++ b/packages/calcite-components/src/components/tile-select-group/usage/Basic.md
@@ -0,0 +1,32 @@
+```html
+
+
+```
diff --git a/packages/calcite-components/src/components/tile-select/resources.ts b/packages/calcite-components/src/components/tile-select/resources.ts
index 611844f20d7..c12c7ce8473 100644
--- a/packages/calcite-components/src/components/tile-select/resources.ts
+++ b/packages/calcite-components/src/components/tile-select/resources.ts
@@ -11,6 +11,12 @@ export const CSS = {
inputAlignmentStart: "input-alignment-start",
inputEnabled: "input-enabled",
largeVisual: "large-visual",
+ tile: "tile",
+ tileContentContainer: "tile-content-container",
+ tileContent: "tile-content",
+ tileDescription: "tile-description",
+ tileHeading: "tile-heading",
+ tileLargeVisual: "tile--large-visual",
widthAuto: "width-auto",
widthFull: "width-full",
};
diff --git a/packages/calcite-components/src/components/tile-select/tile-select.scss b/packages/calcite-components/src/components/tile-select/tile-select.scss
index a6c262448da..4364c7eb072 100644
--- a/packages/calcite-components/src/components/tile-select/tile-select.scss
+++ b/packages/calcite-components/src/components/tile-select/tile-select.scss
@@ -64,7 +64,7 @@ $spacing: $baseline * 0.5;
&.heading.icon.description {
gap: $spacing;
}
- calcite-tile {
+ .tile {
@apply order-1;
}
&.large-visual {
@@ -113,13 +113,79 @@ $spacing: $baseline * 0.5;
&.width-full {
@apply flex max-w-none;
- calcite-tile {
+ .tile {
@apply flex-auto;
}
}
}
}
+.tile {
+ @apply bg-foreground-1
+ box-border
+ duration-150
+ ease-in-out
+ flex
+ flex-col
+ gap-2
+ pointer-events-none
+ select-none
+ text-color-3;
+}
+
+.tile-content-container {
+ @apply flex
+ focus-base
+ items-stretch
+ p-0
+ text-color-2
+ w-full;
+}
+
+.tile-content {
+ @apply flex
+ flex-auto
+ flex-col
+ gap-2;
+ // set width handles slotted content and heading word wrap
+ inline-size: 10%;
+}
+
+.tile-heading {
+ @apply break-words
+ duration-150
+ ease-in-out
+ font-medium
+ pointer-events-none
+ text-color-2
+ text-n1-wrap;
+}
+
+.tile-description {
+ @apply break-words
+ duration-150
+ ease-in-out
+ pointer-events-none
+ text-color-3
+ text-n2-wrap;
+}
+
+.tile--large-visual {
+ @apply grid justify-center
+ text-center;
+ min-block-size: theme("spacing.48");
+ .icon {
+ @apply self-end;
+ }
+ calcite-icon {
+ block-size: 64px;
+ inline-size: 64px;
+ }
+ .tile-content-container {
+ @apply self-center;
+ }
+}
+
:host(:hover) {
.container {
&:not(.input-enabled) {
@@ -128,5 +194,15 @@ $spacing: $baseline * 0.5;
}
}
+:host(:hover),
+.checked {
+ .tile-heading {
+ @apply text-color-1;
+ }
+ .tile-description {
+ @apply text-color-2;
+ }
+}
+
@include disabled();
@include base-component();
diff --git a/packages/calcite-components/src/components/tile-select/tile-select.tsx b/packages/calcite-components/src/components/tile-select/tile-select.tsx
index 9d3ae576e4a..2da6c7b5523 100644
--- a/packages/calcite-components/src/components/tile-select/tile-select.tsx
+++ b/packages/calcite-components/src/components/tile-select/tile-select.tsx
@@ -308,6 +308,8 @@ export class TileSelect implements InteractiveComponent, LoadableComponent {
width,
iconFlipRtl,
} = this;
+ const isLargeVisual = heading && icon && !description;
+ const renderIcon = Boolean(icon);
return (
diff --git a/packages/calcite-components/src/components/time-picker/usage/Basic.md b/packages/calcite-components/src/components/time-picker/usage/Basic.md
new file mode 100644
index 00000000000..17d7232e1fe
--- /dev/null
+++ b/packages/calcite-components/src/components/time-picker/usage/Basic.md
@@ -0,0 +1,3 @@
+```html
+
-
-
- 
+
+
+ 
A calcite-link
-
-
- A calcite-link
+
+ 
+
-
-
-
+
A calcite-link
-
-
- A calcite-link
```
diff --git a/packages/calcite-components/src/components/tip/readme.md b/packages/calcite-components/src/components/tip/readme.md
index 5702fd5794c..16768bc919b 100644
--- a/packages/calcite-components/src/components/tip/readme.md
+++ b/packages/calcite-components/src/components/tip/readme.md
@@ -12,7 +12,7 @@ Renders a close-disabled tip with a heading, thumbnail, info and a link.
```html
- 
+
diff --git a/packages/calcite-components/src/components/tip/usage/Basic.md b/packages/calcite-components/src/components/tip/usage/Basic.md
index 46d560e29e7..78f40095dfa 100644
--- a/packages/calcite-components/src/components/tip/usage/Basic.md
+++ b/packages/calcite-components/src/components/tip/usage/Basic.md
@@ -1,9 +1,11 @@
Renders a close-disabled tip with a heading, thumbnail, info and a link.
```html
-
-
-
+
+
```
diff --git a/packages/calcite-components/src/components/tooltip/tooltip.tsx b/packages/calcite-components/src/components/tooltip/tooltip.tsx
index 25f4b63dcd3..75fe42ecd08 100644
--- a/packages/calcite-components/src/components/tooltip/tooltip.tsx
+++ b/packages/calcite-components/src/components/tooltip/tooltip.tsx
@@ -89,6 +89,7 @@ export class Tooltip implements FloatingUIComponent, OpenCloseComponent {
@Watch("open")
openHandler(): void {
onToggleOpenCloseComponent(this);
+ this.reposition(true);
}
/**
@@ -249,7 +250,6 @@ export class Tooltip implements FloatingUIComponent, OpenCloseComponent {
// --------------------------------------------------------------------------
onBeforeOpen(): void {
- this.reposition(true);
this.calciteTooltipBeforeOpen.emit();
}
@@ -263,7 +263,6 @@ export class Tooltip implements FloatingUIComponent, OpenCloseComponent {
onClose(): void {
this.calciteTooltipClose.emit();
- this.reposition(true);
}
private setTransitionEl = (el): void => {
diff --git a/packages/calcite-components/src/components/tooltip/usage/Basic.md b/packages/calcite-components/src/components/tooltip/usage/Basic.md
index 665fec5083d..748019f06a8 100644
--- a/packages/calcite-components/src/components/tooltip/usage/Basic.md
+++ b/packages/calcite-components/src/components/tooltip/usage/Basic.md
@@ -1,9 +1,11 @@
```html
-This is the message of the tooltip
+
+ Honeybees communicate through intricate dances, navigate using the sun's position, and play a vital role in
+ maintaining biodiversity by pollinating flowers and crops.
+
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
- incididunt ut labore et dolore magna aliqua.
+ Discover fascinating facts about the
+ secret lives of honeybees and their crucial
+ role in pollination.
```
diff --git a/packages/calcite-components/src/components/tree-item/tree-item.e2e.ts b/packages/calcite-components/src/components/tree-item/tree-item.e2e.ts
index 1f7e070d9aa..f8ba96e0c45 100644
--- a/packages/calcite-components/src/components/tree-item/tree-item.e2e.ts
+++ b/packages/calcite-components/src/components/tree-item/tree-item.e2e.ts
@@ -22,7 +22,7 @@ describe("calcite-tree-item", () => {
Child 2
- Grandchild 1
+ Grandchild 1
@@ -87,7 +87,7 @@ describe("calcite-tree-item", () => {
- Grandchild 1
+ Grandchild 1
diff --git a/packages/calcite-components/src/components/tree/tree.e2e.ts b/packages/calcite-components/src/components/tree/tree.e2e.ts
index 6593e6370cd..c2d146e3f9e 100644
--- a/packages/calcite-components/src/components/tree/tree.e2e.ts
+++ b/packages/calcite-components/src/components/tree/tree.e2e.ts
@@ -118,7 +118,7 @@ describe("calcite-tree", () => {
Child 2
- Grandchild 1
+ Grandchild 1
diff --git a/packages/calcite-components/src/components/tree/usage/Basic.md b/packages/calcite-components/src/components/tree/usage/Basic.md
index a976e1158cd..e429b261b4b 100644
--- a/packages/calcite-components/src/components/tree/usage/Basic.md
+++ b/packages/calcite-components/src/components/tree/usage/Basic.md
@@ -3,13 +3,29 @@
```html
- Child 1
+ Technology
- Grandchild 1
+ Programming Languages
+
+
+ JavaScript
+
+
+ Python
+
+
- Grandchild 2
+ Frameworks
+
+
+ React
+
+
+ Vue.js
+
+
diff --git a/packages/calcite-components/src/demos/dropdown.html b/packages/calcite-components/src/demos/dropdown.html
index 8822e668821..c1613f131e0 100644
--- a/packages/calcite-components/src/demos/dropdown.html
+++ b/packages/calcite-components/src/demos/dropdown.html
@@ -210,9 +210,9 @@
Tab 1 content
+ Recommended for coastal use
+ Why is there a vertical scroll bar in this panel?
+ A good choice for inland adventure
+ A good choice for inland adventure 2
+ Cross continents quickly
+ Recommended for coastal use
+ Why is there a vertical scroll bar in this panel?
+ A good choice for inland adventure
+ A good choice for inland adventure 2
+ Cross continents quickly
+
-
);
diff --git a/packages/calcite-components/src/components/tile-select/usage/Basic.md b/packages/calcite-components/src/components/tile-select/usage/Basic.md
index 21d443e80b7..f9e5341b837 100644
--- a/packages/calcite-components/src/components/tile-select/usage/Basic.md
+++ b/packages/calcite-components/src/components/tile-select/usage/Basic.md
@@ -2,9 +2,9 @@
+ {icon && (
+
+
+ )}
+
+
+
+ {heading &&
+ {heading}
}
+ {description && {description}
}
+ - Tip description lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut - labore et dolore magna aliqua. + Did you know that a dog's sense of smell is so powerful that it can detect certain diseases, including cancer, + with remarkable accuracy?
- This is another slotted paragraph. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
- aliquip ex ea commodo consequat.
+ Explore the incredible abilities of dogs with our
+
This tip has an image that is a pretty tall. And the text will run out before the end of the image.
-In astronomy, the terms object and body are often used interchangeably.
-
+ + Cats use their whiskers not only for balance but also to measure openings. If a cat's whiskers fit through an + opening, the rest of its body will too! +
+
+ Discover intriguing facts about cats with our
+
This tip has an image that is square. And the text will run out before the end of the image.
-In astronomy, the terms object and body are often used interchangeably.
+- In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form - of a document without relying on meaningful content (also called greeking). Replacing the actual content with - placeholder text allows designers to design the form of the content before the content itself has been produced. + Bears are excellent swimmers! They can swim long distances and even dive for their meals. Polar bears, in + particular, are known to swim for hours in search of food.
-This tip has no image. As such, the content area will take up the entire width of the tip.
- This is the next paragraph and should show how wide the content area is now. Of course, the width of the overall
- tip will affect things. In astronomy, the terms object and body are often used interchangeably.
+ Explore the aquatic side of bears with our
+
Normal tip with a landscape or square image and a small amount of text in the "info" slot.
Put a link hurr!Normal tip with a landscape or square image and a small amount of text in the "info" slot.
- Put a link hurr! +
+ + Did you know that kittens are born with their eyes shut and ears folded? They start to open their eyes and unfold + their ears after about a week. +
icon-start + multi select
-
+
Scale S
-
+
List
Grid
Table
@@ -221,9 +221,9 @@
-
+
Scale M
-
+
List
Grid
Table
@@ -232,9 +232,9 @@
-
+
Scale L
-
+
List
Grid
Table
@@ -248,9 +248,9 @@
icon-start + multi select
-
+
Scale S
-
+
List
Grid
Table
@@ -259,9 +259,9 @@
-
+
Scale M
-
+
List
Grid
Table
@@ -270,9 +270,9 @@
-
+
Scale L
-
+
List
Grid
Table
@@ -286,9 +286,9 @@
icon-end + multi select
-
+
Scale S
-
+
List
Grid
Table
@@ -297,9 +297,9 @@
-
+
Scale M
-
+
List
Grid
Table
@@ -308,9 +308,9 @@
-
+
Scale L
-
+
List
Grid
Table
@@ -326,9 +326,9 @@
scale + icon + none select
-
+
Scale S
-
+
List
Grid
Table
@@ -337,9 +337,9 @@
-
+
Scale M
-
+
List
Grid
Table
@@ -348,9 +348,9 @@
-
+
Scale L
-
+
List
Grid
Table
@@ -600,7 +600,7 @@
- Click me
+ Click me
Relevance
Date modified
@@ -616,7 +616,7 @@
- Click me
+ Click me
Relevance
Date modified
@@ -632,7 +632,7 @@
- Click me
+ Click me
Relevance
Date modified
diff --git a/packages/calcite-components/src/demos/list.html b/packages/calcite-components/src/demos/list.html
index db81e624c71..e355dd4a08a 100644
--- a/packages/calcite-components/src/demos/list.html
+++ b/packages/calcite-components/src/demos/list.html
@@ -80,8 +80,8 @@
List
label="menu"
slot="actions-end"
--calcite-color-status-success
- > --calcite-color-status-success
+ >
+
--calcite-color-status-success
+ >
+