Merge branch 'dev' into eriklharper/11170-tile-content-overflow

Esri · Jan 7, 2025 · 382f9a0 · 382f9a0
2 parents 88b14bf + 4b0d804
commit 382f9a0
Show file tree

Hide file tree

Showing 15 changed files with 172 additions and 71 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -34,7 +34,7 @@
     "util:sync-linked-package-versions": "tsx support/syncLinkedPackageVersions.ts"
   },
   "devDependencies": {
-    "@arcgis/lumina-compiler": "^4.32.0-next.69",
+    "@arcgis/lumina-compiler": "^4.32.0-next.72",
     "@cspell/eslint-plugin": "8.17.1",
     "@eslint/compat": "1.2.4",
     "@eslint/eslintrc": "3.2.0",

diff --git 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.
 
+## [3.0.0-next.91](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2025-01-07)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
 ## [3.0.0-next.90](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2025-01-06)
 
 **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
@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components-react",
-  "version": "3.0.0-next.90",
+  "version": "3.0.0-next.91",
   "description": "A set of React components that wrap calcite components",
   "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "repository": {
@@ -26,7 +26,7 @@
     "tsc": "tsc"
   },
   "dependencies": {
-    "@esri/calcite-components": "3.0.0-next.90",
+    "@esri/calcite-components": "3.0.0-next.91",
     "@lit/react": "1.0.6"
   },
   "peerDependencies": {

diff --git 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.
 
+## [3.0.0-next.91](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2025-01-07)
+
+### Bug Fixes
+
+- **text-area:** make `readOnly` prop writable ([#11218](https://github.com/Esri/calcite-design-system/issues/11218)) ([0cbf766](https://github.com/Esri/calcite-design-system/commit/0cbf766156e3b0ec7a662571606af62895e23f59)), closes [#11217](https://github.com/Esri/calcite-design-system/issues/11217) [#10731](https://github.com/Esri/calcite-design-system/issues/10731) [#10310](https://github.com/Esri/calcite-design-system/issues/10310)
+
 ## [3.0.0-next.90](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2025-01-06)
 
 ### Features

diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "3.0.0-next.90",
+  "version": "3.0.0-next.91",
   "description": "Web Components for Esri's Calcite Design System.",
   "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "repository": {
@@ -19,6 +19,7 @@
     "./types/*": "./dist/types/*.d.ts",
     "./hydrate": "./hydrate/index.js",
     "./calcite/calcite.css": "./dist/calcite/calcite.css",
+    "./docs/*": "./dist/docs/*",
     "./dist/calcite/calcite.css": "./dist/calcite/calcite.css",
     "./dist/loader": "./dist/loader.js",
     "./dist/components": "./dist/index.js",
@@ -68,9 +69,9 @@
     "util:test-types": "! grep -rnw 'dist/types' -e '<reference types='"
   },
   "dependencies": {
-    "@arcgis/components-controllers": "^4.32.0-next.69",
-    "@arcgis/components-utils": "^4.32.0-next.69",
-    "@arcgis/lumina": "^4.32.0-next.69",
+    "@arcgis/components-controllers": "^4.32.0-next.72",
+    "@arcgis/components-utils": "^4.32.0-next.72",
+    "@arcgis/lumina": "^4.32.0-next.72",
     "@esri/calcite-ui-icons": "4.0.0-next.7",
     "@floating-ui/dom": "^1.6.12",
     "@floating-ui/utils": "^0.2.8",

diff --git a/packages/calcite-components/src/components/rating/rating.e2e.ts b/packages/calcite-components/src/components/rating/rating.e2e.ts
@@ -11,8 +11,11 @@ import {
   reflects,
   renders,
   t9n,
+  themed,
 } from "../../tests/commonTests";
+import { html } from "../../../support/formatting";
 import { isElementFocused } from "../../tests/utils";
+import { CSS } from "./resources";
 
 describe("calcite-rating", () => {
   describe("common tests", () => {
@@ -795,4 +798,56 @@ describe("calcite-rating", () => {
       expect(element).toEqualAttribute("value", "2");
     });
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      themed(html`<calcite-rating></calcite-rating>`, {
+        "--calcite-rating-spacing": {
+          shadowSelector: `.${CSS.fieldSet}`,
+          targetProp: "gap",
+        },
+        "--calcite-rating-color": {
+          shadowSelector: `.${CSS.star}`,
+          targetProp: "color",
+        },
+      });
+    });
+    describe("selected", () => {
+      themed(html`<calcite-rating value="2" class=${CSS.hovered}></calcite-rating>`, {
+        "--calcite-rating-color-hover": [
+          {
+            shadowSelector: `.${CSS.star}`,
+            targetProp: "color",
+            state: { hover: { attribute: "class", value: CSS.hovered } },
+          },
+          {
+            shadowSelector: `.${CSS.selected}`,
+            targetProp: "color",
+          },
+        ],
+      });
+    });
+    describe("average", () => {
+      themed(html`<calcite-rating average="3.65" count="240" show-chip></calcite-rating>`, {
+        "--calcite-rating-average-color": [
+          {
+            shadowSelector: `.${CSS.average}`,
+            targetProp: "color",
+          },
+          {
+            shadowSelector: `.${CSS.fraction}`,
+            targetProp: "color",
+          },
+        ],
+        "--calcite-rating-average-text-color": {
+          shadowSelector: `.${CSS.numberAverage}`,
+          targetProp: "color",
+        },
+        "--calcite-rating-count-text-color": {
+          shadowSelector: `.${CSS.numberCount}`,
+          targetProp: "color",
+        },
+      });
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/rating/rating.scss b/packages/calcite-components/src/components/rating/rating.scss
@@ -3,7 +3,13 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-rating-spacing-unit: The amount of left and right margin spacing between each rating star.
+ * @prop --calcite-rating-spacing-unit: [Deprecated] Use `--calcite-rating-spacing`. Specifies the amount of left and right margin spacing between each item.
+ * @prop --calcite-rating-spacing: Specifies the amount of left and right margin spacing between each item.
+ * @prop --calcite-rating-color-hover: Specifies the component's item color when hovered or selected.
+ * @prop --calcite-rating-color: Specifies the component's item color.
+ * @prop --calcite-rating-average-color: Specifies the component's item color when average is set.
+ * @prop --calcite-rating-average-text-color: Specifies the component's average text color.
+ * @prop --calcite-rating-count-text-color: Specifies the component's count text color.
  */
 
 :host {
@@ -15,17 +21,17 @@
 
 :host([scale="s"]) {
   @apply h-6;
-  --calcite-rating-spacing-unit: theme("spacing.1");
+  --calcite-internal-rating-spacing: theme("spacing.1");
 }
 
 :host([scale="m"]) {
   @apply h-8;
-  --calcite-rating-spacing-unit: theme("spacing.2");
+  --calcite-internal-rating-spacing: theme("spacing.2");
 }
 
 :host([scale="l"]) {
   @apply h-11;
-  --calcite-rating-spacing-unit: theme("spacing.3");
+  --calcite-internal-rating-spacing: theme("spacing.3");
 }
 
 :host([read-only]) {
@@ -38,7 +44,7 @@
   border-width: 0;
   padding: 0;
   align-items: center;
-  gap: var(--calcite-rating-spacing-unit);
+  gap: var(--calcite-rating-spacing, var(--calcite-internal-rating-spacing));
 }
 
 .wrapper {
@@ -51,20 +57,20 @@
   display: flex;
   flex-direction: column;
   cursor: pointer;
-  color: theme("borderColor.color.input");
+  color: var(--calcite-rating-color, theme("borderColor.color.input"));
   &:focus {
     @apply focus-outset;
   }
 }
 
 .average,
 .fraction {
-  color: theme("colors.warning");
+  color: var(--calcite-rating-average-color, theme("colors.warning"));
 }
 
 .hovered,
 .selected {
-  color: theme("colors.brand");
+  color: var(--calcite-rating-color-hover, theme("colors.brand"));
 }
 
 .fraction {
@@ -84,13 +90,14 @@ calcite-chip {
 
 .number--average {
   font-weight: bold;
+  color: var(--calcite-rating-average-text-color);
 }
 
 .number--count {
-  color: var(--calcite-color-text-2);
+  color: var(--calcite-rating-count-text-color, var(--calcite-color-text-2));
   font-style: italic;
   &:not(:first-child) {
-    margin-inline-start: var(--calcite-rating-spacing-unit);
+    margin-inline-start: var(--calcite-rating-spacing, var(--calcite-internal-rating-spacing));
   }
 }
 

diff --git a/packages/calcite-components/src/components/rating/resources.ts b/packages/calcite-components/src/components/rating/resources.ts
@@ -1,3 +1,14 @@
+export const CSS = {
+  fieldSet: "fieldset",
+  star: "star",
+  hovered: "hovered",
+  selected: "selected",
+  average: "average",
+  fraction: "fraction",
+  numberAverage: "number--average",
+  numberCount: "number--count",
+};
+
 export const IDS = {
   validationMessage: "validationMessage",
 };
diff --git a/packages/calcite-components/src/components/text-area/text-area.tsx b/packages/calcite-components/src/components/text-area/text-area.tsx
@@ -205,7 +205,6 @@ export class TextArea
   /**
    * When `true`, the component's `value` can be read, but cannot be modified.
    *
-   * @readonly
    * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
    */
   @property({ reflect: true }) readOnly = false;