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

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

View File

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

View File

@ -350,7 +350,8 @@ export default class Input extends React.Component<Props, States> {
}
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}
const value = Icon.transformer(this.state.value ?? this.state.displayedValue ?? '')
this.setState({ value: value, displayedValue: value, valueUpdate: true })