From ab84efb51ed17fc8b13819d17d42bd0cebd60768 Mon Sep 17 00:00:00 2001
From: Raisa Primerova <48605821+RayRedGoose@users.noreply.github.com>
Date: Wed, 17 Apr 2024 17:19:35 -0600
Subject: [PATCH] fix: Fix default modifiers type (#2704)

Fixes: #2703

Fixed issue with default modifiers type:

```ts
const textStencil = createStencil({
  base: {},
  modifiers: {
    "type": {
      "title.large": {}
    }
  }
});

const labelStencil = createStencil({
  extends: textStencil,
  base: {},
  modifiers: {variant: {"inverse": {}}}
  // the next line shows issue
  // that type `{type: "title.large"}` is not compatible with `{variant: {"inverse": {}}}`
  defaultModifiers: {type: "title.large"}
}

[category:Components]
---
 modules/preview-react/radio/lib/RadioText.tsx |  5 ++--
 modules/styling/lib/cs.ts                     | 14 +++++++--
 modules/styling/spec/cs.spec.tsx              | 29 +++++++++++++++++++
 3 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/modules/preview-react/radio/lib/RadioText.tsx b/modules/preview-react/radio/lib/RadioText.tsx
index 06e49bce78..3ede961394 100644
--- a/modules/preview-react/radio/lib/RadioText.tsx
+++ b/modules/preview-react/radio/lib/RadioText.tsx
@@ -34,8 +34,9 @@ const radioTextStencil = createStencil({
       },
     },
   ],
-  // @ts-ignore
-  defaultModifiers: {typeLevel: 'subtext.large'},
+  defaultModifiers: {
+    typeLevel: 'subtext.large',
+  },
 });
 
 export const RadioText = createSubcomponent('span')({
diff --git a/modules/styling/lib/cs.ts b/modules/styling/lib/cs.ts
index 83173dbb31..11a0128f7e 100644
--- a/modules/styling/lib/cs.ts
+++ b/modules/styling/lib/cs.ts
@@ -985,13 +985,21 @@ export interface StencilConfig<
    * Modifiers are optional. If you need a modifier to always be defined, a default modifier value
    * will be used when a modifier is `undefined`
    */
-  defaultModifiers?: {[K in keyof M]?: keyof M[K]};
+  defaultModifiers?: [E] extends [never]
+    ? StencilDefaultModifierReturn<M>
+    : E extends BaseStencil<infer ME, any, any, any>
+    ? StencilDefaultModifierReturn<M & ME>
+    : undefined;
 }
 
 type StencilModifierReturn<M extends StencilModifierConfig<V>, V extends DefaultedVarsShape> = {
   [K1 in keyof M]: {[K2 in keyof M[K1]]: string};
 };
 
+type StencilDefaultModifierReturn<M> = {
+  [K1 in keyof M]?: keyof M[K1];
+};
+
 export interface BaseStencil<
   M extends StencilModifierConfig<V>,
   V extends DefaultedVarsShape,
@@ -1026,7 +1034,9 @@ export interface Stencil<
   modifiers: [E] extends [BaseStencil<infer ME, infer VE, any, any>]
     ? StencilModifierReturn<ME & M, VE & V>
     : StencilModifierReturn<M, V>;
-  defaultModifiers: {[K in keyof M]?: keyof M[K]};
+  defaultModifiers: [E] extends [BaseStencil<infer ME, any, any, any>]
+    ? StencilDefaultModifierReturn<ME & M>
+    : StencilDefaultModifierReturn<M>;
 }
 
 type VariableValuesStencil<V extends DefaultedVarsShape> = V extends Record<string, string>
diff --git a/modules/styling/spec/cs.spec.tsx b/modules/styling/spec/cs.spec.tsx
index 53dd235009..c3be981caa 100644
--- a/modules/styling/spec/cs.spec.tsx
+++ b/modules/styling/spec/cs.spec.tsx
@@ -975,6 +975,35 @@ describe('cs', () => {
         });
       });
 
+      it('should set default modifiers using base modifiers', () => {
+        const baseStencil = createStencil({
+          base: {},
+          modifiers: {
+            size: {
+              large: {width: '100rem'},
+            },
+          },
+        });
+
+        const extendedStencil = createStencil({
+          extends: baseStencil,
+          base: {},
+          modifiers: {
+            extra: {
+              true: {},
+            },
+          },
+          defaultModifiers: {size: 'large'},
+        });
+
+        // calling the stencil
+        type Args = Exclude<Parameters<typeof extendedStencil>[0], undefined>;
+        expectTypeOf<Args>().toEqualTypeOf<{
+          size?: 'large';
+          extra?: boolean;
+        }>();
+      });
+
       it('should extend variables', () => {
         const baseStencil = createStencil({
           vars: {