Skip to content

Commit

Permalink
feat(Input/upload): support icon config for alibaba-fusion#1256 (alib…
Browse files Browse the repository at this point in the history 
…aba-fusion#1625)

* feat(Input): support icon config for alibaba-fusion#1256

* feat(Upload): support icon config for alibaba-fusion#1256

* feat(NumberPicker): support icon config for alibaba-fusion#1256

add type incase of using old verison of theme

Co-authored-by: aboutblank <[email protected]>
  • Loading branch information
@youluna
frankqian and youluna authored Mar 4, 2020
1 parent 3101978 commit 08596b1
Show file tree
Hide file tree
Showing 11 changed files with 122 additions and 57 deletions.
10 changes: 5 additions & 5 deletions src/input/input.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,11 +151,11 @@ export default class Input extends Base {

let stateWrap = null;
if (state === 'success') {
stateWrap = <Icon type="success-filling" />;
stateWrap = <Icon type="success-filling" className={`${prefix}input-success-icon`} />;
} else if (state === 'loading') {
stateWrap = <Icon type="loading" />;
stateWrap = <Icon type="loading" className={`${prefix}input-loading-icon`} />;
} else if (state === 'warning') {
stateWrap = <Icon type="warning" />;
stateWrap = <Icon type="warning" className={`${prefix}input-warning-icon`} />;
}

let clearWrap = null;
Expand All @@ -173,7 +173,7 @@ export default class Input extends Base {
type="delete-filling"
role="button"
tabIndex="0"
className={`${prefix}input-hint`}
className={`${prefix}input-hint ${prefix}input-clear-icon`}
aria-label={locale.clear}
onClick={this.onClear.bind(this)}
onMouseDown={preventDefault}
Expand All @@ -189,7 +189,7 @@ export default class Input extends Base {
type="delete-filling"
role="button"
tabIndex="0"
className={`${prefix}input-clear`}
className={`${prefix}input-clear ${prefix}input-clear-icon`}
aria-label={locale.clear}
onClick={this.onClear.bind(this)}
onMouseDown={preventDefault}
Expand Down
27 changes: 22 additions & 5 deletions src/input/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,9 @@
}
}

.#{$css-prefix}icon-delete-filling, .#{$css-prefix}icon-eye, .#{$css-prefix}icon-eye-close {


#{$input-prefix}-clear-icon, .#{$css-prefix}icon-eye, .#{$css-prefix}icon-eye-close {
&:hover {
cursor: pointer;
color: $input-hint-hover-color;
Expand Down Expand Up @@ -218,14 +220,29 @@
color: $input-hint-color;
}

.#{$css-prefix}icon-warning {
#{$input-prefix}-warning-icon {
color: $input-feedback-warning-color;
&::before {
content: $input-feedback-warning-icon;
}
}
.#{$css-prefix}icon-success-filling {
#{$input-prefix}-success-icon {
color: $input-feedback-success-color;
&::before {
content: $input-feedback-success-icon;
}
}
.#{$css-prefix}icon-loading {
#{$input-prefix}-loading-icon {
color: $input-feedback-loading-color;
&::before {
content: $input-feedback-loading-icon;
animation: loadingCircle 1s infinite linear;
}
}
#{$input-prefix}-clear-icon {
&::before {
content: $input-feedback-clear-icon;
}
}
}

Expand Down Expand Up @@ -268,7 +285,7 @@

color: $input-disabled-color;

