Merge remote-tracking branch 'fusion/feat/1.26' into fix-table-loading

alibaba-fusion · Jun 30, 2022 · 69516fc · 69516fc
2 parents 1670724 + 812e0f2
commit 69516fc
Show file tree

Hide file tree

Showing 10 changed files with 118 additions and 4 deletions.
diff --git a/docs/badge/theme/index.jsx b/docs/badge/theme/index.jsx
@@ -76,7 +76,7 @@ class RenderBadge extends React.Component {
             </Demo>
             <Demo title={i18nMap.unreadText}>
                 <DemoGroup label={i18nMap.normal}>
-                    <Badge count={25} >
+                    <Badge showZero count={0} >
                         {
                             unreadTextChild
                         }

diff --git a/docs/search/theme/index.jsx b/docs/search/theme/index.jsx
@@ -122,6 +122,14 @@ class FunctionDemo extends React.Component {
                         <Search filter={filter} searchText={i18n.title} type="normal" size="medium" shape="simple" style={style}   />
                     </DemoGroup>
                 </Demo>
+                <Demo title="Focused" block>
+                    <DemoHead cols={['L', 'M']}/>
+
+                    <DemoGroup label="Normal">
+                        <Search className="next-search-focus"  searchText={i18n.title} type="normal" size="large" shape="simple" style={style}   />
+                        <Search className="next-search-focus" searchText={i18n.title} type="normal" size="medium" shape="simple" style={style}   />
+                    </DemoGroup>
+                </Demo>
                 <div>
                     <Demo title="Dark" block defaultBackground="dark">
                         <DemoHead cols={['L', 'M']}/>

diff --git a/src/avatar/main.scss b/src/avatar/main.scss
@@ -16,6 +16,8 @@
     text-align: center;
     vertical-align: middle;
     background: $avatar-default-bg;
+    border: $avatar-size-border-width solid $avatar-border-color;
+    box-shadow: $avatar-shadow;
 
     &-image {
         background: transparent;

diff --git a/src/avatar/scss/variable.scss b/src/avatar/scss/variable.scss
@@ -29,14 +29,22 @@ $avatar-size-medium: $s-10 !default;
 /// size
 /// @namespace size/bounding
 $avatar-size-small: $s-7 !default;
-
+/// border
+/// @namespace size/bounding
+$avatar-size-border-width: $line-zero !default;
 
 // Statement
 // ----------------------------------------
 
 /// corner
 /// @namespace statement/normal
 $avatar-border-radius: $corner-1 !default;
+/// border color
+/// @namespace statement/normal
+$avatar-border-color: $color-white !default;
+/// shadow
+/// @namespace statement/normal
+$avatar-shadow: $shadow-zero !default;
 
 $avatar-color: $color-white !default;
 $avatar-default-bg: $color-fill1-4 !default;
diff --git a/src/badge/main.scss b/src/badge/main.scss
@@ -28,6 +28,7 @@
                 $lineHeight: $badge-size-count-lineheight
             );
             top: -.5em;
+            border: $badge-size-count-border-width solid $badge-normal-count-border-color;
         }
 
         .#{$css-prefix}badge-dot {

diff --git a/src/badge/scss/variable.scss b/src/badge/scss/variable.scss
@@ -34,6 +34,13 @@ $badge-size-custom-padding-lr: $s-1 !default;
 /// size
 /// @namespace size/text
 $badge-size-count-font: $font-size-caption !default;
+/// border
+/// @namespace size/bounding
+$badge-size-count-border-width: $line-zero !default;
+/// border color
+/// @namespace statement/normal
+$badge-normal-count-border-color: $color-white !default;
+
 
 // unconfigurable
 $badge-size-count-width: auto !default;

diff --git a/src/search/Search.jsx b/src/search/Search.jsx
@@ -173,9 +173,13 @@ class Search extends React.Component {
         this.state = {
             value: typeof value === 'undefined' ? '' : value,
             filterValue,
+            ifFocus: false,
         };
 
         this.highlightKey = null;
+
+        this.handleBlur = this.handleBlur.bind(this);
+        this.handleFocus = this.handleFocus.bind(this);
     }
 
     static getDerivedStateFromProps(nextProps, prevState) {
@@ -261,6 +265,20 @@ class Search extends React.Component {
         this.inputRef.focus(...args);
     }
 
+    handleFocus(...args) {
+        this.setState({
+            ifFocus: true,
+        });
+        this.props.onFocus && this.props.onFocus(...args);
+    }
+
+    handleBlur(...args) {
+        this.setState({
+            ifFocus: false,
+        });
+        this.props.onBlur && this.props.onBlur(...args);
+    }
+
     render() {
         const {
             shape,
@@ -289,12 +307,15 @@ class Search extends React.Component {
             ...others
         } = this.props;
 
+        const { ifFocus } = this.state;
+
         const cls = classNames({
             [`${prefix}search`]: true,
             [`${prefix}search-${shape}`]: true,
             [`${prefix}${type}`]: type,
             [`${prefix}${size}`]: size,
             [`${prefix}disabled`]: !!disabled,
+            [`${prefix}search-focus`]: ifFocus,
             [className]: !!className,
         });
 
@@ -393,6 +414,8 @@ class Search extends React.Component {
                     popupContent={popupContent}
                     disabled={disabled}
                     ref={this.saveInputRef}
+                    onFocus={this.handleFocus}
+                    onBlur={this.handleBlur}
                 />
             </Group>
         );

diff --git a/src/search/main.scss b/src/search/main.scss
@@ -11,6 +11,39 @@
     width: 100%;
     display: inline-block;
 
+    &#{$search-prefix}-focus {
+        box-shadow: $search-focus-shadow-spread;
+
+        .#{$css-prefix}input {
+            background-color: $search-focus-bg-color;
+        }
+
+        // normal
+        &#{$search-prefix}-normal.#{$css-prefix}primary  #{$search-prefix}-left {
+            border-color: $search-foucs-normal-primary-border-color;
+        }
+
+        &#{$search-prefix}-normal.#{$css-prefix}secondary  #{$search-prefix}-left {
+            border-color: $search-foucs-normal-secondary-border-color;
+        }
+
+        &#{$search-prefix}-normal.#{$css-prefix}normal  #{$search-prefix}-left {
+            border-color: $search-foucs-normal-normal-border-color;
+        }
+
+        &#{$search-prefix}-normal.#{$css-prefix}dark  #{$search-prefix}-left {
+            border-color: $search-foucs-normal-dark-border-color;
+        }
+
+        // simple
+        &#{$search-prefix}-simple.#{$css-prefix}dark  #{$search-prefix}-left {
+            border-color: $search-foucs-simple-dark-border-color;
+        }
+        &#{$search-prefix}-simple.#{$css-prefix}normal  #{$search-prefix}-left {
+            border-color: $search-foucs-simple-normal-border-color;
+        }
+    }
+
     .#{$css-prefix}input,
     .#{$css-prefix}select {
         border: none;

