fix(panel, list, list-item, card, action-pad): resolve merge conflict…

… problems
Esri · Jul 10, 2024 · 95f0821 · 95f0821
1 parent e7b5653
commit 95f0821
Show file tree

Hide file tree

Showing 9 changed files with 3,235 additions and 2,091 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/calcite-components/src/components/action-pad/action-pad.e2e.ts b/packages/calcite-components/src/components/action-pad/action-pad.e2e.ts
@@ -366,7 +366,7 @@ describe("calcite-action-pad", () => {
         },
         "--calcite-action-pad-trigger-background-color-active": {
           shadowSelector: "calcite-action-group",
-          targetProp: "--calcite-action-group-trigger-background-color-active",
+          targetProp: "--calcite-action-background-color",
           state: { press: { attribute: "class", value: CSS.expandToggle } },
         },
         "--calcite-action-pad-trigger-background-color-focus": {

diff --git a/packages/calcite-components/src/components/card/card.scss b/packages/calcite-components/src/components/card/card.scss
@@ -151,14 +151,14 @@
 
 .checkbox-wrapper {
   @apply m-2 p-2 focus-base cursor-pointer pointer-events-auto;
-  background-color: var(--calcite-card-selection-background-color, transparent);
+  background-color: var(--calcite-card-selection-background-color,);
   display: flex;
   align-items: center;
   justify-items: center;
-  --calcite-ui-icon-color: var(--calcite-card-selection-icon-color, var(--calcite-color-text-3));
+  --calcite-icon-color: var(--calcite-card-selection-icon-color, var(--calcite-color-text-3));
   &:hover {
     background-color: var(--calcite-card-selection-background-color-hover, var(--calcite-color-transparent-hover));
-    --calcite-ui-icon-color: var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2));
+    --calcite-icon-color: var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2));
   }
   &:active {
     background-color: var(--calcite-card-selection-background-color-active, var(--calcite-color-transparent-press));
@@ -169,8 +169,10 @@
 }
 
 :host([selected]) .checkbox-wrapper {
-  --calcite-ui-icon-color: var(--calcite-card-selection-icon-color-selected, var(--calcite-color-brand));
+  --calcite-icon-color: var(--calcite-card-selection-icon-color-selected, var(--calcite-color-brand));
+
   background-color: var(--calcite-card-selection-background-color-selected, transparent);
+
   &:hover {
     background-color: var(--calcite-card-selection-background-color-hover, var(--calcite-color-transparent-hover));
   }

diff --git a/packages/calcite-components/src/components/filter/resources.ts b/packages/calcite-components/src/components/filter/resources.ts
@@ -1,6 +1,7 @@
 export const CSS = {
   container: "container",
   searchIcon: "search-icon",
+  input: "input",
 };
 
 export const ICONS = {

diff --git a/packages/calcite-components/src/components/list-item/list-item.e2e.ts b/packages/calcite-components/src/components/list-item/list-item.e2e.ts
@@ -478,10 +478,14 @@ describe("calcite-list-item", () => {
         },
       };
       themed(
-        html`<calcite-list>
+        html`<calcite-list filter-enabled filter-text="Bananas" selection-appearance="border" selection-mode="single">
           <calcite-list-item label="Apples" value="apples"></calcite-list-item>
           <calcite-list-item label="Oranges" value="oranges"></calcite-list-item>
           <calcite-list-item label="Pears" value="pears"></calcite-list-item>
+          <calcite-notice slot="filter-no-results" icon kind="warning" scale="s" open>
+            <div slot="title">No fruits found</div>
+            <div slot="message">Try a different fruit?</div>
+          </calcite-notice>
         </calcite-list>`,
         tokens,
       );

diff --git a/packages/calcite-components/src/components/list/list.e2e.ts b/packages/calcite-components/src/components/list/list.e2e.ts
@@ -1486,33 +1486,13 @@ describe("calcite-list", () => {
   describe("theme", () => {
     describe("filtered default", () => {
       const tokens: ComponentTestTokens = {
-        "--calcite-list-header-background-color": {
+        "--calcite-list-background-color": {
           shadowSelector: `.${CSS.sticky}`,
           targetProp: "backgroundColor",
         },
         "--calcite-list-header-z-index": {
           shadowSelector: `.${CSS.sticky}`,
-          targetProp: "backgroundColor",
-        },
-      };
-      themed(
-        html`<calcite-list filter-enabled filter-text="Bananas" selection-appearance="border" selection-mode="single">
-          <calcite-list-item label="Apples" value="apples"></calcite-list-item>
-          <calcite-list-item label="Oranges" value="oranges"></calcite-list-item>
-          <calcite-list-item label="Pears" value="pears"></calcite-list-item>
-          <calcite-notice slot="filter-no-results" icon kind="warning" scale="s" open>
-            <div slot="title">No fruits found</div>
-            <div slot="message">Try a different fruit?</div>
-          </calcite-notice>
-        </calcite-list>`,
-        tokens,
-      );
-    });
-    describe("filtered fallback", () => {
-      const tokens: ComponentTestTokens = {
-        "--calcite-list-background-color": {
-          shadowSelector: `.${CSS.sticky}`,
-          targetProp: "backgroundColor",
+          targetProp: "zIndex",
         },
       };
       themed(

diff --git a/packages/calcite-components/src/components/list/list.scss b/packages/calcite-components/src/components/list/list.scss
@@ -4,7 +4,6 @@
  * These properties can be overridden using the component's tag as selector.
  *
  * @prop --calcite-list-background-color: Specifies the background color of the component.
- * @prop --calcite-list-header-background-color: Specifies the background color of the component header.
  * @prop --calcite-list-header-z-index: Specifies the component header's z-index.
  * @prop --calcite-list-text-color: Specifies the component text color.
  */
@@ -44,7 +43,7 @@
   @apply sticky
   top-0;
   z-index: var(--calcite-list-header-z-index, var(--calcite-z-index-sticky));
-  background-color: var(--calcite-list-header-background-color, var(--calcite-color-foreground-1));
+  background-color: var(--calcite-list-background-color, var(--calcite-color-foreground-1));
 
   & th {
     @apply p-0;