fix: textfield issues

green-labs · Dec 21, 2022 · 62f4087 · 62f4087
1 parent 1c32322
commit 62f4087
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 2 deletions.
diff --git a/.changeset/sweet-trainers-divide.md b/.changeset/sweet-trainers-divide.md
@@ -0,0 +1,10 @@
+---
+"@greenlabs/formula-components": patch
+"@greenlabs/rescript-formula-components": patch
+---
+
+textfield bugfix
+
+- prevent right border clipping on a certain variant
+- polyvary name typo
+- https://github.com/green-labs/farmmy-web/pull/159
diff --git a/packages/components-rescript/src/Formula__TextField.res b/packages/components-rescript/src/Formula__TextField.res
@@ -26,7 +26,7 @@ external make: (
   ~renderInput: renderInputProps<{..}> => React.element=?,
   ~className: string=?,
   ~variant: [#boxOutline | #boxFill | #line]=?,
-  ~size: [#xsmall | #samll | #medium | #large]=?,
+  ~size: [#xsmall | #small | #medium | #large]=?,
   ~_type: [#text | #password]=?,
   ~placeholder: string=?,
   ~prefix: React.element=?,

diff --git a/packages/components/src/TextField/TextField.stories.tsx b/packages/components/src/TextField/TextField.stories.tsx
@@ -205,6 +205,7 @@ export const Textarea_and_Ref_Etc: ComponentStory<typeof TextField> = (
           <br />
           <TextField
             {...args}
+            variant="boxFill"
             titleText="options.showHintOnFocusOnly | options.hideClearButton"
             options={{
               showHintOnFocusOnly: true,

diff --git a/packages/components/src/TextField/styles.css.ts b/packages/components/src/TextField/styles.css.ts
@@ -275,10 +275,13 @@ export const inputStyle = style({
   "::placeholder": {
     color: theme.colors["gray-40"],
   },
+  fontFamily: theme.font.body,
   ":focus": {
     outline: "none", // FIXME
   },
-  fontFamily: theme.font.body,
+  // a temporary hack to prevent input clipping outer border
+  borderTopRightRadius: 4,
+  borderBottomRightRadius: 4,
   selectors: {
     [`${textFieldVariants["line.large"]} &`]: {
       vars: {