feat(Input): hint icon overlap (alibaba-fusion#1729)

Co-authored-by: wb-xd391517 <[email protected]>
rosky · Apr 2, 2020 · 43cd5a3 · 43cd5a3
1 parent 188a761
commit 43cd5a3
Show file tree

Hide file tree

Showing 9 changed files with 21 additions and 13 deletions.
diff --git a/src/date-picker/date-picker.jsx b/src/date-picker/date-picker.jsx
@@ -704,7 +704,7 @@ class DatePicker extends Component {
                     hint={
                         <Icon
                             type="calendar"
-                            className={`${prefix}date-picker-symble-calendar-icon`}
+                            className={`${prefix}date-picker-symbol-calendar-icon`}
                         />
                     }
                     hasClear={allowClear}

diff --git a/src/date-picker/main.scss b/src/date-picker/main.scss
@@ -59,7 +59,7 @@
         vertical-align: baseline;
     }
 
-    &-symble-calendar-icon::before {
+    &-symbol-calendar-icon::before {
         content: $date-picker-calendar-icon;
     }
 }

diff --git a/src/date-picker/month-picker.jsx b/src/date-picker/month-picker.jsx
@@ -447,7 +447,7 @@ class MonthPicker extends Component {
                     hint={
                         <Icon
                             type="calendar"
-                            className={`${prefix}date-picker-symble-calendar-icon`}
+                            className={`${prefix}date-picker-symbol-calendar-icon`}
                         />
                     }
                     hasClear={allowClear}

diff --git a/src/date-picker/range-picker.jsx b/src/date-picker/range-picker.jsx
@@ -1132,7 +1132,7 @@ class RangePicker extends Component {
                     hint={
                         <Icon
                             type="calendar"
-                            className={`${prefix}date-picker-symble-calendar-icon`}
+                            className={`${prefix}date-picker-symbol-calendar-icon`}
                         />
                     }
                 />

diff --git a/src/date-picker/week-picker.jsx b/src/date-picker/week-picker.jsx
@@ -409,7 +409,7 @@ class WeekPicker extends Component {
                     hint={
                         <Icon
                             type="calendar"
-                            className={`${prefix}date-picker-symble-calendar-icon`}
+                            className={`${prefix}date-picker-symbol-calendar-icon`}
                         />
                     }
                     hasClear={value && hasClear}

diff --git a/src/date-picker/year-picker.jsx b/src/date-picker/year-picker.jsx
@@ -432,7 +432,7 @@ class YearPicker extends Component {
                     hint={
                         <Icon
                             type="calendar"
-                            className={`${prefix}date-picker-symble-calendar-icon`}
+                            className={`${prefix}date-picker-symbol-calendar-icon`}
                         />
                     }
                     hasClear={allowClear}

diff --git a/src/input/input.jsx b/src/input/input.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { isValidElement, cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Icon from '../icon';
@@ -179,12 +179,20 @@ export default class Input extends Base {
         if (hint || showClear) {
             let hintIcon = null;
             if (hint) {
-                hintIcon =
-                    typeof hint === 'string' ? (
+                if (typeof hint === 'string') {
+                    hintIcon = (
                         <Icon type={hint} className={`${prefix}input-hint`} />
-                    ) : (
-                        hint
                     );
+                } else if (isValidElement(hint)) {
+                    hintIcon = cloneElement(hint, {
+                        className: classNames(
+                            hint.props.className,
+                            `${prefix}input-hint`
+                        ),
+                    });
+                } else {
+                    hintIcon = hint;
+                }
             } else {
                 hintIcon = (
                     <Icon

diff --git a/src/time-picker/main.scss b/src/time-picker/main.scss
@@ -24,7 +24,7 @@
         box-shadow: $time-picker-panel-shadow;
     }
 
-    &-symble-clock-icon::before {
+    &-symbol-clock-icon::before {
         content: $time-picker-clock-icon;
     }
 }
diff --git a/src/time-picker/time-picker.jsx b/src/time-picker/time-picker.jsx
@@ -414,7 +414,7 @@ class TimePicker extends Component {
             hint: (
                 <Icon
                     type="clock"
-                    className={`${prefix}time-picker-symble-clock-icon`}
+                    className={`${prefix}time-picker-symbol-clock-icon`}
                 />
             ),
         };
-Original file line number
+Diff line change
@@ Expand Up / @@ -1132,7 +1132,7 @@ class RangePicker extends Component { @@
                         hint={
                             <Icon
                                 type="calendar"
-                                className={`${prefix}date-picker-symble-calendar-icon`}
+                                className={`${prefix}date-picker-symbol-calendar-icon`}
                             />
                         }
                     />
@@ Expand Down @@