feat(hoverbutton): v14

src/packages/configprovider/types.ts

@@ -333,19 +333,13 @@ export type NutCSSVariables =
   | 'nutuiCalendarDayFontWeight'
   | 'nutuiCalendarDayActiveBorderRadius'
   | 'nutuiHoverbuttonSpacing'
-  | 'nutuiSpacing16'
   | 'nutuiHoverbuttonPositionBottom'
   | 'nutuiHoverbuttonPositionRight'
   | 'nutuiHoverbuttonItemBorderColor'
-  | 'nutuiBlack3'
   | 'nutuiHoverbuttonItemBackground'
-  | 'nutuiGray1'
   | 'nutuiHoverbuttonItemBackgroundActive'
-  | 'nutuiGray3'
   | 'nutuiHoverbuttonItemIconColor'
-  | 'nutuiGray7'
   | 'nutuiHoverbuttonItemIconColorActive'
-  | 'nutuiGray6'
   | 'nutuiOverlayBgColor'
   | 'nutuiOverlayZIndex'
   | 'nutuiOverlayContentBgColor'
@@ -816,4 +810,5 @@ export type NutCSSVariables =
   | 'nutuiResultpageDescriptionLineHeight'
   | 'nutuiResultpageActionsMarginTop'
   | 'nutuiSafeAreaMultiple'
+  | 'nutuiBlack3'
   | 'nutuiBlack1'

src/packages/hoverbutton/__test__/__snapshots__/hoverbutton.spec.tsx.snap

@@ -16,7 +16,7 @@ exports[`child element count 1`] = `
         >
           <svg
             aria-labelledby="Cart"
-            class="nut-icon nut-icon-Cart "
+            class="nut-icon nut-icon-Cart nut-icon"
             role="presentation"
             viewBox="0 0 1024 1024"
             xmlns="http://www.w3.org/2000/svg"
@@ -37,7 +37,7 @@ exports[`child element count 1`] = `
         >
           <svg
             aria-labelledby="Cart"
-            class="nut-icon nut-icon-Cart "
+            class="nut-icon nut-icon-Cart nut-icon"
             role="presentation"
             viewBox="0 0 1024 1024"
             xmlns="http://www.w3.org/2000/svg"
@@ -58,7 +58,7 @@ exports[`child element count 1`] = `
         >
           <svg
             aria-labelledby="Cart"
-            class="nut-icon nut-icon-Cart "
+            class="nut-icon nut-icon-Cart nut-icon"
             role="presentation"
             viewBox="0 0 1024 1024"
             xmlns="http://www.w3.org/2000/svg"
@@ -71,6 +71,31 @@ exports[`child element count 1`] = `
           </svg>
         </div>
       </div>
+      <div
+        class="nut-hoverbutton-item-container nut-hoverbutton-item-container-icontext"
+      >
+        <div
+          class="nut-hoverbutton-item-text-icon"
+        />
+        <svg
+          aria-labelledby="Cart"
+          class="nut-icon nut-icon-Cart nut-icon"
+          role="presentation"
+          viewBox="0 0 1024 1024"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M0 65.17c0-24.21 19.37-43.84 43.24-43.84h51.14c70.46 0 128.85 55.4 133.55 126.68l.74 11.12h661.46c81.45 0 144 73.15 132.48 154.9l-33.02 234.45c-14.63 103.94-97.49 184.23-200.58 194.35l-467.47 45.86C246.4 796.07 180.12 739 175.1 662.63l-30.03-456.32v-.76l-3.42-51.69c-1.66-25.24-22.34-44.84-47.27-44.85H43.24C19.35 109.01 0 89.38 0 65.17m234.45 181.66 26.95 409.98c1.77 27.03 25.22 47.21 51.82 44.59l467.47-45.87c63.36-6.19 114.28-55.55 123.29-119.44L937 301.63c4.1-28.93-18.05-54.83-46.87-54.82h-655.7zm64.22 670.5a85.33 85.33 0 1 1-170.67 0 85.33 85.33 0 0 1 170.67 0M896 1002.67A85.33 85.33 0 1 0 896 832a85.33 85.33 0 0 0 0 170.67"
+            fill="currentColor"
+            fill-opacity="0.9"
+          />
+        </svg>
+        <div
+          class="nut-hoverbutton-item-text"
+        >
+          购物
+        </div>
+      </div>
     </div>
     <div
       class="nut-safe-area nut-safe-area-position-bottom"
@@ -95,7 +120,7 @@ exports[`emit click event 1`] = `
         >
           <svg
             aria-labelledby="Cart"
-            class="nut-icon nut-icon-Cart "
+            class="nut-icon nut-icon-Cart nut-icon"
             role="presentation"
             viewBox="0 0 1024 1024"
             xmlns="http://www.w3.org/2000/svg"
@@ -120,7 +145,7 @@ exports[`tabbar height 1`] = `
 <div>
   <div
     class="nut-hoverbutton-container"
