From f1fb499bfc51e500ac5dbaf8473150eea06881d4 Mon Sep 17 00:00:00 2001
From: Nicholas Boll <nicholas.boll@gmail.com>
Date: Tue, 24 Sep 2024 13:54:27 -0600
Subject: [PATCH] feat(text-input): Support CSS Variables in InputGroup (#2935)

Add support for the new Canvas tokens that utilize CSS Variables in `InputGroup` and export the `maybeWrapCssVars` function from the styling package.

[category:Components]
---
 modules/react/text-input/lib/InputGroup.tsx |  7 ++++---
 modules/styling/lib/cs.ts                   | 12 ++++++++++--
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/modules/react/text-input/lib/InputGroup.tsx b/modules/react/text-input/lib/InputGroup.tsx
index c16531ebcf..6cdb349ba1 100644
--- a/modules/react/text-input/lib/InputGroup.tsx
+++ b/modules/react/text-input/lib/InputGroup.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
-import {space} from '@workday/canvas-kit-react/tokens';
+import {maybeWrapCSSVariables} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 import {
   createContainer,
   createElemPropsHook,
@@ -198,11 +199,11 @@ export const InputGroup = createContainer('div')({
   // `offsetEnd` arrays
   React.Children.forEach(children, child => {
     if (React.isValidElement<any>(child) && child.type === InputGroupInnerStart) {
-      const width = child.props.width || space.xl;
+      const width = maybeWrapCSSVariables(child.props.width || system.space.x10);
       offsetsStart.push(width);
     }
     if (React.isValidElement<any>(child) && child.type === InputGroupInnerEnd) {
-      const width = child.props.width || space.xl;
+      const width = maybeWrapCSSVariables(child.props.width || system.space.x10);
       offsetsEnd.push(width);
     }
   });
diff --git a/modules/styling/lib/cs.ts b/modules/styling/lib/cs.ts
index e3a14d4583..d5347b8c4e 100644
--- a/modules/styling/lib/cs.ts
+++ b/modules/styling/lib/cs.ts
@@ -36,9 +36,17 @@ type DefaultedVarsShape = Record<string, string> | Record<string, Record<string,
 
 /**
  * Wrap all unwrapped CSS Variables. For example, `{padding: '--foo'}` will be replaced with
- * `{padding: 'var(--foo)'}`. It also works on variables in the middle of the property.
+ * `{padding: 'var(--foo)'}`. It also works on variables in the middle of the property. Takes any
+ * string and returns a string with CSS variables wrapped if necesary.
+ * 
+ * ```ts
+ * maybeWrapCSSVariables('1rem'); // 1rem
+ * maybeWrapCSSVariables('--foo'); // var(--foo)
+ * maybeWrapCSSVariables('var(--foo)'); // var(--foo)
+ * maybeWrapCSSVariables('calc(--foo)'); // calc(var(--foo))
+ * ```
  */
-function maybeWrapCSSVariables(input: string): string {
+export function maybeWrapCSSVariables(input: string): string {
   // matches an string starting with `--` that isn't already wrapped in a `var()`. It tries to match
   // any character that isn't a valid separator in CSS
   return input.replace(