fix: Clean up styles

Workday · Sep 18, 2024 · 521f102 · 521f102
1 parent 23e2f63
commit 521f102
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 21 deletions.
diff --git a/modules/preview-react/form-field/lib/FormFieldHint.tsx b/modules/preview-react/form-field/lib/FormFieldHint.tsx
@@ -13,7 +13,6 @@ 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,
     },

diff --git a/modules/preview-react/form-field/lib/FormFieldInput.tsx b/modules/preview-react/form-field/lib/FormFieldInput.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
-import {Box} from '@workday/canvas-kit-react/layout';
+import {Box, mergeStyles} from '@workday/canvas-kit-react/layout';
 
 import {useFormFieldInput, useFormFieldModel} from './hooks';
 
@@ -10,5 +10,5 @@ export const FormFieldInput = createSubcomponent('input')({
   modelHook: useFormFieldModel,
   elemPropsHook: useFormFieldInput,
 })<ExtractProps<typeof Box, never>>((elemProps, Element) => {
-  return <Box data-width="ck-formfield-width" as={Element} {...elemProps} />;
+  return <Box data-width="ck-formfield-width" as={Element} {...mergeStyles(elemProps)} />;
 });
diff --git a/modules/preview-react/form-field/lib/formFieldStencil.ts b/modules/preview-react/form-field/lib/formFieldStencil.ts
@@ -15,6 +15,9 @@ export const formFieldStencil = createStencil({
         '[data-width="ck-formfield-width"]': {
           width: '100%',
         },
+        '&:has(div[data-width="ck-formfield-width"])': {
+          width: '100%',
+        },
       },
     },
     orientation: {

diff --git a/modules/react/checkbox/stories/examples/Inverse.tsx b/modules/react/checkbox/stories/examples/Inverse.tsx
@@ -3,10 +3,8 @@ import {Checkbox} from '@workday/canvas-kit-react/checkbox';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 
 const styleOverrides = createStyles({
-  gap: system.space.x4,
   backgroundColor: system.color.bg.primary.default,
   padding: system.space.x4,
 });
@@ -20,18 +18,12 @@ export const Inverse = () => {
 
   return (
     <Flex cs={styleOverrides}>
-      <FormField>
-        <FormField.Label>Confirm</FormField.Label>
-        <FormField.Field>
-          <FormField.Input
-            as={Checkbox}
-            variant="inverse"
-            checked={checked}
-            label="I agree to the terms"
-            onChange={handleChange}
-          />
-        </FormField.Field>
-      </FormField>
+      <Checkbox
+        variant="inverse"
+        checked={checked}
+        label="I agree to the terms"
+        onChange={handleChange}
+      />
     </Flex>
   );
 };
diff --git a/modules/react/text-area/stories/examples/Grow.tsx b/modules/react/text-area/stories/examples/Grow.tsx
@@ -11,9 +11,9 @@ export const Grow = () => {
 
   return (
     <FormField>
-      <FormField.Label>Leave a Review</FormField.Label>
+      <FormField.Label>Leave a Review foo</FormField.Label>
       <FormField.Field>
-        <FormField.Input as={TextArea} grow onChange={handleChange} value={value} />
+        <FormField.Input as={TextArea} onChange={handleChange} value={value} />
       </FormField.Field>
     </FormField>
   );

diff --git a/modules/react/text-input/stories/examples/Grow.tsx b/modules/react/text-input/stories/examples/Grow.tsx
@@ -10,10 +10,10 @@ export const Grow = () => {
   };
 
   return (
-    <FormField width="100%">
+    <FormField grow>
       <FormField.Label>Street Address</FormField.Label>
       <FormField.Field>
-        <FormField.Input width="100%" as={TextInput} onChange={handleChange} value={value} />
+        <FormField.Input as={TextInput} onChange={handleChange} value={value} />
       </FormField.Field>
     </FormField>
   );