diff --git a/src/search/scss/variable.scss b/src/search/scss/variable.scss
@@ -7,7 +7,7 @@
 /// @family data-entry
 /// @varPrefix $search-
 /// @classPrefix {prefix}-search
-/// @order {"size/bounding":10,"size/btn":11,"size/margin":12,"size/simple":13,"statement/normal":10,"statement/normal/btn":100,"statement/btn":11,"statement/hover":12,"statement/hover/btn":120,"statement/simple":13,"statement/icon":14}
+/// @order {"size/bounding":10,"size/btn":11,"size/margin":12,"size/simple":13,"statement/normal":10,"statement/normal/btn":100,"statement/btn":11,"statement/hover":12,"statement/hover/btn":120,"statement/simple":13,"statement/icon":14,"statement/focus":15}
 ////
 
 $search-prefix: '.#{$css-prefix}search';
@@ -334,5 +334,34 @@ $search-simple-dark-m-icon-size: $icon-xs !default;
 /// @type icon
 $search-search-icon-content: $icon-content-search !default;
 
+
+/// border color
+/// @namespace statement/focus
+$search-foucs-normal-primary-border-color: $color-brand1-6 !default;
+/// border color
+/// @namespace statement/focus
+$search-foucs-normal-secondary-border-color: $color-brand1-6 !default;
+/// border color
+/// @namespace statement/focus
+$search-foucs-normal-normal-border-color: $color-line1-4 !default;
+/// border color
+/// @namespace statement/focus
+$search-foucs-normal-dark-border-color: $color-brand1-6 !default;
+/// border color
+/// @namespace statement/focus
+$search-foucs-simple-normal-border-color: $color-line1-4 !default;
+/// border color
+/// @namespace statement/focus
+$search-foucs-simple-dark-border-color: $color-line1-3 !default;
+
+
+/// background
+/// @namespace statement/focus
+$search-focus-bg-color:  $color-white !default;
+/// shadow
+/// @namespace statement/focus
+$search-focus-shadow-spread: $shadow-zero !default;
+
+
 $color-calculate-search-normal-dark-bg: rgba(get-compiling-value($search-normal-dark-bg-color), get-compiling-value($search-normal-dark-bg-opacity)) !default;
 $color-calculate-search-simple-dark-bg: rgba(get-compiling-value($search-simple-dark-bg-color), get-compiling-value($search-simple-dark-bg-opacity)) !default;
diff --git a/test/icon/index-spec.js b/test/icon/index-spec.js
@@ -77,10 +77,13 @@ describe('Icon', () => {
             scriptUrl: '//at.alicdn.com/t/font_1464085_egnk4s8yv2f.js',
         });
 
-        const newWrapper = mount( <ConfigProvider prefix="abcd-">
+        let newWrapper = mount( <ConfigProvider prefix="abcd-">
             <CustomIcon type="icon-pic" prefix="efg-"/>
         </ConfigProvider>);
         assert(newWrapper.find('.abcd-icon > svg'));
         assert(newWrapper.find('.abcd-icon > efg-icon-remote'));
+
+        newWrapper.unmount();
+        newWrapper = null;
     });
 });