feat(input): small code changes

adevinta · Jul 13, 2023 · 7b70625 · 7b70625
1 parent 2e46775
commit 7b70625
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 22 deletions.
diff --git a/packages/components/input/src/Input.doc.mdx b/packages/components/input/src/Input.doc.mdx
@@ -61,7 +61,7 @@ Use `disabled` prop to indicate the input is disabled (set the prop on `InputGro
 
 <Canvas of={stories.Disabled} />
 
-### Addons
+## Addons
 
 Addons are sections before/after the input itself.
 
@@ -71,27 +71,25 @@ Addons are not considered part of the input itself and clicking on them won't mo
 
 <Canvas of={stories.Addons} />
 
-### Icons
+## Icons
 
 An `InputGroup` can have a `LeadingIcon` and/or `TrailingIcon`.
 
 Please note that the `TrailingIcon` will be automatically replaced by the state indicator if the input has one (`error`, `alert` or `success`).
 
 <Canvas of={stories.Icons} />
 
-## Password Input Example
+## State
 
-Let's use `InputGroup` and its components to create a password input with a show/hide password functionality
-
-<Canvas of={stories.PasswordInputExample} />
+When using `InputGroup`, you can apply a state to the group among `error`, `alert` and `success`. It will update the outline styles and display a state indicator **automatically**.
 
-## States
+<Canvas of={stories.State} />
 
-When using `InputGroup`, you can apply a state to the group among `error`, `alert` and `success`.
+## Password
 
-It will update the outline styles and display a state indicator (icon).
+Let's use `InputGroup` and its components to create a password input with a show/hide password functionality
 
-<Canvas of={stories.States} />
+<Canvas of={stories.Password} />
 
 ## Combining with FormField
 

diff --git a/packages/components/input/src/Input.stories.tsx b/packages/components/input/src/Input.stories.tsx
@@ -73,7 +73,7 @@ export const Icons: StoryFn = () => {
   )
 }
 
-export const PasswordInputExample: StoryFn = _args => {
+export const Password: StoryFn = _args => {
   const [isVisible, setIsVisible] = useState(false)
 
   const handleToggle = () => {
@@ -88,7 +88,6 @@ export const PasswordInputExample: StoryFn = _args => {
         <IconButton
           intent="neutral"
           design="ghost"
-          size="md"
           aria-label={isVisible ? 'Hide password' : 'Show password'}
           onClick={handleToggle}
         >
@@ -99,7 +98,7 @@ export const PasswordInputExample: StoryFn = _args => {
   )
 }
 
-export const States: StoryFn = _args => {
+export const State: StoryFn = _args => {
   return (
     <div className="flex flex-col gap-xl">
       <div>

diff --git a/packages/components/input/src/InputGroupContext.ts b/packages/components/input/src/InputGroupContext.ts
@@ -13,9 +13,7 @@ export interface InputGroupContext {
 export const InputGroupContext = createContext<Partial<InputGroupContext> | null>(null)
 
 export const useInputGroup = () => {
-  return (
-    useContext(InputGroupContext) || {
-      isStandalone: true,
-    }
-  )
+  const context = useContext(InputGroupContext)
+
+  return context || { isStandalone: true }
 }
diff --git a/packages/components/input/src/InputStateIndicator.tsx b/packages/components/input/src/InputStateIndicator.tsx
@@ -1,7 +1,7 @@
 import { AlertOutline } from '@spark-ui/icons/dist/icons/AlertOutline'
 import { Check } from '@spark-ui/icons/dist/icons/Check'
 import { WarningOutline } from '@spark-ui/icons/dist/icons/WarningOutline'
-import { ReactElement, ReactNode } from 'react'
+import { ReactElement } from 'react'
 
 import { useInputGroup } from './InputGroupContext'
 import { InputTrailingIcon, InputTrailingIconProps } from './InputTrailingIcon'
@@ -10,14 +10,13 @@ export interface InputStateIndicatorProps extends Omit<InputTrailingIconProps, '
   errorIcon?: ReactElement
   alertIcon?: ReactElement
   successIcon?: ReactElement
-  children?: ReactNode
 }
 
 export const InputStateIndicator = ({
   errorIcon = <AlertOutline />,
   alertIcon = <WarningOutline />,
   successIcon = <Check />,
-  ...rest
+  ...others
 }: InputStateIndicatorProps) => {
   const group = useInputGroup()
 
@@ -32,7 +31,7 @@ export const InputStateIndicator = ({
   }
 
   return (
-    <InputTrailingIcon intent={state} {...rest}>
+    <InputTrailingIcon intent={state} {...others}>
       {icons[state]}
     </InputTrailingIcon>
   )