fix: Deprecate parentModifier

modules/preview-react/form-field/lib/FormFieldGroupLabel.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
 
 import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
-import {createStencil, parentModifier, px2rem} from '@workday/canvas-kit-styling';
+import {createStencil, px2rem} from '@workday/canvas-kit-styling';
 import {Text, textStencil} from '@workday/canvas-kit-react/text';
 import {FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout';
 import {brand, system} from '@workday/canvas-tokens-web';
 
 import {useFormFieldLabel, useFormFieldModel} from './hooks';
-import {formFieldStencil} from './formFieldStencil';
 
 export interface FormFieldLabelProps
   extends FlexProps,

modules/preview-react/form-field/lib/FormFieldHint.tsx

@@ -2,19 +2,22 @@ import React from 'react';
 
 import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
 import {system, brand} from '@workday/canvas-tokens-web';
-import {createStencil, parentModifier} from '@workday/canvas-kit-styling';
+import {createStencil} from '@workday/canvas-kit-styling';
 import {Text, textStencil} from '@workday/canvas-kit-react/text';
 import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
 import {useFormFieldHint, useFormFieldModel} from './hooks';
-import {formFieldStencil} from './formFieldStencil';
 
 export const formFieldHintStencil = createStencil({
   extends: textStencil,
   base: {
     margin: `${system.space.x2} ${system.space.zero} ${system.space.zero}`,
-    [parentModifier(formFieldStencil.modifiers.error.error)]: {
-      color: brand.error.base,
+  },
+  modifiers: {
+    isRequired: {
+      true: {
+        color: brand.error.base,
+      },
     },
   },
   defaultModifiers: {
@@ -26,15 +29,22 @@ export const FormFieldHint = createSubcomponent('p')({
   displayName: 'FormField.Hint',
   modelHook: useFormFieldModel,
   elemPropsHook: useFormFieldHint,
-})<ExtractProps<typeof Text, never>>(({children, typeLevel, variant, ...elemProps}, Element) => {
-  if (!children) {
-    // If there is no hint text just skip rendering
-    return null;
-  }
+})<ExtractProps<typeof Text, never>>(
+  ({children, typeLevel, variant, ...elemProps}, Element, model) => {
+    if (!children) {
+      // If there is no hint text just skip rendering
+      return null;
+    }
 
-  return (
-    <Element {...mergeStyles(elemProps, formFieldHintStencil({typeLevel, variant}))}>
-      {children}
-    </Element>
-  );
-});
+    return (
+      <Element
+        {...mergeStyles(
+          elemProps,
+          formFieldHintStencil({typeLevel, variant, isRequired: model.state.isRequired})
+        )}
+      >
+        {children}
+      </Element>
+    );
+  }
+);

modules/styling/lib/cs.ts

@@ -1069,6 +1069,7 @@ function combineClassNames(input: (string | undefined)[]): string {
  *   }
  * })
  * ```
+ * @deprecated `parentModifier` is deprecated. While we support compat mode, we can't use `parentModifier`. If consumers pass in a style prop, this will created an unstable hash, breaking this function.
  */
 export function parentModifier(value: string) {
   return `.${value.replace('css-', 'm')} :where(&)`;