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

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

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

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.7.0-next.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.7.0-next.0...@esri/calcite-components-angular@2.7.0-next.1) (2024-02-29)
+
+**Note:** Version bump only for package @esri/calcite-components-angular
+
+## [2.7.0-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.6.0...@esri/calcite-components-angular@2.7.0-next.0) (2024-02-28)
+
+**Note:** Version bump only for package @esri/calcite-components-angular
+
 ## [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)
 
 ### Miscellaneous Chores

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

@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components-angular",
-  "version": "2.6.0",
+  "version": "2.7.0-next.1",
   "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.6.0",
+    "@esri/calcite-components": "^2.7.0-next.1",
     "tslib": "2.6.2"
   },
   "lerna": {

packages/calcite-components-react/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.7.0-next.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.7.0-next.0...@esri/calcite-components-react@2.7.0-next.1) (2024-02-29)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
+## [2.7.0-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.6.0...@esri/calcite-components-react@2.7.0-next.0) (2024-02-28)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
 ## [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)
 
 ### Miscellaneous Chores

packages/calcite-components-react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@esri/calcite-components-react",
   "sideEffects": false,
-  "version": "2.6.0",
+  "version": "2.7.0-next.1",
   "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.6.0"
+    "@esri/calcite-components": "^2.7.0-next.1"
   },
   "peerDependencies": {
     "react": ">=16.7",

packages/calcite-components/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.7.0-next.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.7.0-next.0...@esri/calcite-components@2.7.0-next.1) (2024-02-29)
+
+### Bug Fixes
+
+- **card:** Do not apply text color to slotted footer items ([#8839](https://github.com/Esri/calcite-design-system/issues/8839)) ([30a2068](https://github.com/Esri/calcite-design-system/commit/30a206867d5f4b19d9cdfcc540f0286405b6d984)), closes [#8855](https://github.com/Esri/calcite-design-system/issues/8855)
+
+### Performance Improvements
+
+- update `transition-default` Tailwind util to only target common, animatable properties ([#8797](https://github.com/Esri/calcite-design-system/issues/8797)) ([f4d016b](https://github.com/Esri/calcite-design-system/commit/f4d016b0998f360f376c03705c98bd6c399143f6)), closes [#8571](https://github.com/Esri/calcite-design-system/issues/8571)
+
+## [2.7.0-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.6.0...@esri/calcite-components@2.7.0-next.0) (2024-02-28)
+
+### Features
+
+- **tabs:** make component responsive ([#8616](https://github.com/Esri/calcite-design-system/issues/8616)) ([83a2ef4](https://github.com/Esri/calcite-design-system/commit/83a2ef47157f88007af0ae528758fb5952a3f3bc)), closes [#6689](https://github.com/Esri/calcite-design-system/issues/6689)
+
 ## [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)
 
 ### Features

packages/calcite-components/calcite-preset.ts

@@ -280,7 +280,9 @@ export default {
           "outline-offset": invert("-2px", "--calcite-offset-invert-focus"),
         },
         ".transition-default": {
-          transition: "all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s",
+          transition:
+            // we explicitly list these properties to avoid animating properties that are not intended to be animated and that might affect performance
+            "background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s",
         },
       };
       addUtilities(newUtilities);

packages/calcite-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "2.6.0",
+  "version": "2.7.0-next.1",
   "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/src/components.d.ts

@@ -805,10 +805,6 @@ export namespace Components {
           * Accessible name for the component.
          */
         "label": string;
-        /**
-          * Specifies the size of the component. Child `calcite-card`s inherit the component's value.
-         */
-        "scale": Scale;
         /**
           * Specifies the component's selected items.
           * @readonly
@@ -8191,10 +8187,6 @@ declare namespace LocalJSX {
           * Emits when the component's selection changes and the `selectionMode` is not `none`.
          */
         "onCalciteCardGroupSelect"?: (event: CalciteCardGroupCustomEvent<void>) => void;
-        /**
-          * Specifies the size of the component. Child `calcite-card`s inherit the component's value.
-         */
-        "scale"?: Scale;
         /**
           * Specifies the component's selected items.
           * @readonly

packages/calcite-components/src/components/action-group/action-group.scss

@@ -15,9 +15,9 @@
  * @prop --calcite-action-group-action-menu-text-color: The text color of the sub-component.
  * @prop --calcite-action-group-action-text-color: defines the text color of an action sub-component inside the component.
  * @prop --calcite-action-group-background-color: defines the background color of the component.
- * @prop --calcite-action-group-columns: *deprecated* Sets number of grid-template-columns when the `layout` property is `"grid"`.
- * @prop --calcite-action-group-gap: *deprecated* Sets the gap (gutters) between rows and columns when the `layout` property is `"grid"`.
- * @prop --calcite-action-group-padding: *deprecated* Sets the padding when the `layout` property is `"grid"`.
+ * @prop --calcite-action-group-columns: [Deprecated]  Sets number of grid-template-columns when the `layout` property is `"grid"`.
+ * @prop --calcite-action-group-gap: [Deprecated]  Sets the gap (gutters) between rows and columns when the `layout` property is `"grid"`.
+ * @prop --calcite-action-group-padding: [Deprecated]  Sets the padding when the `layout` property is `"grid"`.
  * @prop --calcite-internal-action-group-columns: Sets number of grid-template-columns when the `layout` property is `"grid"`.
  * @prop --calcite-internal-action-group-gap, var(te-internal-action-group-gap: Sets the gap (gutters) between rows and columns when the `layout` property is `"grid"`).
  *

packages/calcite-components/src/components/action/action.scss

@@ -5,6 +5,9 @@
  *
  * @prop --calcite-action-background-color: Specifies the background color of the component.
  * @prop --calcite-action-indicator-color: Specifies the color of the component's indicator.
+ * @prop --calcite-action-loader-color-one-third: Specifies the starting color of the loader
+ * @prop --calcite-action-loader-color-start: Specifies the starting color of the loader
+ * @prop --calcite-action-loader-color-two-thirds: Specifies the starting color of the loader
  * @prop --calcite-action-text-color: Specifies the text color of the component.
  *
  */
@@ -27,7 +30,7 @@
       rounded-full;
     inset-block-end: calc(-0.275rem);
     inset-inline-end: calc(-0.275rem);
-    background-color: var(--calcite-action-indicator-color);
+    background-color: var(--calcite-action-indicator-color, var(--calcite-color-brand));
   }
 }
 
@@ -238,9 +241,9 @@ button {
 }
 
 calcite-loader {
-  //TODO: sub-component tokens
+  --calcite-loader-color-one-third: var(--calcite-action-loader-color-one-third);
+  --calcite-loader-color-start: var(--calcite-action-loader-color-start);
+  --calcite-loader-color-two-thirds: var(--calcite-action-loader-color-two-thirds);
 }
 
-calcite-icon {
-  //TODO: sub-component tokens
-}
+@include base-component();

packages/calcite-components/src/components/action/resources.ts

@@ -1,12 +1,16 @@
 export const CSS = {
+  actionIndicator: "action-indicator",
   button: "button",
-  buttonTextVisible: "button--text-visible",
   buttonCompact: "button--compact",
-  indicatorText: "indicator-text",
+  buttonTextVisible: "button--text-visible",
   iconContainer: "icon-container",
+  indicatorText: "indicator-text",
+  indicatorWithIcon: "indicator-with-icon",
+  indicatorWithoutIcon: "indicator-without-icon",
+  slotContainer: "slot-container",
+  slotContainerHidden: "slot-container--hidden",
   textContainer: "text-container",
   textContainerVisible: "text-container--visible",
-  actionIndicator: "action-indicator",
 };
 
 export const SLOTS = {

packages/calcite-components/src/components/block/block.scss

@@ -1,22 +1,24 @@
 /**
-* CSS Custom Properties
-*
-* These properties can be overridden using the component's tag as selector.
-*
-* @prop --calcite-block-action-menu-border-color: The border color of the sub-component.
-* @prop --calcite-block-action-menu-text-color: The text color of the sub-component.
-* @prop --calcite-block-padding: Specifies the padding of the block `default` slot.
-*
-* @prop --calcite-block-handle-icon-color: Specifies the icon color of the sub-component.
-* @prop --calcite-block-handle-icon-color-hover: Specifies the icon color of the sub-component when in hover state.
-* @prop --calcite-block-handle-icon-color-focus: Specifies the icon color of the sub-component when in focus state.
-* @prop --calcite-block-handle-icon-color-selected: Specifies the icon color of the sub-component when selected.
-
-* @prop --calcite-block-handle-background-color: Specifies the background color of the sub-component.
-* @prop --calcite-block-handle-background-color-hover: Specifies the background color of the sub-component when in hover state.
-* @prop --calcite-block-handle-background-color-focus: Specifies the background color of the sub-component when in focus state.
-* @prop --calcite-block-handle-background-color-selected: Specifies the background color of the sub-component when selected.
-*/
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-block-action-menu-border-color: The border color of the sub-component.
+ * @prop --calcite-block-action-menu-text-color: The text color of the sub-component.
+ * @prop --calcite-block-handle-background-color-focus: Specifies the background color of the sub-component when in focus state.
+ * @prop --calcite-block-handle-background-color-hover: Specifies the background color of the sub-component when in hover state.
+ * @prop --calcite-block-handle-background-color-selected: Specifies the background color of the sub-component when selected.
+ * @prop --calcite-block-handle-background-color: Specifies the background color of the sub-component.
+ * @prop --calcite-block-handle-icon-color-focus: Specifies the icon color of the sub-component when in focus state.
+ * @prop --calcite-block-handle-icon-color-hover: Specifies the icon color of the sub-component when in hover state.
+ * @prop --calcite-block-handle-icon-color-selected: Specifies the icon color of the sub-component when selected.
+ * @prop --calcite-block-handle-icon-color: Specifies the icon color of the sub-component.
+ * @prop --calcite-block-loader-color-one-third: Specifies the starting color of the loader
+ * @prop --calcite-block-loader-color-start: Specifies the starting color of the loader
+ * @prop --calcite-block-loader-color-two-thirds: Specifies the starting color of the loader
+ * @prop --calcite-block-padding: Specifies the padding of the block `default` slot.
+ *
+ */
 
 :host {
   @extend %component-host;
@@ -189,4 +191,10 @@ calcite-handle {
   --calcite-handle-background-color-selected: var(--calcite-block-handle-background-color-selected);
 }
 
+calcite-loader {
+  --calcite-loader-color-one-third: var(--calcite-block-loader-color-one-third);
+  --calcite-loader-color-start: var(--calcite-block-loader-color-start);
+  --calcite-loader-color-two-thirds: var(--calcite-block-loader-color-two-thirds);
+}
+
 @include base-component();

packages/calcite-components/src/components/button/button.scss

@@ -27,6 +27,11 @@
  * @prop --calcite-button-border-color-hover: Specifies border colors of the component when in hover state.
  * @prop --calcite-button-border-color-focus: Specifies border colors of the component when in focus state.
  * @prop --calcite-button-border-color-active: Specifies border colors of the component when in active state.
+ *
+ * @prop --calcite-button-loader-color-one-third: defines the color of the loader when 1/3 complete.
+ * @prop --calcite-button-loader-color-start: defines the color of the loader at start and end.
+ * @prop --calcite-button-loader-color-two-thirds: defines the color of the loader when 2/3 complete.
+ *
  */
 
 :host {
@@ -839,4 +844,10 @@
   --calcite-button-padding-x-internal: theme("padding.11");
 }
 
+calcite-loader {
+  --calcite-loader-bar-color-one-third: var(--calcite-button-loader-bar-color-one-third);
+  --calcite-loader-bar-color-start: var(--calcite-button-loader-bar-color-start);
+  --calcite-loader-bar-color-two-thirds: var(--calcite-button-loader-bar-color-two-thirds);
+}
+
 @include base-component();

packages/calcite-components/src/components/card-group/card-group.tsx

@@ -19,7 +19,7 @@ import {
   InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
-import { Scale, SelectionMode } from "../interfaces";
+import { SelectionMode } from "../interfaces";
 import {
   LoadableComponent,
   componentLoaded,
@@ -57,9 +57,6 @@ export class CardGroup implements InteractiveComponent, LoadableComponent {
   /** Accessible name for the component. */
   @Prop() label!: string;
 
-  /** Specifies the size of the component. Child `calcite-card`s inherit the component's value. */
-  @Prop({ reflect: true }) scale: Scale = "m";
-
   /** Specifies the selection mode of the component. */
   @Prop({ reflect: true }) selectionMode: Extract<
     "multiple" | "single" | "single-persist" | "none",

packages/calcite-components/src/components/card/card.scss

@@ -3,18 +3,23 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
+ *
+ * @prop --calcite-card-accent-color-selected: Specifies the accent color of the component when `selected`.
  * @prop --calcite-card-background-color: Specifies the background color of the component.
  * @prop --calcite-card-border-color: Specifies the border color of the component.
- * @prop --calcite-card-shadow: Specifies the shadow of the component.
  * @prop --calcite-card-corner-radius: Specifies the corner radius of the component.
- * @prop --calcite-card-accent-color-selected: Specifies the accent color of the component when `selected`.
- * @prop --calcite-card-selection-background-color: Specifies the background color of the component's selection element.
- * @prop --calcite-card-selection-background-color-hover: Specifies the background color of the component's selection element when hovered.
  * @prop --calcite-card-selection-background-color-active: Specifies the background color of the component's selection element when active.
+ * @prop --calcite-card-selection-background-color-hover: Specifies the background color of the component's selection element when hovered.
  * @prop --calcite-card-selection-background-color-selected: Specifies the icon color of the component's selection element when `selected`.
- * @prop --calcite-card-selection-icon-color: Specifies the icon color of the component's selection element.
+ * @prop --calcite-card-selection-background-color: Specifies the background color of the component's selection element.
  * @prop --calcite-card-selection-icon-color-hover: Specifies the icon color of the component's selection element when hovered.
  * @prop --calcite-card-selection-icon-color-selected: Specifies the icon color of the component's selection element when `selected`.
+ * @prop --calcite-card-selection-icon-color: Specifies the icon color of the component's selection element.
+ * @prop --calcite-card-shadow: Specifies the shadow of the component.
+ 
+ * @prop --calcite-card-loader-color-one-third: Specifies the starting color of the loader
+ * @prop --calcite-card-loader-color-start: Specifies the starting color of the loader
+ * @prop --calcite-card-loader-color-two-thirds: Specifies the starting color of the loader
  *
  */
 
@@ -82,13 +87,6 @@
   }
 }
 
-.footer {
-  @apply flex mt-auto flex-row content-between justify-between;
-  padding-inline: var(--calcite-spacing-md);
-  padding-block-start: var(--calcite-spacing-xxs);
-  padding-block-end: var(--calcite-spacing-md);
-}
-
 .card-content {
   @apply h-auto text-n2-wrap;
 }
@@ -140,12 +138,10 @@
 @include slotted("footer-start", "*") {
   @apply text-n2-wrap self-center;
   margin-inline-end: auto;
-  color: var(--calcite-color-text-3);
 }
 
 @include slotted("footer-end", "*") {
   @apply text-n2-wrap self-center;
-  color: var(--calcite-color-text-3);
 }
 
 .checkbox-wrapper-deprecated {
@@ -220,5 +216,11 @@ slot[name="footer-end"]::slotted(*) {
   @apply flex gap-1;
 }
 
+calcite-loader {
+  --calcite-loader-color-one-third: var(--calcite-card-loader-color-one-third);
+  --calcite-loader-color-start: var(--calcite-card-loader-color-start);
+  --calcite-loader-color-two-thirds: var(--calcite-card-loader-color-two-thirds);
+}
+
 @include base-component();
 @include disabled();