.#{$css-prefix}icon-delete-filling:hover {
#{$input-prefix}-clear-icon:hover {
cursor: not-allowed;
color: $input-disabled-color;
}
Expand Down
48 changes: 31 additions & 17 deletions src/input/scss/variable.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
/// @family data-entry
/// @varPrefix $input-
/// @classPrefix {prefix}-input
/// @order {"statement/normal":10,"statement/normal/addon":100,"statement/normal/feedback":101,"statement/normal/maxlen":102,"statement/normal/clear":103,"statement/hover":11,"statement/hover/clear":110,"statement/focus":12,"statement/disabled":13,"statement/error":14,"size/bounding":10,"size/bounding/addon":100,"size/label":11,"size/maxlen":12}
/// @order {"statement/normal":10,"statement/normal/addon":100,"statement/normal/warning":101,"statement/normal/success":102,"statement/normal/loading":103,"statement/normal/maxlen":104,"statement/normal/clear":105,"statement/hover":11,"statement/hover/clear":110,"statement/focus":12,"statement/disabled":13,"statement/error":14,"size/bounding":10,"size/bounding/addon":100,"size/label":11,"size/maxlen":12}
////

$input-prefix: '.#{$css-prefix}input';
Expand Down Expand Up @@ -153,16 +153,34 @@ $input-s-icon-padding-right: $s-1 !default;

// feedback
// --------------------------------------------------
/// warning
/// @namespace statement/normal/feedback
/// border
/// @namespace statement/normal/warning
$input-feedback-warning-border-color: $color-warning-3 !default;
$color-calculate-input-feedback-warning-shadow: rgba($input-feedback-warning-border-color, .2);
/// background
/// @namespace statement/normal/warning
$input-feedback-warning-bg-color: $color-white !default;
/// icon color
/// @namespace statement/normal/warning
$input-feedback-warning-color: $color-warning-3 !default;
/// success
/// @namespace statement/normal/feedback
/// icon
/// @namespace statement/normal/warning
/// @type icon
$input-feedback-warning-icon: $icon-content-warning !default;
/// icon color
/// @namespace statement/normal/success
$input-feedback-success-color: $color-success-3 !default;

/// loading
/// @namespace statement/normal/feedback
/// icon
/// @namespace statement/normal/success
/// @type icon
$input-feedback-success-icon: $icon-content-success-filling !default;
/// icon color
/// @namespace statement/normal/loading
$input-feedback-loading-color: $color-notice-3 !default;
/// icon
/// @namespace statement/normal/loading
/// @type icon
$input-feedback-loading-icon: $icon-content-loading !default;

/// border
/// @namespace statement/error
Expand All @@ -173,15 +191,6 @@ $color-calculate-input-feedback-error-shadow: rgba($input-feedback-error-border-
/// @namespace statement/error
$input-feedback-error-bg-color: $color-white !default;

/// border
/// @namespace statement/warning
$input-feedback-warning-border-color: $color-warning-3 !default;
$color-calculate-input-feedback-warning-shadow: rgba($input-feedback-warning-border-color, .2);

/// background
/// @namespace statement/warning
$input-feedback-warning-bg-color: $color-white !default;

// maxlen
// --------------------------------------------------

Expand Down Expand Up @@ -211,3 +220,8 @@ $input-hint-color: $color-text1-2 !default;
/// background
/// @namespace statement/hover/clear
$input-hint-hover-color: $color-text1-3 !default;

/// clear icon
/// @namespace statement/normal/clear
/// @type icon
$input-feedback-clear-icon: $icon-content-delete-filling !default;
14 changes: 14 additions & 0 deletions src/number-picker/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,13 @@
opacity: 0;
}

#{$number-picker-prefix}-up-icon::before {
content: $number-picker-normal-up-icon;
}
#{$number-picker-prefix}-down-icon::before {
content: $number-picker-normal-down-icon;
}

&.#{$css-prefix}small {
width: 68px;
.#{$css-prefix}btn {
Expand Down Expand Up @@ -140,6 +147,13 @@
padding: 0;
}

#{$number-picker-prefix}-add-icon::before {
content: $number-picker-inline-add-icon;
}
#{$number-picker-prefix}-minus-icon::before {
content: $number-picker-inline-minus-icon;
}

