Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(atom/input): refactor #2310

Open
wants to merge 183 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
183 commits
Select commit Hold shift + click to select a range
73a1892
chore(Root): wip
andresin87 Sep 20, 2022
063ef49
chore(Root): wip
andresin87 Sep 21, 2022
95805b3
feat(components/atom/input): refactor general
andresin87 Sep 21, 2022
c311002
docs(Root): remove unnecesary declared prop
andresin87 Sep 21, 2022
b4eff42
chore(Root): revert
andresin87 Sep 21, 2022
f7835e1
fix(components/molecule/autosuggest): remove padded icon
andresin87 Sep 21, 2022
7cf945e
feat(components/atom/input): minor input style mods
andresin87 Sep 22, 2022
eb6364a
feat(components/atom/input): mod styles
andresin87 Sep 23, 2022
25281c7
feat(components/atom/tag): add 2 sizes and fix styles
andresin87 Sep 23, 2022
0974a0d
feat(components/molecule/inputTags): modify the component to addopt t…
andresin87 Sep 23, 2022
d747473
chore(components/atom/input): restore package.json
andresin87 Sep 23, 2022
43d0db5
chore(components/atom/tag): restore package.json
andresin87 Sep 23, 2022
49bff79
chore(components/molecule/inputTags): restore package.json+
andresin87 Sep 23, 2022
7daf619
refactor(components/atom/input): remove unnnecesary destructuring
andresin87 Sep 27, 2022
5564ebc
refactor(components/atom/input): improve readability oh imask handlers
andresin87 Sep 27, 2022
7bfdeb9
refactor(components/atom/input): isValidSize refactor helper
andresin87 Sep 27, 2022
a2849bb
refactor(components/atom/input): lint
andresin87 Sep 27, 2022
8a89c16
feat(components/molecule/select): get the right input structure
andresin87 Sep 29, 2022
7f30eaa
feat(components/molecule/notification): create new variable to define…
Sep 19, 2022
a3eca0e
feat(components/molecule/notification): refactor to use background co…
Sep 19, 2022
91ac33b
release(components/molecule/notification): v1.33.0 [skip ci]
sui-bot Sep 19, 2022
d505e69
feat(components/molecule/imageEditor): Add a SCSS token to customize …
oegea Sep 19, 2022
7ccda3d
release(components/molecule/imageEditor): v1.10.0 [skip ci]
sui-bot Sep 20, 2022
f053bd6
feat(components/atom/helpText): add margin top variable
andresz1 Sep 20, 2022
b529d89
feat(components/atom/validationText): add margin top variable
andresz1 Sep 20, 2022
aa42d3a
feat(components/atom/helpText): update margin variable
andresz1 Sep 20, 2022
1550f4f
feat(components/atom/validationText): update margin variable
andresz1 Sep 20, 2022
235d983
feat(components/atom/validationText): update margin
andresz1 Sep 20, 2022
88ee516
release(components/atom/helpText): v1.8.0 [skip ci]
sui-bot Sep 20, 2022
2e8afdf
release(components/atom/validationText): v1.8.0 [skip ci]
sui-bot Sep 20, 2022
c2510da
feat(components/molecule/tabs): Change tabs to be able to modify curr…
oegea Sep 20, 2022
ae6843c
feat(components/molecule/tabs): control/uncontroll active tabs
andresin87 Sep 21, 2022
22d0388
feat(components/molecule/tabs): remove unnecesary prop injected
andresin87 Sep 21, 2022
521935f
chore(Root): Update coverage badges
sui-bot Sep 22, 2022
f45391e
release(components/molecule/tabs): v2.36.0 [skip ci]
sui-bot Sep 22, 2022
2f67190
fix(components/molecule/drawer): avoid add a listener for keydown tha…
Sep 21, 2022
fb17d95
chore(Root): Update coverage badges
sui-bot Sep 22, 2022
53bb8f9
release(components/molecule/drawer): v4.6.0 [skip ci]
sui-bot Sep 22, 2022
e61f953
feat(components/molecule/avatar): handle background color for avatar …
Sep 29, 2022
c818a32
chore(Root): Update coverage badges
sui-bot Sep 29, 2022
ebad16c
release(components/molecule/avatar): v1.14.0 [skip ci]
sui-bot Sep 29, 2022
6dcbfee
feat(components/atom/label): add opacity token (#2338)
Sep 29, 2022
0a061aa
release(components/atom/label): v1.22.0 [skip ci]
sui-bot Sep 29, 2022
5613efc
feat(components/atom/image): rename node prop
sephoenix Sep 29, 2022
8fbfdc0
release(components/atom/image): v2.14.0 [skip ci]
sui-bot Sep 29, 2022
4162a5b
feat(components/atom/slider): add z-index in tooltip
javiauso Sep 29, 2022
6e74f16
release(components/atom/slider): v1.29.0 [skip ci]
sui-bot Sep 30, 2022
c994a8d
feat(components/atom/image): replace cloneElement spinner
sephoenix Oct 1, 2022
98dca3e
chore(Root): Update coverage badges
sui-bot Oct 1, 2022
c91c4bf
release(components/atom/image): v2.15.0 [skip ci]
sui-bot Oct 1, 2022
781f2a9
docs(components/atom/skeleton/demo): Update skeleton demo
stefi23 Oct 1, 2022
9249284
feat(components/atom/slider): Remove -system
stefi23 Oct 1, 2022
53f8cf4
feat(components/atom/tag): Remove -system
stefi23 Oct 1, 2022
a559798
feat(components/molecule/notification): Remove -system
stefi23 Oct 1, 2022
f164d7b
feat(components/molecule/rating): Remove -system
stefi23 Oct 1, 2022
e63d5c2
release(components/atom/slider): v1.30.0 [skip ci]
sui-bot Oct 1, 2022
345844c
release(components/atom/tag): v2.44.0 [skip ci]
sui-bot Oct 1, 2022
66c1eec
release(components/molecule/notification): v1.34.0 [skip ci]
sui-bot Oct 1, 2022
723e3b2
release(components/molecule/rating): v1.21.0 [skip ci]
sui-bot Oct 1, 2022
e830159
docs(components/atom/slider): Add AtomSlider marker prop doc
javiauso Oct 3, 2022
ab9f769
docs(components/atom/slider): update indent
javiauso Oct 3, 2022
8b7d42f
feat(components/primitive/portal): first approach
Aug 10, 2022
80c49cb
test(components/primitive/portal): add tests
andresin87 Aug 17, 2022
dd411dc
chore(Root): wip
andresin87 Sep 8, 2022
d5bea56
chore(Root): wip
andresin87 Sep 9, 2022
efb6d6a
chore(Root): wip
andresin87 Sep 14, 2022
494c2b0
chore(Root): wip
andresin87 Sep 16, 2022
8b62397
chore(Root): wip
andresin87 Sep 19, 2022
15dea5e
chore(Root): wip
andresin87 Sep 19, 2022
63a0df9
feat(components/hook/usePortal): first version
andresin87 Oct 3, 2022
3433829
chore(Root): Update coverage badges
sui-bot Oct 3, 2022
f05a3ed
release(components/hook/usePortal): v1.1.0 [skip ci]
sui-bot Oct 3, 2022
7092f4b
chore(Root): add issue test template
andresin87 Oct 3, 2022
006380c
chore(Root): modify the test report
andresin87 Oct 3, 2022
4165f4f
refactor(components/molecule/avatar): Replace cloneElement with sui p…
oegea Sep 30, 2022
49ef325
feat(components/molecule/avatar): Add primitive injector dependency
oegea Sep 30, 2022
1d67898
refactor(components/molecule/field): replace cloneElement with injector
oegea Sep 30, 2022
f629f63
refactor(components/molecule/buttonGroup): Replace cloneElement with …
oegea Sep 30, 2022
a3ea487
refactor(components/molecule/buttonGroup): Remove not-needed code
oegea Oct 3, 2022
0644557
refactor(components/molecule/buttonGroup): Remove no-longer needed va…
oegea Oct 3, 2022
63ab33c
refactor(components/molecule/buttonGroup): Remove no-longer needed fu…
oegea Oct 3, 2022
38d305c
chore(Root): Update coverage badges
sui-bot Oct 3, 2022
64ee2c5
release(components/molecule/avatar): v1.15.0 [skip ci]
sui-bot Oct 3, 2022
f88f753
fix(components/atom/image): update proptype
andresin87 Oct 3, 2022
bfd81aa
release(components/atom/image): v2.16.0 [skip ci]
sui-bot Oct 3, 2022
e7028c0
chore(Root): update the isue templates
andresin87 Oct 3, 2022
8269a9a
chore(Root): improve issue reports
andresin87 Oct 3, 2022
6c94d08
docs(Root): improve the commit message documentation
andresin87 Sep 24, 2022
3cf0f59
chore(Root): update mermaid image sync with node CI workflow
andresin87 Oct 3, 2022
5945cb2
feat(components/molecule/dropdownList): replace cloneElement by Injector
sephoenix Oct 3, 2022
28b2018
feat(components/molecule/dropdownList): remove unnecesary code
sephoenix Oct 3, 2022
4008aaa
chore(Root): Update coverage badges
sui-bot Oct 3, 2022
04fd715
release(components/molecule/dropdownList): v1.33.0 [skip ci]
sui-bot Oct 3, 2022
de3e0f3
feat(components/molecule/field): refactor Label's conditional in field
sephoenix Oct 3, 2022
eaf3bb0
refactor(components/molecule/field): solve conflicts
andresin87 Oct 4, 2022
c10fdd6
refactor(components/molecule/avatar): Replace cloneElement by injector
stefi23 Oct 1, 2022
ffc926c
fix(components/atom/input): wip
andresin87 Oct 14, 2022
f664820
refactor(components/atom/input): Update props order
stefi23 Oct 2, 2022
e109437
refactor(components/atom/input): Moved checkIfValidNumberInput to hel…
stefi23 Oct 2, 2022
d2ad012
chore(Root): Update coverage badges
sui-bot Oct 4, 2022
1924412
release(components/atom/input): v5.22.0 [skip ci]
sui-bot Oct 4, 2022
6dce79f
release(components/molecule/field): v1.35.0 [skip ci]
sui-bot Oct 4, 2022
21adccb
fix(components/molecule/field):less strict label validation
andresin87 Oct 4, 2022
b39e18c
refactor(components/molecule/field):lint
andresin87 Oct 4, 2022
a96eb82
fix(components/molecule/field): fix lint error
Oct 4, 2022
63ff8a9
release(components/molecule/field): v1.36.0 [skip ci]
sui-bot Oct 4, 2022
896d148
docs(Root): upgrade demo versions
andresin87 Oct 4, 2022
715fa4d
feat(components/molecule/select): upgrade dropdownOption version
andresin87 Oct 4, 2022
3bb8fda
feat(components/molecule/dropdownOption): change prop naming followin…
andresin87 Oct 4, 2022
d9d956b
feat(components/molecule/dropdownList): upgrade dropdownOption version
andresin87 Oct 4, 2022
2562b85
feat(components/molecule/select): set new prop name following convent…
andresin87 Oct 4, 2022
cb99edf
chore(components/molecule/autosuggestField): upgrade versions
andresin87 Oct 4, 2022
05b04ef
feat(components/molecule/autosuggest): update the dropdownOption new …
andresin87 Oct 4, 2022
e9b9e98
chore(Root): Update coverage badges
sui-bot Oct 4, 2022
e235220
release(components/molecule/autosuggest): v2.66.0 [skip ci]
sui-bot Oct 4, 2022
dedf5c6
release(components/molecule/dropdownList): v2.1.0 [skip ci]
sui-bot Oct 4, 2022
848a9c9
release(components/molecule/dropdownOption): v2.1.0 [skip ci]
sui-bot Oct 4, 2022
ceefe2a
release(components/molecule/select): v1.56.0 [skip ci]
sui-bot Oct 4, 2022
7cfe913
Add title props for image component
Ph0tonic Oct 4, 2022
7774c55
Update image component readme
Ph0tonic Oct 4, 2022
9e94f42
Reorder image props
Ph0tonic Oct 4, 2022
15f7a8f
feat(components/atom/helpText): admit react nodes as a text
andresin87 Oct 6, 2022
a64059e
feat(components/atom/validationText): admit react nodes as a text
andresin87 Oct 6, 2022
7875d15
feat(components/molecule/field): admit react nodes in error alert suc…
andresin87 Oct 6, 2022
85b1764
test(components/hook/usePortal): lint sorting imports
andresin87 Oct 6, 2022
61c1161
chore(Root): Update coverage badges
sui-bot Oct 6, 2022
a665b69
release(components/atom/actionButton): v1.10.0 [skip ci]
sui-bot Oct 6, 2022
7ada81b
release(components/atom/backToTop): v2.3.0 [skip ci]
sui-bot Oct 6, 2022
9f255c8
release(components/atom/badge): v1.28.0 [skip ci]
sui-bot Oct 6, 2022
e9f50f7
release(components/atom/card): v1.24.0 [skip ci]
sui-bot Oct 6, 2022
6aadda2
release(components/atom/helpText): v1.9.0 [skip ci]
sui-bot Oct 6, 2022
9dc3d1a
release(components/atom/popover): v3.12.0 [skip ci]
sui-bot Oct 6, 2022
74cbb8b
release(components/atom/progressBar): v2.9.0 [skip ci]
sui-bot Oct 6, 2022
31987ce
release(components/atom/radioButton): v1.10.0 [skip ci]
sui-bot Oct 6, 2022
49f09f4
release(components/atom/skeleton): v1.6.0 [skip ci]
sui-bot Oct 6, 2022
fd0a524
release(components/atom/spinner): v2.3.0 [skip ci]
sui-bot Oct 6, 2022
6386d0c
release(components/atom/switch): v1.28.0 [skip ci]
sui-bot Oct 6, 2022
e2b4466
release(components/atom/table): v1.14.0 [skip ci]
sui-bot Oct 6, 2022
ef5bd24
release(components/atom/textarea): v2.20.0 [skip ci]
sui-bot Oct 6, 2022
b83591e
release(components/atom/tooltip): v2.5.0 [skip ci]
sui-bot Oct 6, 2022
8e7aba1
release(components/atom/upload): v3.10.0 [skip ci]
sui-bot Oct 6, 2022
e5bcde4
release(components/atom/validationText): v1.9.0 [skip ci]
sui-bot Oct 6, 2022
0ea367d
release(components/behavior/sticky): v1.9.0 [skip ci]
sui-bot Oct 6, 2022
67a98b3
release(components/layout/grid): v2.13.0 [skip ci]
sui-bot Oct 6, 2022
285146a
release(components/molecule/accordion): v2.7.0 [skip ci]
sui-bot Oct 6, 2022
6934afa
release(components/molecule/autosuggestField): v2.11.0 [skip ci]
sui-bot Oct 6, 2022
dacd060
release(components/molecule/avatar): v1.16.0 [skip ci]
sui-bot Oct 6, 2022
ce11053
release(components/molecule/breadcrumb): v1.27.0 [skip ci]
sui-bot Oct 6, 2022
9ec33f6
release(components/molecule/buttonGroup): v2.10.0 [skip ci]
sui-bot Oct 6, 2022
b1a3be2
release(components/molecule/buttonGroupField): v1.9.0 [skip ci]
sui-bot Oct 6, 2022
670b29c
release(components/molecule/checkboxField): v5.1.0 [skip ci]
sui-bot Oct 6, 2022
14c2205
release(components/molecule/field): v1.37.0 [skip ci]
sui-bot Oct 6, 2022
c271bd1
docs(Root): put correct links on the homepage of SUI Components
jordevo Oct 6, 2022
3cd9fae
docs(Root): use new URL for bug reporting
jordevo Oct 7, 2022
3b12364
feat(components/atom/popover): add icon color type
andresin87 Oct 7, 2022
68f68ef
release(components/atom/popover): v3.13.0 [skip ci]
sui-bot Oct 7, 2022
e219204
fix(component/molecule/accordion): The arrows are upside down
najeebkp Oct 8, 2022
ff14052
Delete yarn.lock
andresin87 Oct 10, 2022
f47735e
fix(component/molecule/accordion): icon transition
najeebkp Oct 10, 2022
5abe5da
feat(components/molecule/dropdownOption): Fixed grammar error
sephoenix Oct 6, 2022
8672798
release(components/molecule/dropdownOption): v2.2.0 [skip ci]
sui-bot Oct 10, 2022
6583031
feat(components/atom/pinInput): create new token to be able to overwr…
Sabri1209 Oct 11, 2022
c4b035b
feat(components/atom/pinInput): replace inherit by auto
Sabri1209 Oct 11, 2022
c984713
release(components/atom/pinInput): v1.11.0 [skip ci]
sui-bot Oct 11, 2022
3119371
fix(components/molecule/select): accept onblur prop
alfdocimo Oct 11, 2022
b497f7e
refactor(components/molecule/select): use explicit naming for event
alfdocimo Oct 11, 2022
1edfc2d
chore(Root): Update coverage badges
sui-bot Oct 11, 2022
9e17687
release(components/molecule/select): v1.57.0 [skip ci]
sui-bot Oct 11, 2022
5021d4e
feat(components/molecule/tabs): make tabs accesibles
oriolpuig Aug 16, 2022
58fa2c8
refactor(components/molecule/tabs): not update activeContent element
oriolpuig Aug 16, 2022
724c10f
feat(components/molecule/tabs): add orientation aria attribute
oriolpuig Aug 16, 2022
8be0ed6
feat(components/molecule/tabs): add id prop to make tabs uniques
oriolpuig Oct 10, 2022
15fc3d7
feat(components/molecule/tabs): add pull request feedback
oriolpuig Oct 10, 2022
2e06d04
feat(components/molecule/tabs): pull request feedback
oriolpuig Oct 10, 2022
515f559
chore(Root): Update coverage badges
sui-bot Oct 13, 2022
df00e82
release(components/molecule/tabs): v2.37.0 [skip ci]
sui-bot Oct 13, 2022
3a45556
chore(Root): wip
andresin87 Sep 20, 2022
2ca5f35
chore(Root): wip
andresin87 Sep 21, 2022
bd990bb
feat(components/atom/input): refactor general
andresin87 Sep 21, 2022
0e1c0d5
feat(components/atom/input): minor input style mods
andresin87 Sep 22, 2022
495a98c
feat(components/atom/input): mod styles
andresin87 Sep 23, 2022
beab4e9
feat(components/atom/tag): add 2 sizes and fix styles
andresin87 Sep 23, 2022
0251f1d
fix(components/atom/input): input mask fully hooked
andresin87 Oct 14, 2022
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 15 additions & 17 deletions components/atom/input/demo/index.js
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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 = () => (
Expand Down Expand Up @@ -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
},
Expand Down Expand Up @@ -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{' '}
Expand All @@ -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>
Expand Down Expand Up @@ -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>
)

