Merge remote-tracking branch 'origin/dev' into benelan/9684-slider-fl…

…oating-point-issue * origin/dev: chore: release next feat(icon): add component tokens (#10062) refactor: fix `FunctionalComponent` return types (#10164) chore: release next fix(input-date-picker): prevent console error when using a lang (#10162) feat(action, action-bar, action-group, action-menu, action-pad): add component tokens (#10058) refactor(stylelint): refactor to and enforce kebab-casing for Sass utilities (#10147) chore: release next test(popover): unskip focusable test (#10138) fix(filter): fix setFocus method (#10149)
Esri · Aug 27, 2024 · 8e936ba · 8e936ba
2 parents 1d3cbf1 + beabb6f
commit 8e936ba
Show file tree

Hide file tree

Showing 74 changed files with 840 additions and 441 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/calcite-components-angular/projects/component-library/CHANGELOG.md b/packages/calcite-components-angular/projects/component-library/CHANGELOG.md
@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.12.0-next.33](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.12.0-next.32...@esri/calcite-components-angular@2.12.0-next.33) (2024-08-27)
+
+**Note:** Version bump only for package @esri/calcite-components-angular
+
+## [2.12.0-next.32](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.12.0-next.31...@esri/calcite-components-angular@2.12.0-next.32) (2024-08-27)
+
+**Note:** Version bump only for package @esri/calcite-components-angular
+
+## [2.12.0-next.31](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.12.0-next.30...@esri/calcite-components-angular@2.12.0-next.31) (2024-08-23)
+
+**Note:** Version bump only for package @esri/calcite-components-angular
+
 ## [2.12.0-next.30](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.12.0-next.29...@esri/calcite-components-angular@2.12.0-next.30) (2024-08-22)
 
 **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
@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components-angular",
-  "version": "2.12.0-next.30",
+  "version": "2.12.0-next.33",
   "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.12.0-next.30",
+    "@esri/calcite-components": "2.12.0-next.33",
     "tslib": "2.6.3"
   },
   "peerDependencies": {

diff --git a/packages/calcite-components-react/CHANGELOG.md b/packages/calcite-components-react/CHANGELOG.md
@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.12.0-next.33](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.12.0-next.32...@esri/calcite-components-react@2.12.0-next.33) (2024-08-27)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
+## [2.12.0-next.32](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.12.0-next.31...@esri/calcite-components-react@2.12.0-next.32) (2024-08-27)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
+## [2.12.0-next.31](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.12.0-next.30...@esri/calcite-components-react@2.12.0-next.31) (2024-08-23)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
 ## [2.12.0-next.30](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.12.0-next.29...@esri/calcite-components-react@2.12.0-next.30) (2024-08-22)
 
 **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": "2.12.0-next.30",
+  "version": "2.12.0-next.33",
   "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.12.0-next.30"
+    "@esri/calcite-components": "2.12.0-next.33"
   },
   "peerDependencies": {
     "react": ">=16.7",

diff --git a/packages/calcite-components/.stylelintrc.json b/packages/calcite-components/.stylelintrc.json
@@ -40,6 +40,34 @@
       {
         "ignoreTypes": ["/^calcite-/"]
       }
+    ],
+    "scss/at-function-pattern": [
+      "^([a-z][a-z0-9]*)(-[a-z0-9]+)*$",
+      {
+        "message": "Name should be kebab-cased.",
+        "severity": "error"
+      }
+    ],
+    "scss/dollar-variable-pattern": [
+      "^([a-z][a-z0-9]*)(-[a-z0-9]+)*$",
+      {
+        "message": "Name should be kebab-cased.",
+        "severity": "error"
+      }
+    ],
+    "scss/at-mixin-pattern": [
+      "^([a-z][a-z0-9]*)(-[a-z0-9]+)*$",
+      {
+        "message": "Name should be kebab-cased.",
+        "severity": "error"
+      }
+    ],
+    "scss/percent-placeholder-pattern": [
+      "^([a-z][a-z0-9]*)(-[a-z0-9]+)*$",
+      {
+        "message": "Name should be kebab-cased.",
+        "severity": "error"
+      }
     ]
   }
 }
