feat(radio-button-group): add component tokens

packages/calcite-components/src/components/radio-button-group/radio-button-group.e2e.ts

@@ -1,9 +1,10 @@
 import { newE2EPage } from "@arcgis/lumina-compiler/puppeteerTesting";
 import { describe, expect, it } from "vitest";
-import { accessible, defaults, focusable, hidden, reflects, renders } from "../../tests/commonTests";
+import { accessible, defaults, focusable, hidden, reflects, renders, themed } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { findAll, getFocusedElementProp } from "../../tests/utils";
 import type { RadioButton } from "../radio-button/radio-button";
+import { CSS } from "./resources";
 
 describe("calcite-radio-button-group", () => {
   describe("renders", () => {
@@ -555,4 +556,26 @@ describe("calcite-radio-button-group", () => {
     await page.waitForChanges();
     expect(await getFocusedElementProp(page, "id")).toBe("shrubs");
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      themed(html`<calcite-radio-button-group></calcite-radio-button-group>`, {
+        "--calcite-radio-button-group-gap": {
+          targetProp: "columnGap",
+          shadowSelector: `.${CSS.itemWrapper}`,
+        },
+      });
+    });
+    describe("validation", () => {
+      themed(
+        html`<calcite-radio-button-group validation-message="help" status="invalid"></calcite-radio-button-group>`,
+        {
+          "--calcite-radio-button-input-message-spacing": {
+            targetProp: "--calcite-input-message-spacing",
+            shadowSelector: "calcite-input-message",
+          },
+        },
+      );
+    });
+  });
 });

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

@@ -1,3 +1,12 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-radio-button-group-gap: Specifies the space between slotted components in the component.
+ * @prop --calcite-radio-button-input-message-spacing: Specifies the margin spacing at the top of the input-message component.
+ */
+
 :host {
   @apply flex flex-col;
 }
@@ -12,15 +21,15 @@
 }
 
 :host([layout="horizontal"][scale="s"]) > .item-wrapper {
-  @apply gap-x-4;
+  column-gap: var(--calcite-radio-button-group-gap, var(--calcite-spacing-lg));
 }
 
 :host([layout="horizontal"][scale="m"]) > .item-wrapper {
-  @apply gap-x-5;
+  column-gap: var(--calcite-radio-button-group-gap, var(--calcite-spacing-xl));
 }
 
 :host([layout="horizontal"][scale="l"]) > .item-wrapper {
-  @apply gap-x-6;
+  column-gap: var(--calcite-radio-button-group-gap, var(--calcite-spacing-xxl));
 }
 
 :host([layout="vertical"]) > .item-wrapper {
@@ -29,15 +38,24 @@
 }
 
 :host([scale="s"]) calcite-input-message {
-  --calcite-input-message-spacing-value: calc(var(--calcite-spacing-xxs) * -1);
+  --calcite-input-message-spacing: var(
+    --calcite-radio-button-input-message-spacing,
+    calc(var(--calcite-spacing-xxs) * -1)
+  );
 }
 
 :host([scale="m"]) calcite-input-message {
-  --calcite-input-message-spacing-value: calc(var(--calcite-spacing-sm) * -1);
+  --calcite-input-message-spacing: var(
+    --calcite-radio-button-input-message-spacing,
+    calc(var(--calcite-spacing-sm) * -1)
+  );
 }
 
 :host([scale="l"]) calcite-input-message {
-  --calcite-input-message-spacing-value: calc(var(--calcite-spacing-md) * -1);
+  --calcite-input-message-spacing: var(
+    --calcite-radio-button-input-message-spacing,
+    calc(var(--calcite-spacing-md) * -1)
+  );
 }
 
 @include form-validation-message();

packages/calcite-components/src/custom-theme.stories.ts

@@ -44,6 +44,7 @@ import { popover, popoverTokens } from "./custom-theme/popover";
 import { progress, progressTokens } from "./custom-theme/progress";
 import { segmentedControl, segmentedControlTokens } from "./custom-theme/segmented-control";
 import { select, selectTokens } from "./custom-theme/select";
+import { radioButtonGroup, radioButtonGroupTokens } from "./custom-theme/radio-button-group";
 import { rating, ratingTokens } from "./custom-theme/rating";
 import { slider, sliderTokens } from "./custom-theme/slider";
 import { switchTokens } from "./custom-theme/switch";
@@ -176,6 +177,9 @@ const kitchenSink = (args: Record<string, string>, useTestValues = false) =>
     <div class="demo-row">
       <div class="demo-column">${inputMessage}</div>
     </div>
+    <div class="demo-row">
+      <div class="demo-column">${radioButtonGroup}</div>
+    </div>
     <div class="demo-row">
       <div class="demo-column">${tree}</div>
     </div>
@@ -224,6 +228,7 @@ const componentTokens = {
   ...popoverTokens,
   ...progressTokens,
   ...segmentedControlTokens,
+  ...radioButtonGroupTokens,
   ...ratingTokens,
   ...selectTokens,
   ...sliderTokens,

packages/calcite-components/src/custom-theme/radio-button-group.ts

@@ -0,0 +1,21 @@
+import { html } from "../../support/formatting";
+
+export const radioButtonGroupTokens = {
+  calciteRadioButtonGroupGap: "",
+  calciteRadioButtonInputMessageSpacing: "",
+};
+
+export const radioButtonGroup = html`<calcite-radio-button-group>
+  <calcite-label layout="inline">
+    <calcite-radio-button value="one" checked></calcite-radio-button>
+    One
+  </calcite-label>
+  <calcite-label layout="inline">
+    <calcite-radio-button value="two"></calcite-radio-button>
+    Two
+  </calcite-label>
+  <calcite-label layout="inline">
+    <calcite-radio-button value="three"></calcite-radio-button>
+    Three
+  </calcite-label>
+</calcite-radio-button-group>`;