fix: Update to use stencil

Workday · Oct 21, 2024 · 98ec8c1 · 98ec8c1
1 parent 6306823
commit 98ec8c1
Showing 1 changed file with 16 additions and 11 deletions.
diff --git a/modules/react/_examples/stories/mdx/examples/Density.tsx b/modules/react/_examples/stories/mdx/examples/Density.tsx
@@ -154,12 +154,6 @@ const formFieldStencil = createStencil({
   ],
 });
 
-const creditCardInputStyles = createStyles({
-  width: calc.add(system.space.x10, system.space.x10),
-  minWidth: calc.add(system.space.x10, system.space.x10),
-  textAlign: 'center',
-});
-
 const selectStencil = createStencil({
   base: {},
   modifiers: {
@@ -187,7 +181,9 @@ const selectStencil = createStencil({
 });
 
 const inputStencil = createStencil({
-  base: {},
+  base: {
+    minWidth: px2rem(200),
+  },
   modifiers: {
     density: {
       high: {
@@ -207,6 +203,15 @@ const inputStencil = createStencil({
   },
 });
 
+const creditCardInputStencil = createStencil({
+  extends: inputStencil,
+  base: {
+    width: calc.add(system.space.x10, system.space.x10),
+    minWidth: calc.add(system.space.x10, system.space.x10),
+    textAlign: 'center',
+  },
+});
+
 const flexContainerStencil = createStencil({
   base: {
     display: 'flex',
@@ -409,20 +414,20 @@ export const Density = () => {
                   <FormFieldGroup.Input
                     as={TextInput}
                     placeholder="XXXX"
-                    cs={[inputStencil({density}), creditCardInputStyles]}
+                    cs={creditCardInputStencil({density})}
                   />
                   <FormFieldGroup.Input
                     as={TextInput}
                     placeholder="XXXX"
-                    cs={[inputStencil({density}), creditCardInputStyles]}
+                    cs={creditCardInputStencil({density})}
                   />
                   <FormFieldGroup.Input
                     as={TextInput}
                     placeholder="XXXX"
-                    cs={[inputStencil({density}), creditCardInputStyles]}
+                    cs={creditCardInputStencil({density})}
                   />
                   <FormFieldGroup.Input
-                    cs={[inputStencil({density}), creditCardInputStyles]}
+                    cs={creditCardInputStencil({density})}
                     placeholder="XXXX"
                     as={TextInput}
                   />