Expand Down Expand Up @@ -562,7 +560,7 @@ const ShapeDemo = () => (
))}
{Object.entries({default: undefined, ...inputSizes}).map(
([sizeKey, sizeValue]) => (
<>
<Fragment key={sizeKey}>
<Cell key={sizeKey}>
<Label>{`${sizeKey}`}</Label>
</Cell>
Expand All @@ -578,7 +576,7 @@ const ShapeDemo = () => (
</Cell>
)
)}
</>
</Fragment>
)
)}
</Grid>
Expand Down
2 changes: 1 addition & 1 deletion components/atom/input/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
"dependencies": {
"@s-ui/react-hooks": "1",
"@s-ui/react-primitive-polymorphic-element": "1",
"imask": "3.4.0"
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

update a la react-imask: 6 con imask 6

"react-imask": "6.4.3"
},
"peerDependencies": {
"@s-ui/component-dependencies": "1"
Expand Down
66 changes: 9 additions & 57 deletions components/atom/input/src/Input/Component/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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'] {
Expand Down
13 changes: 3 additions & 10 deletions components/atom/input/src/Input/Wrappers/Addons/InputAddons.js
Original file line number Diff line number Diff line change
@@ -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}
Expand All @@ -27,7 +20,7 @@ const InputAddon = ({leftAddon, rightAddon, shape, size, children}) => {
{rightAddon}
</span>
)}
</div>
</>
)
}

Expand Down
5 changes: 2 additions & 3 deletions components/atom/input/src/Input/Wrappers/Addons/config.js
Original file line number Diff line number Diff line change
@@ -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}`)
65 changes: 36 additions & 29 deletions components/atom/input/src/Input/Wrappers/Addons/index.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
}
}
}
13 changes: 8 additions & 5 deletions components/atom/input/src/Input/Wrappers/Button/InputButton.js
Original file line number Diff line number Diff line change
@@ -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 = {
Expand Down
3 changes: 2 additions & 1 deletion components/atom/input/src/Input/Wrappers/Button/config.js
Original file line number Diff line number Diff line change
@@ -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`
14 changes: 2 additions & 12 deletions components/atom/input/src/Input/Wrappers/Button/index.scss
Original file line number Diff line number Diff line change
@@ -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;
}
Loading