feat(alert): add component tokens #10218

aPreciado88 · 2024-09-04T19:35:37Z

Related Issue: #7180

Summary

Add alert component tokens.

--calcite-alert-background-color: Specifies the component's background color.
--calcite-alert-corner-radius: Specifies the component's border radius.
--calcite-alert-shadow: Specifies the component's shadow.

jcfranco · 2024-09-05T16:34:15Z

Where do the following come into play?

--calcite-alert-background-color-hover
--calcite-alert-background-color-pressed

☝️ the component background doesn't currently change its background on hover or press.

--calcite-alert-text-color-hover: Specifies the component's text color when hovered.

☝️ the component text doesn't currently change its text color on hover.

--calcite-alert-border-color: Specifies the component's border color.
--calcite-alert-border-color-hover: Specifies the component's border color when hovered.

☝️ the component uses border for its indicator, but it doesn't own a border. Also, the border/indicator doesn't change on hover.

aPreciado88 · 2024-09-05T21:52:55Z

@jcfranco I updated the tokens proposal 🚀
cc @alisonailea

jcfranco · 2024-09-06T17:03:42Z

Updated token set is looking good!

I think the text color prop may need to be split into 2 for the header and description since they both use different colors by default (text-2 and text-3). Just noticed the same thing in accordion-item. cc @alisonailea

alisonailea

Just a few questions

