feat(chip-group): add component tokens

Esri · Aug 28, 2024 · b052c8d · b052c8d
1 parent b226cb9
commit b052c8d
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 6 deletions.
diff --git a/packages/calcite-components/src/components/chip-group/chip-group.scss b/packages/calcite-components/src/components/chip-group/chip-group.scss
@@ -1,3 +1,12 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-chip-group-items-space: Specifies spacing between items in the component.
+ *
+ */
+
 :host {
   display: flex;
 }
@@ -6,19 +15,23 @@
   display: flex;
   inline-size: 100%;
   flex-wrap: wrap;
-  gap: theme("spacing.2");
+  gap: var(--calcite-chip-group-items-space, var(--calcite-internal-chip-group-items-space, theme("spacing.2")));
 }
 
 ::slotted(calcite-chip) {
   flex: none;
 }
 
 :host([scale="s"]) .container {
-  gap: theme("spacing.1");
+  --calcite-internal-chip-group-items-space: theme("spacing.1");
+}
+
+:host([scale="m"]) .container {
+  --calcite-internal-chip-group-items-space: theme("spacing.2");
 }
 
 :host([scale="l"]) .container {
-  gap: theme("spacing.3");
+  --calcite-internal-chip-group-items-space: theme("spacing.3");
 }
 
 @include disabled();

diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts
@@ -14,7 +14,7 @@ import { accordion } from "./custom-theme/accordion";
 import { buttons } from "./custom-theme/button";
 import { card, cardTokens } from "./custom-theme/card";
 import { checkbox } from "./custom-theme/checkbox";
-import { chips, chipTokens } from "./custom-theme/chips";
+import { chips, chipGroupTokens, chipTokens } from "./custom-theme/chips";
 import { datePicker } from "./custom-theme/date-picker";
 import { dropdown } from "./custom-theme/dropdown";
 import { icon } from "./custom-theme/icon";
@@ -119,6 +119,7 @@ export default {
     ...actionGroupTokens,
     ...cardTokens,
     ...chipTokens,
+    ...chipGroupTokens,
   },
 };
 
@@ -136,6 +137,7 @@ export const theming_TestOnly = (): string => {
       ...actionGroupTokens,
       ...cardTokens,
       ...chipTokens,
+      ...chipGroupTokens,
     },
     true,
   );

diff --git a/packages/calcite-components/src/custom-theme/chips.ts b/packages/calcite-components/src/custom-theme/chips.ts
@@ -7,6 +7,10 @@ export const chipTokens = {
   calciteChipTextColor: "",
 };
 
+export const chipGroupTokens = {
+  calciteChipGroupItemsSpace: "",
+};
+
 export const chips = html`<div>
     <calcite-chip>Neutral</calcite-chip>
     <calcite-chip kind="inverse">Inverse</calcite-chip>
@@ -17,8 +21,8 @@ export const chips = html`<div>
     <calcite-chip appearance="outline-fill" kind="inverse">Inverse</calcite-chip>
     <calcite-chip appearance="outline-fill" kind="brand">Brand</calcite-chip>
   </div>
-  <div>
+  <calcite-chip-group>
     <calcite-chip appearance="outline">Neutral</calcite-chip>
     <calcite-chip appearance="outline" kind="inverse">Inverse</calcite-chip>
     <calcite-chip appearance="outline" kind="brand">Brand</calcite-chip>
-  </div>`;
+  </calcite-chip-group>`;