Merge branch 'epic/7180-component-tokens' into anveshmekala/71890-dat…

…e-picker-month-add-component-tokens

.github/workflows/pr-e2e.yml

@@ -1,5 +1,6 @@
 name: E2E
 on:
+  workflow_dispatch:
   pull_request:
     branches: [main, rc]
 jobs:

.release-please-manifest.json

@@ -1,7 +1,7 @@
 {
-  "packages/calcite-components": "2.5.1",
-  "packages/calcite-components-react": "2.5.1",
+  "packages/calcite-components": "2.6.0",
+  "packages/calcite-components-react": "2.6.0",
   "packages/calcite-design-tokens": "2.1.1",
   "packages/eslint-plugin-calcite-components": "1.1.0",
-  "packages/calcite-components-angular/projects/component-library": "2.5.1"
+  "packages/calcite-components-angular/projects/component-library": "2.6.0"
 }

packages/calcite-components-angular/projects/component-library/CHANGELOG.md

@@ -3,17 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [2.5.2-next.2](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.5.2-next.1...@esri/calcite-components-angular@2.5.2-next.2) (2024-02-21)
+## [2.6.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.5.1...@esri/calcite-components-angular@2.6.0) (2024-02-27)
 
-**Note:** Version bump only for package @esri/calcite-components-angular
-
-## [2.5.2-next.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.5.2-next.0...@esri/calcite-components-angular@2.5.2-next.1) (2024-02-21)
+### Miscellaneous Chores
 
-**Note:** Version bump only for package @esri/calcite-components-angular
+- **@esri/calcite-components-angular:** Synchronize components versions
 
-## [2.5.2-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.5.1...@esri/calcite-components-angular@2.5.2-next.0) (2024-02-20)
+### Dependencies
 
-**Note:** Version bump only for package @esri/calcite-components-angular
+- The following workspace dependencies were updated
+  - dependencies
+    - @esri/calcite-components bumped from ^2.6.0-next.3 to ^2.6.0
 
 ## [2.5.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.5.0...@esri/calcite-components-angular@2.5.1) (2024-02-16)
 

packages/calcite-components-angular/projects/component-library/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components-angular",
-  "version": "2.5.2-next.2",
+  "version": "2.6.0",
   "sideEffects": false,
   "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "description": "A set of Angular components that wrap Esri's Calcite Components.",
