feat(atom/input): refactor

components/atom/input/demo/index.js

@@ -1,17 +1,9 @@
-import {useState} from 'react'
-
-import AtomInput, {
-  inputShapes,
-  inputSizes,
-  inputStates,
-  inputTypes
-} from 'components/atom/input/src/index.js'
+import {Fragment, useState} from 'react'
 
 import {
   Anchor,
   AntDesignIcon,
   Article,
-  Box,
   Button,
   Cell,
   Code,
@@ -29,6 +21,12 @@ import {
   UnorderedList
 } from '@s-ui/documentation-library'
 
+import AtomInput, {
+  inputShapes,
+  inputSizes,
+  inputStates,
+  inputTypes
+} from '../../input/src/index.js'
 import {flexCenteredStyle, stackMap} from './settings.js'
 
 const DefaultDemo = () => (
@@ -166,7 +164,7 @@ const TypeDemo = () => {
             'MASK',
             {
               type: inputTypes.MASK,
-              mask: 'ES00 0000 0000 00 0000000000',
+              mask: {mask: 'ES00 0000 0000 00 0000000000'},
               placeholder: 'ES00 0000 0000 00 0000000000',
               charsSize: 31
             },
@@ -429,7 +427,7 @@ const BorderlessDemo = () => {
   const [border, setBorder] = useState(true)
   const [mode, setMode] = useState('light')
   return (
-    <Article>
+    <Article mode={mode}>
       <H2>No border</H2>
       <Paragraph>
         The border of the input can be removed using the boolean prop{' '}
@@ -453,9 +451,7 @@ const BorderlessDemo = () => {
           />
         </Cell>
         <Cell span={2}>
-          <Box mode={mode}>
-            <AtomInput placeholder="click to interact" noBorder={!border} />
-          </Box>
+          <AtomInput placeholder="click to interact" noBorder={!border} />
         </Cell>
       </Grid>
     </Article>
@@ -525,7 +521,9 @@ const InlineFormDemo = () => (
       Input have its own way of provide a submision using the{' '}
       <Code>button</Code> prop, you can pass a React node.
     </Paragraph>
-    <AtomInput button={<Button>Send</Button>} />
+    <AtomInput
+      button={<Button style={{height: '100%', borderRadius: 0}}>Send</Button>}
+    />
   </Article>
 )
 
@@ -562,7 +560,7 @@ const ShapeDemo = () => (
       ))}
       {Object.entries({default: undefined, ...inputSizes}).map(
         ([sizeKey, sizeValue]) => (
-          <>
+          <Fragment key={sizeKey}>
             <Cell key={sizeKey}>
               <Label>{`${sizeKey}`}</Label>
             </Cell>
@@ -578,7 +576,7 @@ const ShapeDemo = () => (
                 </Cell>
               )
             )}
-          </>
+          </Fragment>
         )
       )}
     </Grid>

components/atom/input/package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "@s-ui/react-hooks": "1",
     "@s-ui/react-primitive-polymorphic-element": "1",
-    "imask": "3.4.0"
+    "react-imask": "6.4.3"
   },
   "peerDependencies": {
     "@s-ui/component-dependencies": "1"

components/atom/input/src/Input/Component/index.scss

@@ -7,77 +7,29 @@ $class-read-only: '#{$base-class-input}--readOnly';
   -webkit-appearance: none;
 
   @include sui-atom-input-input;
-  border-radius: $bdrs-atom-input;
+  background-color: transparent;
   min-height: auto;
   text-overflow: $tov-atom-input-placeholder;
-  &--charsSize {
+  padding-left: 0;
+  padding-right: 0;
+  border: 0 solid transparent;
+  &#{$base-class-input}--charsSize {
     width: inherit;
   }
 
-  &--hidden {
+  &#{$base-class-input}--hidden {
     display: none;
   }
 
-  &--readOnly {
-    background: $bgc-atom-input-read-only;
-    border: $bd-atom-input-read-only;
-    color: $c-atom-input-read-only;
-  }
-
-  @include atom-input-shape-wrapper(
-    $base-class,
-    $base-class-input,
-    $bdrs-atom-input-shapes,
-    $sizes-atom-input,
-    $bdrs-atom-input,
-    $h-atom-input--m
-  );
-
-  &#{$base-class-input}--noBorder,
-  &#{$base-class-input}--noBorder:disabled {
-    border: 0;
-    &:focus {
-      border: 0;
-      box-shadow: none;
-      outline: 0;
-    }
-  }
-
   &::placeholder {
     color: $c-atom-input-placeholder;
   }
 
-  &:disabled {
-    pointer-events: none;
-
-    &:not(#{$class-read-only}) {
-      -webkit-text-fill-color: $c-atom-input-disabled;
-
-      background: $bgc-atom-input-disabled;
-      border: $bd-atom-input-disabled;
-      color: $c-atom-input-disabled;
-    }
-  }
-
   &:focus {
-    @include sui-atom-input-input-focus;
-  }
-
-  @each $type, $attr in $sizes-atom-input {
-    &-size-#{$type} {
-      height: $attr;
-      min-height: $attr;
-    }
+    box-shadow: none;
   }
