fix(Nav): the icon is not centered when the width of Nav in iconOnly …

…mode is less than the default width

.gitignore

@@ -90,3 +90,4 @@ src/core-temp
 
 # tests snapshots diff
 components/**/__tests__/snapshots/__diff__/**
+cypress/screenshots/**

components/nav/__docs__/demo/auto-width/index.css

@@ -0,0 +1,10 @@
+.demo-ctl {
+    background-color: #f1f1f1;
+    border-left: 4px solid #0d599a;
+    color: #0a7ac3;
+    margin-bottom: 20px;
+    padding: 5px;
+}
+.demo-ctl .next-radio-group {
+    margin: 5px;
+}

components/nav/__docs__/demo/auto-width/index.md

@@ -0,0 +1,11 @@
+# zh-CN order=2
+
+# 只显示图标-宽度自适应
+
+Nav 可设置 iconOnly 属性，只显示图标，以减少占用空间。可以根据设定的iconOnlyWidth为100%，来让icon自适应居中展示，这种情况下需要Nav外部容器有具体宽度。
+
+# en-US order=2
+
+# Only show icon - width adaptive
+
+Nav could set the iconOnly property to reduce the footprint. You can set iconOnlyWidth to 100% to make the icon adapt and center itself. In this case, the external container of the Nav needs to have a specific width.

components/nav/__docs__/demo/auto-width/index.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Nav, Radio } from '@alifd/next';
+import type { NavProps } from '@alifd/next/types/nav';
+
+type AppState = Pick<
+    NavProps,
+    'iconOnly' | 'hasTooltip' | 'hasArrow' | 'iconOnlyWidth' | 'iconTextOnly'
+> & {
+    width?: number;
+};
+
+const { Item, SubNav } = Nav;
+
+class App extends React.Component {
+    state: AppState = {
+        iconOnly: false,
+        hasTooltip: true,
+        hasArrow: true,
+        iconOnlyWidth: '100%',
+        iconTextOnly: false,
+        width: 200,
+    };
+
+    setValue(name: keyof AppState, value: string) {
+        this.setState({
+            [name]: value === 'true',
+        });
+    }
+
+    iconfontChange(value: string) {
+        const props: AppState = {};
+        props.iconOnly = value === 'true';
+        if (props.iconOnly) {
+            props.width = 40;
+        } else {
+            props.width = 200;
+        }
+        this.setState(props);
+    }
+
+    render() {
+        const { iconOnly, hasTooltip, hasArrow, iconTextOnly } = this.state;
+        return (
+            <div>
+                <div className="demo-ctl">
+                    <Radio.Group
+                        shape="button"
+                        size="medium"
+                        value={iconOnly && iconTextOnly ? 'trueText' : iconOnly ? 'true' : 'false'}
+                        onChange={this.iconfontChange.bind(this)}
+                    >
+                        <Radio value="true">iconOnly=true</Radio>
+                        <Radio value="false">iconOnly=false</Radio>
+                    </Radio.Group>
+                </div>
+                <div style={{ width: this.state.width }}>
+                    <Nav
+                        iconOnlyWidth={this.state.iconOnlyWidth}
+                        iconOnly={iconOnly}
+                        iconTextOnly={iconTextOnly}
+                        hasArrow={hasArrow}
+                        hasTooltip={hasTooltip}
+                        hozInLine
+                    >
+                        <Item icon="account">三个字</Item>
+                        <Item icon="account">四个字的</Item>
+                        <Item icon="account">五个字导航</Item>
+                        <Item icon={'atm'}>六个字的导航</Item>
+                        <Item icon={<span>QAQ</span>}>七个字的长导航</Item>
+                        <SubNav icon="account" label="Sub Nav">
+                            <Item icon="account">Item 1</Item>
+                            <Item icon="account">Item 2</Item>
+                            <Item icon="account">Item 3</Item>
+                            <Item icon="account">Item 4</Item>
+                        </SubNav>
+                    </Nav>
+                </div>
+            </div>
+        );
+    }
+}
+
+ReactDOM.render(<App />, mountNode);

components/nav/__tests__/index-spec.tsx

@@ -442,6 +442,36 @@ describe('Nav', () => {
             cy.get('#icononly-switch-item-2').should('have.css', 'padding-left', '40px');
         });
 
+        it('should align center when iconOnly and width < 58', () => {
+            cy.mount(
+                <div style={{ width: 40 }}>
+                    <Nav iconOnlyWidth="100%" iconOnly hasArrow hasTooltip>
+                        <Item icon="account">三个字</Item>
+                        <Item icon="account">四个字的</Item>
+                        <Item icon="account">五个字导航</Item>
+                        <Item icon={'atm'}>六个字的导航</Item>
+                        <Item icon={<span>QAQ</span>}>七个字的长导航</Item>
+                        <SubNav icon="account" label="Sub Nav">
+                            <Item icon="account">Item 1</Item>
+                            <Item icon="account">Item 2</Item>
+                            <Item icon="account">Item 3</Item>
+                            <Item icon="account">Item 4</Item>
+                        </SubNav>
+                    </Nav>
+                </div>
+            );
+            cy.get('.next-nav').then($el => {
+                const { width: navWidth, left: navLeft } = $el[0].getBoundingClientRect();
+                const { width, left } = document
+                    .querySelector('.next-menu-item.next-nav-item')!
+                    .getBoundingClientRect();
+                const target = Math.round(Math.abs(left - navLeft));
+                const expected = (navWidth - width) >> 1;
+                expect(width).not.equal(0);
+                expect(target).equal(expected);
+            });
+        });
+
         it('should support fixed', () => {
             cy.mount(
                 <Nav

components/nav/main.scss

@@ -381,6 +381,12 @@ $nav-icononly-width: 58px;
             text-overflow: clip;
         }
 
+        #{$menu-prefix}-item#{$nav-prefix}-item {
+            padding: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
         // #{$menu-prefix}-item-text > span,
         // #{$nav-prefix}-group-label > #{$menu-prefix}-item-inner > span {
         //     opacity: 0;

components/shell/__docs__/demo/complicated/index.tsx

@@ -74,7 +74,12 @@ class App extends React.Component {
                         collapse={this.state.navcollapse}
                         onCollapseChange={this.onCollapseChange}
                     >
-                        <Nav embeddable aria-label="global navigation">
+                        <Nav
+                            embeddable
+                            aria-label="global navigation"
+                            iconOnlyWidth="100%"
+                            hozInLine
+                        >
                             <Nav.Item icon="account">Nav Item 1</Nav.Item>
                             <Nav.Item icon="calendar">Nav Item 2</Nav.Item>
                             <Nav.Item icon="atm">Nav Item 3</Nav.Item>

components/shell/__docs__/demo/header-global-local/index.tsx

@@ -55,7 +55,7 @@ class App extends React.Component {
                     </Shell.Action>
 
                     <Shell.Navigation>
-                        <Nav embeddable aria-label="global navigation">
+                        <Nav embeddable aria-label="global navigation" iconOnlyWidth="100%">
                             <Nav.Item icon="account">Nav Item 1</Nav.Item>
                             <Nav.Item icon="calendar">Nav Item 2</Nav.Item>
                             <Nav.Item icon="atm">Nav Item 3</Nav.Item>

components/shell/__docs__/demo/header-global/index.tsx

@@ -53,7 +53,7 @@ class App extends React.Component {
                     </Shell.Action>
 
                     <Shell.Navigation>
-                        <Nav embeddable aria-label="global navigation">
+                        <Nav embeddable aria-label="global navigation" iconOnlyWidth="100%">
                             <Nav.Item icon="account">Nav Item 1</Nav.Item>
                             <Nav.Item icon="calendar">Nav Item 2</Nav.Item>
                             <Nav.Item icon="atm">Nav Item 3</Nav.Item>

components/shell/__docs__/theme/index.tsx

@@ -161,6 +161,7 @@ class RenderShell extends React.Component<ShellThemeProps> {
                                     embeddable
                                     direction={globalDir}
                                     hozInLine
+                                    iconOnlyWidth="100%"
                                 >
                                     <Nav.Item icon="account">Nav Item 1</Nav.Item>
                                     <Nav.Item icon="calendar">Nav Item 2</Nav.Item>