feat(list, list-item, list-item-group, filter)!: add scales, update p…

…adding and spacing, update font sizes (#10853) **Related Issue:** #7100 ## Summary This PR adds scales, updates padding and spacing and updates font sizes based on the latest designs for `calcite-list-item`, `calcite-list-item-group`, `calcite-list` and `calcite-filter`. BREAKING CHANGE: The spacing changes affect content in the `actions-start` slot in addition to other rendered elements. Some styling updates may need to be applied to slotted actions or other adjustments based on the new scales. --------- Co-authored-by: JC Franco <[email protected]>
Esri · Nov 28, 2024 · 9c3342c · 9c3342c
1 parent 0015508
commit 9c3342c
Show file tree

Hide file tree

Showing 10 changed files with 9,536 additions and 121 deletions.
diff --git a/packages/calcite-components/src/components/filter/filter.scss b/packages/calcite-components/src/components/filter/filter.scss
@@ -6,7 +6,23 @@
 @include disabled();
 
 .container {
-  @apply flex w-full p-2;
+  @apply flex w-full;
+}
+
+:host([scale="s"]) {
+  .container {
+    padding: var(--calcite-spacing-sm);
+  }
+}
+:host([scale="m"]) {
+  .container {
+    padding: var(--calcite-spacing-md);
+  }
+}
+:host([scale="l"]) {
+  .container {
+    padding: var(--calcite-spacing-lg);
+  }
 }
 
 label {

diff --git a/packages/calcite-components/src/components/list-item-group/list-item-group.scss b/packages/calcite-components/src/components/list-item-group/list-item-group.scss
@@ -18,10 +18,59 @@
 @include disabled();
 
 .container {
-  @apply text-n1 m-0 flex flex-1 p-3 font-medium;
+  @apply m-0 flex flex-1;
   background-color: var(--calcite-list-background-color, var(--calcite-color-foreground-1));
   color: var(--calcite-list-color, var(--calcite-color-text-2));
 }
+.heading {
+  font-weight: var(--calcite-font-weight-medium);
+}
+
+:host([scale="s"]) {
+  .container {
+    padding-inline: var(--calcite-spacing-sm);
+  }
+  .heading {
+    font-size: var(--calcite-font-size-sm);
+    line-height: var(--calcite-font-line-height-fixed-base);
+    padding-block: var(--calcite-spacing-sm) var(--calcite-spacing-xxs);
+  }
+}
+:host([scale="s"]:not(:first-child)) {
+  .container {
+    padding-block-start: var(--calcite-spacing-sm);
+  }
+}
+:host([scale="m"]) {
+  .container {
+    padding-inline: var(--calcite-spacing-md);
+  }
+  .heading {
+    font-size: var(--calcite-font-size);
+    line-height: var(--calcite-font-line-height-fixed-base);
+    padding-block: var(--calcite-spacing-lg) var(--calcite-spacing-sm);
+  }
+}
+:host([scale="m"]:not(:first-child)) {
+  .container {
+    padding-block-start: var(--calcite-spacing-md);
+  }
+}
+:host([scale="l"]) {
+  .container {
+    padding-inline: var(--calcite-spacing-lg);
+  }
+  .heading {
+    font-size: var(--calcite-font-size-md);
+    line-height: var(--calcite-font-line-height-fixed-lg);
+    padding-block: var(--calcite-spacing-xl) var(--calcite-spacing-sm-plus, 0.625rem);
+  }
+}
+:host([scale="l"]:not(:first-child)) {
+  .container {
+    padding-block-start: var(--calcite-spacing-md-plus, 0.875rem);
+  }
+}
 
 .heading {
   @apply p-0;

diff --git a/packages/calcite-components/src/components/list-item-group/list-item-group.tsx b/packages/calcite-components/src/components/list-item-group/list-item-group.tsx
@@ -5,6 +5,7 @@ import {
   updateHostInteraction,
 } from "../../utils/interactive";
 import { MAX_COLUMNS } from "../list-item/resources";
+import { Scale } from "../interfaces";
 import { CSS } from "./resources";
 import { styles } from "./list-item-group.scss";
 
@@ -36,6 +37,13 @@ export class ListItemGroup extends LitElement implements InteractiveComponent {
   /** The header text for all nested `calcite-list-item` rows. */
   @property({ reflect: true }) heading: string;
 
+  /**
+   * Specifies the size of the component.
+   *
+   * @internal
+   * */
+  @property({ reflect: true }) scale: Scale = "m";
+
   // #endregion
 
   // #region Events

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
@@ -437,7 +437,7 @@ describe("calcite-list-item", () => {
             state: { press: { attribute: "class", value: CSS.content } },
           },
           "--calcite-list-border-color": {
-            shadowSelector: `.${CSS.wrapper}`,
+            shadowSelector: `.${CSS.contentContainerWrapper}`,
             targetProp: "borderBlockEndColor",
           },
           "--calcite-list-content-text-color": {
@@ -474,7 +474,7 @@ describe("calcite-list-item", () => {
         {
           "--calcite-list-selection-border-color": {
             shadowSelector: `.${CSS.container}`,
-            targetProp: "borderInlineStartColor",
+            targetProp: "boxShadow",
           },
         },
       );