alisonailea · 2024-09-06T17:33:17Z

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

 */

 $border-style: 1px solid var(--calcite-color-border-3);

 :host {
-  --calcite-alert-edge-distance: theme("spacing.8");
-  --calcite-alert-dismiss-progress-background: var(--calcite-color-transparent-tint);
+  --calcite-internal-alert-edge-distance: theme("spacing.8");


This should be alert-size not edge-distance

alert-size might not be accurate. This represents the distance used to place the alert along the page.

I updated this to --calcite-internal-alert-edge-distance

alisonailea · 2024-09-06T17:34:37Z

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

@@ -68,13 +72,13 @@ $border-style: 1px solid var(--calcite-color-border-3);
  @apply flex flex-col items-center justify-center p-0;
  margin-block: auto;
  margin-inline-end: auto;
-  padding-inline-start: var(--calcite-alert-spacing-token-large);
+  padding-inline-start: var(--calcite-internal-alert-spacing-token-large);


Why does this token exist? Usually component tokens don't have scale

I'm not sure of why this token is there, I renamed it to internal because it looked like it's not something that will be set by users. Should I get rid of it and apply the spacing directly to the classes where this token is being used?

It might help give visibility into what's happening.

alisonailea · 2024-09-06T17:35:05Z

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

@@ -129,7 +133,7 @@ $border-style: 1px solid var(--calcite-color-border-3);
    block;
    block-size: 2px;
    content: "";
-    background-color: var(--calcite-alert-dismiss-progress-background);
+    background-color: var(--calcite-internal-alert-dismiss-progress-background);


This should not be internal

Should this one be a token that users can set?

I think so. @SkyeSeitz is there an cross-component dismiss-progress visual pattern we should be tokenizing? I think yes.

I added this token --calcite-alert-dismiss-progress-background-color and got rid of --calcite-internal-alert-dismiss-progress-background.

alisonailea · 2024-09-06T17:35:44Z

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

@@ -140,8 +144,8 @@ $border-style: 1px solid var(--calcite-color-border-3);

 .text-container {
  @apply box-border flex flex-auto min-w-0 flex-col break-words;
-  padding-block: var(--calcite-alert-spacing-token-small);
-  padding-inline: var(--calcite-alert-spacing-token-large) var(--calcite-alert-spacing-token-small);
+  padding-block: var(--calcite-internal-alert-spacing-token-small);


Rename these to not use small medium

There's currently small and large. They are both assigned different theme spacing based on the selected scale.

--calcite-internal-alert-spacing-token-small: theme("spacing.2"); --calcite-internal-alert-spacing-token-large: theme("spacing.3");

What names should be applied instead of small and large?

alisonailea · 2024-09-06T17:36:20Z

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

-  --calcite-alert-spacing-token-large: theme("spacing.3");
-  --calcite-alert-footer-height: theme("height.8");
-  --calcite-alert-footer-divider-gap: theme("spacing[0.5]");
+  inline-size: var(--calcite-alert-width, 40em);


I think this should be 40rem not em

alisonailea · 2024-09-06T17:38:09Z

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

@@ -4,13 +4,17 @@
 * These properties can be overridden using the component's tag as selector.
 *
 * @prop --calcite-alert-width: Specifies the width of the component.
+ * @prop --calcite-alert-background-color: Specifies the component's background color.
+ * @prop --calcite-alert-text-color: Specifies the component's text color.
+ * @prop --calcite-alert-border-radius: Specifies the component's border radius.


We use corner-radius instead of border-radius

alisonailea · 2024-09-06T17:38:27Z

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

@@ -4,13 +4,17 @@
 * These properties can be overridden using the component's tag as selector.
 *
 * @prop --calcite-alert-width: Specifies the width of the component.
+ * @prop --calcite-alert-background-color: Specifies the component's background color.


Where are these tokens applied?

--calcite-alert-width is being applied in .container:
inline-size: var(--calcite-alert-width, auto);

and in scales:
inline-size: var(--calcite-alert-width, 40rem);

--calcite-alert-background-color is being applied in .container:
background-color: var(--calcite-alert-background-color, var(--calcite-color-foreground-1));

alisonailea

Let's remove the close and dismiss-progress tokens for now

alisonailea · 2024-09-11T22:33:21Z

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

+ * @prop --calcite-alert-message-text-color: Specifies the component's message text color.
+ * @prop --calcite-alert-corner-radius: Specifies the component's border radius.
+ * @prop --calcite-alert-close-background-color-hover: Specifies the component's close button background color when hovered or focused.
+ * @prop --calcite-alert-close-background-color-pressed: Specifies the component's close button background color when active.


remove component specific close tokens. Upcoming updates will consolidate these all into

--calcite-close-icon-color --calcite-close-icon-color-hover --calcite-close-icon-color-pressed --calcite-close-background-color --calcite-close-background-color-hover --calcite-close-background-color-pressed

per conversation with @ashetland

alisonailea · 2024-09-11T22:35:12Z

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

+ * @prop --calcite-alert-corner-radius: Specifies the component's border radius.
+ * @prop --calcite-alert-close-background-color-hover: Specifies the component's close button background color when hovered or focused.
+ * @prop --calcite-alert-close-background-color-pressed: Specifies the component's close button background color when active.
+ * @prop --calcite-alert-dismiss-progress-background-color: Specifies the component's dismiss progress background color.


similar to close I think the solution here is to consolidate the design pattern across components...
i.e.

--calcite-dismiss-progress-background-color

aPreciado88 · 2024-09-13T23:14:14Z

@alisonailea I updated the PR with the requested updates. I'm having issues testing the tokens that are commented in alert.e2e. Could you please take a look?

alisonailea · 2024-09-16T18:02:28Z

packages/calcite-components/src/components/alert/alert.e2e.ts

@@ -594,4 +594,37 @@ describe("calcite-alert", () => {
  describe("translation support", () => {
    t9n("calcite-alert");
  });
+
+  describe("theme", () => {
+    themed(


break this into a "default" alert test followed by additional tests to cover tokens only effected by certain props. I.E. Slotted content styles

alisonailea · 2024-09-16T18:03:23Z

packages/calcite-components/src/components/alert/alert.e2e.ts

+      `,
+      {
+        /*"--calcite-alert-width": {
+        shadowSelector: `.${CSS.container}`,


if you search for --calcite-alert-width in the SCSS you will see it only applies to :host so you can remove the shadowSelector here. Either explicitly set selector: "calcite-alert" or take it off completely.

alisonailea · 2024-09-16T18:03:43Z

packages/calcite-components/src/components/alert/alert.e2e.ts

+          targetProp: "backgroundColor",
+        },
+        /*"--calcite-alert-title-text-color": {
+          shadowSelector: `.${CSS.textContainer}`,


your selector should target the slot="title"

I updated this test but it's still throwing an error.

"--calcite-alert-title-text-color": { selector: [slot="${SLOTS.title}"], targetProp: "color", },

alisonailea · 2024-09-16T18:04:00Z

packages/calcite-components/src/components/alert/alert.e2e.ts

+          targetProp: "color",
+        },*/
+        /*"--calcite-alert-message-text-color": {
+        shadowSelector: `.${CSS.textContainer}`,


same as title this should target selector: [slot="message"]

aPreciado88 · 2024-09-16T20:13:41Z

@alisonailea I updated with the requested changes, these tokens --calcite-alert-title-text-color and --calcite-alert-message-text-color are still throwing an error in alert.e2e. Could you please take a look?

jcfranco

❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗
❗⚠️❗❗❗⚠️⚠️⚠️⚠️❗⚠️⚠️⚠️⚠️⚠️❗⚠️❗❗❗⚠️❗⚠️❗
❗⚠️❗❗❗⚠️❗❗❗❗❗❗⚠️❗❗❗⚠️⚠️❗⚠️⚠️❗⚠️❗
❗⚠️❗❗❗⚠️❗⚠️⚠️❗❗❗⚠️❗❗❗⚠️❗⚠️❗⚠️❗⚠️❗
❗⚠️❗❗❗⚠️❗❗⚠️❗❗❗⚠️❗❗❗⚠️❗❗❗⚠️❗❗❗
❗⚠️⚠️⚠️❗⚠️⚠️⚠️⚠️❗❗❗⚠️❗❗❗⚠️❗❗❗⚠️❗⚠️❗
❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗

jcfranco · 2024-09-11T20:24:18Z

packages/calcite-components/src/components/alert/alert.e2e.ts

+          <div slot="${SLOTS.message}">Test message</div>
+        </calcite-alert>
+      `,
+      {


Found out why the commented-out tokens were failing:

diff --git i/packages/calcite-components/src/components/alert/alert.e2e.ts w/packages/calcite-components/src/components/alert/alert.e2e.ts index b2ea33cbb..674b7ad02 100644 --- i/packages/calcite-components/src/components/alert/alert.e2e.ts +++ w/packages/calcite-components/src/components/alert/alert.e2e.ts @@ -605,39 +605,39 @@ describe("calcite-alert", () => { `, { /*"--calcite-alert-width": { - shadowSelector: `.${CSS.container}`, - targetProp: "inlineSize", - },*/ + shadowSelector: `.${CSS.container}`, // 🕵 sizing styles depend on alert being open + targetProp: "inlineSize", + },*/ "--calcite-alert-background-color": { shadowSelector: `.${CSS.container}`, targetProp: "backgroundColor", }, /*"--calcite-alert-title-text-color": { - shadowSelector: `.${CSS.textContainer}`, + shadowSelector: `.${CSS.textContainer}`, // 🕵️ text color is applied to the slotted content, this targets the slot parent targetProp: "color", },*/ /*"--calcite-alert-message-text-color": { - shadowSelector: `.${CSS.textContainer}`, - targetProp: "color", - },*/ + shadowSelector: `.${CSS.textContainer}`, // 🕵️ text color is applied to the slotted content, this targets the slot parent + targetProp: "color", + },*/ "--calcite-alert-corner-radius": { shadowSelector: `.${CSS.container}`, targetProp: "borderRadius", }, /*"--calcite-alert-close-background-color-hover": { - shadowSelector: `.${CSS.close}`, - targetProp: "backgroundColor", - state: "hover", - },*/ + shadowSelector: `.${CSS.close}`, + targetProp: "backgroundColor", + state: "hover", // 🕵 stateful interactions depend on alert being open + },*/ /*"--calcite-alert-close-background-color-pressed": { - shadowSelector: `.${CSS.close}`, - targetProp: "backgroundColor", - state: { press: { attribute: "class", value: CSS.close } }, - },*/ + shadowSelector: `.${CSS.close}`, + targetProp: "backgroundColor", + state: { press: { attribute: "class", value: CSS.close } }, // 🕵 stateful interactions depend on alert being open + },*/ /*"--calcite-alert-dismiss-progress-background-color": { - shadowSelector: `.${CSS.dismissProgress}`, - targetProp: "backgroundColor", - },*/ + shadowSelector: `.${CSS.dismissProgress}`, // 🕵 the dismiss progress background color needs a different configuration (i.e., auto-close) + targetProp: "backgroundColor", + },*/ }, ); });

Some changes will require separate, different test HTML (see example).

jcfranco · 2024-09-24T16:42:22Z

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

@@ -4,19 +4,19 @@
 * These properties can be overridden using the component's tag as selector.
 *
 * @prop --calcite-alert-width: Specifies the width of the component.
+ * @prop --calcite-alert-background-color: Specifies the component's background color.
+ * @prop --calcite-alert-corner-radius: Specifies the component's border radius.


Let's discuss customizing the icon and progress color separately. The design spec has both sharing the color defined by kind. cc @alisonailea @SkyeSeitz @ashetland

aPreciado88 · 2024-09-24T20:11:19Z

@ashetland I fixed the maxWidths issue, could you please take another look at the chromatic build?

aPreciado88 · 2024-09-24T20:20:43Z

@alisonailea I fixed the e2e issue. Could you please take a look?

alisonailea

Looks good LGTM!

ashetland · 2024-09-24T22:47:15Z

Visuals lookin' gewd!

…tracking * origin/dev: (40 commits) feat: add parcel parameter (#10384) feat(alert): apply --calcite-alert-corner-radius to internal close button (#10388) feat(dialog, panel): Add css properties for background-color (#10387) fix: remove aria-disabled from components where necessary (#10374) feat(action-group, block, panel): add `menuPlacement` and `menuFlipPlacements` properties (#10249) fix(list, filter): fix sync between list items and filtered data (#10342) feat(popover): apply component tokens to arrow (#10386) feat(list-item): add `unavailable` property (#10377) fix(segmented-control): honor appearance, layout and scale when items are added after initialization (#10368) fix(action-pad): fix horizontal action group alignment (#10359) fix(combobox): selection-mode="single-persist" correctly selects an item when items have same values (#10366) fix(input-time-zone): fix region mode labeling and value mapping (#10345) fix(dropdown): open dropdown on `ArrowDown` & `ArrowUp` keys (#10264) refactor(components): reduce post-migration TypeScript errors (#10356) refactor: do not use Host in functional components (#10352) refactor(tests): reduce TypeScript errors (#10344) feat(alert): add component tokens (#10218) fix(card): properly handle slotted elements (#10378) refactor(panel): remove duplicate tailwind class (#10379) feat(popover, action): add component tokens (#10253) ...

…estone-estimates * origin/dev: (29 commits) fix(input-time-zone): fix region mode labeling and value mapping (#10345) fix(dropdown): open dropdown on `ArrowDown` & `ArrowUp` keys (#10264) refactor(components): reduce post-migration TypeScript errors (#10356) refactor: do not use Host in functional components (#10352) refactor(tests): reduce TypeScript errors (#10344) feat(alert): add component tokens (#10218) fix(card): properly handle slotted elements (#10378) refactor(panel): remove duplicate tailwind class (#10379) feat(popover, action): add component tokens (#10253) chore(t9n): add translations (#10339) feat: add 3d building, 3d building parameter, divide, parcel, spaces, spaces parameter, square brackets x, n variable, zoning parameter (#10373) build: update browserslist db (#10370) ci: resolve husky pre-push and pre-commit errors (#10365) docs: update component READMEs (#10371) feat(text-area): add component tokens (#10343) fix(action): prefer `disabled` in favor of `aria-disabled` (#10367) docs(a11y): add reference to a11y guidance to issue template (#10372) chore(action): add new string for accessible indicator label (#10360) feat(chip): add component tokens (#10179) feat(avatar): add component tokens (#10280) ...

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-ui-icons: 3.32.0</summary> ## [3.32.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-ui-icons@3.31.0...@esri/calcite-ui-icons@3.32.0) (2024-09-30) ### Features * Add 3d building, 3d building parameter, divide, parcel, spaces, spaces parameter, square brackets x, n variable, zoning parameter ([#10373](#10373)) ([3ed86ce](3ed86ce)) * Add content inline right ([#10338](#10338)) ([b4530ab](b4530ab)) * Add dashboard-graph ([#10417](#10417)) ([737085a](737085a)) * Add justify ([#10272](#10272)) ([3d6c013](3d6c013)) * Add model-history, raster-function-history, raster function-template-history, raster-tool-history, tool-history ([#10305](#10305)) ([1e31d43](1e31d43)) * Add parcel parameter ([#10384](#10384)) ([c99be67](c99be67)) * Add trace path and trace path complete ([#10196](#10196)) ([c37ced5](c37ced5)) * Add validate ([#10354](#10354)) ([4160af1](4160af1)) * Add web adaptor ([#10286](#10286)) ([791fd78](791fd78)) * Added connection end left, connection end right, connection middle, connection to connection ([#10198](#10198)) ([3d0f703](3d0f703)) ### Bug Fixes * Correct non-standard filled icon names ([#10309](#10309)) ([7d67334](7d67334)) </details> <details><summary>@esri/eslint-plugin-calcite-components: 1.2.1</summary> ## [1.2.1](https://github.com/Esri/calcite-design-system/compare/@esri/eslint-plugin-calcite-components@1.2.0...@esri/eslint-plugin-calcite-components@1.2.1) (2024-09-30) ### Deprecations * Deprecate `enforce-ref-last-prop` rule ([#10421](#10421)) ([5fde52d](5fde52d)) </details> <details><summary>@esri/calcite-components: 2.13.0</summary> ## [2.13.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.12.2...@esri/calcite-components@2.13.0) (2024-09-30) ### Features * **accordion-item:** Update component tokens ([ca932b5](ca932b5)) * **action-group, block, panel:** Add `menuPlacement` and `menuFlipPlacements` properties ([#10249](#10249)) ([5ba3112](5ba3112)) * **alert:** Add component tokens ([#10218](#10218)) ([550427b](550427b)) * **alert:** Apply --calcite-alert-corner-radius to internal close button ([#10388](#10388)) ([f50c170](f50c170)) * **avatar:** Add component tokens ([#10280](#10280)) ([f8f881b](f8f881b)) * **carousel:** Improve support for high item counts ([#10315](#10315)) ([6ad2612](6ad2612)) * **checkbox:** Add component tokens ([#10221](#10221)) ([1d87dcf](1d87dcf)) * **chip:** Add component tokens ([#10179](#10179)) ([ff82570](ff82570)) * **dialog, panel:** Add css properties for background-color ([#10387](#10387)) ([d725293](d725293)) * **handle:** Add component tokens ([#10262](#10262)) ([5e73b44](5e73b44)) * **input, input-number, input-text:** Add prefix and suffix width css tokens ([#10206](#10206)) ([7a6ee82](7a6ee82)) * **list-item:** Add `unavailable` property ([#10377](#10377)) ([9332733](9332733)) * **panel:** Improve panel header layout ([#10446](#10446)) ([12f1476](12f1476)) * **popover, action:** Add component tokens ([#10253](#10253)) ([80e8112](80e8112)) * **popover:** Apply component tokens to arrow ([#10386](#10386)) ([2d19268](2d19268)) * **progress:** Add component tokens ([#10267](#10267)) ([8c1259f](8c1259f)) * **text-area:** Add component tokens ([#10343](#10343)) ([d2504b7](d2504b7)) ### Bug Fixes * **action-pad:** Fix horizontal action group alignment ([#10359](#10359)) ([7b03745](7b03745)) * **action-pad:** Update layout on action-group elements slotted after initialization ([#10355](#10355)) ([cf139fa](cf139fa)) * **action:** Prefer `disabled` in favor of `aria-disabled` ([#10367](#10367)) ([1895c07](1895c07)) * **card:** Properly handle slotted elements ([#10378](#10378)) ([99a7148](99a7148)) * **combobox:** Correctly select an item with `selection-mode=‘single-persist’` when items have the same values ([5401ea6](5401ea6)) * **dialog:** Only prevent default on escape key when escapeDisabled is true ([#10336](#10336)) ([0083630](0083630)) * **dropdown:** Open dropdown on `ArrowDown` & `ArrowUp` keys ([#10264](#10264)) ([98548e4](98548e4)) * **input-time-zone:** Fix region mode labeling and value mapping ([#10345](#10345)) ([cf36299](cf36299)) * **input-time-zone:** Fix region mode quirks after update ([#10413](#10413)) ([c137d1f](c137d1f)) * **list, filter:** Fix sync between list items and filtered data ([#10342](#10342)) ([9a66601](9a66601)) * **panel:** Initially closed panel should be hidden ([#10308](#10308)) ([46de96b](46de96b)) * **popover:** Update focus trap elements on mutation observer ([#10357](#10357)) ([725254a](725254a)) * Properly set aria attributes on components ([#10404](#10404)) ([864f3e3](864f3e3)) * Remove aria-disabled from components where necessary ([#10374](#10374)) ([4f8c16c](4f8c16c)) * **segmented-control:** Honor appearance, layout and scale when items are added after initialization ([#10368](#10368)) ([98177f0](98177f0)) * **shell:** Fix z-index of slotted popover elements ([#10325](#10325)) ([7fe1601](7fe1601)) * **text-area:** Ensure border-color token doesn't override invalid styles ([#10390](#10390)) ([699e166](699e166)) * **tooltip:** Closed tooltips should not reappear ([#10420](#10420)) ([a2f3925](a2f3925)) ### Deprecations * **checkbox, radio-button:** Deprecate 'guid' properties ([#10445](#10445)) ([9729ccf](9729ccf)) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-ui-icons bumped from 3.32.0-next.5 to 3.32.0 * devDependencies * @esri/eslint-plugin-calcite-components bumped from 1.2.1-next.4 to 1.2.1 </details> <details><summary>@esri/calcite-components-angular: 2.13.0</summary> ## [2.13.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.12.2...@esri/calcite-components-angular@2.13.0) (2024-09-30) ### Miscellaneous Chores * **@esri/calcite-components-angular:** Synchronize components versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 2.13.0-next.15 to 2.13.0 </details> <details><summary>@esri/calcite-components-react: 2.13.0</summary> ## [2.13.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.12.2...@esri/calcite-components-react@2.13.0) (2024-09-30) ### Miscellaneous Chores * **@esri/calcite-components-react:** Synchronize components versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 2.13.0-next.15 to 2.13.0 </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-ui-icons: 3.32.0</summary> ## [3.32.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-ui-icons@3.31.0...@esri/calcite-ui-icons@3.32.0) (2024-09-30) ### Features * Add 3d building, 3d building parameter, divide, parcel, spaces, spaces parameter, square brackets x, n variable, zoning parameter ([#10373](#10373)) ([3ed86ce](3ed86ce)) * Add content inline right ([#10338](#10338)) ([b4530ab](b4530ab)) * Add dashboard-graph ([#10417](#10417)) ([737085a](737085a)) * Add justify ([#10272](#10272)) ([3d6c013](3d6c013)) * Add model-history, raster-function-history, raster function-template-history, raster-tool-history, tool-history ([#10305](#10305)) ([1e31d43](1e31d43)) * Add parcel parameter ([#10384](#10384)) ([c99be67](c99be67)) * Add trace path and trace path complete ([#10196](#10196)) ([c37ced5](c37ced5)) * Add validate ([#10354](#10354)) ([4160af1](4160af1)) * Add web adaptor ([#10286](#10286)) ([791fd78](791fd78)) * Added connection end left, connection end right, connection middle, connection to connection ([#10198](#10198)) ([3d0f703](3d0f703)) ### Bug Fixes * Correct non-standard filled icon names ([#10309](#10309)) ([7d67334](7d67334)) </details> <details><summary>@esri/eslint-plugin-calcite-components: 1.2.1</summary> ## [1.2.1](https://github.com/Esri/calcite-design-system/compare/@esri/eslint-plugin-calcite-components@1.2.0...@esri/eslint-plugin-calcite-components@1.2.1) (2024-09-30) ### Deprecations * Deprecate `enforce-ref-last-prop` rule ([#10421](#10421)) ([5fde52d](5fde52d)) </details> <details><summary>@esri/calcite-components: 2.13.0</summary> ## [2.13.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.12.2...@esri/calcite-components@2.13.0) (2024-09-30) ### Features * **accordion-item:** Update component tokens ([ca932b5](ca932b5)) * **action-group, block, panel:** Add `menuPlacement` and `menuFlipPlacements` properties ([#10249](#10249)) ([5ba3112](5ba3112)) * **alert:** Add component tokens ([#10218](#10218)) ([550427b](550427b)) * **alert:** Apply --calcite-alert-corner-radius to internal close button ([#10388](#10388)) ([f50c170](f50c170)) * **avatar:** Add component tokens ([#10280](#10280)) ([f8f881b](f8f881b)) * **carousel:** Improve support for high item counts ([#10315](#10315)) ([6ad2612](6ad2612)) * **checkbox:** Add component tokens ([#10221](#10221)) ([1d87dcf](1d87dcf)) * **chip:** Add component tokens ([#10179](#10179)) ([ff82570](ff82570)) * **dialog, panel:** Add css properties for background-color ([#10387](#10387)) ([d725293](d725293)) * **handle:** Add component tokens ([#10262](#10262)) ([5e73b44](5e73b44)) * **input, input-number, input-text:** Add prefix and suffix width css tokens ([#10206](#10206)) ([7a6ee82](7a6ee82)) * **list-item:** Add `unavailable` property ([#10377](#10377)) ([9332733](9332733)) * **panel:** Improve panel header layout ([#10446](#10446)) ([12f1476](12f1476)) * **popover, action:** Add component tokens ([#10253](#10253)) ([80e8112](80e8112)) * **popover:** Apply component tokens to arrow ([#10386](#10386)) ([2d19268](2d19268)) * **progress:** Add component tokens ([#10267](#10267)) ([8c1259f](8c1259f)) * **text-area:** Add component tokens ([#10343](#10343)) ([d2504b7](d2504b7)) ### Bug Fixes * **action-pad:** Fix horizontal action group alignment ([#10359](#10359)) ([7b03745](7b03745)) * **action-pad:** Update layout on action-group elements slotted after initialization ([#10355](#10355)) ([cf139fa](cf139fa)) * **action:** Prefer `disabled` in favor of `aria-disabled` ([#10367](#10367)) ([1895c07](1895c07)) * **card:** Properly handle slotted elements ([#10378](#10378)) ([99a7148](99a7148)) * **combobox:** Correctly select an item with `selection-mode=‘single-persist’` when items have the same values ([5401ea6](5401ea6)) * **dialog:** Only prevent default on escape key when escapeDisabled is true ([#10336](#10336)) ([0083630](0083630)) * **dropdown:** Open dropdown on `ArrowDown` & `ArrowUp` keys ([#10264](#10264)) ([98548e4](98548e4)) * **input-time-zone:** Fix region mode labeling and value mapping ([#10345](#10345)) ([cf36299](cf36299)) * **input-time-zone:** Fix region mode quirks after update ([#10413](#10413)) ([c137d1f](c137d1f)) * **list, filter:** Fix sync between list items and filtered data ([#10342](#10342)) ([9a66601](9a66601)) * **panel:** Initially closed panel should be hidden ([#10308](#10308)) ([46de96b](46de96b)) * **popover:** Update focus trap elements on mutation observer ([#10357](#10357)) ([725254a](725254a)) * Properly set aria attributes on components ([#10404](#10404)) ([864f3e3](864f3e3)) * Remove aria-disabled from components where necessary ([#10374](#10374)) ([4f8c16c](4f8c16c)) * **segmented-control:** Honor appearance, layout and scale when items are added after initialization ([#10368](#10368)) ([98177f0](98177f0)) * **shell:** Fix z-index of slotted popover elements ([#10325](#10325)) ([7fe1601](7fe1601)) * **text-area:** Ensure border-color token doesn't override invalid styles ([#10390](#10390)) ([699e166](699e166)) * **tooltip:** Closed tooltips should not reappear ([#10420](#10420)) ([a2f3925](a2f3925)) ### Deprecations * **checkbox, radio-button:** Deprecate 'guid' properties ([#10445](#10445)) ([9729ccf](9729ccf)) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-ui-icons bumped from 3.32.0-next.5 to 3.32.0 * devDependencies * @esri/eslint-plugin-calcite-components bumped from 1.2.1-next.4 to 1.2.1 </details> <details><summary>@esri/calcite-components-angular: 2.13.0</summary> ## [2.13.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.12.2...@esri/calcite-components-angular@2.13.0) (2024-09-30) ### Miscellaneous Chores * **@esri/calcite-components-angular:** Synchronize components versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 2.13.0-next.15 to 2.13.0 </details> <details><summary>@esri/calcite-components-react: 2.13.0</summary> ## [2.13.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.12.2...@esri/calcite-components-react@2.13.0) (2024-09-30) ### Miscellaneous Chores * **@esri/calcite-components-react:** Synchronize components versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 2.13.0-next.15 to 2.13.0 </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

feat(alert): add component tokens

1514217

github-actions bot assigned aPreciado88 Sep 4, 2024

github-actions bot added the enhancement Issues tied to a new feature or request. label Sep 4, 2024

aPreciado88 added 3 commits September 4, 2024 15:21

feat(alert): add component tokens

403ca2d

feat(alert): add component tokens

6787eee

feat(alert): add component tokens

7d18aec

feat(alert): add component tokens

c52f2cb

feat(alert): add component tokens

2dbbeda

alisonailea requested changes Sep 6, 2024

View reviewed changes

feat(alert): add component tokens

4db49bd

aPreciado88 requested a review from alisonailea September 11, 2024 16:37

aPreciado88 marked this pull request as ready for review September 11, 2024 16:37

aPreciado88 requested review from jcfranco, macandcheese and driskull September 11, 2024 16:39

alisonailea requested changes Sep 11, 2024

View reviewed changes

feat(alert): add component tokens

48a1243

aPreciado88 requested a review from alisonailea September 13, 2024 23:12

feat(alert): add component tokens

0ee7704

aPreciado88 added this to the 2024-09-24 - 2.13.0 Sep Main release milestone Sep 16, 2024

alisonailea requested changes Sep 16, 2024

View reviewed changes

feat(alert): add component tokens

4812669

aPreciado88 requested a review from alisonailea September 16, 2024 20:10

aPreciado88 added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Sep 17, 2024

feat(alert): add component tokens

1e873d2

aPreciado88 added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Sep 17, 2024

feat(alert): add component tokens

3cfbfc0

aPreciado88 added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Sep 18, 2024

aPreciado88 added 3 commits September 18, 2024 09:29

feat(alert): add component tokens

e375968

feat(alert): add component tokens

fe7f900

feat(alert): add component tokens

7b5c727

aPreciado88 added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Sep 18, 2024

jcfranco approved these changes Sep 24, 2024

View reviewed changes

feat(alert): fix merge conflicts

c272167

aPreciado88 added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Sep 24, 2024

alisonailea approved these changes Sep 24, 2024

View reviewed changes

aPreciado88 merged commit 550427b into dev Sep 24, 2024
14 checks passed

aPreciado88 deleted the aPreciado88/7180-add-alert-design-tokens branch September 24, 2024 22:53

aPreciado88 mentioned this pull request Sep 24, 2024

Design token phase II - Integration across components #7180

Open

calcite-admin mentioned this pull request Sep 30, 2024

chore: release main #10457

Merged

benelan mentioned this pull request Oct 1, 2024

chore: release main (#10457) #10461

Closed

calcite-admin mentioned this pull request Oct 1, 2024

chore: release main (#10457) #10463

Merged

jcfranco mentioned this pull request Oct 18, 2024

feat(tabs, tab-nav, tab-title, tab): add component tokens #10532

Open

feat(alert): add component tokens #10218

feat(alert): add component tokens #10218

Conversation

aPreciado88 commented Sep 4, 2024 • edited Loading

Summary

jcfranco commented Sep 5, 2024

aPreciado88 commented Sep 5, 2024

jcfranco commented Sep 6, 2024 • edited Loading

alisonailea left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alisonailea left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aPreciado88 commented Sep 13, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aPreciado88 commented Sep 16, 2024

jcfranco left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aPreciado88 commented Sep 24, 2024

aPreciado88 commented Sep 24, 2024

alisonailea left a comment

Choose a reason for hiding this comment

ashetland commented Sep 24, 2024

aPreciado88 commented Sep 4, 2024 •

edited

Loading

jcfranco commented Sep 6, 2024 •

edited

Loading