feat: textfield - support 'search' type

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

Hide file tree

Showing 5 changed files with 14 additions and 3 deletions.
diff --git a/.changeset/tall-cups-bow.md b/.changeset/tall-cups-bow.md
@@ -0,0 +1,6 @@
+---
+"@greenlabs/formula-components": patch
+"@greenlabs/rescript-formula-components": patch
+---
+
+feat: textfield - support 'search' type
diff --git a/packages/components-rescript/src/Formula__TextField.res b/packages/components-rescript/src/Formula__TextField.res
@@ -27,7 +27,7 @@ external make: (
   ~className: string=?,
   ~variant: [#boxOutline | #boxFill | #line]=?,
   ~size: [#xsmall | #small | #medium | #large]=?,
-  ~_type: [#text | #password]=?,
+  ~_type: [#text | #password | #search]=?,
   ~placeholder: string=?,
   ~prefix: React.element=?,
   ~prefixIcon: React.componentLike<{..}, React.element>=?, // FIXME: Icon component type

diff --git a/packages/components/src/TextField/TextField.stories.tsx b/packages/components/src/TextField/TextField.stories.tsx
@@ -220,6 +220,7 @@ export const Textarea_and_Ref_Etc: ComponentStory<typeof TextField> = (
             }}
             titleText="onChange: see console"
           />
+          <TextField {...args} type="search" titleText="type=search" />
         </form>
       )}
     />

diff --git a/packages/components/src/TextField/TextField.tsx b/packages/components/src/TextField/TextField.tsx
@@ -37,14 +37,14 @@ type inputProps = {
   onBlur?: React.FocusEventHandler<InputElement>
   onChange?: React.ChangeEventHandler<InputElement>
   onFocus?: React.FocusEventHandler<InputElement>
-  type?: "text" | "password"
+  type?: "text" | "password" | "search"
 }
 
 // FIXME: make input/textarea compatible
 export type renderInputProps = inputProps & {
   id: string
   className: string
-  type: "text" | "password" // FIXME: fix case for <textarea />
+  type: "text" | "password" | "search" // FIXME: fix case for <textarea />
   inputRef: InputRefType
 }
 type TextFieldProps = PropsWithChildren<

diff --git a/packages/components/src/TextField/styles.css.ts b/packages/components/src/TextField/styles.css.ts
@@ -283,6 +283,10 @@ export const inputStyle = style({
   borderTopRightRadius: 4,
   borderBottomRightRadius: 4,
   selectors: {
+    [`&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button, &::-ms-clear`]:
+      {
+        WebkitAppearance: "none",
+      },
     [`${textFieldVariants["line.large"]} &`]: {
       vars: {
         [vars.inputHeight]: "33px",
-Original file line number
+Diff line change
@@ Expand Up @@
                 }}
                 titleText="onChange: see console"
               />
+              <TextField {...args} type="search" titleText="type=search" />
             </form>
           )}
         />
@@ Expand Down @@