feat(button): adds render-icon prop (#4011)

* feat(button): adds `icon` prop, closes #4007 * chore: changelog * refractor: change to `render-icon` function Co-authored-by: 07akioni <[email protected]>
tusen-ai · Nov 12, 2022 · dc5bf7d · dc5bf7d
1 parent 4ba3805
commit dc5bf7d
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 20 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -18,6 +18,7 @@
 - `n-input` adds `count-graphemes` prop, closes [#3967](https://github.com/tusen-ai/naive-ui/issues/3967).
 - `n-cascader` adds `not-found` slot, closes [#3862](https://github.com/tusen-ai/naive-ui/issues/3862).
 - `n-avatar` adds `img-props` prop, closes [#3963](https://github.com/tusen-ai/naive-ui/issues/3963).
+- `n-button` adds `render-icon` prop，closes [#4007](https://github.com/tusen-ai/naive-ui/issues/4007).
 - Add `n-equation` component.
 - `n-image` adds `previewed-img-props` prop.
 - `n-data-table` adds `scrollbar-props` prop, closes [#4021](https://github.com/tusen-ai/naive-ui/issues/4021).

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -18,6 +18,7 @@
 - `n-input` 新增 `count-graphemes` 属性，关闭 [#3967](https://github.com/tusen-ai/naive-ui/issues/3967)
 - `n-cascader` 新增 `not-found` slot，关闭 [#3862](https://github.com/tusen-ai/naive-ui/issues/3862)
 - `n-avatar` 新增 `img-props` 属性，关闭 [#3963](https://github.com/tusen-ai/naive-ui/issues/3963)
+- `n-button` 新增 `render-icon` 属性，关闭 [#4007](https://github.com/tusen-ai/naive-ui/issues/4007)
 - 新增 `n-equation` 组件
 - `n-image` 新增 `previewed-img-props` 属性
 - `n-data-table` 新增 `scrollbar-props` 属性，关闭 [#4021](https://github.com/tusen-ai/naive-ui/issues/4021)

diff --git a/src/button/demos/enUS/icon.demo.vue b/src/button/demos/enUS/icon.demo.vue
@@ -1,17 +1,12 @@
 <markdown>
 # Icon
 
-Icons can be used in buttons.
+Icons can be used in buttons, can use `renderIcon` prop or `icon` slot.
 </markdown>
 
 <template>
   <n-space>
-    <n-button>
-      <template #icon>
-        <n-icon>
-          <cash-icon />
-        </n-icon>
-      </template>
+    <n-button :render-icon="renderIcon">
       +100$
     </n-button>
     <n-button icon-placement="right">
@@ -27,11 +22,18 @@ Icons can be used in buttons.
 
 <script lang="ts">
 import { CashOutline as CashIcon } from '@vicons/ionicons5'
-import { defineComponent } from 'vue'
+import { defineComponent, h } from 'vue'
 
 export default defineComponent({
   components: {
     CashIcon
+  },
+  setup () {
+    return {
+      renderIcon () {
+        return h(CashIcon)
+      }
+    }
   }
 })
 </script>
diff --git a/src/button/demos/enUS/index.demo-entry.md b/src/button/demos/enUS/index.demo-entry.md
@@ -45,6 +45,7 @@ popover.vue
 | keyboard | `boolean` | `true` | Whether is supports keyboard operation. |  |
 | quaternary | `boolean` | `false` | Whether the button is quaternary button. |  |
 | loading | `boolean` | `false` | Whether the button shows the loading status. |  |
+| render-icon | `() => VNodeChild` | `undefined` | Render function that render button icon | NEXT_VERSION |
 | round | `boolean` | `false` | Whether the button shows rounded corners. |  |
 | secondary | `boolean` | `false` | Whether the button is secondary button. |  |
 | size | `'tiny' \| 'small' \| 'medium' \| 'large'` | `'medium'` | Button size. |  |

diff --git a/src/button/demos/zhCN/icon.demo.vue b/src/button/demos/zhCN/icon.demo.vue
@@ -1,17 +1,12 @@
 <markdown>
 # 图标
 
-在按钮上使用图标。
+在按钮上使用图标，可以使用 `renderIcon` 属性或 `icon` 插槽。
 </markdown>
 
 <template>
   <n-space>
-    <n-button secondary strong>
-      <template #icon>
-        <n-icon>
-          <cash-icon />
-        </n-icon>
-      </template>
+    <n-button secondary strong :render-icon="renderIcon">
       +100 元
     </n-button>
     <n-button icon-placement="right" secondary strong>
@@ -27,11 +22,18 @@
 
 <script lang="ts">
 import { CashOutline as CashIcon } from '@vicons/ionicons5'
-import { defineComponent } from 'vue'
+import { defineComponent, h } from 'vue'
 
 export default defineComponent({
   components: {
     CashIcon
+  },
+  setup () {
+    return {
+      renderIcon () {
+        return h(CashIcon)
+      }
+    }
   }
 })
 </script>
diff --git a/src/button/demos/zhCN/index.demo-entry.md b/src/button/demos/zhCN/index.demo-entry.md
@@ -47,6 +47,7 @@ debug.vue
 | keyboard | `boolean` | `true` | 是否支持键盘操作 |  |
 | loading | `boolean` | `false` | 按钮是否显示加载状态 |  |
 | quaternary | `boolean` | `false` | 是否是四级按钮 |  |
+| render-icon | `() => VNodeChild` | `undefined` | 按钮图标的渲染函数 | NEXT_VERSION |
 | round | `boolean` | `false` | 按钮是否显示圆角 |  |
 | size | `'tiny' \| 'small' \| 'medium' \| 'large'` | `'medium'` | 按钮的尺寸 |  |
 | secondary | `boolean` | `false` | 是否是次要按钮 |  |

diff --git a/src/button/src/Button.tsx b/src/button/src/Button.tsx
@@ -8,7 +8,8 @@ import {
   CSSProperties,
   ButtonHTMLAttributes,
   watchEffect,
-  ExtractPropTypes
+  ExtractPropTypes,
+  VNodeChild
 } from 'vue'
 import { useMemo } from 'vooks'
 import { changeColor } from 'seemly'
@@ -72,6 +73,7 @@ export const buttonProps = {
     default: 'default'
   },
   dashed: Boolean,
+  renderIcon: Function as PropType<() => VNodeChild>,
   iconPlacement: {
     type: String as PropType<'left' | 'right'>,
     default: 'left'
@@ -545,7 +547,7 @@ const Button = defineComponent({
     }
   },
   render () {
-    const { mergedClsPrefix, tag: Component, onRender } = this
+    const { mergedClsPrefix, renderIcon, tag: Component, onRender } = this
     onRender?.()
     const children = resolveWrappedSlot(
       this.$slots.default,
@@ -589,7 +591,7 @@ const Button = defineComponent({
               resolveWrappedSlot(
                 this.$slots.icon,
                 (children) =>
-                  (this.loading || children) && (
+                  (this.loading || renderIcon || children) && (
                     <span
                       class={`${mergedClsPrefix}-button__icon`}
                       style={{
@@ -612,7 +614,7 @@ const Button = defineComponent({
                                 class={`${mergedClsPrefix}-icon-slot`}
                                 role="none"
                               >
-                                {children}
+                                {renderIcon ? renderIcon() : children}
                               </div>
                             )
                         }}