Skip to content

Commit

Permalink
fix(Nav): label should show in iconOnly mode, close #894
Browse files Browse the repository at this point in the history
  • Loading branch information
youluna committed Jul 18, 2019
1 parent a16d566 commit 5cfd0fa
Show file tree
Hide file tree
Showing 6 changed files with 13 additions and 29 deletions.
5 changes: 1 addition & 4 deletions src/nav/group.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down
5 changes: 1 addition & 4 deletions src/nav/item.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand Down
20 changes: 7 additions & 13 deletions src/nav/main.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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%;
Expand All @@ -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)
);
}
Expand Down
2 changes: 0 additions & 2 deletions src/nav/popup-item.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -57,8 +57,6 @@ class PopupItem extends Component {
type="arrow-right"
/>
);
} else if (!iconEl) {
iconEl = <span className={`${prefix}nav-icon-placeholder`} />;
}
}
const newLabel = [
Expand Down
2 changes: 0 additions & 2 deletions src/nav/sub-nav.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand Down
8 changes: 4 additions & 4 deletions test/nav/index-spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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');
Expand Down

0 comments on commit 5cfd0fa

Please sign in to comment.