Merge pull request #10989 from TylerAPfledderer/fix/input-misalignment

fix(Input): fix misalignment and styling states

Author: pettinarip

src/@chakra-ui/gatsby-plugin/components/Input.ts

@@ -1,4 +1,5 @@
 import { inputAnatomy } from "@chakra-ui/anatomy"
+import { cssVar } from "@chakra-ui/react"
 import {
   createMultiStyleConfigHelpers,
   defineStyle,
@@ -8,6 +9,9 @@ import { defineMergeStyles, inputDefaultTheme } from "./components.utils"
 const { defineMultiStyleConfig, definePartsStyle } =
   createMultiStyleConfigHelpers(inputAnatomy.keys)
 
+// From the default theme
+const $height = cssVar("input-height")
+
 const baseStyle = definePartsStyle((props) => {
   const {
     focusBorderColor: fc = "primaryHover",
@@ -19,10 +23,10 @@ const baseStyle = definePartsStyle((props) => {
     inputDefaultTheme.variants?.outline(props),
     {
       field: {
-        borderColor: "currentColor",
         borderRadius: "base",
         outline: "3px solid transparent",
         lineHeight: 1,
+        px: "2",
         _placeholder: {
           color: "disabled",
           opacity: 1,
@@ -34,9 +38,6 @@ const baseStyle = definePartsStyle((props) => {
           boxShadow: "none",
         },
         _hover: null, // override default
-        _groupHover: {
-          borderColor: "primary.hover",
-        },
         _invalid: {
           borderColor: ec,
           boxShadow: "none",
@@ -46,10 +47,14 @@ const baseStyle = definePartsStyle((props) => {
           opacity: 1,
         },
         "&:not(:disabled)": {
+          borderColor: "body.base",
           _active: {
             bg: "background.highlight",
             borderColor: "primary.highContrast",
           },
+          "[data-group] &:hover, &:hover": {
+            borderColor: "primary.hover",
+          },
         },
       },
       element: {
@@ -84,12 +89,10 @@ const baseStyle = definePartsStyle((props) => {
 
 const size = {
   md: defineStyle({
-    h: 10.5,
-    px: 2,
+    [$height.variable]: "sizes.10.5",
   }),
   sm: defineStyle({
-    h: 8,
-    px: 1,
+    [$height.variable]: "sizes.8",
   }),
 }
 

src/components/Input/Input.stories.tsx

@@ -2,7 +2,6 @@ import * as React from "react"
 import { VStack } from "@chakra-ui/react"
 import { Meta, StoryObj } from "@storybook/react"
 import Input from "."
-import { MdSearch } from "react-icons/md"
 import { BsSlashSquare } from "react-icons/bs"
 
 type InputType = typeof Input
@@ -19,34 +18,19 @@ type Story = StoryObj<InputType>
 export const Sizes: Story = {
   render: () => (
     <VStack width="154px">
-      <Input
-        leftElement={<MdSearch />}
-        rightElement={<BsSlashSquare />}
-        placeholder="Search"
-      />
-      <Input
-        leftElement={<MdSearch />}
-        rightElement={<BsSlashSquare />}
-        placeholder="Search"
-        size="sm"
-      />
+      <Input rightIcon={<BsSlashSquare />} placeholder="Search" />
+      <Input rightIcon={<BsSlashSquare />} placeholder="Search" size="sm" />
     </VStack>
   ),
 }
 
 export const ElementVariations: Story = {
   render: () => (
     <VStack width="258px" spacing={4}>
-      <Input
-        leftElement={<MdSearch />}
-        rightElement={<BsSlashSquare />}
-        placeholder="input text"
-      />
-      <Input leftElement={<MdSearch />} placeholder="input text" />
       <Input placeholder="input text" />
-      <Input rightElement={<BsSlashSquare />} placeholder="input text" />
+      <Input rightIcon={<BsSlashSquare />} placeholder="input text" />
       <Input
-        rightElement={<BsSlashSquare />}
+        rightIcon={<BsSlashSquare />}
         placeholder="input text"
         isDisabled
       />

src/components/Input/index.tsx

@@ -3,31 +3,36 @@ import {
   Input as ChakraInput,
   InputGroup,
   InputGroupProps,
-  InputLeftElement,
   InputProps as ChakraInputProps,
   InputRightElement,
 } from "@chakra-ui/react"
 
-interface InputProps extends ChakraInputProps {
+type CommonProps = ChakraInputProps
+
+type NoIconProps = CommonProps & { rightIcon?: never }
+
+type WithIconProps = CommonProps & {
   /**
-   * The Element or Icon used to render `InputLeftElement`
+   * The Icon used to render `InputRightElement` on the right side of the input
    */
-  leftElement?: React.ReactNode
+  rightIcon: JSX.Element
   /**
-   * The Element or Icon used to render `InputRightElement`
+   * Primarily for style props to be applied to the wrapper
    */
-  rightElement?: React.ReactNode
   inputGroupProps?: InputGroupProps
 }
 
+type InputProps = NoIconProps | WithIconProps
+
+function Input(props: NoIconProps): JSX.Element
+function Input(props: WithIconProps): JSX.Element
 function Input(props: InputProps) {
-  if ("leftElement" in props || "rightElement" in props) {
-    const { size, inputGroupProps, leftElement, rightElement, ...rest } = props
+  if (props.rightIcon) {
+    const { size, inputGroupProps, rightIcon: Icon, ...rest } = props
     return (
       <InputGroup size={size} {...inputGroupProps}>
         <ChakraInput data-peer {...rest} />
-        {leftElement ? <InputLeftElement children={leftElement} /> : null}
-        {rightElement ? <InputRightElement children={rightElement} /> : null}
+        <InputRightElement children={Icon} />
       </InputGroup>
     )
   }

src/pages/languages.tsx

@@ -91,18 +91,15 @@ const LanguagesPage = ({ location }: PageProps<Queries.LanguagesPageQuery>) => {
             value={keyword}
             placeholder={searchString}
             onChange={(e) => setKeyword(e.target.value)}
-            rightElement={
-              keyword !== "" && (
-                <IconButton
-                  icon={<MdClose />}
-                  onClick={resetKeyword}
-                  position="absolute"
-                  insetInlineEnd={1}
-                  aria-label={t("clear")}
-                  variant="ghost"
-                  _hover={{ svg: { fill: "primary" } }}
-                />
-              )
+            rightIcon={
+              <IconButton
+                icon={<MdClose />}
+                onClick={resetKeyword}
+                display={keyword === "" ? "none" : undefined}
+                aria-label={t("clear")}
+                variant="ghost"
+                _hover={{ svg: { fill: "primary" } }}
+              />
             }
           />
         </Box>