feat(button): add icon prop (#156)

* feat(button): add icon prop * chore: update example for button's icon prop * docs: update icon button doc
onu-ui · Apr 3, 2023 · f36ed91 · f36ed91
1 parent 35f0ebf
commit f36ed91
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 5 deletions.
diff --git a/docs/components/button.md b/docs/components/button.md
@@ -56,7 +56,7 @@ Use `shadow` to show Button's shadow.
 
 Use icons to add more meaning to Button. You can use icon alone to save some space, or use it with text.
 
-Use the `icon` slots to add icon.
+Use the `icon` slots or `icon` property to add icon.
 
 <demo src="../example/button/icon.vue"></demo>
 
@@ -90,6 +90,7 @@ Use attribute `size` to set additional sizes with `xs`, `sm`,`md`,`lg`.
 | to | `string` | `undefined` | Determine whether it's a link button. |
 | rounded | `boolean` | `false` | Determine whether it's a round button. |
 | loading | `boolean` | `false` | Determine whether it's loading.  |
+| icon | `string` | `undefined` | Icon's name.  |
 | disabled | `boolean` | `false` | Disable the button. |
 
 

diff --git a/docs/example/button/icon.vue b/docs/example/button/icon.vue
@@ -1,6 +1,7 @@
 <template>
   <div space-y-2>
     <div fscw gap-2>
+      <o-button type="warning" icon="i-carbon-logo-github" />
       <o-button type="secondary">
         <template #icon>
           <div i-carbon-share />
@@ -18,6 +19,9 @@
       </o-button>
     </div>
     <div fscw gap-2>
+      <o-button type="warning" icon="i-carbon-logo-github">
+        Github
+      </o-button>
       <o-button type="secondary">
         <template #icon>
           <div i-carbon-share />

diff --git a/example/src/components/TheButton.vue b/example/src/components/TheButton.vue
@@ -87,6 +87,10 @@ const startLoading = () => {
         <OButton size="lg" o="warning">
           Large
         </OButton>
+        <OButton size="lg" type="warning" icon="i-carbon-logo-github" />
+        <OButton size="lg" type="warning" icon="i-carbon-logo-github">
+          Github
+        </OButton>
         <o-button :to="githubUrl" o="primary">
           <template #icon>
             <div i-carbon-logo-github />

diff --git a/example/src/pages/index.vue b/example/src/pages/index.vue
@@ -2,7 +2,6 @@
   <div py-4 space-y-5 min-h-800px>
     <!-- <TheAvatar />
     <TheIcon />
-    <TheButton />
     <TheSwitch />
     <TheCard />
     <TheCheckbox />
@@ -12,10 +11,11 @@
     <TheLink />
     <TheAffix />
     <TheRadio /> -->
+    <TheButton />
     <TheMessage />
     <TheEmpty />
-    <TheProgress />
     <!-- <TheText />
+    <TheProgress />
     <TheBacktop />
     <ThePopup />
     <TheRate />

diff --git a/packages/components/button/src/index.vue b/packages/components/button/src/index.vue
@@ -8,7 +8,7 @@ const typeLight = computed(() => props.type !== 'default' && props.light)
 const defaultLight = computed(() => props.type === 'default' && props.light)
 const defaultText = computed(() => props.type === 'default' && props.text)
 const slots = useSlots()
-const onlyIcon = computed(() => slots.icon && !slots.default)
+const onlyIcon = computed(() => (slots.icon || props.icon) && !slots.default)
 const binds = Object.assign({}, useAttrs(), props.to ? { href: props.to } : {})
 </script>
 
@@ -34,7 +34,9 @@ const binds = Object.assign({}, useAttrs(), props.to ? { href: props.to } : {})
     ]"
   >
     <div v-if="loading" i-carbon-circle-dash animate-spin />
-    <slot v-else name="icon" />
+    <slot v-else name="icon">
+      <div v-if="icon" :class="icon" />
+    </slot>
     <slot />
   </component>
 </template>
diff --git a/packages/components/button/src/props.ts b/packages/components/button/src/props.ts
@@ -17,6 +17,7 @@ export const buttonProps = {
   },
   disabled: Boolean,
   loading: Boolean,
+  icon: String,
 }
 
 export type OButtonProps = ExtractPropTypes<typeof buttonProps>