fix: menu horizontal dark style & site (#25850)

* fix: menu horizontal dark style & site * fix: lint * fix: update snapshot * chore: revert * chore * fix: padding transition glitch
2024-11-25 03:29:59 +08:00 · 2020-07-28 17:09:09 +08:00 · 2020-07-28 17:09:09 +08:00 · f498ae0344
commit f498ae0344
parent 246d3767ea
4 changed files with 313 additions and 6 deletions
--- a/components/menu/tests/snapshots/demo.test.js.snap
+++ b/components/menu/tests/snapshots/demo.test.js.snap
@ -809,6 +809,216 @@ exports[`renders ./components/menu/demo/sider-current.md correctly 1`] = `
 </ul>
 `;

+exports[`renders ./components/menu/demo/style-debug.md correctly 1`] = `
+Array [
+  <button
+    aria-checked="true"
+    class="ant-switch ant-switch-checked"
+    role="switch"
+    type="button"
+  >
+    <div
+      class="ant-switch-handle"
+    />
+    <span
+      class="ant-switch-inner"
+    >
+      Dark
+    </span>
+  </button>,
+  <br />,
+  <br />,
+  <ul
+    class="ant-menu ant-menu-dark ant-menu-root ant-menu-horizontal"
+    role="menu"
+  >
+    <li
+      class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
+      role="menuitem"
+      style="display:none"
+    >
+      <div
+        aria-expanded="false"
+        aria-haspopup="true"
+        class="ant-menu-submenu-title"
+        role="button"
+      >
+        <span>
+          ···
+        </span>
+        <i
+          class="ant-menu-submenu-arrow"
+        />
+      </div>
+    </li>
+    <li
+      class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-submenu-selected"
+      role="menuitem"
+    >
+      <div
+        aria-expanded="false"
+        aria-haspopup="true"
+        class="ant-menu-submenu-title"
+        role="button"
+      >
+        <span
+          aria-label="mail"
+          class="anticon anticon-mail"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="mail"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"
+            />
+          </svg>
+        </span>
+        <span>
+          Navigation One Long Long Long Long
+        </span>
+        <i
+          class="ant-menu-submenu-arrow"
+        />
+      </div>
+    </li>
+    <li
+      class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
+      role="menuitem"
+      style="display:none"
+    >
+      <div
+        aria-expanded="false"
+        aria-haspopup="true"
+        class="ant-menu-submenu-title"
+        role="button"
+      >
+        <span>
+          ···
+        </span>
+        <i
+          class="ant-menu-submenu-arrow"
+        />
+      </div>
+    </li>
+    <li
+      class="ant-menu-submenu ant-menu-submenu-horizontal"
+      role="menuitem"
+    >
+      <div
+        aria-expanded="false"
+        aria-haspopup="true"
+        class="ant-menu-submenu-title"
+        role="button"
+      >
+        <span
+          aria-label="appstore"
+          class="anticon anticon-appstore"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="appstore"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"
+            />
+          </svg>
+        </span>
+        <span>
+          Navigation Two
+        </span>
+        <i
+          class="ant-menu-submenu-arrow"
+        />
+      </div>
+    </li>
+    <li
+      class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
+      role="menuitem"
+      style="display:none"
+    >
+      <div
+        aria-expanded="false"
+        aria-haspopup="true"
+        class="ant-menu-submenu-title"
+        role="button"
+      >
+        <span>
+          ···
+        </span>
+        <i
+          class="ant-menu-submenu-arrow"
+        />
+      </div>
+    </li>
+    <li
+      class="ant-menu-item ant-menu-item-only-child"
+      role="menuitem"
+    >
+      Option 11
+    </li>
+    <li
+      class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
+      role="menuitem"
+      style="display:none"
+    >
+      <div
+        aria-expanded="false"
+        aria-haspopup="true"
+        class="ant-menu-submenu-title"
+        role="button"
+      >
+        <span>
+          ···
+        </span>
+        <i
+          class="ant-menu-submenu-arrow"
+        />
+      </div>
+    </li>
+    <li
+      class="ant-menu-item ant-menu-item-only-child"
+      role="menuitem"
+    >
+      Option 12
+    </li>
+    <li
+      class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
+      role="menuitem"
+      style="visibility:hidden;position:absolute"
+    >
+      <div
+        aria-expanded="false"
+        aria-haspopup="true"
+        class="ant-menu-submenu-title"
+        role="button"
+      >
+        <span>
+          ···
+        </span>
+        <i
+          class="ant-menu-submenu-arrow"
+        />
+      </div>
+    </li>
+  </ul>,
+]
+`;
+
 exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
 Array [
  <button
--- a/components/menu/demo/style-debug.md
+++ b/components/menu/demo/style-debug.md
@ -0,0 +1,82 @@
+---
+order: 99
+title:
+  zh-CN: Style debug
+  en-US: Style debug
+debug: true
+---
+
+## zh-CN
+
+buggy!
+
+## en-US
+
+buggy!
+
+```jsx
+import { Menu, Switch } from 'antd';
+import { MailOutlined, AppstoreOutlined } from '@ant-design/icons';
+
+const { SubMenu } = Menu;
+
+class Sider extends React.Component {
+  state = {
+    theme: 'dark',
+    current: '1',
+  };
+
+  changeTheme = value => {
+    this.setState({
+      theme: value ? 'dark' : 'light',
+    });
+  };
+
+  handleClick = e => {
+    console.log('click ', e);
+    this.setState({
+      current: e.key,
+    });
+  };
+
+  render() {
+    return (
+      <>
+        <Switch
+          checked={this.state.theme === 'dark'}
+          onChange={this.changeTheme}
+          checkedChildren="Dark"
+          unCheckedChildren="Light"
+        />
+        <br />
+        <br />
+        <Menu
+          theme={this.state.theme}
+          onClick={this.handleClick}
+          selectedKeys={[this.state.current]}
+          mode="horizontal"
+        >
+          <SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One Long Long Long Long">
+            <Menu.Item key="1">Option 1</Menu.Item>
+            <Menu.Item key="2">Option 2</Menu.Item>
+            <Menu.Item key="3">Option 3</Menu.Item>
+            <Menu.Item key="4">Option 4</Menu.Item>
+          </SubMenu>
+          <SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
+            <Menu.Item key="5">Option 5</Menu.Item>
+            <Menu.Item key="6">Option 6</Menu.Item>
+            <SubMenu key="sub3" title="Submenu">
+              <Menu.Item key="7">Option 7</Menu.Item>
+              <Menu.Item key="8">Option 8</Menu.Item>
+            </SubMenu>
+          </SubMenu>
+          <Menu.Item key="11">Option 11</Menu.Item>
+          <Menu.Item key="12">Option 12</Menu.Item>
+        </Menu>
+      </>
+    );
+  }
+}
+
+ReactDOM.render(<Sider />, mountNode);
+```
--- a/components/menu/style/dark.less
+++ b/components/menu/style/dark.less
@ -31,6 +31,7 @@
  &-dark&-horizontal > &-submenu {
    top: 0;
    margin-top: 0;
+    padding: @menu-item-padding;
    border-color: @menu-dark-bg;
    border-bottom: 0;
  }
--- a/components/menu/style/index.less
+++ b/components/menu/style/index.less
@ -41,6 +41,9 @@
    transition: all 0.3s;
  }

+  &-horizontal &-submenu {
+    transition: border-color 0.3s @ease-in-out, background 0.3s @ease-in-out;
+  }
  &-submenu,
  &-submenu-inline {
    transition: border-color 0.3s @ease-in-out, background 0.3s @ease-in-out,
@ -167,6 +170,11 @@
    min-width: 114px; // in case of submenu width is too big: https://codesandbox.io/s/qvpwm6mk66
  }

+  &-horizontal &-item,
+  &-horizontal &-submenu-title {
+    transition: color 0.3s @ease-in-out, border-color 0.3s @ease-in-out,
+      background 0.3s @ease-in-out;
+  }
  &-item,
  &-submenu-title {
    position: relative;
@ -333,17 +341,23 @@
    border-bottom: @border-width-base @border-style-base @border-color-split;
    box-shadow: none;

+    &:not(.@{menu-prefix-cls}-dark) {
+      > .@{menu-prefix-cls}-item,
+      > .@{menu-prefix-cls}-submenu {
+        margin: @menu-item-padding;
+        margin-top: -1px;
+        margin-bottom: 0;
+        padding: @menu-item-padding;
+        padding-right: 0;
+        padding-left: 0;
+      }
+    }
+
    > .@{menu-prefix-cls}-item,
    > .@{menu-prefix-cls}-submenu {
      position: relative;
      top: 1px;
      display: inline-block;
-      margin: @menu-item-padding;
-      margin-top: 0;
-      margin-bottom: 0;
-      padding: @menu-item-padding;
-      padding-right: 0;
-      padding-left: 0;
      vertical-align: bottom;
      border-bottom: 2px solid transparent;