Merge pull request #552 from sheinsight/feat-menu-dark-horizontal

Feat menu dark horizontal
sheinsight · Jul 23, 2024 · b4352ae · b4352ae
2 parents b136ac4 + c6591c4
commit b4352ae
Show file tree

Hide file tree

Showing 9 changed files with 86 additions and 32 deletions.
diff --git a/packages/base/src/icons/config.tsx b/packages/base/src/icons/config.tsx
@@ -56,7 +56,7 @@ const config = {
     ArrowLeft: Icons.ArrowLeft,
     Hide: Icons.Hide,
     Show: Icons.Display,
-    Close: Icons.CloseOpaqueMultic1,
+    Close: Icons.PcCloseCircleFill,
   },
   menu: {
     CollapseArrow: Icons.ArrowDown,

diff --git a/packages/shineout-style/src/menu/menu.ts b/packages/shineout-style/src/menu/menu.ts
@@ -222,15 +222,23 @@ const menuStyle: JsStyles<MenuClassType> = {
         },
       },
 
-      '[data-soui-theme=dark][data-soui-mode=inline] &::before, [data-soui-theme=dark][data-soui-mode=vertical] &::before':
+      '[data-soui-theme=dark] &::before': {
+        content: '""',
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        bottom: 0,
+        width: '3px',
+        backgroundColor: token.menuDarkItemActiveBackgroundColor,
+      },
+      '[data-soui-theme=dark][data-soui-mode=horizontal] $root &::before':
         {
-          content: '""',
-          position: 'absolute',
           left: 0,
-          top: 0,
+          right: 0,
           bottom: 0,
-          width: '3px',
-          backgroundColor: token.menuDarkItemActiveBackgroundColor,
+          top: 'auto',
+          width: 'auto',
+          height: '3px',
         },
 
       '$wrapperCollapse[data-soui-theme=light] $root > &': {

diff --git a/packages/shineout/src/drawer/__test__/__snapshots__/drawer.spec.tsx.snap b/packages/shineout/src/drawer/__test__/__snapshots__/drawer.spec.tsx.snap
@@ -389,12 +389,7 @@ exports[`Drawer[Base] should render correctly about full screen 1`] = `
                           viewBox="0 0 24 24"
                         >
                           <path
-                            d="M12 23C5.924 23 1 18.076 1 12C1 5.924 5.924 1 12 1C18.076 1 23 5.924 23 12C23 18.076 18.076 23 12 23Z"
-                            fill="currentColor"
-                          />
-                          <path
-                            d="M9.6129 8.2097C9.22061 7.90468 8.65338 7.93241 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L10.413 11.828L8.29289 13.9497L8.2097 14.044C7.90468 14.4362 7.93241 15.0035 8.29289 15.364C8.68342 15.7545 9.31658 15.7545 9.70711 15.364L11.828 13.242L13.9497 15.364L14.044 15.4471C14.4362 15.7522 15.0035 15.7244 15.364 15.364C15.7545 14.9734 15.7545 14.3403 15.364 13.9497L13.242 11.828L15.364 9.70711L15.4471 9.6129C15.7522 9.22061 15.7244 8.65338 15.364 8.29289C14.9734 7.90237 14.3403 7.90237 13.9497 8.29289L11.828 10.413L9.70711 8.29289L9.6129 8.2097Z"
-                            fill="white"
+                            d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.7845 8.38125C9.39221 8.07623 8.82498 8.10396 8.46449 8.46444C8.07397 8.85497 8.07397 9.48813 8.46449 9.87866L10.5846 11.9995L8.46449 14.1213L8.3813 14.2155C8.07628 14.6078 8.10401 15.175 8.46449 15.5355C8.85502 15.926 9.48818 15.926 9.87871 15.5355L11.9996 13.4136L14.1213 15.5355L14.2156 15.6187C14.6078 15.9237 15.1751 15.896 15.5356 15.5355C15.9261 15.145 15.9261 14.5118 15.5356 14.1213L13.4136 11.9995L15.5356 9.87866L15.6187 9.78445C15.9238 9.39216 15.896 8.82493 15.5356 8.46444C15.145 8.07392 14.5119 8.07392 14.1213 8.46444L11.9996 10.5845L9.87871 8.46444L9.7845 8.38125Z"
                           />
                         </svg>
                       </span>
@@ -471,12 +466,7 @@ exports[`Drawer[Base] should render correctly about full screen 1`] = `
                           viewBox="0 0 24 24"
                         >
                           <path
-                            d="M12 23C5.924 23 1 18.076 1 12C1 5.924 5.924 1 12 1C18.076 1 23 5.924 23 12C23 18.076 18.076 23 12 23Z"
-                            fill="currentColor"
-                          />
-                          <path
-                            d="M9.6129 8.2097C9.22061 7.90468 8.65338 7.93241 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L10.413 11.828L8.29289 13.9497L8.2097 14.044C7.90468 14.4362 7.93241 15.0035 8.29289 15.364C8.68342 15.7545 9.31658 15.7545 9.70711 15.364L11.828 13.242L13.9497 15.364L14.044 15.4471C14.4362 15.7522 15.0035 15.7244 15.364 15.364C15.7545 14.9734 15.7545 14.3403 15.364 13.9497L13.242 11.828L15.364 9.70711L15.4471 9.6129C15.7522 9.22061 15.7244 8.65338 15.364 8.29289C14.9734 7.90237 14.3403 7.90237 13.9497 8.29289L11.828 10.413L9.70711 8.29289L9.6129 8.2097Z"
-                            fill="white"
+                            d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.7845 8.38125C9.39221 8.07623 8.82498 8.10396 8.46449 8.46444C8.07397 8.85497 8.07397 9.48813 8.46449 9.87866L10.5846 11.9995L8.46449 14.1213L8.3813 14.2155C8.07628 14.6078 8.10401 15.175 8.46449 15.5355C8.85502 15.926 9.48818 15.926 9.87871 15.5355L11.9996 13.4136L14.1213 15.5355L14.2156 15.6187C14.6078 15.9237 15.1751 15.896 15.5356 15.5355C15.9261 15.145 15.9261 14.5118 15.5356 14.1213L13.4136 11.9995L15.5356 9.87866L15.6187 9.78445C15.9238 9.39216 15.896 8.82493 15.5356 8.46444C15.145 8.07392 14.5119 8.07392 14.1213 8.46444L11.9996 10.5845L9.87871 8.46444L9.7845 8.38125Z"
                           />
                         </svg>
                       </span>

diff --git a/packages/shineout/src/input/__test__/__snapshots__/input.spec.tsx.snap b/packages/shineout/src/input/__test__/__snapshots__/input.spec.tsx.snap
@@ -772,12 +772,7 @@ exports[`Input[Base] should render correctly about password 1`] = `
             viewBox="0 0 24 24"
           >
             <path
-              d="M12 23C5.924 23 1 18.076 1 12C1 5.924 5.924 1 12 1C18.076 1 23 5.924 23 12C23 18.076 18.076 23 12 23Z"
-              fill="currentColor"
-            />
-            <path
-              d="M9.6129 8.2097C9.22061 7.90468 8.65338 7.93241 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L10.413 11.828L8.29289 13.9497L8.2097 14.044C7.90468 14.4362 7.93241 15.0035 8.29289 15.364C8.68342 15.7545 9.31658 15.7545 9.70711 15.364L11.828 13.242L13.9497 15.364L14.044 15.4471C14.4362 15.7522 15.0035 15.7244 15.364 15.364C15.7545 14.9734 15.7545 14.3403 15.364 13.9497L13.242 11.828L15.364 9.70711L15.4471 9.6129C15.7522 9.22061 15.7244 8.65338 15.364 8.29289C14.9734 7.90237 14.3403 7.90237 13.9497 8.29289L11.828 10.413L9.70711 8.29289L9.6129 8.2097Z"
-              fill="white"
+              d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.7845 8.38125C9.39221 8.07623 8.82498 8.10396 8.46449 8.46444C8.07397 8.85497 8.07397 9.48813 8.46449 9.87866L10.5846 11.9995L8.46449 14.1213L8.3813 14.2155C8.07628 14.6078 8.10401 15.175 8.46449 15.5355C8.85502 15.926 9.48818 15.926 9.87871 15.5355L11.9996 13.4136L14.1213 15.5355L14.2156 15.6187C14.6078 15.9237 15.1751 15.896 15.5356 15.5355C15.9261 15.145 15.9261 14.5118 15.5356 14.1213L13.4136 11.9995L15.5356 9.87866L15.6187 9.78445C15.9238 9.39216 15.896 8.82493 15.5356 8.46444C15.145 8.07392 14.5119 8.07392 14.1213 8.46444L11.9996 10.5845L9.87871 8.46444L9.7845 8.38125Z"
             />
           </svg>
         </span>

diff --git a/packages/shineout/src/menu/__doc__/changelog.cn.md b/packages/shineout/src/menu/__doc__/changelog.cn.md
@@ -1,3 +1,9 @@
+## 3.3.0
+未发布
+
+### 🆕 Feature
+- `Menu` 支持水平模式的暗系主题 ([#505](https://github.com/sheinsight/shineout-next/pull/505))
+
 ## 3.2.2
 2024-06-21
 

diff --git a/packages/shineout/src/menu/__example__/11-dark.tsx b/packages/shineout/src/menu/__example__/11-dark.tsx
@@ -5,7 +5,7 @@
  *    -- The dark theme
  */
 import React, { useState } from 'react';
-import { Menu, TYPE } from 'shineout';
+import { Menu, Radio, TYPE } from 'shineout';
 
 interface MenuItem {
   id: string;
@@ -65,9 +65,11 @@ const data: MenuItem[] = [
     title: 'Navigation Four',
   },
 ];
+const modeArr = ['inline', 'vertical', 'horizontal'];
 
 const App: React.FC = () => {
   const [active, setActive] = useState(['1']);
+  const [mode, seMode] = useState<MenuProps['mode']>('inline');
 
   const renderItem: MenuRenderItem = (d: MenuItem) => d.title;
 
@@ -77,14 +79,18 @@ const App: React.FC = () => {
 
   return (
     <div>
+      <Radio.Group button={'outline'} size='small' style={{marginBlock: 12}} data={modeArr} keygen value={mode} onChange={seMode} />
       <Menu
+        mode={mode}
+        key={mode}
         data={data}
+        disabled={(d) => d.id === '2'}
         keygen='id'
         inlineIndent={14}
         theme='dark'
         active={checkActive}
         onClick={handleClick}
-        style={{ width: 256 }}
+        style={mode === 'horizontal' ? {} : { width: 256 }}
         renderItem={renderItem}
       />
     </div>

diff --git a/packages/shineout/src/menu/__example__/12-collpase.tsx b/packages/shineout/src/menu/__example__/12-collpase.tsx
@@ -139,7 +139,7 @@ const IMenu = ({ theme }: { theme: MenuProps['theme'] }) => {
   return (
     <div>
       <div style={{ marginBottom: 12 }}>
-        <Button type='primary' onClick={() => setCollapse(!collapse)}>
+        <Button type='primary' onClick={() => setCollapse(!collapse)} style={{ height: 32 }}>
           {collapse ? (
             <svg
               viewBox='64 64 896 896'

diff --git a/packages/shineout/src/menu/__example__/13-collpase-header.tsx b/packages/shineout/src/menu/__example__/13-collpase-header.tsx
@@ -139,10 +139,10 @@ const IMenu = (props: { theme: MenuProps['theme'] }) => {
 
   return (
     <div>
-      <div>
+      <div style={{ marginBottom: 12 }}>
         <Button
           type='primary'
-          style={{ marginBottom: 12, marginInlineEnd: 12 }}
+          style={{ marginInlineEnd: 12, height: 32 }}
           onClick={() => setCollapse(!collapse)}
         >
           {collapse ? (
@@ -207,7 +207,7 @@ const IMenu = (props: { theme: MenuProps['theme'] }) => {
                   </div>
                 )}
               </div>
-              <div style={{marginTop: 12}}>
+              <div style={{ marginTop: 12 }}>
                 <Menu.Search
                   onSearchClick={() => {
                     if (collapse) setCollapse(false);

diff --git a/packages/shineout/src/menu/__test__/__snapshots__/menu.spec.tsx.snap b/packages/shineout/src/menu/__test__/__snapshots__/menu.spec.tsx.snap
@@ -1166,6 +1166,55 @@ exports[`Menu[Base] should render correctly about control 1`] = `
 
 exports[`Menu[Base] should render correctly about dark 1`] = `
 <div>
+  <div
+    class="soui-radio-group soui-radio-group-button soui-button-group"
+    dir="ltr"
+    style="margin-block: 12px;"
+  >
+    <button
+      class="soui-radio-wrapper soui-radio-wrapper-checked soui-button-primary soui-button-button soui-button-outline soui-button-small"
+      dir="ltr"
+      type="button"
+    >
+      <input
+        checked=""
+        style="display: none;"
+        tabindex="0"
+        type="radio"
+      />
+      <span>
+        inline
+      </span>
+    </button>
+    <button
+      class="soui-radio-wrapper soui-button-secondary soui-button-button soui-button-outline soui-button-small"
+      dir="ltr"
+      type="button"
+    >
+      <input
+        style="display: none;"
+        tabindex="0"
+        type="radio"
+      />
+      <span>
+        vertical
+      </span>
+    </button>
+    <button
+      class="soui-radio-wrapper soui-button-secondary soui-button-button soui-button-outline soui-button-small"
+      dir="ltr"
+      type="button"
+    >
+      <input
+        style="display: none;"
+        tabindex="0"
+        type="radio"
+      />
+      <span>
+        horizontal
+      </span>
+    </button>
+  </div>
   <div
     class="soui-menu-wrapper soui-menu-wrapper-inline soui-menu-wrapper-dark"
     data-soui-mode="inline"
@@ -1449,7 +1498,7 @@ exports[`Menu[Base] should render correctly about dark 1`] = `
           </ul>
         </li>
         <li
-          class="soui-menu-item"
+          class="soui-menu-item soui-menu-item-disabled"
           dir="ltr"
         >
           <div