From 62f40871ff0aa80a147ac136c426a94a70a2c7b8 Mon Sep 17 00:00:00 2001
From: Jaeho Lee <me@jaeholee.org>
Date: Wed, 21 Dec 2022 15:23:00 +0900
Subject: [PATCH] fix: textfield issues

---
 .changeset/sweet-trainers-divide.md                    | 10 ++++++++++
 .../components-rescript/src/Formula__TextField.res     |  2 +-
 .../components/src/TextField/TextField.stories.tsx     |  1 +
 packages/components/src/TextField/styles.css.ts        |  5 ++++-
 4 files changed, 16 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/sweet-trainers-divide.md

diff --git a/.changeset/sweet-trainers-divide.md b/.changeset/sweet-trainers-divide.md
new file mode 100644
index 00000000..94032088
--- /dev/null
+++ 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
index 599816bd..7b6c17f5 100644
--- 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
index d8bb74c6..bf329078 100644
--- 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
index c1a7db7f..882755f9 100644
--- 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: {