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: 0;
+  }
 
- &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: 0;
+ }
+ }
+ @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;
 }