&.#{$css-prefix}small {
width: 68px;
min-width: $form-element-small-height * 3;
Expand Down
8 changes: 4 additions & 4 deletions src/number-picker/number-picker.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -529,7 +529,7 @@ class NumberPicker extends React.Component {
}`}
onClick={this.up.bind(this, upDisabled)}
>
<Icon type="arrow-up" />
<Icon className={`${prefixCls}-up-icon`} />
</Button>
<Button
{...downBtnProps}
Expand All @@ -540,7 +540,7 @@ class NumberPicker extends React.Component {
}`}
onClick={this.down.bind(this, downDisabled)}
>
<Icon type="arrow-down" />
<Icon className={`${prefixCls}-down-icon`} />
</Button>
</span>
);
Expand All @@ -555,7 +555,7 @@ class NumberPicker extends React.Component {
}`}
onClick={this.down.bind(this, downDisabled)}
>
<Icon type="minus" />
<Icon className={`${prefixCls}-minus-icon`} />
</Button>
);
addonAfter = (
Expand All @@ -568,7 +568,7 @@ class NumberPicker extends React.Component {
}`}
onClick={this.up.bind(this, upDisabled)}
>
<Icon type="add" />
<Icon className={`${prefixCls}-add-icon`} />
</Button>
);
}
Expand Down
19 changes: 17 additions & 2 deletions src/number-picker/scss/variable.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,14 @@ $number-picker-prefix: '.#{$css-prefix}number-picker';
// Normal
// --------------------------------------------------

/// up icon
/// @namespace statement/normal
/// @type icon
$number-picker-normal-up-icon: $icon-content-arrow-up !default;
/// down icon
/// @namespace statement/normal
/// @type icon
$number-picker-normal-down-icon: $icon-content-arrow-down !default;
/// width
/// @namespace size/button
$number-picker-normal-s-button-width: $s-5 !default;
Expand Down Expand Up @@ -46,8 +54,15 @@ $number-picker-normal-l-button-icon-size: $icon-xxs !default;

// inline
// --------------------------------------------------

/// icon
/// add icon
/// @namespace statement/normal
/// @type icon
$number-picker-inline-add-icon: $icon-content-add !default;
/// minus icon
/// @namespace statement/normal
/// @type icon
$number-picker-inline-minus-icon: $icon-content-minus !default;
/// icon size
/// @namespace size/button
$number-picker-inline-s-button-icon-size: $icon-xs !default;
/// margin
Expand Down
5 changes: 3 additions & 2 deletions src/upload/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -434,6 +434,9 @@

.#{$css-prefix}icon {
color: $upload-card-icon-color;
&::before {
content: $upload-card-add-icon;
}
@include icon-size($upload-card-add-icon-size);
}

Expand Down Expand Up @@ -479,8 +482,6 @@
}
}



&-text {
margin: $s-3 0 0;
font-size: $upload-drag-zone-font-size;
Expand Down
6 changes: 5 additions & 1 deletion src/upload/scss/variable.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -192,6 +192,10 @@ $upload-card-icon-color: $color-line1-3 !default;
/// text
/// @namespace statement/hover/add
$upload-card-hover-font-color: $color-brand1-6 !default;
/// icon
/// @namespace statement/normal/add
/// @type icon
$upload-card-add-icon: $icon-content-add !default;

// Card Item
/// background
Expand Down Expand Up @@ -284,7 +288,7 @@ $upload-drag-zone-bg-color: $color-transparent !default;
/// @type icon
/// @namespace statement/normal
$upload-drag-zone-upload-icon: $icon-content-upload !default;
/// icon-color
/// icon color
/// @namespace statement/normal
$upload-drag-zone-upload-icon-color: $color-text1-3 !default;
/// title
Expand Down
2 changes: 1 addition & 1 deletion src/upload/upload.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -499,7 +499,7 @@ class Upload extends Base {
});
children = (
<div className={cardCls}>
<Icon type="add" size="large" />
<Icon size="large" className={`${prefix}upload-add-icon`} />
<div
tabIndex="0"
role="button"
Expand Down
Loading

0 comments on commit 08596b1

Please sign in to comment.