diff --git a/packages/calcite-components/CHANGELOG.md b/packages/calcite-components/CHANGELOG.md
@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.12.0-next.33](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.12.0-next.32...@esri/calcite-components@2.12.0-next.33) (2024-08-27)
+
+### Features
+
+- **icon:** add component tokens ([#10062](https://github.com/Esri/calcite-design-system/issues/10062)) ([34d5689](https://github.com/Esri/calcite-design-system/commit/34d568971d31c1f915c37218ebf4cf8b018a56a1)), closes [#7180](https://github.com/Esri/calcite-design-system/issues/7180) [#8549](https://github.com/Esri/calcite-design-system/issues/8549)
+
+## [2.12.0-next.32](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.12.0-next.31...@esri/calcite-components@2.12.0-next.32) (2024-08-27)
+
+### Features
+
+- **action, action-bar, action-group, action-menu, action-pad:** add component tokens ([#10058](https://github.com/Esri/calcite-design-system/issues/10058)) ([de96c24](https://github.com/Esri/calcite-design-system/commit/de96c24892f9d5467b037b837442c3cc346eb16d)), closes [#7180](https://github.com/Esri/calcite-design-system/issues/7180)
+
+### Bug Fixes
+
+- **input-date-picker:** prevent console error when using a lang ([#10162](https://github.com/Esri/calcite-design-system/issues/10162)) ([e7bf604](https://github.com/Esri/calcite-design-system/commit/e7bf604c9cb61f875b1fa42a223d29a46e153595)), closes [#9387](https://github.com/Esri/calcite-design-system/issues/9387)
+
+## [2.12.0-next.31](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.12.0-next.30...@esri/calcite-components@2.12.0-next.31) (2024-08-23)
+
+### Bug Fixes
+
+- **filter:** fix setFocus method ([#10149](https://github.com/Esri/calcite-design-system/issues/10149)) ([f4a959a](https://github.com/Esri/calcite-design-system/commit/f4a959ad07c27eeb8f9171e1eaa38e84fa9e41b1)), closes [#10136](https://github.com/Esri/calcite-design-system/issues/10136)
+
 ## [2.12.0-next.30](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.12.0-next.29...@esri/calcite-components@2.12.0-next.30) (2024-08-22)
 
 ### Bug Fixes

diff --git a/packages/calcite-components/calcite-preset.ts b/packages/calcite-components/calcite-preset.ts
@@ -68,7 +68,7 @@ export default {
         3: "var(--calcite-color-text-3)",
         inverse: "var(--calcite-color-text-inverse)",
         link: "var(--calcite-color-text-link)",
-        icon: "var(--calcite-ui-icon-color)",
+        icon: "var(--calcite-icon-color, var(--calcite-ui-icon-color, currentColor))",
       },
       transparent: "transparent",
     },

diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "2.12.0-next.30",
+  "version": "2.12.0-next.33",
   "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "description": "Web Components for Esri's Calcite Design System.",
   "main": "dist/index.cjs.js",

diff --git a/packages/calcite-components/src/assets/styles/_animation.scss b/packages/calcite-components/src/assets/styles/_animation.scss
@@ -115,9 +115,9 @@
 }
 
 /* helper to properly scale internal durations */
-@function scaleDuration($animationVar, $factor) {
+@function scale-duration($animation-var, $factor) {
   @return calc(
-    calc(var($animationVar) / var(--calcite-internal-duration-factor)) *
+    calc(var($animation-var) / var(--calcite-internal-duration-factor)) *
       calc($factor / var(--calcite-internal-duration-factor))
   );
 }
diff --git a/packages/calcite-components/src/assets/styles/_floating-ui.scss b/packages/calcite-components/src/assets/styles/_floating-ui.scss
@@ -1,18 +1,18 @@
 $floating-ui-transition-offset: 5px;
 
-@mixin floatingUIOffsetBottom {
+@mixin floating-ui-offset-bottom {
   inset-block-start: -$floating-ui-transition-offset;
 }
 
-@mixin floatingUIOffsetTop {
+@mixin floating-ui-offset-top {
   inset-block-start: $floating-ui-transition-offset;
 }
 
-@mixin floatingUIOffsetLeft {
+@mixin floating-ui-offset-left {
   left: $floating-ui-transition-offset;
 }
 
-@mixin floatingUIOffsetRight {
+@mixin floating-ui-offset-right {
   left: -$floating-ui-transition-offset;
 }
 
@@ -21,7 +21,7 @@ $floating-ui-transition-offset: 5px;
   --calcite-floating-ui-z-index: theme("zIndex.dropdown");
 }
 
-@mixin floatingUIAnim {
+@mixin floating-ui-anim {
   .calcite-floating-ui-anim {
     position: relative;
     transition: var(--calcite-floating-ui-transition);
@@ -32,87 +32,87 @@ $floating-ui-transition-offset: 5px;
   }
 }
 
-@mixin floatingUIAnimActive {
+@mixin floating-ui-anim-active {
   opacity: 1;
   inset-block: 0;
   left: 0;
 }
 
-@mixin floatingUIElemAnim($selector) {
+@mixin floating-ui-elem-anim($selector) {
   #{$selector} {
-    @include floatingUIAnim();
+    @include floating-ui-anim();
 
     &[data-placement^="bottom"] .calcite-floating-ui-anim {
-      @include floatingUIOffsetBottom();
+      @include floating-ui-offset-bottom();
     }
 
     &[data-placement^="top"] .calcite-floating-ui-anim {
-      @include floatingUIOffsetTop();
+      @include floating-ui-offset-top();
     }
 
     &[data-placement^="left"] .calcite-floating-ui-anim {
-      @include floatingUIOffsetLeft();
+      @include floating-ui-offset-left();
     }
 
     &[data-placement^="right"] .calcite-floating-ui-anim {
-      @include floatingUIOffsetRight();
+      @include floating-ui-offset-right();
     }
 
     &[data-placement] .calcite-floating-ui-anim--active {
-      @include floatingUIAnimActive();
+      @include floating-ui-anim-active();
     }
   }
 }
 
-@mixin floatingUIHostAnim {
-  @include floatingUIAnim();
+@mixin floating-ui-host-anim {
+  @include floating-ui-anim();
 
   :host([data-placement^="bottom"]) .calcite-floating-ui-anim {
-    @include floatingUIOffsetBottom();
+    @include floating-ui-offset-bottom();
   }
 
   :host([data-placement^="top"]) .calcite-floating-ui-anim {
-    @include floatingUIOffsetTop();
+    @include floating-ui-offset-top();
   }
 
   :host([data-placement^="left"]) .calcite-floating-ui-anim {
-    @include floatingUIOffsetLeft();
+    @include floating-ui-offset-left();
   }
 
   :host([data-placement^="right"]) .calcite-floating-ui-anim {
-    @include floatingUIOffsetRight();
+    @include floating-ui-offset-right();
   }
 
   :host([data-placement]) .calcite-floating-ui-anim--active {
-    @include floatingUIAnimActive();
+    @include floating-ui-anim-active();
   }
 }
 
-@mixin floatingUIContainer() {
+@mixin floating-ui-container() {
   display: block;
   position: absolute;
   z-index: var(--calcite-floating-ui-z-index);
 }
 
-@mixin floatingUIWrapper {
+@mixin floating-ui-wrapper {
   visibility: hidden;
 }
 
-@mixin floatingUIWrapperActive {
+@mixin floating-ui-wrapper-active {
   visibility: visible;
 }
 
-@mixin floatingUIHost() {
+@mixin floating-ui-host() {
   :host {
-    @include floatingUIContainer();
+    @include floating-ui-container();
   }
 
-  @include floatingUIHostAnim();
+  @include floating-ui-host-anim();
 
-  @include calciteHydratedHidden();
+  @include calcite-hydrated-hidden();
 }
 
-@mixin floatingUIArrow {
+@mixin floating-ui-arrow {
   .calcite-floating-ui-arrow {
     @apply -z-default
     absolute

diff --git a/packages/calcite-components/src/assets/styles/global.scss b/packages/calcite-components/src/assets/styles/global.scss
@@ -20,7 +20,6 @@
   --calcite-border-radius-base: 0;
   --calcite-offset-invert-focus: 0; // should be 0 or 1
   --calcite-panel-width-multiplier: 1;
-  --calcite-ui-icon-color: currentColor;
 
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;

diff --git a/packages/calcite-components/src/assets/styles/includes.scss b/packages/calcite-components/src/assets/styles/includes.scss
@@ -90,7 +90,7 @@
 }
 
 // mixin to provide default invisibility and disabling of pointer events for components.
-@mixin calciteHydratedHidden() {
+@mixin calcite-hydrated-hidden() {
   :host([calcite-hydrated-hidden]) {
     visibility: hidden !important; // 'important' is being used here to temporarily handle precendence of visibility set with calcite-hydrated. Do not follow this pattern. See #991.
     pointer-events: none;
@@ -107,7 +107,7 @@
   }
 }
 
-@mixin xButton() {
+@mixin x-button() {
   :host([scale="s"]) {
     .x-button {
       inline-size: theme("spacing.4");