-
-
- Date Format: {this.localeData?.placeholder}
-
-
-
-
- {this.range && this.layout === "horizontal" && (
-
-
- )}
- {this.range && this.layout === "vertical" && this.scale !== "s" && (
-
-
- )}
- {this.range && (
+
+
+ {this.range && this.layout === "vertical" && (
+
+
)}
@@ -792,12 +790,13 @@ export class InputDatePicker
private userChangedValue = false;
+ private rangeStartValueChangedByUser = false;
+
openTransitionProp = "opacity";
transitionEl: HTMLDivElement;
@Watch("layout")
- @Watch("focusedInput")
setReferenceEl(): void {
const { focusedInput, layout, endWrapper, startWrapper } = this;
@@ -879,7 +878,6 @@ export class InputDatePicker
onClose(): void {
this.calciteInputDatePickerClose.emit();
deactivateFocusTrap(this);
- this.restoreInputFocus();
this.focusOnOpen = false;
this.datePickerEl.reset();
}
@@ -950,6 +948,10 @@ export class InputDatePicker
return;
}
+ const targeHasSelect = event
+ .composedPath()
+ .some((el: HTMLElement) => el.tagName === "CALCITE-SELECT");
+
if (key === "Enter") {
event.preventDefault();
this.commitValue();
@@ -961,12 +963,16 @@ export class InputDatePicker
}
if (submitForm(this)) {
- this.restoreInputFocus();
+ this.restoreInputFocus(true);
}
- } else if (key === "ArrowDown") {
+ } else if ((key === "ArrowDown" || key === "ArrowUp") && !targeHasSelect) {
this.open = true;
this.focusOnOpen = true;
event.preventDefault();
+ } else if (key === "Escape") {
+ this.open = false;
+ event.preventDefault();
+ this.restoreInputFocus(true);
}
};
@@ -1064,14 +1070,26 @@ export class InputDatePicker
this.restoreInputFocus();
};
- private restoreInputFocus(): void {
+ private restoreInputFocus(isDatePickerClosed = false): void {
if (!this.range) {
this.startInput.setFocus();
+ this.open = false;
return;
}
- const focusedInput = this.focusedInput === "start" ? this.startInput : this.endInput;
- focusedInput.setFocus();
+ if (isDatePickerClosed) {
+ this.focusInput();
+ return;
+ }
+
+ this.rangeStartValueChangedByUser = this.focusedInput === "start";
+ this.focusedInput = "end";
+
+ if (this.shouldFocusRangeStart() || this.rangeStartValueChangedByUser) {
+ return;
+ }
+ this.open = false;
+ this.focusInput();
}
private localizeInputValues(): void {
@@ -1217,4 +1235,9 @@ export class InputDatePicker
const normalizedYear = normalizeToCurrentCentury(Number(year));
return `${normalizedYear}-${month}-${day}`;
}
+
+ private focusInput = (): void => {
+ const focusedInput = this.focusedInput === "start" ? this.startInput : this.endInput;
+ focusedInput.setFocus();
+ };
}
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 19a65e77795..d06ed9c58df 100644
--- a/packages/calcite-components/src/components/input-date-picker/resources.ts
+++ b/packages/calcite-components/src/components/input-date-picker/resources.ts
@@ -1,17 +1,22 @@
export const CSS = {
assistiveText: "assistive-text",
calendarWrapper: "calendar-wrapper",
- calendarWrapperEnd: "calendar-wrapper--end",
+ container: "container",
+ dividerContainer: "divider-container",
+ divider: "divider",
horizontalArrowContainer: "horizontal-arrow-container",
inputBorderTopColorOne: "border-top-color-one",
inputContainer: "input-container",
- inputNoBottomBorder: "no-bottom-border",
+ inputNoBottomBorder: "input--no-bottom-border",
+ inputNoRightBorder: "input--no-right-border",
+ inputNoTopBorder: "input--no-top-border",
+ inputNoLeftBorder: "input--no-left-border",
inputWrapper: "input-wrapper",
input: "input",
menu: "menu-container",
menuActive: "menu-container--active",
toggleIcon: "toggle-icon",
- verticalArrowContainer: "vertical-arrow-container",
+ verticalChevronContainer: "vertical-chevron-container",
chevronIcon: "chevron-icon",
};
diff --git a/packages/calcite-components/src/components/input-text/input-text.scss b/packages/calcite-components/src/components/input-text/input-text.scss
index b1bdab1fc5e..e5ad6e46e1a 100755
--- a/packages/calcite-components/src/components/input-text/input-text.scss
+++ b/packages/calcite-components/src/components/input-text/input-text.scss
@@ -329,10 +329,22 @@ input[type="text"]::-ms-reveal {
items-center;
}
-:host(.no-bottom-border) input {
+:host(.input--no-bottom-border) input {
@apply border-b-0;
}
+:host(.input--no-top-border) input {
+ @apply border-t-0;
+}
+
+:host(.input--no-right-border) input {
+ border-inline-end: 0;
+}
+
+:host(.input--no-left-border) input {
+ border-inline-start: 0;
+}
+
:host(.border-top-color-one) input {
@apply border-t-color-1;
}
diff --git a/packages/calcite-components/src/components/select/select.scss b/packages/calcite-components/src/components/select/select.scss
index ba951fb35eb..e77d5cf925a 100644
--- a/packages/calcite-components/src/components/select/select.scss
+++ b/packages/calcite-components/src/components/select/select.scss
@@ -5,17 +5,20 @@
*
* @prop --calcite-select-font-size: The font size of `calcite-option`s in the component.
* @prop --calcite-select-spacing: The padding around the selected option text.
+ * @prop --calcite-select-text-color: The text color of the component.
*/
:host {
@extend %component-spacing;
@apply flex flex-col;
+ font-size: var(--calcite-select-font-size);
+ font-weight: var(--calcite-internal-select-font-weight, var(--calcite-font-weight-regular));
}
.wrapper {
@apply relative flex items-stretch;
inline-size: var(--select-width);
-
+ block-size: var(--calcite-internal-select-block-size, #{$calcite-size-32});
&:focus-within,
&:active,
&:hover {
@@ -30,40 +33,21 @@
:host([scale="s"]) {
--calcite-select-font-size: theme("fontSize.n2h");
--calcite-select-spacing-inline: theme("spacing.2") theme("spacing.8");
-
- .wrapper {
- @apply h-6;
- }
-
- .icon-container {
- @apply px-2;
- }
+ --calcite-internal-select-icon-container-padding-inline: var(--calcite-size-sm);
+ --calcite-internal-select-block-size: #{$calcite-size-24};
}
:host([scale="m"]) {
--calcite-select-font-size: theme("fontSize.n1h");
--calcite-select-spacing-inline: theme("spacing.3") theme("spacing.10");
-
- .wrapper {
- @apply h-8;
- }
-
- .icon-container {
- @apply px-3;
- }
+ --calcite-internal-select-icon-container-padding-inline: var(--calcite-size-md);
}
:host([scale="l"]) {
--calcite-select-font-size: theme("fontSize.0h");
--calcite-select-spacing-inline: theme("spacing.4") theme("spacing.12");
-
- .wrapper {
- block-size: 44px;
- }
-
- .icon-container {
- @apply px-4;
- }
+ --calcite-internal-select-icon-container-padding-inline: var(--calcite-size-lg);
+ --calcite-internal-select-block-size: #{$calcite-size-44};
}
:host([width="auto"]) {
@@ -79,11 +63,27 @@
}
.select {
- @apply bg-foreground-1 border-color-input text-color-2 font-inherit focus-base m-0 box-border w-full cursor-pointer appearance-none truncate rounded-none border border-solid;
- font-size: var(--calcite-select-font-size);
+ @apply bg-foreground-1
+ border-color-input
+ text-color-2
+ font-inherit
+ focus-base
+ m-0
+ box-border
+ w-full
+ cursor-pointer
+ appearance-none
+ truncate
+ rounded-none
+ border-solid;
+ font-size: inherit;
+ font-weight: inherit;
+ color: var(--calcite-select-text-color, var(--calcite-color-text-2));
+ border-width: var(--calcite-select-internal-border-width, var(--calcite-border-width-sm));
padding-inline: var(--calcite-select-spacing-inline);
+ padding-block: var(--calcite-internal-select-spacing-block);
border-inline-end-width: theme("borderWidth.0");
-
+ line-height: var(--calcite-select-line-height, normal);
&:focus {
@apply focus-inset;
}
@@ -97,8 +97,9 @@ select:disabled {
.icon-container {
@apply border-color-input text-color-2 pointer-events-none absolute inset-y-0 flex items-center border-0 border-solid bg-transparent;
inset-inline-end: theme("inset.0");
- border-inline-width: theme("borderWidth.0") theme("borderWidth.DEFAULT");
-
+ border-inline-width: theme("borderWidth.0")
+ var(--calcite-select-internal-icon-border-inline-end-width, theme("borderWidth.DEFAULT"));
+ padding-inline: var(--calcite-internal-select-icon-container-padding-inline);
.icon {
color: var(--calcite-color-text-3);
}
diff --git a/packages/calcite-components/src/utils/date.spec.ts b/packages/calcite-components/src/utils/date.spec.ts
index f651fd3c8b4..7665ef83544 100644
--- a/packages/calcite-components/src/utils/date.spec.ts
+++ b/packages/calcite-components/src/utils/date.spec.ts
@@ -4,12 +4,15 @@ import english from "../components/date-picker/assets/date-picker/nls/en.json";
import french from "../components/date-picker/assets/date-picker/nls/fr.json";
import korean from "../components/date-picker/assets/date-picker/nls/ko.json";
import {
+ getDateInMonth,
dateFromISO,
dateFromRange,
datePartsFromISO,
dateToISO,
formatCalendarYear,
+ getFirstValidDateInMonth,
getOrder,
+ hasSameMonthAndYear,
inRange,
nextMonth,
parseCalendarYear,
@@ -257,3 +260,27 @@ describe("datePartsFromISO", () => {
expect(datePartsFromISO("00-08-01")).toEqual({ day: "01", month: "08", year: "00" });
});
});
+
+describe("getDateInMonth", () => {
+ it("return date in specified month", () => {
+ expect(getDateInMonth(new Date(2020, 0, 1), 4)).toEqual(new Date(2020, 4, 1));
+ expect(getDateInMonth(new Date(2020, 0, 1), 12)).toEqual(new Date(2021, 0, 1));
+ });
+});
+
+describe("getFirstValidDateInMonth", () => {
+ it("return first valid date in month", () => {
+ const min = new Date(2020, 0, 1);
+ const max = new Date(2020, 11, 31);
+ expect(getFirstValidDateInMonth(new Date(2020, 4, 1), min, max)).toEqual(new Date(2020, 4, 1));
+ expect(getFirstValidDateInMonth(new Date(2021, 0, 1), min, max)).toEqual(new Date(2020, 11, 31));
+ });
+});
+
+describe("hasSameMonthAndYear", () => {
+ it("return true if two dates have same month & year", () => {
+ expect(hasSameMonthAndYear(new Date(2020, 4, 1), new Date(2020, 4, 22))).toEqual(true);
+ expect(hasSameMonthAndYear(new Date(2020, 0, 1), new Date(2019, 12, 1))).toEqual(true);
+ expect(hasSameMonthAndYear(new Date(2020, 1, 1), new Date(2020, 2, 1))).toEqual(false);
+ });
+});
diff --git a/packages/calcite-components/src/utils/date.ts b/packages/calcite-components/src/utils/date.ts
index 9e5deb70d17..2cf231d670a 100644
--- a/packages/calcite-components/src/utils/date.ts
+++ b/packages/calcite-components/src/utils/date.ts
@@ -202,6 +202,31 @@ export function prevMonth(date: Date): Date {
return nextDate;
}
+/**
+ * Get active date in a given month.
+ *
+ * @param date
+ * @param month
+ */
+export function getDateInMonth(date: Date, month: number): Date {
+ const nextDate = new Date(date);
+ nextDate.setMonth(month);
+ return nextDate;
+}
+
+/**
+ * Get First Valid date in a month.
+ *
+ * @param date
+ * @param min
+ * @param max
+ */
+export function getFirstValidDateInMonth(date: Date, min: Date, max: Date): Date {
+ const newDate = new Date(date);
+ newDate.setDate(1);
+ return inRange(newDate, min, max) ? newDate : dateFromRange(newDate, min, max);
+}
+
/**
* Get a date one month in the future
*
@@ -273,3 +298,15 @@ export function setEndOfDay(date: Date): Date {
date.setHours(23, 59, 59, 999);
return date;
}
+
+/**
+ *
+ * Returns true if two dates have same month and year.
+ *
+ * @param date1
+ * @param date2
+ * @returns {boolean}
+ */
+export function hasSameMonthAndYear(date1: Date, date2: Date): boolean {
+ return date1 && date2 && date1.getMonth() === date2.getMonth() && date1.getFullYear() === date2.getFullYear();
+}
From 274cffddd311829be9f7b2d0e1a8ebdad5125cc3 Mon Sep 17 00:00:00 2001
From: Ashley Rowles <157734991+arowles@users.noreply.github.com>
Date: Wed, 23 Oct 2024 14:18:34 -0700
Subject: [PATCH 07/17] feat: add buffer point, buffer polygon, buffer
polyline, contour, offset (#10594)
**Related Issue:** #
## Summary
**added**
buffer-point-16
buffer-point-24
buffer-point-32
buffer-polygon-16
buffer-polygon-24
buffer-polygon-32
buffer-polyline-16
buffer-polyline-24
buffer-polyline-32
contour-16
contour-24
contour-32
offset-16
offset-24
offset-32
---
packages/calcite-ui-icons/docs/keywords.json | 98 +++++++++++++++++++
.../icons/buffer-point-16.svg | 1 +
.../icons/buffer-point-24.svg | 1 +
.../icons/buffer-point-32.svg | 1 +
.../icons/buffer-polygon-16.svg | 1 +
.../icons/buffer-polygon-24.svg | 1 +
.../icons/buffer-polygon-32.svg | 1 +
.../icons/buffer-polyline-16.svg | 1 +
.../icons/buffer-polyline-24.svg | 1 +
.../icons/buffer-polyline-32.svg | 1 +
.../calcite-ui-icons/icons/contour-16.svg | 1 +
.../calcite-ui-icons/icons/contour-24.svg | 1 +
.../calcite-ui-icons/icons/contour-32.svg | 1 +
packages/calcite-ui-icons/icons/offset-16.svg | 1 +
packages/calcite-ui-icons/icons/offset-24.svg | 1 +
packages/calcite-ui-icons/icons/offset-32.svg | 1 +
16 files changed, 113 insertions(+)
create mode 100755 packages/calcite-ui-icons/icons/buffer-point-16.svg
create mode 100755 packages/calcite-ui-icons/icons/buffer-point-24.svg
create mode 100755 packages/calcite-ui-icons/icons/buffer-point-32.svg
create mode 100755 packages/calcite-ui-icons/icons/buffer-polygon-16.svg
create mode 100755 packages/calcite-ui-icons/icons/buffer-polygon-24.svg
create mode 100755 packages/calcite-ui-icons/icons/buffer-polygon-32.svg
create mode 100755 packages/calcite-ui-icons/icons/buffer-polyline-16.svg
create mode 100755 packages/calcite-ui-icons/icons/buffer-polyline-24.svg
create mode 100755 packages/calcite-ui-icons/icons/buffer-polyline-32.svg
create mode 100755 packages/calcite-ui-icons/icons/contour-16.svg
create mode 100755 packages/calcite-ui-icons/icons/contour-24.svg
create mode 100755 packages/calcite-ui-icons/icons/contour-32.svg
create mode 100755 packages/calcite-ui-icons/icons/offset-16.svg
create mode 100755 packages/calcite-ui-icons/icons/offset-24.svg
create mode 100755 packages/calcite-ui-icons/icons/offset-32.svg
diff --git a/packages/calcite-ui-icons/docs/keywords.json b/packages/calcite-ui-icons/docs/keywords.json
index 85e5a843081..8a9ddf7d1a5 100644
--- a/packages/calcite-ui-icons/docs/keywords.json
+++ b/packages/calcite-ui-icons/docs/keywords.json
@@ -9067,5 +9067,103 @@
],
"category": "Generic",
"release": "3.33.0"
+ },
+ "buffer-point": {
+ "alias": [
+ "3.33.0",
+ "gis",
+ "point",
+ "dot",
+ "circles",
+ "area",
+ "location",
+ "cushion",
+ "shield",
+ "shock",
+ "range",
+ "space",
+ "expanse",
+ "sphere",
+ "round"
+ ],
+ "category": "GIS",
+ "release": "3.33.0"
+ },
+ "buffer-polygon": {
+ "alias": [
+ "3.33.0",
+ "gis",
+ "selection",
+ "shape",
+ "area",
+ "location",
+ "cushion",
+ "shield",
+ "shock",
+ "range",
+ "space",
+ "expanse",
+ "offset"
+ ],
+ "category": "GIS",
+ "release": "3.33.0"
+ },
+ "contour": {
+ "alias": [
+ "3.33.0",
+ "gis",
+ "contour map",
+ "topographic",
+ "relief map",
+ "lines",
+ "height",
+ "curve",
+ "deliniation",
+ "outline",
+ "profile"
+ ],
+ "category": "GIS",
+ "release": "3.33.0"
+ },
+ "offset": {
+ "alias": [
+ "3.33.0",
+ "gis",
+ "dashed",
+ "expand",
+ "line",
+ "area",
+ "location",
+ "cushion",
+ "shield",
+ "shock",
+ "range",
+ "space",
+ "expanse",
+ "intersection",
+ "outline"
+ ],
+ "category": "GIS",
+ "release": "3.33.0"
+ },
+ "buffer-polyline": {
+ "alias": [
+ "3.33.0",
+ "gis",
+ "line",
+ "area",
+ "location",
+ "cushion",
+ "shield",
+ "shock",
+ "range",
+ "space",
+ "expanse",
+ "intersection",
+ "offset",
+ "outline"
+ ],
+ "category": "GIS",
+ "release": "3.33.0"
}
}
diff --git a/packages/calcite-ui-icons/icons/buffer-point-16.svg b/packages/calcite-ui-icons/icons/buffer-point-16.svg
new file mode 100755
index 00000000000..054570816e3
--- /dev/null
+++ b/packages/calcite-ui-icons/icons/buffer-point-16.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/calcite-ui-icons/icons/buffer-point-24.svg b/packages/calcite-ui-icons/icons/buffer-point-24.svg
new file mode 100755
index 00000000000..772dab27b7c
--- /dev/null
+++ b/packages/calcite-ui-icons/icons/buffer-point-24.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/calcite-ui-icons/icons/buffer-point-32.svg b/packages/calcite-ui-icons/icons/buffer-point-32.svg
new file mode 100755
index 00000000000..83e023012c4
--- /dev/null
+++ b/packages/calcite-ui-icons/icons/buffer-point-32.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/calcite-ui-icons/icons/buffer-polygon-16.svg b/packages/calcite-ui-icons/icons/buffer-polygon-16.svg
new file mode 100755
index 00000000000..6d736757c08
--- /dev/null
+++ b/packages/calcite-ui-icons/icons/buffer-polygon-16.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/calcite-ui-icons/icons/buffer-polygon-24.svg b/packages/calcite-ui-icons/icons/buffer-polygon-24.svg
new file mode 100755
index 00000000000..90aa0c4debc
--- /dev/null
+++ b/packages/calcite-ui-icons/icons/buffer-polygon-24.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/calcite-ui-icons/icons/buffer-polygon-32.svg b/packages/calcite-ui-icons/icons/buffer-polygon-32.svg
new file mode 100755
index 00000000000..3d3fef49af0
--- /dev/null
+++ b/packages/calcite-ui-icons/icons/buffer-polygon-32.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/calcite-ui-icons/icons/buffer-polyline-16.svg b/packages/calcite-ui-icons/icons/buffer-polyline-16.svg
new file mode 100755
index 00000000000..972ac16edf5
--- /dev/null
+++ b/packages/calcite-ui-icons/icons/buffer-polyline-16.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/calcite-ui-icons/icons/buffer-polyline-24.svg b/packages/calcite-ui-icons/icons/buffer-polyline-24.svg
new file mode 100755
index 00000000000..9d3e7df4a1c
--- /dev/null
+++ b/packages/calcite-ui-icons/icons/buffer-polyline-24.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/calcite-ui-icons/icons/buffer-polyline-32.svg b/packages/calcite-ui-icons/icons/buffer-polyline-32.svg
new file mode 100755
index 00000000000..fa57f3e07cb
--- /dev/null
+++ b/packages/calcite-ui-icons/icons/buffer-polyline-32.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/calcite-ui-icons/icons/contour-16.svg b/packages/calcite-ui-icons/icons/contour-16.svg
new file mode 100755
index 00000000000..d939c03b6b6
--- /dev/null
+++ b/packages/calcite-ui-icons/icons/contour-16.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/calcite-ui-icons/icons/contour-24.svg b/packages/calcite-ui-icons/icons/contour-24.svg
new file mode 100755
index 00000000000..b2a301cdb82
--- /dev/null
+++ b/packages/calcite-ui-icons/icons/contour-24.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/calcite-ui-icons/icons/contour-32.svg b/packages/calcite-ui-icons/icons/contour-32.svg
new file mode 100755
index 00000000000..b783a069975
--- /dev/null
+++ b/packages/calcite-ui-icons/icons/contour-32.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/calcite-ui-icons/icons/offset-16.svg b/packages/calcite-ui-icons/icons/offset-16.svg
new file mode 100755
index 00000000000..1c73d229cfb
--- /dev/null
+++ b/packages/calcite-ui-icons/icons/offset-16.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/calcite-ui-icons/icons/offset-24.svg b/packages/calcite-ui-icons/icons/offset-24.svg
new file mode 100755
index 00000000000..9902979d7eb
--- /dev/null
+++ b/packages/calcite-ui-icons/icons/offset-24.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/calcite-ui-icons/icons/offset-32.svg b/packages/calcite-ui-icons/icons/offset-32.svg
new file mode 100755
index 00000000000..7e380dbb826
--- /dev/null
+++ b/packages/calcite-ui-icons/icons/offset-32.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
From 69fa13e60c7bf69a10140b3ed120f21773661edd Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
Date: Wed, 23 Oct 2024 21:24:59 +0000
Subject: [PATCH 08/17] chore: release next
---
package-lock.json | 14 +++++++-------
.../projects/component-library/CHANGELOG.md | 4 ++++
.../projects/component-library/package.json | 4 ++--
packages/calcite-components-react/CHANGELOG.md | 4 ++++
packages/calcite-components-react/package.json | 4 ++--
packages/calcite-components/CHANGELOG.md | 6 ++++++
packages/calcite-components/package.json | 4 ++--
packages/calcite-ui-icons/CHANGELOG.md | 6 ++++++
packages/calcite-ui-icons/package.json | 2 +-
9 files changed, 34 insertions(+), 14 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index bd698fb8313..88213605ebb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -35334,10 +35334,10 @@
},
"packages/calcite-components": {
"name": "@esri/calcite-components",
- "version": "2.14.0-next.16",
+ "version": "2.14.0-next.17",
"license": "SEE LICENSE.md",
"dependencies": {
- "@esri/calcite-ui-icons": "3.33.0-next.4",
+ "@esri/calcite-ui-icons": "3.33.0-next.5",
"@floating-ui/dom": "1.6.11",
"@stencil/core": "4.20.0",
"@types/color": "3.0.6",
@@ -39035,10 +39035,10 @@
},
"packages/calcite-components-angular/projects/component-library": {
"name": "@esri/calcite-components-angular",
- "version": "2.14.0-next.16",
+ "version": "2.14.0-next.17",
"license": "SEE LICENSE.md",
"dependencies": {
- "@esri/calcite-components": "2.14.0-next.16",
+ "@esri/calcite-components": "2.14.0-next.17",
"tslib": "2.6.3"
},
"peerDependencies": {
@@ -39048,10 +39048,10 @@
},
"packages/calcite-components-react": {
"name": "@esri/calcite-components-react",
- "version": "2.14.0-next.16",
+ "version": "2.14.0-next.17",
"license": "SEE LICENSE.md",
"dependencies": {
- "@esri/calcite-components": "2.14.0-next.16"
+ "@esri/calcite-components": "2.14.0-next.17"
},
"peerDependencies": {
"react": ">=16.7",
@@ -39486,7 +39486,7 @@
},
"packages/calcite-ui-icons": {
"name": "@esri/calcite-ui-icons",
- "version": "3.33.0-next.4",
+ "version": "3.33.0-next.5",
"license": "SEE LICENSE.md",
"bin": {
"spriter": "bin/spriter.js"
diff --git a/packages/calcite-components-angular/projects/component-library/CHANGELOG.md b/packages/calcite-components-angular/projects/component-library/CHANGELOG.md
index f04808681c1..e759fb848c1 100644
--- a/packages/calcite-components-angular/projects/component-library/CHANGELOG.md
+++ b/packages/calcite-components-angular/projects/component-library/CHANGELOG.md
@@ -3,6 +3,10 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [2.14.0-next.17](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.14.0-next.16...@esri/calcite-components-angular@2.14.0-next.17) (2024-10-23)
+
+**Note:** Version bump only for package @esri/calcite-components-angular
+
## [2.14.0-next.16](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.14.0-next.15...@esri/calcite-components-angular@2.14.0-next.16) (2024-10-23)
**Note:** Version bump only for package @esri/calcite-components-angular
diff --git a/packages/calcite-components-angular/projects/component-library/package.json b/packages/calcite-components-angular/projects/component-library/package.json
index 2dd25050645..28e241d99c9 100644
--- a/packages/calcite-components-angular/projects/component-library/package.json
+++ b/packages/calcite-components-angular/projects/component-library/package.json
@@ -1,6 +1,6 @@
{
"name": "@esri/calcite-components-angular",
- "version": "2.14.0-next.16",
+ "version": "2.14.0-next.17",
"description": "A set of Angular components that wrap Esri's Calcite Components.",
"homepage": "https://developers.arcgis.com/calcite-design-system/",
"bugs": {
@@ -17,7 +17,7 @@
},
"sideEffects": false,
"dependencies": {
- "@esri/calcite-components": "2.14.0-next.16",
+ "@esri/calcite-components": "2.14.0-next.17",
"tslib": "2.6.3"
},
"peerDependencies": {
diff --git a/packages/calcite-components-react/CHANGELOG.md b/packages/calcite-components-react/CHANGELOG.md
index de3c380162b..6003a797a05 100644
--- a/packages/calcite-components-react/CHANGELOG.md
+++ b/packages/calcite-components-react/CHANGELOG.md
@@ -3,6 +3,10 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [2.14.0-next.17](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.14.0-next.16...@esri/calcite-components-react@2.14.0-next.17) (2024-10-23)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
## [2.14.0-next.16](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.14.0-next.15...@esri/calcite-components-react@2.14.0-next.16) (2024-10-23)
**Note:** Version bump only for package @esri/calcite-components-react
diff --git a/packages/calcite-components-react/package.json b/packages/calcite-components-react/package.json
index fe9fafc25f8..009c810da58 100644
--- a/packages/calcite-components-react/package.json
+++ b/packages/calcite-components-react/package.json
@@ -1,6 +1,6 @@
{
"name": "@esri/calcite-components-react",
- "version": "2.14.0-next.16",
+ "version": "2.14.0-next.17",
"description": "A set of React components that wrap calcite components",
"homepage": "https://developers.arcgis.com/calcite-design-system/",
"repository": {
@@ -28,7 +28,7 @@
"tsc": "tsc"
},
"dependencies": {
- "@esri/calcite-components": "2.14.0-next.16"
+ "@esri/calcite-components": "2.14.0-next.17"
},
"peerDependencies": {
"react": ">=16.7",
diff --git a/packages/calcite-components/CHANGELOG.md b/packages/calcite-components/CHANGELOG.md
index 905ab530551..bf0885226be 100644
--- a/packages/calcite-components/CHANGELOG.md
+++ b/packages/calcite-components/CHANGELOG.md
@@ -3,6 +3,12 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [2.14.0-next.17](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.14.0-next.16...@esri/calcite-components@2.14.0-next.17) (2024-10-23)
+
+### Features
+
+- **input-date-picker, date-picker:** improve date picking experience ([#8402](https://github.com/Esri/calcite-design-system/issues/8402)) ([24d43ad](https://github.com/Esri/calcite-design-system/commit/24d43ad2568118457f00221d1c6f216a563c3895)), closes [#3455](https://github.com/Esri/calcite-design-system/issues/3455) [#10113](https://github.com/Esri/calcite-design-system/issues/10113) [#9167](https://github.com/Esri/calcite-design-system/issues/9167)
+
## [2.14.0-next.16](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.14.0-next.15...@esri/calcite-components@2.14.0-next.16) (2024-10-23)
**Note:** Version bump only for package @esri/calcite-components
diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json
index b7efc61839d..b436c94b063 100644
--- a/packages/calcite-components/package.json
+++ b/packages/calcite-components/package.json
@@ -1,6 +1,6 @@
{
"name": "@esri/calcite-components",
- "version": "2.14.0-next.16",
+ "version": "2.14.0-next.17",
"homepage": "https://developers.arcgis.com/calcite-design-system/",
"description": "Web Components for Esri's Calcite Design System.",
"main": "dist/index.cjs.js",
@@ -60,7 +60,7 @@
"directory": "packages/calcite-components"
},
"dependencies": {
- "@esri/calcite-ui-icons": "3.33.0-next.4",
+ "@esri/calcite-ui-icons": "3.33.0-next.5",
"@floating-ui/dom": "1.6.11",
"@stencil/core": "4.20.0",
"@types/color": "3.0.6",
diff --git a/packages/calcite-ui-icons/CHANGELOG.md b/packages/calcite-ui-icons/CHANGELOG.md
index 7c73c173658..08668adf476 100644
--- a/packages/calcite-ui-icons/CHANGELOG.md
+++ b/packages/calcite-ui-icons/CHANGELOG.md
@@ -3,6 +3,12 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [3.33.0-next.5](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-ui-icons@3.33.0-next.4...@esri/calcite-ui-icons@3.33.0-next.5) (2024-10-23)
+
+### Features
+
+- add buffer point, buffer polygon, buffer polyline, contour, offset ([#10594](https://github.com/Esri/calcite-design-system/issues/10594)) ([274cffd](https://github.com/Esri/calcite-design-system/commit/274cffddd311829be9f7b2d0e1a8ebdad5125cc3))
+
## [3.33.0-next.4](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-ui-icons@3.33.0-next.3...@esri/calcite-ui-icons@3.33.0-next.4) (2024-10-23)
### Bug Fixes
diff --git a/packages/calcite-ui-icons/package.json b/packages/calcite-ui-icons/package.json
index 2fbf4d44548..206327672f0 100644
--- a/packages/calcite-ui-icons/package.json
+++ b/packages/calcite-ui-icons/package.json
@@ -1,6 +1,6 @@
{
"name": "@esri/calcite-ui-icons",
- "version": "3.33.0-next.4",
+ "version": "3.33.0-next.5",
"private": false,
"description": "A collection of UI SVG icons created by Esri for applications.",
"keywords": [
From 2917d429dba4bc3425e12c21fdcc1a7374923380 Mon Sep 17 00:00:00 2001
From: Ben Elan
Date: Wed, 23 Oct 2024 16:06:59 -0700
Subject: [PATCH 09/17] ci: add calcite-ui-icons label to relevant package PRs
(#10590)
## Summary
Add a `calcite-ui-icons` label to pull requests that only change files
in `packages/calcite-ui-icons`. Requested by @arowles.
---
.github/scripts/iconTeamDiffCheck.js | 4 +++-
.github/scripts/support/resources.js | 3 +++
2 files changed, 6 insertions(+), 1 deletion(-)
diff --git a/.github/scripts/iconTeamDiffCheck.js b/.github/scripts/iconTeamDiffCheck.js
index 6a43260f453..ee81fe3ae45 100644
--- a/.github/scripts/iconTeamDiffCheck.js
+++ b/.github/scripts/iconTeamDiffCheck.js
@@ -1,6 +1,7 @@
const {
teams: { admins, iconDesigners },
labels: { snapshots },
+ packages,
} = require("./support/resources");
/** @param {import('github-script').AsyncFunctionArguments} AsyncFunctionArguments */
@@ -81,8 +82,9 @@ module.exports = async ({ github, context, core }) => {
owner,
repo,
issue_number: pull_number,
- labels: [snapshots.skip],
+ labels: [snapshots.skip, packages.icons],
});
+
core.setFailed(
`An admin needs to review these changes because a file outside of package/calcite-ui-icons was changed.`,
);
diff --git a/.github/scripts/support/resources.js b/.github/scripts/support/resources.js
index 7239d7866c9..9203eb2402d 100644
--- a/.github/scripts/support/resources.js
+++ b/.github/scripts/support/resources.js
@@ -47,6 +47,9 @@ const resources = {
admins: "calcite-design-system-admins",
iconDesigners: "calcite-icon-designers",
},
+ packages: {
+ icons: "calcite-ui-icons",
+ },
};
module.exports = resources;
From 63abe8348c9c2649446694f246d6c08644f0d72a Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Wed, 23 Oct 2024 16:09:24 -0700
Subject: [PATCH 10/17] build(deps): update dependency axe-core to v4.10.1
(#10566)
This PR contains the following updates:
| Package | Change | Age | Adoption | Passing | Confidence |
|---|---|---|---|---|---|
| [axe-core](https://www.deque.com/axe/)
([source](https://redirect.github.com/dequelabs/axe-core)) | [`4.10.0`
-> `4.10.1`](https://renovatebot.com/diffs/npm/axe-core/4.10.0/4.10.1) |
[](https://docs.renovatebot.com/merge-confidence/)
|
[](https://docs.renovatebot.com/merge-confidence/)
|
[](https://docs.renovatebot.com/merge-confidence/)
|
[](https://docs.renovatebot.com/merge-confidence/)
|
---
### Release Notes
dequelabs/axe-core (axe-core)
###
[`v4.10.1`](https://redirect.github.com/dequelabs/axe-core/blob/HEAD/CHANGELOG.md#4101-2024-10-16)
[Compare
Source](https://redirect.github.com/dequelabs/axe-core/compare/v4.10.0...v4.10.1)
---
- [ ] If you want to rebase/retry this PR, check
this box
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
package-lock.json | 8 ++++----
package.json | 2 +-
2 files changed, 5 insertions(+), 5 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 88213605ebb..675102c959e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -57,7 +57,7 @@
"@typescript-eslint/parser": "7.13.1",
"@whitespace/storybook-addon-html": "6.1.1",
"autoprefixer": "10.4.20",
- "axe-core": "4.10.0",
+ "axe-core": "4.10.1",
"babel-loader": "9.2.1",
"change-case": "4.1.2",
"cheerio": "1.0.0",
@@ -10648,9 +10648,9 @@
}
},
"node_modules/axe-core": {
- "version": "4.10.0",
- "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.10.0.tgz",
- "integrity": "sha512-Mr2ZakwQ7XUAjp7pAwQWRhhK8mQQ6JAaNWSjmjxil0R8BPioMtQsTLOolGYkji1rcL++3dCqZA3zWqpT+9Ew6g==",
+ "version": "4.10.1",
+ "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.10.1.tgz",
+ "integrity": "sha512-qPC9o+kD8Tir0lzNGLeghbOrWMr3ZJpaRlCIb6Uobt/7N4FiEDvqUMnxzCHRHmg8vOg14kr5gVNyScRmbMaJ9g==",
"dev": true,
"engines": {
"node": ">=4"
diff --git a/package.json b/package.json
index bf4a10f0d74..fde93e4d613 100644
--- a/package.json
+++ b/package.json
@@ -74,7 +74,7 @@
"@typescript-eslint/parser": "7.13.1",
"@whitespace/storybook-addon-html": "6.1.1",
"autoprefixer": "10.4.20",
- "axe-core": "4.10.0",
+ "axe-core": "4.10.1",
"babel-loader": "9.2.1",
"change-case": "4.1.2",
"cheerio": "1.0.0",
From 29654777a3c607abda18c9c95c3b3620f9b8c1a4 Mon Sep 17 00:00:00 2001
From: Ben Elan
Date: Wed, 23 Oct 2024 17:02:41 -0700
Subject: [PATCH 11/17] ci(chromatic): build storybook even when skipping
snapshots (#10589)
## Summary
There have been a few occasions where storybook build errors made it
onto `dev` due to skipping snapshots. This will ensure storybook always
builds and catches errors, even if it isn't uploaded to chromatic.
---
.github/workflows/chromatic.yml | 12 +++++++++---
1 file changed, 9 insertions(+), 3 deletions(-)
diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
index e5eed78c099..7eabddaa911 100644
--- a/.github/workflows/chromatic.yml
+++ b/.github/workflows/chromatic.yml
@@ -7,8 +7,6 @@ on:
types: [opened, labeled, synchronize]
jobs:
run:
- if: |
- (github.event.action == 'labeled' && github.event.label.name == 'pr ready for visual snapshots') || github.event_name == 'push'
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
@@ -17,11 +15,18 @@ jobs:
- uses: actions/setup-node@v4
with:
node-version-file: package.json
- - run: |
+ - name: Build storybook
+ env:
+ STORYBOOK_SCREENSHOT_TEST_BUILD: true
+ CHROMATIC_DIFF_THRESHOLD: ${{ secrets.CHROMATIC_DIFF_THRESHOLD }}
+ run: |
npm install
npm --workspace="packages/calcite-design-tokens" run build
npm --workspace="packages/calcite-ui-icons" run build
+ npm --workspace="packages/calcite-components" run build-storybook
- name: Publish to Chromatic
+ if: |
+ (github.event.action == 'labeled' && github.event.label.name == 'pr ready for visual snapshots') || github.event_name == 'push'
uses: chromaui/action@v11
with:
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
@@ -29,6 +34,7 @@ jobs:
exitOnceUploaded: true
autoAcceptChanges: ${{ github.base_ref || github.ref_name }}
workingDir: packages/calcite-components
+ storybookBuildDir: docs
env:
STORYBOOK_SCREENSHOT_TEST_BUILD: true
CHROMATIC_DIFF_THRESHOLD: ${{ secrets.CHROMATIC_DIFF_THRESHOLD }}
From ce6ba487eca4080b861cd213bae001ab3a529b30 Mon Sep 17 00:00:00 2001
From: Calcite Admin
Date: Wed, 23 Oct 2024 17:14:51 -0700
Subject: [PATCH 12/17] chore: release main (#10597)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
:robot: I have created a release *beep* *boop*
---
@esri/calcite-components: 2.13.2
[2.13.2](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.13.1...@esri/calcite-components@2.13.2)
(2024-10-23)
* **shell-center-row:** Ensure deprecation warning doesn’t show when
using standalone `shell` or `shell-panel`
([#10561](https://github.com/Esri/calcite-design-system/issues/10561))
([09d74ae](https://github.com/Esri/calcite-design-system/commit/09d74aeb1b4d18299806903e63ce33b28d7406cd))
@esri/calcite-components-angular: 2.13.2
[2.13.2](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.13.1...@esri/calcite-components-angular@2.13.2)
(2024-10-23)
* **@esri/calcite-components-angular:** Synchronize components versions
* The following workspace dependencies were updated
* dependencies
* @esri/calcite-components bumped from 2.13.1 to 2.13.2
@esri/calcite-components-react: 2.13.2
[2.13.2](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.13.1...@esri/calcite-components-react@2.13.2)
(2024-10-23)
* **@esri/calcite-components-react:** Synchronize components versions
* The following workspace dependencies were updated
* dependencies
* @esri/calcite-components bumped from 2.13.1 to 2.13.2
rollup/plugins (@rollup/plugin-replace)
###
[`v6.0.1`](https://redirect.github.com/rollup/plugins/blob/HEAD/packages/replace/CHANGELOG.md#v601)
*2024-09-23*
##### Bugfixes
- fix: The `preventAssignment` option is treated as a value to replace
([#1768](https://redirect.github.com/rollup/plugins/issues/1768))
###
[`v6.0.0`](https://redirect.github.com/rollup/plugins/blob/HEAD/packages/replace/CHANGELOG.md#v600)
*2024-09-23*
##### Breaking Changes
- fix!: objectGuards doesn't take effects
([#1764](https://redirect.github.com/rollup/plugins/issues/1764))
---
- [ ] If you want to rebase/retry this PR, check
this box
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
package-lock.json | 7 ++++---
package.json | 2 +-
2 files changed, 5 insertions(+), 4 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 675102c959e..33d043fcf1a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,7 +23,7 @@
"@octokit/webhooks-types": "7.6.1",
"@prettier/sync": "0.5.2",
"@rollup/plugin-node-resolve": "15.3.0",
- "@rollup/plugin-replace": "5.0.7",
+ "@rollup/plugin-replace": "6.0.1",
"@rollup/plugin-typescript": "11.1.6",
"@storybook/addon-a11y": "8.2.9",
"@storybook/addon-controls": "8.2.9",
@@ -7271,9 +7271,10 @@
}
},
"node_modules/@rollup/plugin-replace": {
- "version": "5.0.7",
+ "version": "6.0.1",
+ "resolved": "https://registry.npmjs.org/@rollup/plugin-replace/-/plugin-replace-6.0.1.tgz",
+ "integrity": "sha512-2sPh9b73dj5IxuMmDAsQWVFT7mR+yoHweBaXG2W/R8vQ+IWZlnaI7BR7J6EguVQUp1hd8Z7XuozpDjEKQAAC2Q==",
"dev": true,
- "license": "MIT",
"dependencies": {
"@rollup/pluginutils": "^5.0.1",
"magic-string": "^0.30.3"
diff --git a/package.json b/package.json
index fde93e4d613..7eab3cbc79b 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
"@octokit/webhooks-types": "7.6.1",
"@prettier/sync": "0.5.2",
"@rollup/plugin-node-resolve": "15.3.0",
- "@rollup/plugin-replace": "5.0.7",
+ "@rollup/plugin-replace": "6.0.1",
"@rollup/plugin-typescript": "11.1.6",
"@storybook/addon-a11y": "8.2.9",
"@storybook/addon-controls": "8.2.9",
From 05ad94514ac4c67364d8bb07c1e16376a3fdd56d Mon Sep 17 00:00:00 2001
From: Calcite Admin
Date: Thu, 24 Oct 2024 15:23:47 -0700
Subject: [PATCH 14/17] docs: update component READMEs (#10600)
This PR was automatically generated by the update-doc GitHub action
Co-authored-by: benelan <10986395+benelan@users.noreply.github.com>
---
.../calcite-components/src/components.d.ts | 100 ------------------
.../src/components/action/readme.md | 2 +
.../src/components/date-picker-day/readme.md | 6 +-
.../date-picker-month-header/readme.md | 18 +++-
.../components/date-picker-month/readme.md | 33 ++++--
.../src/components/date-picker/readme.md | 46 ++++----
.../src/components/icon/readme.md | 2 -
.../components/input-date-picker/readme.md | 11 +-
.../src/components/list/readme.md | 41 +++----
.../src/components/option/readme.md | 14 +++
.../src/components/select/readme.md | 14 ++-
11 files changed, 123 insertions(+), 164 deletions(-)
diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index 70288fce667..9dee40c58d4 100644
--- a/packages/calcite-components/src/components.d.ts
+++ b/packages/calcite-components/src/components.d.ts
@@ -9,191 +9,91 @@ import { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Intera
import { RequestedItem } from "./components/accordion/interfaces";
import { IconNameOrString } from "./components/icon/interfaces";
import { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces";
-import { ActionMessages } from "./components/action/assets/action/t9n";
import { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui";
-import { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n";
import { Columns } from "./components/action-group/interfaces";
-import { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n";
-import { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n";
import { AlertDuration, AlertQueue } from "./components/alert/interfaces";
import { NumberingSystem } from "./utils/locale";
-import { AlertMessages } from "./components/alert/assets/alert/t9n";
import { HeadingLevel } from "./components/functional/Heading";
-import { BlockMessages } from "./components/block/assets/block/t9n";
import { BlockSectionToggleDisplay } from "./components/block-section/interfaces";
-import { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n";
import { ButtonAlignment, DropdownIconType } from "./components/button/interfaces";
-import { ButtonMessages } from "./components/button/assets/button/t9n";
-import { CardMessages } from "./components/card/assets/card/t9n";
import { ArrowType, AutoplayType } from "./components/carousel/interfaces";
-import { CarouselMessages } from "./components/carousel/assets/carousel/t9n";
import { MutableValidityState } from "./utils/form";
-import { ChipMessages } from "./components/chip/assets/chip/t9n";
import { ColorValue, InternalColor } from "./components/color-picker/interfaces";
import { Format } from "./components/color-picker/utils";
-import { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n";
import { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces";
-import { ComboboxMessages } from "./components/combobox/assets/combobox/t9n";
-import { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n";
import { HoverRange } from "./utils/date";
import { DateLocaleData } from "./components/date-picker/utils";
-import { DialogMessages } from "./components/dialog/assets/dialog/t9n";
import { DialogPlacement } from "./components/dialog/interfaces";
import { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces";
import { ItemKeyboardEvent } from "./components/dropdown/interfaces";
-import { FilterMessages } from "./components/filter/assets/filter/t9n";
import { FlowItemLikeElement } from "./components/flow/interfaces";
-import { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n";
import { ColorStop, DataSeries } from "./components/graph/interfaces";
-import { HandleMessages } from "./components/handle/assets/handle/t9n";
import { HandleChange, HandleNudge } from "./components/handle/interfaces";
-import { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n";
import { InputPlacement } from "./components/input/interfaces";
-import { InputMessages } from "./components/input/assets/input/t9n";
-import { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n";
-import { InputNumberMessages } from "./components/input-number/assets/input-number/t9n";
-import { InputTextMessages } from "./components/input-text/assets/input-text/t9n";
-import { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n";
-import { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n";
-import { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n";
import { OffsetStyle, TimeZoneMode } from "./components/input-time-zone/interfaces";
import { ListDragDetail } from "./components/list/interfaces";
import { ItemData } from "./components/list-item/interfaces";
-import { ListMessages } from "./components/list/assets/list/t9n";
import { SelectionAppearance } from "./components/list/resources";
-import { ListItemMessages } from "./components/list-item/assets/list-item/t9n";
-import { MenuMessages } from "./components/menu/assets/menu/t9n";
-import { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n";
import { MenuItemCustomEvent } from "./components/menu-item/interfaces";
import { MeterFillType, MeterLabelType } from "./components/meter/interfaces";
-import { ModalMessages } from "./components/modal/assets/modal/t9n";
-import { NoticeMessages } from "./components/notice/assets/notice/t9n";
-import { PaginationMessages } from "./components/pagination/assets/pagination/t9n";
-import { PanelMessages } from "./components/panel/assets/panel/t9n";
import { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic";
import { ICON_TYPES } from "./components/pick-list/resources";
-import { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n";
-import { PopoverMessages } from "./components/popover/assets/popover/t9n";
-import { RatingMessages } from "./components/rating/assets/rating/t9n";
-import { ScrimMessages } from "./components/scrim/assets/scrim/t9n";
import { DisplayMode } from "./components/sheet/interfaces";
import { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces";
-import { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n";
import { DragDetail } from "./utils/sortableComponent";
import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces";
-import { StepperMessages } from "./components/stepper/assets/stepper/t9n";
-import { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n";
import { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces";
-import { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n";
import { Element } from "@stencil/core";
import { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces";
-import { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n";
import { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces";
-import { TableMessages } from "./components/table/assets/table/t9n";
-import { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n";
-import { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n";
-import { TextAreaMessages } from "./components/text-area/assets/text-area/t9n";
import { TileSelectType } from "./components/tile-select/interfaces";
import { TileSelectGroupLayout } from "./components/tile-select-group/interfaces";
-import { TipMessages } from "./components/tip/assets/tip/t9n";
-import { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n";
import { TreeItemSelectDetail } from "./components/tree-item/interfaces";
-import { ValueListMessages } from "./components/value-list/assets/value-list/t9n";
import { ListItemAndHandle } from "./components/value-list-item/interfaces";
export { Alignment, Appearance, CollapseDirection, FlipContext, IconType, InteractionMode, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces";
export { RequestedItem } from "./components/accordion/interfaces";
export { IconNameOrString } from "./components/icon/interfaces";
export { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces";
-export { ActionMessages } from "./components/action/assets/action/t9n";
export { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui";
-export { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n";
export { Columns } from "./components/action-group/interfaces";
-export { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n";
-export { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n";
export { AlertDuration, AlertQueue } from "./components/alert/interfaces";
export { NumberingSystem } from "./utils/locale";
-export { AlertMessages } from "./components/alert/assets/alert/t9n";
export { HeadingLevel } from "./components/functional/Heading";
-export { BlockMessages } from "./components/block/assets/block/t9n";
export { BlockSectionToggleDisplay } from "./components/block-section/interfaces";
-export { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n";
export { ButtonAlignment, DropdownIconType } from "./components/button/interfaces";
-export { ButtonMessages } from "./components/button/assets/button/t9n";
-export { CardMessages } from "./components/card/assets/card/t9n";
export { ArrowType, AutoplayType } from "./components/carousel/interfaces";
-export { CarouselMessages } from "./components/carousel/assets/carousel/t9n";
export { MutableValidityState } from "./utils/form";
-export { ChipMessages } from "./components/chip/assets/chip/t9n";
export { ColorValue, InternalColor } from "./components/color-picker/interfaces";
export { Format } from "./components/color-picker/utils";
-export { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n";
export { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces";
-export { ComboboxMessages } from "./components/combobox/assets/combobox/t9n";
-export { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n";
export { HoverRange } from "./utils/date";
export { DateLocaleData } from "./components/date-picker/utils";
-export { DialogMessages } from "./components/dialog/assets/dialog/t9n";
export { DialogPlacement } from "./components/dialog/interfaces";
export { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces";
export { ItemKeyboardEvent } from "./components/dropdown/interfaces";
-export { FilterMessages } from "./components/filter/assets/filter/t9n";
export { FlowItemLikeElement } from "./components/flow/interfaces";
-export { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n";
export { ColorStop, DataSeries } from "./components/graph/interfaces";
-export { HandleMessages } from "./components/handle/assets/handle/t9n";
export { HandleChange, HandleNudge } from "./components/handle/interfaces";
-export { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n";
export { InputPlacement } from "./components/input/interfaces";
-export { InputMessages } from "./components/input/assets/input/t9n";
-export { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n";
-export { InputNumberMessages } from "./components/input-number/assets/input-number/t9n";
-export { InputTextMessages } from "./components/input-text/assets/input-text/t9n";
-export { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n";
-export { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n";
-export { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n";
export { OffsetStyle, TimeZoneMode } from "./components/input-time-zone/interfaces";
export { ListDragDetail } from "./components/list/interfaces";
export { ItemData } from "./components/list-item/interfaces";
-export { ListMessages } from "./components/list/assets/list/t9n";
export { SelectionAppearance } from "./components/list/resources";
-export { ListItemMessages } from "./components/list-item/assets/list-item/t9n";
-export { MenuMessages } from "./components/menu/assets/menu/t9n";
-export { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n";
export { MenuItemCustomEvent } from "./components/menu-item/interfaces";
export { MeterFillType, MeterLabelType } from "./components/meter/interfaces";
-export { ModalMessages } from "./components/modal/assets/modal/t9n";
-export { NoticeMessages } from "./components/notice/assets/notice/t9n";
-export { PaginationMessages } from "./components/pagination/assets/pagination/t9n";
-export { PanelMessages } from "./components/panel/assets/panel/t9n";
export { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic";
export { ICON_TYPES } from "./components/pick-list/resources";
-export { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n";
-export { PopoverMessages } from "./components/popover/assets/popover/t9n";
-export { RatingMessages } from "./components/rating/assets/rating/t9n";
-export { ScrimMessages } from "./components/scrim/assets/scrim/t9n";
export { DisplayMode } from "./components/sheet/interfaces";
export { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces";
-export { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n";
export { DragDetail } from "./utils/sortableComponent";
export { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces";
-export { StepperMessages } from "./components/stepper/assets/stepper/t9n";
-export { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n";
export { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces";
-export { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n";
export { Element } from "@stencil/core";
export { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces";
-export { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n";
export { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces";
-export { TableMessages } from "./components/table/assets/table/t9n";
-export { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n";
-export { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n";
-export { TextAreaMessages } from "./components/text-area/assets/text-area/t9n";
export { TileSelectType } from "./components/tile-select/interfaces";
export { TileSelectGroupLayout } from "./components/tile-select-group/interfaces";
-export { TipMessages } from "./components/tip/assets/tip/t9n";
-export { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n";
export { TreeItemSelectDetail } from "./components/tree-item/interfaces";
-export { ValueListMessages } from "./components/value-list/assets/value-list/t9n";
export { ListItemAndHandle } from "./components/value-list-item/interfaces";
export namespace Components {
interface CalciteAccordion {
diff --git a/packages/calcite-components/src/components/action/readme.md b/packages/calcite-components/src/components/action/readme.md
index e2929e717ce..68910df5b98 100755
--- a/packages/calcite-components/src/components/action/readme.md
+++ b/packages/calcite-components/src/components/action/readme.md
@@ -64,6 +64,7 @@ Type: `Promise`
- [calcite-action-group](../action-group)
- [calcite-action-menu](../action-menu)
- [calcite-action-pad](../action-pad)
+- [calcite-date-picker-month-header](../date-picker-month-header)
- [calcite-flow-item](../flow-item)
- [calcite-list-item](../list-item)
- [calcite-menu-item](../menu-item)
@@ -90,6 +91,7 @@ graph TD;
calcite-action-group --> calcite-action
calcite-action-menu --> calcite-action
calcite-action-pad --> calcite-action
+ calcite-date-picker-month-header --> calcite-action
calcite-flow-item --> calcite-action
calcite-list-item --> calcite-action
calcite-menu-item --> calcite-action
diff --git a/packages/calcite-components/src/components/date-picker-day/readme.md b/packages/calcite-components/src/components/date-picker-day/readme.md
index 8a3787f38f1..94c08bd32a3 100644
--- a/packages/calcite-components/src/components/date-picker-day/readme.md
+++ b/packages/calcite-components/src/components/date-picker-day/readme.md
@@ -21,9 +21,9 @@
## Events
-| Event | Description | Type |
-| ------------------ | ---------------------------- | ------------------- |
-| `calciteDaySelect` | Fires when user selects day. | `CustomEvent` |
+| Event | Description | Type |
+| -------------------------- | ---------------------------- | ------------------- |
+| `calciteInternalDaySelect` | Fires when user selects day. | `CustomEvent` |
## Methods
diff --git a/packages/calcite-components/src/components/date-picker-month-header/readme.md b/packages/calcite-components/src/components/date-picker-month-header/readme.md
index ed7af88b882..13602062c39 100644
--- a/packages/calcite-components/src/components/date-picker-month-header/readme.md
+++ b/packages/calcite-components/src/components/date-picker-month-header/readme.md
@@ -11,6 +11,7 @@
| `localeData` | -- | CLDR locale data for translated calendar info. | `DateLocaleData` | `undefined` |
| `max` | -- | Specifies the latest allowed date (`"yyyy-mm-dd"`). | `Date` | `undefined` |
| `min` | -- | Specifies the earliest allowed date (`"yyyy-mm-dd"`). | `Date` | `undefined` |
+| `monthStyle` | `month-style` | Specifies the monthStyle used by the component. | `"abbreviated" \| "wide"` | `undefined` |
| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `undefined` |
| `selectedDate` | -- | Already selected date. | `Date` | `undefined` |
@@ -18,18 +19,27 @@
### Used by
-- [calcite-date-picker](../date-picker)
+- [calcite-date-picker-month](../date-picker-month)
### Depends on
-- [calcite-icon](../icon)
+- [calcite-select](../select)
+- [calcite-option](../option)
+- [calcite-action](../action)
### Graph
```mermaid
graph TD;
- calcite-date-picker-month-header --> calcite-icon
- calcite-date-picker --> calcite-date-picker-month-header
+ calcite-date-picker-month-header --> calcite-select
+ calcite-date-picker-month-header --> calcite-option
+ calcite-date-picker-month-header --> calcite-action
+ calcite-select --> calcite-icon
+ calcite-select --> calcite-input-message
+ calcite-input-message --> calcite-icon
+ calcite-action --> calcite-loader
+ calcite-action --> calcite-icon
+ calcite-date-picker-month --> calcite-date-picker-month-header
style calcite-date-picker-month-header fill:#f9f,stroke:#333,stroke-width:4px
```
diff --git a/packages/calcite-components/src/components/date-picker-month/readme.md b/packages/calcite-components/src/components/date-picker-month/readme.md
index 52ddf034db5..9b042cff920 100644
--- a/packages/calcite-components/src/components/date-picker-month/readme.md
+++ b/packages/calcite-components/src/components/date-picker-month/readme.md
@@ -4,16 +4,19 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| -------------- | --------- | ----------------------------------------------------- | ------------------- | ------------ |
-| `activeDate` | -- | The currently active Date. | `Date` | `new Date()` |
-| `endDate` | -- | End date currently active. | `Date` | `undefined` |
-| `hoverRange` | -- | The range of dates currently being hovered. | `HoverRange` | `undefined` |
-| `max` | -- | Specifies the latest allowed date (`"yyyy-mm-dd"`). | `Date` | `undefined` |
-| `min` | -- | Specifies the earliest allowed date (`"yyyy-mm-dd"`). | `Date` | `undefined` |
-| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `undefined` |
-| `selectedDate` | -- | Already selected date. | `Date` | `undefined` |
-| `startDate` | -- | Start date currently active. | `Date` | `undefined` |
+| Property | Attribute | Description | Type | Default |
+| -------------- | --------------- | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ |
+| `activeDate` | -- | The currently active Date. | `Date` | `new Date()` |
+| `endDate` | -- | End date currently active. | `Date` | `undefined` |
+| `headingLevel` | `heading-level` | Specifies the number at which section headings should start. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` |
+| `hoverRange` | -- | The range of dates currently being hovered. | `HoverRange` | `undefined` |
+| `max` | -- | Specifies the latest allowed date (`"yyyy-mm-dd"`). | `Date` | `undefined` |
+| `min` | -- | Specifies the earliest allowed date (`"yyyy-mm-dd"`). | `Date` | `undefined` |
+| `monthStyle` | `month-style` | Specifies the monthStyle used by the component. | `"abbreviated" \| "wide"` | `undefined` |
+| `range` | `range` | When `true`, activates the component's range mode which renders two calendars for selecting ranges of dates. | `boolean` | `false` |
+| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `undefined` |
+| `selectedDate` | -- | Already selected date. | `Date` | `undefined` |
+| `startDate` | -- | Start date currently active. | `Date` | `undefined` |
## Dependencies
@@ -24,12 +27,22 @@
### Depends on
- [calcite-date-picker-day](../date-picker-day)
+- [calcite-date-picker-month-header](../date-picker-month-header)
### Graph
```mermaid
graph TD;
calcite-date-picker-month --> calcite-date-picker-day
+ calcite-date-picker-month --> calcite-date-picker-month-header
+ calcite-date-picker-month-header --> calcite-select
+ calcite-date-picker-month-header --> calcite-option
+ calcite-date-picker-month-header --> calcite-action
+ calcite-select --> calcite-icon
+ calcite-select --> calcite-input-message
+ calcite-input-message --> calcite-icon
+ calcite-action --> calcite-loader
+ calcite-action --> calcite-icon
calcite-date-picker --> calcite-date-picker-month
style calcite-date-picker-month fill:#f9f,stroke:#333,stroke-width:4px
```
diff --git a/packages/calcite-components/src/components/date-picker/readme.md b/packages/calcite-components/src/components/date-picker/readme.md
index 5d939459f7b..53836bf039c 100644
--- a/packages/calcite-components/src/components/date-picker/readme.md
+++ b/packages/calcite-components/src/components/date-picker/readme.md
@@ -6,22 +6,24 @@ For comprehensive guidance on using and implementing `calcite-date-picker`, refe
## Properties
-| Property | Attribute | Description | Type | Default |
-| ---------------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | ----------- |
-| `activeDate` | -- | Specifies the component's active date. | `Date` | `undefined` |
-| `activeRange` | `active-range` | When `range` is true, specifies the active `range`. Where `"start"` specifies the starting range date and `"end"` the ending range date. | `"end" \| "start"` | `undefined` |
-| `headingLevel` | `heading-level` | Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` |
-| `max` | `max` | Specifies the latest allowed date (`"yyyy-mm-dd"`). | `string` | `undefined` |
-| `maxAsDate` | -- | Specifies the latest allowed date as a full date object (`new Date("yyyy-mm-dd")`). | `Date` | `undefined` |
-| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `DatePickerMessages` | `undefined` |
-| `min` | `min` | Specifies the earliest allowed date (`"yyyy-mm-dd"`). | `string` | `undefined` |
-| `minAsDate` | -- | Specifies the earliest allowed date as a full date object (`new Date("yyyy-mm-dd")`). | `Date` | `undefined` |
-| `numberingSystem` | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed. | `"arab" \| "arabext" \| "latn"` | `undefined` |
-| `proximitySelectionDisabled` | `proximity-selection-disabled` | When `true`, disables the default behavior on the third click of narrowing or extending the range and instead starts a new range. | `boolean` | `false` |
-| `range` | `range` | When `true`, activates the component's range mode to allow a start and end date. | `boolean` | `false` |
-| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` |
-| `value` | `value` | Specifies the selected date as a string (`"yyyy-mm-dd"`), or an array of strings for `range` values (`["yyyy-mm-dd", "yyyy-mm-dd"]`). | `string \| string[]` | `undefined` |
-| `valueAsDate` | -- | Specifies the selected date as a full date object (`new Date("yyyy-mm-dd")`), or an array containing full date objects (`[new Date("yyyy-mm-dd"), new Date("yyyy-mm-dd")]`). | `Date \| Date[]` | `undefined` |
+| Property | Attribute | Description | Type | Default |
+| ---------------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | -------------- |
+| `activeDate` | -- | Specifies the component's active date. | `Date` | `undefined` |
+| `activeRange` | `active-range` | When `range` is true, specifies the active `range`. Where `"start"` specifies the starting range date and `"end"` the ending range date. | `"end" \| "start"` | `undefined` |
+| `headingLevel` | `heading-level` | Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` |
+| `layout` | `layout` | Defines the layout of the component. | `"horizontal" \| "vertical"` | `"horizontal"` |
+| `max` | `max` | Specifies the latest allowed date (`"yyyy-mm-dd"`). | `string` | `undefined` |
+| `maxAsDate` | -- | Specifies the latest allowed date as a full date object (`new Date("yyyy-mm-dd")`). | `Date` | `undefined` |
+| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `DatePickerMessages` | `undefined` |
+| `min` | `min` | Specifies the earliest allowed date (`"yyyy-mm-dd"`). | `string` | `undefined` |
+| `minAsDate` | -- | Specifies the earliest allowed date as a full date object (`new Date("yyyy-mm-dd")`). | `Date` | `undefined` |
+| `monthStyle` | `month-style` | Specifies the monthStyle used by the component. | `"abbreviated" \| "wide"` | `"wide"` |
+| `numberingSystem` | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed. | `"arab" \| "arabext" \| "latn"` | `undefined` |
+| `proximitySelectionDisabled` | `proximity-selection-disabled` | When `true`, disables the default behavior on the third click of narrowing or extending the range and instead starts a new range. | `boolean` | `false` |
+| `range` | `range` | When `true`, activates the component's range mode to allow a start and end date. | `boolean` | `false` |
+| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` |
+| `value` | `value` | Specifies the selected date as a string (`"yyyy-mm-dd"`), or an array of strings for `range` values (`["yyyy-mm-dd", "yyyy-mm-dd"]`). | `string \| string[]` | `undefined` |
+| `valueAsDate` | -- | Specifies the selected date as a full date object (`new Date("yyyy-mm-dd")`), or an array containing full date objects (`[new Date("yyyy-mm-dd"), new Date("yyyy-mm-dd")]`). | `Date \| Date[]` | `undefined` |
## Events
@@ -48,17 +50,23 @@ Type: `Promise`
### Depends on
-- [calcite-date-picker-month-header](../date-picker-month-header)
- [calcite-date-picker-month](../date-picker-month)
### Graph
```mermaid
graph TD;
- calcite-date-picker --> calcite-date-picker-month-header
calcite-date-picker --> calcite-date-picker-month
- calcite-date-picker-month-header --> calcite-icon
calcite-date-picker-month --> calcite-date-picker-day
+ calcite-date-picker-month --> calcite-date-picker-month-header
+ calcite-date-picker-month-header --> calcite-select
+ calcite-date-picker-month-header --> calcite-option
+ calcite-date-picker-month-header --> calcite-action
+ calcite-select --> calcite-icon
+ calcite-select --> calcite-input-message
+ calcite-input-message --> calcite-icon
+ calcite-action --> calcite-loader
+ calcite-action --> calcite-icon
calcite-input-date-picker --> calcite-date-picker
style calcite-date-picker fill:#f9f,stroke:#333,stroke-width:4px
```
diff --git a/packages/calcite-components/src/components/icon/readme.md b/packages/calcite-components/src/components/icon/readme.md
index a72cd7b0bcf..2f605dd9453 100644
--- a/packages/calcite-components/src/components/icon/readme.md
+++ b/packages/calcite-components/src/components/icon/readme.md
@@ -36,7 +36,6 @@ For comprehensive guidance on using and implementing `calcite-icon`, refer to th
- [calcite-chip](../chip)
- [calcite-combobox](../combobox)
- [calcite-combobox-item](../combobox-item)
-- [calcite-date-picker-month-header](../date-picker-month-header)
- [calcite-dropdown-item](../dropdown-item)
- [calcite-handle](../handle)
- [calcite-input](../input)
@@ -84,7 +83,6 @@ graph TD;
calcite-chip --> calcite-icon
calcite-combobox --> calcite-icon
calcite-combobox-item --> calcite-icon
- calcite-date-picker-month-header --> calcite-icon
calcite-dropdown-item --> calcite-icon
calcite-handle --> calcite-icon
calcite-input --> calcite-icon
diff --git a/packages/calcite-components/src/components/input-date-picker/readme.md b/packages/calcite-components/src/components/input-date-picker/readme.md
index f6724f2c989..6239a7084ba 100644
--- a/packages/calcite-components/src/components/input-date-picker/readme.md
+++ b/packages/calcite-components/src/components/input-date-picker/readme.md
@@ -19,6 +19,7 @@ For comprehensive guidance on using and implementing `calcite-input-date-picker`
| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `any` | `undefined` |
| `min` | `min` | Specifies the earliest allowed date ("yyyy-mm-dd"). | `string` | `undefined` |
| `minAsDate` | -- | Specifies the earliest allowed date as a full date object. | `Date` | `undefined` |
+| `monthStyle` | `month-style` | Specifies the monthStyle used by the component. | `"abbreviated" \| "wide"` | `"wide"` |
| `name` | `name` | Specifies the name of the component. Required to pass the component's `value` on form submission. | `string` | `undefined` |
| `numberingSystem` | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed. | `"arab" \| "arabext" \| "latn"` | `undefined` |
| `open` | `open` | When `true`, displays the `calcite-date-picker` component. | `boolean` | `false` |
@@ -93,10 +94,16 @@ graph TD;
calcite-input-text --> calcite-icon
calcite-input-text --> calcite-input-message
calcite-input-message --> calcite-icon
- calcite-date-picker --> calcite-date-picker-month-header
calcite-date-picker --> calcite-date-picker-month
- calcite-date-picker-month-header --> calcite-icon
calcite-date-picker-month --> calcite-date-picker-day
+ calcite-date-picker-month --> calcite-date-picker-month-header
+ calcite-date-picker-month-header --> calcite-select
+ calcite-date-picker-month-header --> calcite-option
+ calcite-date-picker-month-header --> calcite-action
+ calcite-select --> calcite-icon
+ calcite-select --> calcite-input-message
+ calcite-action --> calcite-loader
+ calcite-action --> calcite-icon
style calcite-input-date-picker fill:#f9f,stroke:#333,stroke-width:4px
```
diff --git a/packages/calcite-components/src/components/list/readme.md b/packages/calcite-components/src/components/list/readme.md
index 6ce602fe36e..41a353ecffd 100644
--- a/packages/calcite-components/src/components/list/readme.md
+++ b/packages/calcite-components/src/components/list/readme.md
@@ -10,26 +10,27 @@ A general purpose list that enables users to construct list items that conform t
## Properties
-| Property | Attribute | Description | Type | Default |
-| --------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- | ----------- |
-| `canPull` | -- | When provided, the method will be called to determine whether the element can move from the list. | `(detail: ListDragDetail) => boolean` | `undefined` |
-| `canPut` | -- | When provided, the method will be called to determine whether the element can be added from another list. | `(detail: ListDragDetail) => boolean` | `undefined` |
-| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` |
-| `dragEnabled` | `drag-enabled` | When `true`, `calcite-list-item`s are sortable via a draggable button. | `boolean` | `false` |
-| `filterEnabled` | `filter-enabled` | When `true`, an input appears at the top of the component that can be used by end users to filter `calcite-list-item`s. | `boolean` | `false` |
-| `filterPlaceholder` | `filter-placeholder` | Placeholder text for the component's filter input field. | `string` | `undefined` |
-| `filterProps` | -- | Specifies the properties to match against when filtering. If not set, all properties will be matched (label, description, metadata, value). | `string[]` | `undefined` |
-| `filterText` | `filter-text` | Text for the component's filter input field. | `string` | `undefined` |
-| `filteredData` | -- | The currently filtered `calcite-list-item` data. | `{ label: string; description: string; metadata: Record; value: string; }[]` | `[]` |
-| `filteredItems` | -- | The currently filtered `calcite-list-item`s. | `HTMLCalciteListItemElement[]` | `[]` |
-| `group` | `group` | The list's group identifier. To drag elements from one list into another, both lists must have the same group value. | `string` | `undefined` |
-| `label` | `label` | Specifies an accessible name for the component. | `string` | `undefined` |
-| `loading` | `loading` | When `true`, a busy indicator is displayed. | `boolean` | `false` |
-| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `ListMessages` | `undefined` |
-| `numberingSystem` | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. | `"arab" \| "arabext" \| "latn"` | `undefined` |
-| `selectedItems` | -- | The currently selected items. | `HTMLCalciteListItemElement[]` | `[]` |
-| `selectionAppearance` | `selection-appearance` | Specifies the selection appearance - `"icon"` (displays a checkmark or dot) or `"border"` (displays a border). | `"border" \| "icon"` | `"icon"` |
-| `selectionMode` | `selection-mode` | Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, `"single-persist"` allows one selection and prevents de-selection, and `"none"` does not allow any selections. | `"multiple" \| "none" \| "single" \| "single-persist"` | `"none"` |
+| Property | Attribute | Description | Type | Default |
+| --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------- | --------------- |
+| `canPull` | -- | When provided, the method will be called to determine whether the element can move from the list. | `(detail: ListDragDetail) => boolean` | `undefined` |
+| `canPut` | -- | When provided, the method will be called to determine whether the element can be added from another list. | `(detail: ListDragDetail) => boolean` | `undefined` |
+| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` |
+| `dragEnabled` | `drag-enabled` | When `true`, `calcite-list-item`s are sortable via a draggable button. | `boolean` | `false` |
+| `filterEnabled` | `filter-enabled` | When `true`, an input appears at the top of the component that can be used by end users to filter `calcite-list-item`s. | `boolean` | `false` |
+| `filterPlaceholder` | `filter-placeholder` | Placeholder text for the component's filter input field. | `string` | `undefined` |
+| `filterProps` | -- | Specifies the properties to match against when filtering. If not set, all properties will be matched (label, description, metadata, value). | `string[]` | `undefined` |
+| `filterText` | `filter-text` | Text for the component's filter input field. | `string` | `undefined` |
+| `filteredData` | -- | The currently filtered `calcite-list-item` data. | `{ label: string; description: string; metadata: Record; value: string; }[]` | `[]` |
+| `filteredItems` | -- | The currently filtered `calcite-list-item`s. | `HTMLCalciteListItemElement[]` | `[]` |
+| `group` | `group` | The list's group identifier. To drag elements from one list into another, both lists must have the same group value. | `string` | `undefined` |
+| `interactionMode` | `interaction-mode` | Specifies the interaction mode of the component. `"interactive"` allows interaction styling and pointer changes on hover `"static"` does not allow interaction styling and pointer changes on hover The `"static"` value should only be used when `selectionMode` is `"none"`. | `"interactive" \| "static"` | `"interactive"` |
+| `label` | `label` | Specifies an accessible name for the component. | `string` | `undefined` |
+| `loading` | `loading` | When `true`, a busy indicator is displayed. | `boolean` | `false` |
+| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `ListMessages` | `undefined` |
+| `numberingSystem` | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. | `"arab" \| "arabext" \| "latn"` | `undefined` |
+| `selectedItems` | -- | The currently selected items. | `HTMLCalciteListItemElement[]` | `[]` |
+| `selectionAppearance` | `selection-appearance` | Specifies the selection appearance - `"icon"` (displays a checkmark or dot) or `"border"` (displays a border). | `"border" \| "icon"` | `"icon"` |
+| `selectionMode` | `selection-mode` | Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, `"single-persist"` allows one selection and prevents de-selection, and `"none"` does not allow any selections. | `"multiple" \| "none" \| "single" \| "single-persist"` | `"none"` |
## Events
diff --git a/packages/calcite-components/src/components/option/readme.md b/packages/calcite-components/src/components/option/readme.md
index ca2be50c1bd..62ab3393889 100644
--- a/packages/calcite-components/src/components/option/readme.md
+++ b/packages/calcite-components/src/components/option/readme.md
@@ -13,6 +13,20 @@ For comprehensive guidance on using and implementing `calcite-option`, refer to
| `selected` | `selected` | When `true`, the component is selected. | `boolean` | `undefined` |
| `value` | `value` | The component's value. | `any` | `undefined` |
+## Dependencies
+
+### Used by
+
+- [calcite-date-picker-month-header](../date-picker-month-header)
+
+### Graph
+
+```mermaid
+graph TD;
+ calcite-date-picker-month-header --> calcite-option
+ style calcite-option fill:#f9f,stroke:#333,stroke-width:4px
+```
+
---
*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/calcite-components/src/components/select/readme.md b/packages/calcite-components/src/components/select/readme.md
index 5113c0252a2..13bace1ad17 100644
--- a/packages/calcite-components/src/components/select/readme.md
+++ b/packages/calcite-components/src/components/select/readme.md
@@ -46,13 +46,18 @@ Type: `Promise`
## CSS Custom Properties
-| Name | Description |
-| ---------------------------- | ---------------------------------------------------- |
-| `--calcite-select-font-size` | The font size of `calcite-option`s in the component. |
-| `--calcite-select-spacing` | The padding around the selected option text. |
+| Name | Description |
+| ----------------------------- | ---------------------------------------------------- |
+| `--calcite-select-font-size` | The font size of `calcite-option`s in the component. |
+| `--calcite-select-spacing` | The padding around the selected option text. |
+| `--calcite-select-text-color` | The text color of the component. |
## Dependencies
+### Used by
+
+- [calcite-date-picker-month-header](../date-picker-month-header)
+
### Depends on
- [calcite-icon](../icon)
@@ -65,6 +70,7 @@ graph TD;
calcite-select --> calcite-icon
calcite-select --> calcite-input-message
calcite-input-message --> calcite-icon
+ calcite-date-picker-month-header --> calcite-select
style calcite-select fill:#f9f,stroke:#333,stroke-width:4px
```
From 7cdb7aaa1b7b176fc6ad88111db473774eb0d5e3 Mon Sep 17 00:00:00 2001
From: Ashley Rowles <157734991+arowles@users.noreply.github.com>
Date: Thu, 24 Oct 2024 15:46:00 -0700
Subject: [PATCH 15/17] deprecate: deprecate web-adaptor in favor of
web-adapter (#10598)
**Related Issue:** #
## Summary
**added**
web-adaptor
---
packages/calcite-ui-icons/icons/web-adaptor-16.svg | 1 +
packages/calcite-ui-icons/icons/web-adaptor-24.svg | 1 +
packages/calcite-ui-icons/icons/web-adaptor-32.svg | 1 +
3 files changed, 3 insertions(+)
create mode 100755 packages/calcite-ui-icons/icons/web-adaptor-16.svg
create mode 100755 packages/calcite-ui-icons/icons/web-adaptor-24.svg
create mode 100755 packages/calcite-ui-icons/icons/web-adaptor-32.svg
diff --git a/packages/calcite-ui-icons/icons/web-adaptor-16.svg b/packages/calcite-ui-icons/icons/web-adaptor-16.svg
new file mode 100755
index 00000000000..0eabb4cf218
--- /dev/null
+++ b/packages/calcite-ui-icons/icons/web-adaptor-16.svg
@@ -0,0 +1 @@
+
Date: Fri, 25 Oct 2024 14:04:54 -0700
Subject: [PATCH 16/17] feat(tile): add design tokens (#10476)
**Related Issue:** #7180
## Summary
Adds design tokens for the Tile component.
--calcite-tile-accent-color-press: When the parent `calcite-tile-group`
has a `selectionMode` that is not `"none"`, specifies the color of the
component's selection elements, such as the radio, checkbox, and border.
--calcite-tile-background-color: Specifies the component's background
color.
--calcite-tile-border-color: Specifies the component's border color.
--calcite-tile-corner-radius: Specifies the component's corner radius.
--calcite-tile-heading-text-color: Specifies the component's `heading`
text color.
--calcite-tile-link-color: When the `href` property exists, specifies
the color of the component's link elements, such as the border, icon and
heading text on hover, focus and press.
--calcite-tile-shadow: Specifies the shadow around the component.
--calcite-tile-text-color: Specifies the component's `description` and
`icon` text color, but not the `heading` text color.
---
packages/calcite-components/.stylelintrc.cjs | 9 +-
.../calcite-components/src/components.d.ts | 100 +++++
.../src/components/tile/tile.e2e.ts | 351 +++++++++++++++++-
.../src/components/tile/tile.scss | 102 ++---
.../src/custom-theme.stories.ts | 4 +-
.../src/custom-theme/tile.ts | 21 ++
.../src/demos/tile-group.html | 263 +++++++++++++
7 files changed, 800 insertions(+), 50 deletions(-)
create mode 100644 packages/calcite-components/src/custom-theme/tile.ts
diff --git a/packages/calcite-components/.stylelintrc.cjs b/packages/calcite-components/.stylelintrc.cjs
index 0998dad6911..f36f9230a75 100644
--- a/packages/calcite-components/.stylelintrc.cjs
+++ b/packages/calcite-components/.stylelintrc.cjs
@@ -1,7 +1,14 @@
// @ts-check
// ⚠️ AUTO-GENERATED CODE - DO NOT EDIT
-const customFunctions = [];
+const customFunctions = [
+ "get-trailing-text-input-padding",
+ "medium-modular-scale",
+ "modular-scale",
+ "scale-duration",
+ "scaleDuration",
+ "small-modular-scale"
+];
// ⚠️ END OF AUTO-GENERATED CODE
const scssPatternRules = [
diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index 9dee40c58d4..70288fce667 100644
--- a/packages/calcite-components/src/components.d.ts
+++ b/packages/calcite-components/src/components.d.ts
@@ -9,91 +9,191 @@ import { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Intera
import { RequestedItem } from "./components/accordion/interfaces";
import { IconNameOrString } from "./components/icon/interfaces";
import { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces";
+import { ActionMessages } from "./components/action/assets/action/t9n";
import { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui";
+import { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n";
import { Columns } from "./components/action-group/interfaces";
+import { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n";
+import { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n";
import { AlertDuration, AlertQueue } from "./components/alert/interfaces";
import { NumberingSystem } from "./utils/locale";
+import { AlertMessages } from "./components/alert/assets/alert/t9n";
import { HeadingLevel } from "./components/functional/Heading";
+import { BlockMessages } from "./components/block/assets/block/t9n";
import { BlockSectionToggleDisplay } from "./components/block-section/interfaces";
+import { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n";
import { ButtonAlignment, DropdownIconType } from "./components/button/interfaces";
+import { ButtonMessages } from "./components/button/assets/button/t9n";
+import { CardMessages } from "./components/card/assets/card/t9n";
import { ArrowType, AutoplayType } from "./components/carousel/interfaces";
+import { CarouselMessages } from "./components/carousel/assets/carousel/t9n";
import { MutableValidityState } from "./utils/form";
+import { ChipMessages } from "./components/chip/assets/chip/t9n";
import { ColorValue, InternalColor } from "./components/color-picker/interfaces";
import { Format } from "./components/color-picker/utils";
+import { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n";
import { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces";
+import { ComboboxMessages } from "./components/combobox/assets/combobox/t9n";
+import { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n";
import { HoverRange } from "./utils/date";
import { DateLocaleData } from "./components/date-picker/utils";
+import { DialogMessages } from "./components/dialog/assets/dialog/t9n";
import { DialogPlacement } from "./components/dialog/interfaces";
import { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces";
import { ItemKeyboardEvent } from "./components/dropdown/interfaces";
+import { FilterMessages } from "./components/filter/assets/filter/t9n";
import { FlowItemLikeElement } from "./components/flow/interfaces";
+import { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n";
import { ColorStop, DataSeries } from "./components/graph/interfaces";
+import { HandleMessages } from "./components/handle/assets/handle/t9n";
import { HandleChange, HandleNudge } from "./components/handle/interfaces";
+import { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n";
import { InputPlacement } from "./components/input/interfaces";
+import { InputMessages } from "./components/input/assets/input/t9n";
+import { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n";
+import { InputNumberMessages } from "./components/input-number/assets/input-number/t9n";
+import { InputTextMessages } from "./components/input-text/assets/input-text/t9n";
+import { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n";
+import { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n";
+import { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n";
import { OffsetStyle, TimeZoneMode } from "./components/input-time-zone/interfaces";
import { ListDragDetail } from "./components/list/interfaces";
import { ItemData } from "./components/list-item/interfaces";
+import { ListMessages } from "./components/list/assets/list/t9n";
import { SelectionAppearance } from "./components/list/resources";
+import { ListItemMessages } from "./components/list-item/assets/list-item/t9n";
+import { MenuMessages } from "./components/menu/assets/menu/t9n";
+import { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n";
import { MenuItemCustomEvent } from "./components/menu-item/interfaces";
import { MeterFillType, MeterLabelType } from "./components/meter/interfaces";
+import { ModalMessages } from "./components/modal/assets/modal/t9n";
+import { NoticeMessages } from "./components/notice/assets/notice/t9n";
+import { PaginationMessages } from "./components/pagination/assets/pagination/t9n";
+import { PanelMessages } from "./components/panel/assets/panel/t9n";
import { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic";
import { ICON_TYPES } from "./components/pick-list/resources";
+import { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n";
+import { PopoverMessages } from "./components/popover/assets/popover/t9n";
+import { RatingMessages } from "./components/rating/assets/rating/t9n";
+import { ScrimMessages } from "./components/scrim/assets/scrim/t9n";
import { DisplayMode } from "./components/sheet/interfaces";
import { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces";
+import { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n";
import { DragDetail } from "./utils/sortableComponent";
import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces";
+import { StepperMessages } from "./components/stepper/assets/stepper/t9n";
+import { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n";
import { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces";
+import { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n";
import { Element } from "@stencil/core";
import { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces";
+import { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n";
import { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces";
+import { TableMessages } from "./components/table/assets/table/t9n";
+import { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n";
+import { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n";
+import { TextAreaMessages } from "./components/text-area/assets/text-area/t9n";
import { TileSelectType } from "./components/tile-select/interfaces";
import { TileSelectGroupLayout } from "./components/tile-select-group/interfaces";
+import { TipMessages } from "./components/tip/assets/tip/t9n";
+import { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n";
import { TreeItemSelectDetail } from "./components/tree-item/interfaces";
+import { ValueListMessages } from "./components/value-list/assets/value-list/t9n";
import { ListItemAndHandle } from "./components/value-list-item/interfaces";
export { Alignment, Appearance, CollapseDirection, FlipContext, IconType, InteractionMode, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces";
export { RequestedItem } from "./components/accordion/interfaces";
export { IconNameOrString } from "./components/icon/interfaces";
export { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces";
+export { ActionMessages } from "./components/action/assets/action/t9n";
export { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui";
+export { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n";
export { Columns } from "./components/action-group/interfaces";
+export { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n";
+export { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n";
export { AlertDuration, AlertQueue } from "./components/alert/interfaces";
export { NumberingSystem } from "./utils/locale";
+export { AlertMessages } from "./components/alert/assets/alert/t9n";
export { HeadingLevel } from "./components/functional/Heading";
+export { BlockMessages } from "./components/block/assets/block/t9n";
export { BlockSectionToggleDisplay } from "./components/block-section/interfaces";
+export { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n";
export { ButtonAlignment, DropdownIconType } from "./components/button/interfaces";
+export { ButtonMessages } from "./components/button/assets/button/t9n";
+export { CardMessages } from "./components/card/assets/card/t9n";
export { ArrowType, AutoplayType } from "./components/carousel/interfaces";
+export { CarouselMessages } from "./components/carousel/assets/carousel/t9n";
export { MutableValidityState } from "./utils/form";
+export { ChipMessages } from "./components/chip/assets/chip/t9n";
export { ColorValue, InternalColor } from "./components/color-picker/interfaces";
export { Format } from "./components/color-picker/utils";
+export { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n";
export { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces";
+export { ComboboxMessages } from "./components/combobox/assets/combobox/t9n";
+export { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n";
export { HoverRange } from "./utils/date";
export { DateLocaleData } from "./components/date-picker/utils";
+export { DialogMessages } from "./components/dialog/assets/dialog/t9n";
export { DialogPlacement } from "./components/dialog/interfaces";
export { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces";
export { ItemKeyboardEvent } from "./components/dropdown/interfaces";
+export { FilterMessages } from "./components/filter/assets/filter/t9n";
export { FlowItemLikeElement } from "./components/flow/interfaces";
+export { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n";
export { ColorStop, DataSeries } from "./components/graph/interfaces";
+export { HandleMessages } from "./components/handle/assets/handle/t9n";
export { HandleChange, HandleNudge } from "./components/handle/interfaces";
+export { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n";
export { InputPlacement } from "./components/input/interfaces";
+export { InputMessages } from "./components/input/assets/input/t9n";
+export { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n";
+export { InputNumberMessages } from "./components/input-number/assets/input-number/t9n";
+export { InputTextMessages } from "./components/input-text/assets/input-text/t9n";
+export { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n";
+export { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n";
+export { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n";
export { OffsetStyle, TimeZoneMode } from "./components/input-time-zone/interfaces";
export { ListDragDetail } from "./components/list/interfaces";
export { ItemData } from "./components/list-item/interfaces";
+export { ListMessages } from "./components/list/assets/list/t9n";
export { SelectionAppearance } from "./components/list/resources";
+export { ListItemMessages } from "./components/list-item/assets/list-item/t9n";
+export { MenuMessages } from "./components/menu/assets/menu/t9n";
+export { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n";
export { MenuItemCustomEvent } from "./components/menu-item/interfaces";
export { MeterFillType, MeterLabelType } from "./components/meter/interfaces";
+export { ModalMessages } from "./components/modal/assets/modal/t9n";
+export { NoticeMessages } from "./components/notice/assets/notice/t9n";
+export { PaginationMessages } from "./components/pagination/assets/pagination/t9n";
+export { PanelMessages } from "./components/panel/assets/panel/t9n";
export { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic";
export { ICON_TYPES } from "./components/pick-list/resources";
+export { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n";
+export { PopoverMessages } from "./components/popover/assets/popover/t9n";
+export { RatingMessages } from "./components/rating/assets/rating/t9n";
+export { ScrimMessages } from "./components/scrim/assets/scrim/t9n";
export { DisplayMode } from "./components/sheet/interfaces";
export { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces";
+export { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n";
export { DragDetail } from "./utils/sortableComponent";
export { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces";
+export { StepperMessages } from "./components/stepper/assets/stepper/t9n";
+export { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n";
export { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces";
+export { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n";
export { Element } from "@stencil/core";
export { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces";
+export { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n";
export { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces";
+export { TableMessages } from "./components/table/assets/table/t9n";
+export { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n";
+export { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n";
+export { TextAreaMessages } from "./components/text-area/assets/text-area/t9n";
export { TileSelectType } from "./components/tile-select/interfaces";
export { TileSelectGroupLayout } from "./components/tile-select-group/interfaces";
+export { TipMessages } from "./components/tip/assets/tip/t9n";
+export { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n";
export { TreeItemSelectDetail } from "./components/tree-item/interfaces";
+export { ValueListMessages } from "./components/value-list/assets/value-list/t9n";
export { ListItemAndHandle } from "./components/value-list-item/interfaces";
export namespace Components {
interface CalciteAccordion {
diff --git a/packages/calcite-components/src/components/tile/tile.e2e.ts b/packages/calcite-components/src/components/tile/tile.e2e.ts
index 1f7580e132e..9e319b129a7 100644
--- a/packages/calcite-components/src/components/tile/tile.e2e.ts
+++ b/packages/calcite-components/src/components/tile/tile.e2e.ts
@@ -1,8 +1,18 @@
import { newE2EPage } from "@stencil/core/testing";
-import { accessible, defaults, disabled, focusable, hidden, reflects, renders, slots } from "../../tests/commonTests";
+import {
+ accessible,
+ defaults,
+ disabled,
+ focusable,
+ hidden,
+ reflects,
+ renders,
+ slots,
+ themed,
+} from "../../tests/commonTests";
import { html } from "../../../support/formatting";
import { isElementFocused } from "../../tests/utils";
-import { SLOTS } from "./resources";
+import { CSS, SLOTS } from "./resources";
describe("calcite-tile", () => {
describe("accessibility", () => {
@@ -211,4 +221,341 @@ describe("calcite-tile", () => {
expect(description).toBeNull();
});
});
+
+ describe("theme", () => {
+ describe("default", () => {
+ themed(
+ html`
+
+
+ `,
+ {
+ "--calcite-tile-background-color": {
+ shadowSelector: `.${CSS.container}`,
+ targetProp: "backgroundColor",
+ },
+ "--calcite-tile-border-color": {
+ shadowSelector: `.${CSS.container}`,
+ targetProp: "outlineColor",
+ },
+ "--calcite-tile-corner-radius": {
+ shadowSelector: `.${CSS.container}`,
+ targetProp: "borderRadius",
+ },
+ "--calcite-tile-text-color": {
+ shadowSelector: `.${CSS.container}`,
+ targetProp: "color",
+ },
+ "--calcite-tile-heading-text-color": {
+ shadowSelector: `.${CSS.heading}`,
+ targetProp: "color",
+ },
+ "--calcite-tile-shadow": {
+ selector: `calcite-tile`,
+ targetProp: "boxShadow",
+ },
+ },
+ );
+ });
+ describe("default changing text colors on hover", () => {
+ themed(
+ html`
+
+
+ `,
+ {
+ "--calcite-tile-text-color": {
+ shadowSelector: `.${CSS.container}`,
+ targetProp: "color",
+ state: "hover",
+ },
+ "--calcite-tile-heading-text-color": {
+ shadowSelector: `.${CSS.heading}`,
+ targetProp: "color",
+ state: "hover",
+ },
+ },
+ );
+ });
+ describe("--calcite-tile-text-color", () => {
+ describe("applies to the selection icon", () => {
+ themed(
+ html`
+
+
+ `,
+ {
+ "--calcite-tile-text-color": {
+ shadowSelector: `.${CSS.selectionIcon}`,
+ targetProp: "color",
+ },
+ },
+ );
+ });
+ describe("applies to the icon", () => {
+ themed(
+ html`
+
+
+ `,
+ {
+ "--calcite-tile-text-color": {
+ shadowSelector: `.${CSS.icon}`,
+ targetProp: "color",
+ },
+ },
+ );
+ });
+ });
+ describe("--calcite-tile-accent-color-press", () => {
+ describe("applies to border on hover", () => {
+ themed(
+ html`
+
+
+ `,
+ {
+ "--calcite-tile-accent-color-press": {
+ shadowSelector: `.${CSS.container}`,
+ targetProp: "outlineColor",
+ state: "hover",
+ },
+ },
+ );
+ });
+ describe("applies to selection icon on hover", () => {
+ themed(
+ html`
+
+
+ `,
+ {
+ "--calcite-tile-accent-color-press": {
+ shadowSelector: `.${CSS.selectionIcon}`,
+ targetProp: "outlineColor",
+ state: "hover",
+ },
+ },
+ );
+ });
+ describe("applies to selected item's border", () => {
+ themed(
+ html`
+
+
+ `,
+ {
+ "--calcite-tile-accent-color-press": {
+ shadowSelector: `.${CSS.container}`,
+ targetProp: "outlineColor",
+ },
+ },
+ );
+ });
+ describe("applies to selected item's selection icon", () => {
+ themed(
+ html`
+
+
+ `,
+ {
+ "--calcite-tile-accent-color-press": {
+ shadowSelector: `.${CSS.selectionIcon}`,
+ targetProp: "color",
+ },
+ },
+ );
+ });
+ describe(`applies to selected item's border using selection-appearance="border"`, () => {
+ themed(
+ html`
+
+
+ `,
+ {
+ "--calcite-tile-accent-color-press": {
+ shadowSelector: `.${CSS.container}`,
+ targetProp: "boxShadow",
+ },
+ },
+ );
+ });
+ describe(`selection-mode="none"`, () => {
+ describe("applies --calcite-tile-border-color when idle and selected attribute is present", () => {
+ themed(
+ html`
+
+
+ `,
+ {
+ "--calcite-tile-border-color": {
+ shadowSelector: `.${CSS.container}`,
+ targetProp: "outlineColor",
+ },
+ },
+ );
+ });
+ describe("applies --calcite-tile-border-color when hovered", () => {
+ themed(
+ html`
+
+
+ `,
+ {
+ "--calcite-tile-border-color": {
+ shadowSelector: `.${CSS.container}`,
+ targetProp: "outlineColor",
+ state: "hover",
+ },
+ },
+ );
+ });
+ });
+ });
+ describe("link", () => {
+ describe("--calcite-tile-link-color applies to heading text on hover with --calcite-color-text-link as a fallback", () => {
+ themed(
+ html`
+
+
+ `,
+ {
+ "--calcite-tile-link-color": {
+ shadowSelector: `.${CSS.heading}`,
+ targetProp: "color",
+ state: "hover",
+ },
+ "--calcite-color-text-link": {
+ shadowSelector: `.${CSS.heading}`,
+ targetProp: "color",
+ state: "hover",
+ },
+ },
+ );
+ });
+ describe("--calcite-tile-link-color applies to icon on hover with --calcite-color-text-link as a fallback", () => {
+ themed(
+ html`
+
+
+ `,
+ {
+ "--calcite-tile-link-color": {
+ shadowSelector: `.${CSS.heading}`,
+ targetProp: "color",
+ state: "hover",
+ },
+ "--calcite-color-text-link": {
+ shadowSelector: `.${CSS.icon}`,
+ targetProp: "color",
+ state: "hover",
+ },
+ },
+ );
+ });
+ describe("--calcite-tile-link-color applies to border on hover with --calcite-color-text-link as a fallback", () => {
+ themed(
+ html`
+
+
+ `,
+ {
+ "--calcite-tile-link-color": {
+ shadowSelector: `.${CSS.heading}`,
+ targetProp: "color",
+ state: "hover",
+ },
+ "--calcite-color-text-link": {
+ shadowSelector: `.${CSS.container}`,
+ targetProp: "outlineColor",
+ state: "hover",
+ },
+ },
+ );
+ });
+ });
+ });
});
diff --git a/packages/calcite-components/src/components/tile/tile.scss b/packages/calcite-components/src/components/tile/tile.scss
index c9b1f43fedc..2217e17787c 100644
--- a/packages/calcite-components/src/components/tile/tile.scss
+++ b/packages/calcite-components/src/components/tile/tile.scss
@@ -3,46 +3,53 @@
*
* These properties can be overridden using the component's tag as selector.
*
- * @prop --calcite-tile-background-color: Specifies the background color of the component.
- * @prop --calcite-tile-border-color: Specifies the border color of the component.
- * @prop --calcite-tile-description-text-color: Specifies the description text color of the component.
- * @prop --calcite-tile-heading-text-color: Specifies the heading text color of the component.
+ * @prop --calcite-tile-accent-color-press: When the parent `calcite-tile-group` has a `selectionMode` that is not `"none"`, specifies the color of the component's selection elements, such as the radio, checkbox, and border.
+ * @prop --calcite-tile-background-color: Specifies the component's background color.
+ * @prop --calcite-tile-border-color: Specifies the component's border color.
+ * @prop --calcite-tile-corner-radius: Specifies the component's corner radius.
+ * @prop --calcite-tile-heading-text-color: Specifies the component's `heading` text color.
+ * @prop --calcite-tile-link-color: When `href` is present, specifies the component's link color.
+ * @prop --calcite-tile-shadow: Specifies the shadow around the component.
+ * @prop --calcite-tile-text-color: Specifies the component's `description` and `icon` text color, but not the `heading` text color.
*/
:host {
- --calcite-tile-background-color: var(--calcite-color-foreground-1);
- --calcite-tile-border-color: var(--calcite-color-border-2);
- --calcite-tile-description-text-color: var(--calcite-color-text-3);
- --calcite-tile-heading-text-color: var(--calcite-color-text-2);
- --calcite-icon-color: var(--calcite-color-text-3);
-
+ box-shadow: var(--calcite-tile-shadow, var(--calcite-shadow-none));
box-sizing: border-box;
display: inline-block;
}
.container {
- background-color: var(--calcite-tile-background-color);
+ background-color: var(--calcite-tile-background-color, var(--calcite-color-foreground-1));
block-size: var(--calcite-container-size-content-fluid);
+ border-radius: var(--calcite-tile-corner-radius, var(--calcite-corner-radius));
box-sizing: border-box;
+ color: var(--calcite-tile-text-color, var(--calcite-color-text-3));
inline-size: var(--calcite-container-size-content-fluid);
- outline: var(--calcite-border-width-sm, 1px) solid var(--calcite-tile-border-color);
+ outline: var(--calcite-border-width-sm, 1px) solid var(--calcite-tile-border-color, var(--calcite-color-border-2));
user-select: none;
+
+ .selection-icon {
+ color: var(--calcite-tile-text-color, var(--calcite-color-text-3));
+ }
+
&.interactive {
cursor: pointer;
+
&:hover,
&:focus,
&.selected {
- outline-color: var(--calcite-color-brand);
+ outline-color: var(--calcite-tile-accent-color-press, var(--calcite-color-brand));
position: relative;
.selection-icon {
- --calcite-icon-color: var(--calcite-color-brand);
+ color: var(--calcite-tile-accent-color-press, var(--calcite-color-brand));
}
}
&.selected {
z-index: var(--calcite-z-index);
}
&:focus {
- box-shadow: inset 0 0 0 1px var(--calcite-color-brand);
+ box-shadow: inset 0 0 0 1px var(--calcite-tile-accent-color-press, var(--calcite-color-brand));
z-index: var(--calcite-z-index-sticky);
}
}
@@ -70,12 +77,17 @@
}
.heading {
- color: var(--calcite-tile-heading-text-color);
+ color: var(--calcite-tile-heading-text-color, var(--calcite-color-text-2));
font-weight: var(--calcite-font-weight-medium);
line-height: 1.20313rem;
overflow-wrap: break-word;
}
+.description {
+ font-weight: var(--calcite-font-weight-regular);
+ overflow-wrap: break-word;
+}
+
/* [Deprecated] Use the content-top slot for rendering icon with alignment="center" instead */
.large-visual-deprecated {
align-items: center;
@@ -93,26 +105,15 @@
}
}
-.description {
- color: var(--calcite-tile-description-text-color);
- font-weight: var(--calcite-font-weight-regular);
- overflow-wrap: break-word;
-}
-
:host([alignment="center"]) {
.icon {
align-self: center;
}
- .text-content-container {
- justify-content: center;
- }
.text-content {
text-align: center;
}
slot[name="content-start"]::slotted(*),
- slot[name="content-end"]::slotted(*),
- slot[name="content-top"]::slotted(*),
- slot[name="content-bottom"]::slotted(*) {
+ slot[name="content-end"]::slotted(*) {
align-self: center;
}
}
@@ -190,7 +191,7 @@
:host([selection-appearance="border"][layout="vertical"]) {
.container.selected:focus::before {
block-size: 100%;
- box-shadow: inset 0 0 0 1px var(--calcite-color-brand);
+ box-shadow: inset 0 0 0 1px var(--calcite-tile-accent-color-press, var(--calcite-color-brand));
content: "";
display: block;
inline-size: 100%;
@@ -202,58 +203,67 @@
:host([selection-appearance="border"][layout="horizontal"]) {
.container.selected {
- box-shadow: inset 0 -4px 0 0 var(--calcite-color-brand);
+ box-shadow: inset 0 -4px 0 0 var(--calcite-tile-accent-color-press, var(--calcite-color-brand));
}
}
:host([selection-appearance="border"][layout="vertical"]) {
.container.selected {
- box-shadow: inset 4px 0 0 0 var(--calcite-color-brand);
+ box-shadow: inset 4px 0 0 0 var(--calcite-tile-accent-color-press, var(--calcite-color-brand));
+ }
+}
+
+:host(:hover:not([disabled])),
+:host([active]:not([disabled])) {
+ .heading {
+ color: var(--calcite-tile-heading-text-color, var(--calcite-color-text-1));
+ }
+ .description {
+ color: var(--calcite-tile-text-color, var(--calcite-color-text-2));
}
}
:host([href]:focus:not([disabled])),
:host([href]:hover:not([disabled])) {
- --calcite-tile-border-color: var(--calcite-color-text-link);
- --calcite-tile-heading-text-color: var(--calcite-color-text-link);
- --calcite-icon-color: var(--calcite-color-text-link);
.container {
+ outline-color: var(--calcite-tile-link-color, var(--calcite-color-text-link));
position: relative;
z-index: var(--calcite-z-index);
}
+ .icon {
+ color: var(--calcite-tile-link-color, var(--calcite-color-text-link));
+ }
+ .heading {
+ color: var(--calcite-tile-link-color, var(--calcite-color-text-link));
+ }
}
:host([href]:active:not([disabled])) {
.container {
- box-shadow: 0 0 0 3px var(--calcite-tile-border-color);
+ box-shadow: inset 0 0 0 1px var(--calcite-tile-link-color, var(--calcite-color-text-link));
+ outline-color: var(--calcite-tile-link-color, var(--calcite-color-text-link));
}
}
:host([embed]) {
.container {
- box-shadow: none;
padding: 0;
}
}
:host([selection-mode="none"]) {
.container {
- outline-color: var(--calcite-tile-border-color);
+ &:hover,
+ &.selected {
+ outline-color: var(--calcite-tile-border-color, var(--calcite-color-border-2));
+ }
&:focus {
- outline-color: var(--calcite-color-brand);
- position: relative;
+ outline-color: var(--calcite-tile-accent-color-press, var(--calcite-color-brand));
}
}
}
@include disabled();
-
-:host(:hover:not([disabled])),
-:host([active]:not([disabled])) {
- --calcite-tile-description-text-color: var(--calcite-color-text-2);
- --calcite-tile-heading-text-color: var(--calcite-color-text-1);
-}
-
@include base-component();
::slotted(*) {
diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts
index 7a1aa0767eb..074a384ea5e 100644
--- a/packages/calcite-components/src/custom-theme.stories.ts
+++ b/packages/calcite-components/src/custom-theme.stories.ts
@@ -35,6 +35,7 @@ import { slider } from "./custom-theme/slider";
import { tabs } from "./custom-theme/tabs";
import { textArea, textAreaTokens } from "./custom-theme/text-area";
import { avatarIcon, avatarInitials, avatarThumbnail, avatarTokens } from "./custom-theme/avatar";
+import { tileTokens, tile } from "./custom-theme/tile";
const globalTokens = {
calciteColorBrand: "#007ac2",
@@ -115,7 +116,7 @@ const kitchenSink = (args: Record, useTestValues = false) =>
${checkbox}
${chips} ${pagination} ${slider}
${datePicker} ${tabs} ${loader} ${calciteSwitch} ${avatarIcon} ${avatarInitials} ${avatarThumbnail} ${progress} ${handle} ${textArea} ${popover}
+ ${datePicker} ${tabs} ${loader} ${calciteSwitch} ${avatarIcon} ${avatarInitials} ${avatarThumbnail} ${progress} ${handle} ${textArea} ${popover} ${tile}
${alert}