Improve Menu selected design

components/menu/demo/theme.md

@@ -20,7 +20,8 @@ const SubMenu = Menu.SubMenu;
 const Sider = React.createClass({
   getInitialState() {
     return {
-      theme: 'light',
+      theme: 'dark',
+      current: '1',
     };
   },
   changeTheme(value) {
@@ -37,10 +38,16 @@ const Sider = React.createClass({
   render() {
     return (
       <div>
-        <Switch onChange={this.changeTheme} checkedChildren="Dark" unCheckedChildren="Light" />
+        <Switch
+          checked={this.state.theme === 'dark'}
+          onChange={this.changeTheme}
+          checkedChildren="Dark"
+          unCheckedChildren="Light"
+        />
         <br />
         <br />
-        <Menu theme={this.state.theme}
+        <Menu
+          theme={this.state.theme}
           onClick={this.handleClick}
           style={{ width: 240 }}
           defaultOpenKeys={['sub1']}

components/menu/style/index.less

@@ -72,7 +72,7 @@
   &-item-active,
   &-submenu-active,
   &-submenu-title:hover {
-    background-color: tint(@primary-color, 90%);
+    color: @primary-color;
   }
 
   &-horizontal &-item,
@@ -96,6 +96,10 @@
     }
   }
 
+  &:not(&-horizontal) &-item-selected {
+    background-color: tint(@primary-color, 90%);
+  }
+
   &-horizontal,
   &-inline,
   &-vertical {
@@ -124,7 +128,7 @@
   &-inline {
     .@{menu-prefix-cls}-selected,
     .@{menu-prefix-cls}-item-selected {
-      border-right: 2px solid @primary-color;
+      border-right: 3px solid @primary-color;
       transform: translateZ(0);
     }
   }

tests/menu/__snapshots__/demo.test.js.snap

@@ -353,23 +353,24 @@ exports[`test renders ./components/menu/demo/switch-mode.md correctly 1`] = `
 exports[`test renders ./components/menu/demo/theme.md correctly 1`] = `
 <div>
   <span
-    class="ant-switch"
+    checked=""
+    class="ant-switch ant-switch-checked"
     tabindex="0">
     <span
       class="ant-switch-inner">
-      Light
+      Dark
     </span>
   </span>
   <br />
   <br />
   <ul
     aria-activedescendant=""
-    class="ant-menu ant-menu-inline  ant-menu-light ant-menu-root"
+    class="ant-menu ant-menu-inline  ant-menu-dark ant-menu-root"
     role="menu"
     style="width:240px;"
     tabindex="0">
     <li
-      class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu">
+      class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected ant-menu-submenu">
       <div
         aria-expanded="true"
         aria-haspopup="true"
@@ -390,8 +391,8 @@ exports[`test renders ./components/menu/demo/theme.md correctly 1`] = `
         id="sub1$Menu"
         role="menu">
         <li
-          aria-selected="false"
-          class="ant-menu-item"
+          aria-selected="true"
+          class="ant-menu-item-selected ant-menu-item"
           role="menuitem"
           style="padding-left:48px;">
           Option 1