-
-  @each $state, $color in $states-atom-input {
-    &.sui-AtomInput-input--#{$state} {
-      border-color: $color;
-
-      &:focus {
-        box-shadow: $bxsh-atom-input-size $color;
-      }
-    }
+  &:focus-visible {
+    outline: 0;
   }
 
   &[type='number'] {

components/atom/input/src/Input/Wrappers/Addons/InputAddons.js

@@ -1,21 +1,14 @@
-import cx from 'classnames'
 import PropTypes from 'prop-types'
 
 import {INPUT_SHAPES, SIZES} from '../../../config.js'
-import {ADDON_TYPES, BASE_CLASS_ADDON_WRAPPER, getClassName} from './config.js'
+import {ADDON_TYPES, getClassName} from './config.js'
 
 const InputAddon = ({leftAddon, rightAddon, shape, size, children}) => {
   if (!(leftAddon || rightAddon)) {
     return children
   }
   return (
-    <div
-      className={cx(
-        BASE_CLASS_ADDON_WRAPPER,
-        shape && `${BASE_CLASS_ADDON_WRAPPER}-shape-${shape}`,
-        size && `${BASE_CLASS_ADDON_WRAPPER}-size-${size}`
-      )}
-    >
+    <>
       {leftAddon && (
         <span className={getClassName({type: ADDON_TYPES.LEFT, shape})}>
           {leftAddon}
@@ -27,7 +20,7 @@ const InputAddon = ({leftAddon, rightAddon, shape, size, children}) => {
           {rightAddon}
         </span>
       )}
-    </div>
+    </>
   )
 }
 

components/atom/input/src/Input/Wrappers/Addons/config.js

@@ -1,13 +1,12 @@
 import cx from 'classnames'
 
-import {BASE} from '../../../config.js'
+import {BASE, BASE_CLASS_ITEM} from '../../../config.js'
 
 export const BASE_CLASS_ADDON = `${BASE}--withAddon`
-export const BASE_CLASS_ADDON_WRAPPER = `${BASE_CLASS_ADDON}Wrapper`
 export const ADDON_TYPES = {
   LEFT: 'left',
   RIGHT: 'right'
 }
 
 export const getClassName = ({type}) =>
-  cx(BASE_CLASS_ADDON, `${BASE_CLASS_ADDON}--${type}`)
+  cx(BASE_CLASS_ITEM, BASE_CLASS_ADDON, `${BASE_CLASS_ADDON}--${type}`)

components/atom/input/src/Input/Wrappers/Addons/index.scss

@@ -1,34 +1,41 @@
-#{$base-class}--withAddon {
-  align-items: center;
-  background-color: $bgc-atom-input-addon;
-  border-color: $bdc-atom-input-addon;
-  border-style: solid;
-  color: $c-atom-input-addon;
-  display: flex;
-  flex-direction: column;
-  height: inherit;
-  justify-content: center;
-  line-height: inherit;
-  padding-left: $p-atom-input-addon-left;
-  padding-right: $p-atom-input-addon-right;
+$base-class-addon: '#{$base-class}--withAddon';
 
-  &--right {
-    border-width: $bdw-atom-input-addon-right;
-  }
+#{$base-class} {
+  #{$base-class-addon} {
+    align-items: center;
+    background-color: $bgc-atom-input-addon;
+    border-color: $bdc-atom-input-addon;
+    border-style: solid;
+    color: $c-atom-input-addon;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    line-height: inherit;
+    padding-left: $p-atom-input-addon-left;
+    padding-right: $p-atom-input-addon-right;
+    width: auto;
 
-  &--left {
-    border-width: $bdw-atom-input-addon-left;
-  }
+    &#{$base-class-addon}--right {
+      border-left-width: $bdw-s;
+    }
 
-  &Wrapper {
-    display: flex;
-    @include atom-input-shape-wrapper(
-      $base-class,
-      #{'.sui-AtomInput--withAddonWrapper'},
-      $bdrs-atom-input-shapes,
-      $sizes-atom-input,
-      $bdrs-atom-input,
-      $h-atom-input--m
-    );
+    &#{$base-class-addon}--left {
+      border-right-width: $bdw-s;
+    }
+  }
+  @each $state, $color in $states-atom-input {
+    &#{$base-class}--status-#{$state} {
+      #{$base-class}-item {
+        &#{$base-class-addon} {
+          border-color: $bdc-atom-input-addon;
+          &#{$base-class-addon}--right {
+            border-left-color: $color;
+          }
+          &#{$base-class-addon}--left {
+            border-right-color: $color;
+          }
+        }
+      }
+    }
   }
 }

components/atom/input/src/Input/Wrappers/Button/InputButton.js

@@ -1,17 +1,20 @@
+import cx from 'classnames'
 import PropTypes from 'prop-types'
 
-import {BASE_CLASS_BUTTON} from './config.js'
+import {BASE_CLASS_BUTTON, BASE_CLASS_ITEM} from './config.js'
 
 const InputButton = ({button, children}) => {
   if (button === undefined) {
     return children
   }
 
   return (
-    <div className={BASE_CLASS_BUTTON}>
-      <div className={`${BASE_CLASS_BUTTON}-input`}>{children}</div>
-      <div className={`${BASE_CLASS_BUTTON}-button`}>{button}</div>
-    </div>
+    <>
+      {children}
+      <span className={cx(BASE_CLASS_ITEM, `${BASE_CLASS_BUTTON}-button`)}>
+        {button}
+      </span>
+    </>
   )
 }
 InputButton.propTypes = {

components/atom/input/src/Input/Wrappers/Button/config.js

@@ -1,3 +1,4 @@
-import {BASE} from '../../../config.js'
+import {BASE, BASE_CLASS_ITEM} from '../../../config.js'
 
+export {BASE_CLASS_ITEM}
 export const BASE_CLASS_BUTTON = `${BASE}--withButton`

components/atom/input/src/Input/Wrappers/Button/index.scss

@@ -1,13 +1,3 @@
-#{$base-class}--withButton {
-  display: flex;
-  width: 100%;
-
-  &-input {
-    flex: 1;
-    width: 100%;
-  }
-
-  &-button {
-    margin-left: $m-m;
-  }
+#{$base-class}--withButton-button {
+  overflow: hidden;
 }