@@ -20,7 +20,7 @@
     "@angular/core": ">=16.0.0"
   },
   "dependencies": {
-    "@esri/calcite-components": "^2.5.2-next.2",
+    "@esri/calcite-components": "^2.6.0",
     "tslib": "2.6.2"
   },
   "lerna": {

packages/calcite-components-react/CHANGELOG.md

@@ -3,17 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [2.5.2-next.2](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.5.2-next.1...@esri/calcite-components-react@2.5.2-next.2) (2024-02-21)
+## [2.6.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.5.1...@esri/calcite-components-react@2.6.0) (2024-02-27)
 
-**Note:** Version bump only for package @esri/calcite-components-react
-
-## [2.5.2-next.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.5.2-next.0...@esri/calcite-components-react@2.5.2-next.1) (2024-02-21)
+### Miscellaneous Chores
 
-**Note:** Version bump only for package @esri/calcite-components-react
+- **@esri/calcite-components-react:** Synchronize components versions
 
-## [2.5.2-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.5.1...@esri/calcite-components-react@2.5.2-next.0) (2024-02-20)
+### Dependencies
 
-**Note:** Version bump only for package @esri/calcite-components-react
+- The following workspace dependencies were updated
+  - dependencies
+    - @esri/calcite-components bumped from ^2.6.0-next.3 to ^2.6.0
 
 ## [2.5.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.5.0...@esri/calcite-components-react@2.5.1) (2024-02-16)
 

packages/calcite-components-react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@esri/calcite-components-react",
   "sideEffects": false,
-  "version": "2.5.2-next.2",
+  "version": "2.6.0",
   "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "description": "A set of React components that wrap calcite components",
   "license": "SEE LICENSE.md",
@@ -23,7 +23,7 @@
     "dist/"
   ],
   "dependencies": {
-    "@esri/calcite-components": "^2.5.2-next.2"
+    "@esri/calcite-components": "^2.6.0"
   },
   "peerDependencies": {
     "react": ">=16.7",

packages/calcite-components/CHANGELOG.md

@@ -3,23 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [2.5.2-next.2](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.5.2-next.1...@esri/calcite-components@2.5.2-next.2) (2024-02-21)
+## [2.6.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.5.1...@esri/calcite-components@2.6.0) (2024-02-27)
 
-### Bug Fixes
-
-- only show validation message when status='invalid' ([#8649](https://github.com/Esri/calcite-design-system/issues/8649)) ([7eac8d7](https://github.com/Esri/calcite-design-system/commit/7eac8d7c1e24ab89a3bff67ce9b4f38555023a47))
-
-## [2.5.2-next.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.5.2-next.0...@esri/calcite-components@2.5.2-next.1) (2024-02-21)
-
-### Bug Fixes
-
-- **combobox:** long text truncates on single and single-persist modes ([#8731](https://github.com/Esri/calcite-design-system/issues/8731)) ([8fc42b1](https://github.com/Esri/calcite-design-system/commit/8fc42b164ceacad97ac9153673280ae63638b03c)), closes [#7020](https://github.com/Esri/calcite-design-system/issues/7020)
+### Features
 
-## [2.5.2-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.5.1...@esri/calcite-components@2.5.2-next.0) (2024-02-20)
+- **card-group:** Add Card Group component ([#8749](https://github.com/Esri/calcite-design-system/issues/8749)) ([b012324](https://github.com/Esri/calcite-design-system/commit/b012324fdbf125662f1fb0ca1defc348b08a340d))
+- **tile-group:** Add Tile Group component ([#8806](https://github.com/Esri/calcite-design-system/issues/8806)) ([4f65bdd](https://github.com/Esri/calcite-design-system/commit/4f65bddb521af32047f9f5e6659c1b644291a83d))
 
 ### Bug Fixes
 
-- **table:** Ensure border are correctly applied with complex rowSpan ([#8779](https://github.com/Esri/calcite-design-system/issues/8779)) ([69f05d4](https://github.com/Esri/calcite-design-system/commit/69f05d4f29938b0a3ce2ab3bb806d3d831ebf8d0)), closes [#8778](https://github.com/Esri/calcite-design-system/issues/8778)
+- **combobox:** Long text truncates on single and single-persist modes ([#8731](https://github.com/Esri/calcite-design-system/issues/8731)) ([8fc42b1](https://github.com/Esri/calcite-design-system/commit/8fc42b164ceacad97ac9153673280ae63638b03c))
+- **navigation-logo:** No longer changes icon color when `href` is parsed ([#8830](https://github.com/Esri/calcite-design-system/issues/8830)) ([16d456f](https://github.com/Esri/calcite-design-system/commit/16d456fa113da09daf16d73e819ddf2910cb73d5))
+- Only show validation message when status='invalid' ([#8649](https://github.com/Esri/calcite-design-system/issues/8649)) ([7eac8d7](https://github.com/Esri/calcite-design-system/commit/7eac8d7c1e24ab89a3bff67ce9b4f38555023a47))
+- **preset:** Calcite—color-brand to calcite-color-brand ([#8809](https://github.com/Esri/calcite-design-system/issues/8809)) ([ee2cf4e](https://github.com/Esri/calcite-design-system/commit/ee2cf4e62229753224fd3e54ed7caebe9b097040))
+- **table:** Ensure border are correctly applied with complex rowSpan ([#8779](https://github.com/Esri/calcite-design-system/issues/8779)) ([69f05d4](https://github.com/Esri/calcite-design-system/commit/69f05d4f29938b0a3ce2ab3bb806d3d831ebf8d0))
 
 ## [2.5.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.5.0...@esri/calcite-components@2.5.1) (2024-02-16)
 

packages/calcite-components/calcite-preset.ts

@@ -259,16 +259,16 @@ export default {
         },
         ".focus-normal": {
           outline:
-            "2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite--color-brand)))",
+            "2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite-color-brand)))",
         },
         ".focus-outset": {
           outline:
-            "2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite--color-brand)))",
+            "2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite-color-brand)))",
           "outline-offset": invert("2px", "--calcite-offset-invert-focus"),
         },
         ".focus-inset": {
           outline:
-            "2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite--color-brand)))",
+            "2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite-color-brand)))",
           "outline-offset": invert("-2px", "--calcite-offset-invert-focus"),
         },
         ".focus-outset-danger": {

packages/calcite-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "2.5.2-next.2",
+  "version": "2.6.0",
   "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "description": "Web Components for Esri's Calcite Design System.",
   "main": "dist/index.cjs.js",

packages/calcite-components/readme.md

@@ -17,12 +17,12 @@ The most common approach for loading Calcite Components is to use the version ho
 ```html
 <script
   type="module"
-  src="https://cdn.jsdelivr.net/npm/@esri/calcite-components@2.5.1/dist/calcite/calcite.esm.js"
+  src="https://cdn.jsdelivr.net/npm/@esri/calcite-components@2.6.0/dist/calcite/calcite.esm.js"
 ></script>
 <link
   rel="stylesheet"
   type="text/css"
-  href="https://cdn.jsdelivr.net/npm/@esri/calcite-components@2.5.1/dist/calcite/calcite.css"
+  href="https://cdn.jsdelivr.net/npm/@esri/calcite-components@2.6.0/dist/calcite/calcite.css"
 />
 ```
 

packages/calcite-components/src/assets/styles/_floating-ui.scss

@@ -10,12 +10,12 @@ $floating-ui-transform-right: translateX(-5px);
     transition-property: transform, visibility, opacity;
     opacity: 0;
     border-style: solid;
-    border-width: var(#{$borderWidth});
-    box-shadow: var(#{$boxShadow});
-    border-radius: var(#{$borderRadius});
+    border-width: #{$borderWidth};
+    box-shadow: #{$boxShadow};
+    border-radius: #{$borderRadius};
     z-index: var(--calcite-z-index);
-    background-color: var(#{$backgroundColor});
-    border-color: var(#{$borderColor});
+    background-color: #{$backgroundColor};
+    border-color: #{$borderColor};
   }
 }
 
@@ -26,11 +26,11 @@ $floating-ui-transform-right: translateX(-5px);
 
 @mixin floatingUIElemAnim(
   $selector,
-  $boxShadow: "--calcite-shadow-md",
-  $borderRadius: "--calcite-corner-radius-0",
-  $borderWidth: "--calcite-border-width-none",
-  $borderColor: "--calcite-color-border-3",
-  $backgroundColor: "--calcite-color-foreground-1"
+  $boxShadow: "var(--calcite-shadow-md)",
+  $borderRadius: "var(--calcite-corner-radius-0)",
+  $borderWidth: "var(--calcite-border-width-none)",
+  $borderColor: "var(--calcite-color-border-3)",
+  $backgroundColor: "var(--calcite-color-foreground-1)"
 ) {
   #{$selector} {
     @include floatingUIAnim($boxShadow, $borderRadius, $borderWidth, $borderColor, $backgroundColor);
@@ -81,10 +81,10 @@ $floating-ui-transform-right: translateX(-5px);
   }
 }
 
-@mixin floatingUIContainer($zIndex: "--calcite-z-index-dropdown") {
+@mixin floatingUIContainer($zIndex) {
   display: block;
   position: absolute;
-  z-index: var(#{$zIndex});
+  z-index: #{$zIndex};
 }
 
 @mixin floatingUIWrapper {
@@ -96,12 +96,12 @@ $floating-ui-transform-right: translateX(-5px);
 }
 
 @mixin floatingUIHost(
-  $zIndex: "--calcite-z-index-dropdown",
-  $boxShadow: "--calcite-shadow-md",
-  $borderRadius: "--calcite-corner-radius-0",
-  $borderWidth: "--calcite-border-width-none",
-  $borderColor: "--calcite-color-border-3",
-  $backgroundColor: "--calcite-color-foreground-1"
+  $zIndex: "var(--calcite-z-index-dropdown)",
+  $boxShadow: "var(--calcite-shadow-md)",
+  $borderRadius: "var(--calcite-corner-radius-0)",
+  $borderWidth: "var(--calcite-border-width-none)",
+  $borderColor: "var(--calcite-color-border-3)",
+  $backgroundColor: "var(--calcite-color-foreground-1)"
 ) {
   :host {
     @include floatingUIContainer($zIndex);
@@ -114,15 +114,15 @@ $floating-ui-transform-right: translateX(-5px);
   @include floatingUIArrow($backgroundColor, $borderColor);
 }
 
-@mixin floatingUIArrow($backgroundColor: "--calcite-color-foreground-1", $borderColor: "--calcite-color-border-3") {
+@mixin floatingUIArrow($backgroundColor, $borderColor) {
   .calcite-floating-ui-arrow {
     z-index: var(--calcite-z-index-default);
     position: absolute;
     pointer-events: none;
-    fill: var(#{$backgroundColor});
+    fill: #{$backgroundColor};
   }
 
   .calcite-floating-ui-arrow__stroke {
-    stroke: var(#{$borderColor});
+    stroke: #{$borderColor};
   }
 }

packages/calcite-components/src/assets/styles/_header.scss

@@ -1,17 +1,26 @@
-/* Shared styles for header elements */
-.header {
-  @apply text-color-2
-    fill-color-2
-    m-0
-    flex
-    content-between
-    items-center;
-}
+@mixin header(
+  $textColor: "--calcite-color-text-2",
+  $fontWeight: "--calcite-font-weight-medium",
+  $spacing: "--calcite-spacing-xxs"
+) {
+  /* Shared styles for header elements */
+  .header {
+    color: var(#{$textColor}, var(--calcite-color-text-2));
+    fill: var(#{$textColor}, var(--calcite-color-text-2));
+    margin: 0px;
+    display: flex;
+    align-content: space-between;
+    align-items: center;
+  }
 
-.heading {
-  @apply m-0 p-0 font-medium;
-}
+  .heading {
+    margin: 0px;
+    padding: 0px;
+    font-weight: var(#{$fontWeight}, var(--calcite-font-weight-medium));
+  }
 
-.header .heading {
-  @apply flex-auto p-2;
+  .header .heading {
+    flex: 1 1 auto;
+    padding: var(#{$spacing}, var(--calcite-spacing-xxs));
+  }
 }

packages/calcite-components/src/assets/styles/_sortable.scss

@@ -9,20 +9,17 @@
 
   .calcite-sortable--ghost::before {
     content: "";
-    @apply box-border
-      border
-      border-dashed
-      border-color-brand
-      bg-foreground-2
-      absolute
-      top-0
-      left-0
-      bottom-0
-      right-0
-      z-default;
+    box-sizing: border-box;
+    border-width: var(--calcite-border-width-sm);
+    border-style: dashed;
+    border-color: var(--calcite-color-brand);
+    background-color: var(--calcite-color-foreground-2);
+    position: absolute;
+    inset: 0px;
+    z-index: var(--calcite-z-index);
   }
 
   .calcite-sortable--drag {
-    @apply shadow-2;
+    box-shadow: var(--calcite-shadow-2);
   }
 }