@workday/canvas-kit-preview-react 14.0.0-alpha.1227-next.0 → 14.0.0-alpha.1230-next.0

package/text-input/lib/TextInputField.tsx

@@ -1,49 +1,15 @@
-import {
-  createSubcomponent,
-  ExtractProps,
-  useTheme,
-  useThemedRing,
-} from '@workday/canvas-kit-react/common';
+import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
 import {FormField} from '@workday/canvas-kit-react/form-field';
-import {brand, system} from '@workday/canvas-tokens-web';
-import {createStencil, cssVar, px2rem} from '@workday/canvas-kit-styling';
+import {brand} from '@workday/canvas-tokens-web';
+import {createStencil} from '@workday/canvas-kit-styling';
 import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
 import {useTextInputField, useTextInputModel} from './hooks';
+import {TextInput, textInputStencil} from '@workday/canvas-kit-react/text-input';
 
 const textInputFieldStencil = createStencil({
-  base: {
-    ...system.type.subtext.large,
-    transition: '0.2s box-shadow, 0.2s border-color',
-    border: `${px2rem(1)} solid ${cssVar(system.color.border.input.default)}`,
-    padding: system.space.x2,
-    margin: 0,
-    display: 'block',
-    height: system.space.x10,
-    minWidth: px2rem(280),
-    borderRadius: system.shape.x1,
-    backgroundColor: system.color.bg.default,
-    '&::placeholder': {
-      color: system.color.text.default,
-    },
-    '&:hover': {
-      borderColor: system.color.border.input.strong,
-    },
-    '&:focus:not([disabled])': {
-      outline: 'none',
-    },
-    '&:disabled': {
-      backgroundColor: system.color.bg.alt.softer,
-      borderColor: system.color.border.input.disabled,
-      color: system.color.fg.disabled,
-      '&::placeholder': {
-        color: system.color.fg.disabled,
-      },
-    },
-    '::-ms-clear': {
-      display: 'none',
-    },
-  },
+  extends: textInputStencil,
+  base: {},
   modifiers: {
     error: {
       error: {
@@ -64,23 +30,10 @@ export const TextInputField = createSubcomponent('input')({
   modelHook: useTextInputModel,
   elemPropsHook: useTextInputField,
 })<ExtractProps<typeof FormField.Input, never>>((elemProps, Element, model) => {
-  const theme = useTheme();
-  const errorRing = useThemedRing('error');
-
-  const focusStyles =
-    model.state.error === 'error'
-      ? errorRing
-      : {
-          '&:focus:not([disabled])': {
-            borderColor: theme.canvas.palette.common.focusOutline,
-            boxShadow: `inset 0 0 0 1px ${theme.canvas.palette.common.focusOutline}`,
-          },
-        };
-  console.log(model.state.error);
   return (
     <FormField.Input
-      as="input"
-      {...mergeStyles(elemProps, [textInputFieldStencil({error: model.state.error}), focusStyles])}
+      as={TextInput}
+      {...mergeStyles(elemProps, [textInputFieldStencil({error: model.state.error})])}
     />
   );
 });