-    style="bottom: 64px;"
+    style="bottom: 108px;"
   >
     <div
       class="nut-hoverbutton"
@@ -133,7 +158,7 @@ exports[`tabbar height 1`] = `
         >
           <svg
             aria-labelledby="Cart"
-            class="nut-icon nut-icon-Cart "
+            class="nut-icon nut-icon-Cart nut-icon"
             role="presentation"
             viewBox="0 0 1024 1024"
             xmlns="http://www.w3.org/2000/svg"

src/packages/hoverbutton/__test__/hoverbutton.spec.tsx

@@ -21,9 +21,10 @@ test('child element count', () => {
       <HoverButton.Item icon={<Cart />} />
       <HoverButton.Item icon={<Cart />} />
       <HoverButton.Item icon={<Cart />} />
+      <HoverButton.Item icon={<Cart />}>购物</HoverButton.Item>
     </HoverButton>
   )
-  expect(container.querySelector('.nut-hoverbutton')?.childElementCount).toBe(3)
+  expect(container.querySelector('.nut-hoverbutton')?.childElementCount).toBe(4)
   expect(container).toMatchSnapshot()
 })
 
@@ -34,7 +35,7 @@ test('tabbar height', () => {
 
   expect(container.querySelector('.nut-hoverbutton-container')).toHaveAttribute(
     'style',
-    'bottom: 64px;'
+    'bottom: 108px;'
   )
   expect(container).toMatchSnapshot()
 })

src/packages/hoverbutton/demo.taro.tsx

@@ -8,6 +8,7 @@ import Demo1 from './demos/taro/demo1'
 import Demo2 from './demos/taro/demo2'
 import Demo3 from './demos/taro/demo3'
 import Demo4 from './demos/taro/demo4'
+import Demo6 from './demos/taro/demo6'
 import { harmonyAndRn } from '@/utils/platform-taro'
 // import Demo5 from './demos/taro/demo5'
 
@@ -18,6 +19,7 @@ const HoverDemo = () => {
     'zh-CN': {
       show: '展示',
       basic: '基础用法',
+      customNode: '自定义内容',
       multiButtons: '多个按钮',
       hasTabbar: '有底部导航栏的情况',
       customZIndex: '自定义层级',
@@ -26,6 +28,7 @@ const HoverDemo = () => {
     'zh-TW': {
       show: '展示',
       basic: '基礎用法',
+      customNode: '按鈕和文字',
       multiButtons: '多個按鈕',
       hasTabbar: '有底部導航欄的情況',
       customZIndex: '自定義層級',
@@ -34,6 +37,7 @@ const HoverDemo = () => {
     'en-US': {
       show: 'Show ',
       basic: 'Basic Usage',
+      customNode: 'Icon And Text',
       multiButtons: 'Multiple Buttons',
       hasTabbar: 'With Tabbar',
       customZIndex: 'Custom Z-Index',
@@ -91,9 +95,18 @@ const HoverDemo = () => {
             }}
           />
         )} */}
+
+        <View className="h2">{translated.customNode}</View>
+        <Cell
+          title={`${translated.show}${translated.customNode}`}
+          onClick={() => {
+            setCurDemo('customNode')
+          }}
+        />
       </ScrollView>
 
       {curDemo === 'basic' && <Demo1 />}
+      {curDemo === 'customNode' && <Demo6 />}
       {curDemo === 'multiButtons' && <Demo2 />}
       {curDemo === 'hasTabbar' && <Demo3 />}
       {curDemo === 'customZIndex' && <Demo4 />}

src/packages/hoverbutton/demo.tsx

@@ -6,12 +6,14 @@ import Demo2 from './demos/h5/demo2'
 import Demo3 from './demos/h5/demo3'
 import Demo4 from './demos/h5/demo4'
 import Demo5 from './demos/h5/demo5'
+import Demo6 from './demos/h5/demo6'
 
 const HoverButtonDemo = () => {
   const [translated] = useTranslate({
     'zh-CN': {
       show: '展示',
       basic: '基础用法',
+      customNode: '按钮和文字',
       multiButtons: '多个按钮',
       hasTabbar: '有底部导航栏的情况',
       customZIndex: '自定义层级',
@@ -20,6 +22,7 @@ const HoverButtonDemo = () => {
     'zh-TW': {
       show: '展示',
       basic: '基礎用法',
+      customNode: '自定義內容',
       multiButtons: '多個按鈕',
       hasTabbar: '有底部導航欄的情況',
       customZIndex: '自定義層級',
@@ -28,13 +31,14 @@ const HoverButtonDemo = () => {
     'en-US': {
       show: 'Show ',
       basic: 'Basic Usage',
+      customNode: 'Custom Node',
       multiButtons: 'Multiple Buttons',
       hasTabbar: 'With Tabbar',
       customZIndex: 'Custom Z-Index',
       customSpacing: 'Custom Spacing',
     },
   })
-  const [curDemo, setCurDemo] = useState('basic')
+  const [curDemo, setCurDemo] = useState('customNode')
 
   return (
     <>
@@ -84,6 +88,15 @@ const HoverButtonDemo = () => {
         />
         {curDemo === 'customSpacing' && <Demo5 />}
       </div>
+
+      <h2>{translated.customNode}</h2>
+      <Cell
+        title={`${translated.show}${translated.customNode}`}
+        onClick={() => {
+          setCurDemo('customNode')
+        }}
+      />
+      {curDemo === 'customNode' && <Demo6 />}
     </>
   )
 }

src/packages/hoverbutton/demos/h5/demo2.tsx

@@ -30,6 +30,9 @@ const Demo2 = () => {
       <HoverButton.Item icon={<Cart />} onClick={testClick1} />
       <HoverButton.Item icon={<Cart />} onClick={testClick2} />
       <HoverButton.Item icon={<Cart />} onClick={testClick3} />
+      <HoverButton.Item icon={<Cart />} onClick={testClick3}>
+        购物
+      </HoverButton.Item>
     </HoverButton>
   )
 }

src/packages/hoverbutton/demos/h5/demo6.tsx

@@ -0,0 +1,53 @@
+/**
+ * 基础用法
+ */
+import React from 'react'
+import { HoverButton } from '@nutui/nutui-react'
+
+const Demo1 = () => {
+  return (
+    <>
+      <HoverButton>
+        <div
+          className="nut-hoverbutton-item-container"
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+          }}
+        >
+          <span
+            style={{
+              fontSize: 12,
+              fontWeight: 700,
+              lineHeight: 1,
+              marginTop: 5,
+              fontFamily: 'JD',
+            }}
+          >
+            3
+          </span>
+          <div
+            style={{
+              height: 1,
+              width: 20,
+              background: '#1A1A1A',
+              marginTop: 3,
+              marginBottom: 3,
+            }}
+          />
+          <div
+            style={{
+              fontSize: 10,
+              lineHeight: '9px',
+              fontFamily: 'JD',
+            }}
+          >
+            238
+          </div>
+        </div>
+      </HoverButton>
+    </>
+  )
+}
+export default Demo1

src/packages/hoverbutton/demos/taro/demo2.tsx

@@ -21,6 +21,9 @@ const Demo2 = () => {
       <HoverButton.Item icon={<Cart />} onClick={testClick1} />
       <HoverButton.Item icon={<Cart />} onClick={testClick2} />
       <HoverButton.Item icon={<Cart />} onClick={testClick3} />
+      <HoverButton.Item icon={<Cart />} onClick={testClick3}>
+        购物
+      </HoverButton.Item>
     </HoverButton>
   )
 }

src/packages/hoverbutton/demos/taro/demo6.tsx

@@ -0,0 +1,56 @@
+/**
+ * 基础用法
+ */
+import React from 'react'
+import { HoverButton } from '@nutui/nutui-react-taro'
+import { View } from '@tarojs/components'
+import pxTransform from '@/utils/px-transform'
+
+const Demo1 = () => {
+  return (
+    <>
+      <HoverButton>
+        <View
+          className="nut-hoverbutton-item nut-hoverbutton-item-container"
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            marginBottom: 8,
+          }}
+        >
+          <View
+            style={{
+              fontSize: 12,
+              fontWeight: 700,
+              lineHeight: 1,
+              marginTop: 5,
+              fontFamily: 'JD',
+            }}
+          >
+            3
+          </View>
+          <View
+            style={{
+              height: 1,
+              width: 20,
+              background: '#1A1A1A',
+              marginTop: 3,
+              marginBottom: 3,
+            }}
+          />
+          <View
+            style={{
+              fontSize: 10,
+              lineHeight: pxTransform(9),
+              fontFamily: 'JD',
+            }}
+          >
+            238
+          </View>
+        </View>
+      </HoverButton>
+    </>
+  )
+}
+export default Demo1

src/packages/hoverbutton/doc.en-US.md

@@ -44,6 +44,14 @@ import { HoverButton } from '@nutui/nutui-react-taro'
 
 :::
 
+### Custom Node
+
+:::demo
+
+<CodeBlock src='h5/demo6.tsx'></CodeBlock>
+
+:::
+
 ## HoverButton
 
 ### Props
@@ -79,4 +87,4 @@ The component provides the following CSS variables that can be used for custom s
 | \--nutui-hoverbutton-item-background | Button normal background color | `#FFFFFF` |
 | \--nutui-hoverbutton-item-background-active | Button active background color | `#F6F6F6` |
 | \--nutui-hoverbutton-item-icon-color | Icon normal color | `#1A1A1A` |
-| \--nutui-hoverbutton-item-icon-color-active | Icon active color | `#595959` |
+| \--nutui-hoverbutton-item-icon-color-active | Icon active color | `#595959` |