dzeio/components
1
0
Fork 0
mirror of https://github.com/dzeiocom/components.git synced 2025-04-24 03:42:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add padding to input svgs so they are more clickable

Browse Source 
Signed-off-by: Avior <f.bouillon@aptatio.com>
This commit is contained in:
Florian Bouillon 2023-02-27 12:01:34 +01:00
parent 40c5a23035
commit fef3ebf9a0
Signed by: Florian Bouillon
GPG Key ID: E05B3A94178D3A7C
2 changed files with 3 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/Input/Input.module.styl
View File

@ -22,6 +22,7 @@
svg svg
position absolute position absolute
user-select none user-select none
padding 8px
color black color black
@media (prefers-color-scheme dark) @media (prefers-color-scheme dark)
color white color white

3
src/Input/index.tsx
View File

@ -350,7 +350,8 @@ export default class Input extends React.Component<Props, States> {
} }
if ('icon' in Icon) { if ('icon' in Icon) {
return <Icon.icon size="18" className={buildClassName(css[position], css.iconClickable)} onClick={async () => { // 18 + 8 of padding
return <Icon.icon size={8*2+18} className={buildClassName(css[position], css.iconClickable)} onClick={async () => {
if (this.props.disabled) {return} if (this.props.disabled) {return}
const value = Icon.transformer(this.state.value ?? this.state.displayedValue ?? '') const value = Icon.transformer(this.state.value ?? this.state.displayedValue ?? '')
this.setState({ value: value, displayedValue: value, valueUpdate: true }) this.setState({ value: value, displayedValue: value, valueUpdate: true })