fix(Nav): label should show in iconOnly mode, close #894

alibaba-fusion · Jul 18, 2019 · 5cfd0fa · 5cfd0fa
1 parent a16d566
commit 5cfd0fa
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 29 deletions.
diff --git a/src/nav/group.jsx b/src/nav/group.jsx
@@ -37,10 +37,7 @@ class Group extends Component {
         let newLabel = label;
         if (iconOnly) {
             // TODO: add a group icon ?
-            newLabel = [
-                <span key="icon" className={`${prefix}nav-icon-placeholder`} />,
-                <span key="label">{label}</span>,
-            ];
+            newLabel = [<span key="label">{label}</span>];
         }
 
         const cls = classNames({

diff --git a/src/nav/item.jsx b/src/nav/item.jsx
@@ -34,15 +34,12 @@ class Item extends Component {
     render() {
         const { prefix, iconOnly, hasTooltip } = this.context;
         const { icon, children, ...others } = this.props;
-        let iconEl =
+        const iconEl =
             typeof icon === 'string' ? (
                 <Icon className={`${prefix}nav-icon`} type={icon} />
             ) : (
                 icon
             );
-        if (iconOnly && !iconEl) {
-            iconEl = <span className={`${prefix}nav-icon-placeholder`} />;
-        }
 
         const item = (
             <Menu.Item {...others}>

diff --git a/src/nav/main.scss b/src/nav/main.scss
@@ -18,14 +18,6 @@ $nav-icononly-width: $s-15;
         font-weight: inherit;
     }
 
-    &-icon-placeholder {
-        display: inline-block;
-        width: $nav-icon-only-font-size;
-        height: $nav-icon-only-font-size;
-        margin-left: ($nav-icononly-width - $nav-icon-only-font-size) / 2 - $nav-ver-item-padding-lr - $nav-primary-border-width;
-        margin-right: ($nav-icononly-width - $nav-icon-only-font-size) / 2 - $nav-ver-item-padding-lr - $nav-primary-border-width;
-    }
-
     &-group-label {
         height: $nav-group-height;
         line-height: $nav-group-height;
@@ -349,10 +341,10 @@ $nav-icononly-width: $s-15;
             text-overflow: clip;
         }
 
-        #{$menu-prefix}-item-text > span,
-        #{$nav-prefix}-group-label > #{$menu-prefix}-item-inner > span {
-            opacity: 0;
-        }
+        // #{$menu-prefix}-item-text > span,
+        // #{$nav-prefix}-group-label > #{$menu-prefix}-item-inner > span {
+        //     opacity: 0;
+        // }
 
         &.#{$css-prefix}normal {
             #{$nav-prefix}-icon.#{$css-prefix}icon {
@@ -387,7 +379,8 @@ $nav-icononly-width: $s-15;
         #{$nav-prefix}-icon-only-arrow.#{$css-prefix}icon {
             @include icon-size(
                 $size: $nav-icon-only-font-size,
-                $marginLeft: (18px - $nav-icon-only-font-size) / 2
+                $marginLeft: (18px - $nav-icon-only-font-size) / 2,
+                $marginRight: (18px - $nav-icon-only-font-size) / 2
             );
             transition: all ease .3s;
             transform-origin: center 46%;
@@ -397,6 +390,7 @@ $nav-icononly-width: $s-15;
             @include icon-size(
                 $size: $nav-icon-only-font-size,
                 $marginLeft: (18px - $nav-icon-only-font-size) / 2,
+                $marginRight: (18px - $nav-icon-only-font-size) / 2,
                 $transform: rotate(180deg)
             );
         }

diff --git a/src/nav/popup-item.jsx b/src/nav/popup-item.jsx
@@ -57,8 +57,6 @@ class PopupItem extends Component {
                         type="arrow-right"
                     />
                 );
-            } else if (!iconEl) {
-                iconEl = <span className={`${prefix}nav-icon-placeholder`} />;
             }
         }
         const newLabel = [

diff --git a/src/nav/sub-nav.jsx b/src/nav/sub-nav.jsx
@@ -66,8 +66,6 @@ class SubNav extends Component {
                         type={mode === 'popup' ? 'arrow-right' : 'arrow-down'}
                     />
                 );
-            } else if (!iconEl) {
-                iconEl = <span className={`${prefix}nav-icon-placeholder`} />;
             }
         }
         const newLabel = [

diff --git a/test/nav/index-spec.js b/test/nav/index-spec.js
@@ -265,7 +265,7 @@ describe('Nav', () => {
 
         let items = nav.find('li.next-nav-item');
         assert(items.at(0).find('i.next-nav-icon').length === 1);
-        assert(items.at(1).find('span.next-nav-icon-placeholder').length === 1);
+        assert(items.at(1).find('i.next-nav-icon').length === 0);
 
         let subNavItems = nav.find('li.next-nav-sub-nav-item');
         assert(
@@ -296,7 +296,7 @@ describe('Nav', () => {
         );
 
         const groupLabel = nav.find('li.next-nav-group-label');
-        assert(groupLabel.find('span.next-nav-icon-placeholder').length === 1);
+        assert(groupLabel.find('.next-menu-item-inner > span').length === 1);
 
         wrapper.setProps({
             mode: 'popup',
@@ -324,13 +324,13 @@ describe('Nav', () => {
         subNavItems = nav.find('li.next-nav-sub-nav-item');
         assert(subNavItems.at(0).find('i.next-nav-icon').length === 1);
         assert(
-            subNavItems.at(1).find('span.next-nav-icon-placeholder').length ===
+            subNavItems.at(1).find('.next-menu-item-text > span').length ===
                 1
         );
         popupItems = nav.find('li.next-nav-popup-item');
         assert(popupItems.at(0).find('i.next-nav-icon').length === 1);
         assert(
-            popupItems.at(1).find('span.next-nav-icon-placeholder').length === 1
+            popupItems.at(1).find('.next-menu-item-text > span').length === 1
         );
         items = nav.find('li.next-nav-item');
         items.at(0).simulate('mouseenter');