Add round and icon buttons

docs/components/button/index.md

@@ -58,6 +58,27 @@ const click = () => new Promise((r, resolve) => setTimeout(resolve, 1000))
   Outline button
 </fw-button>
 
+## Button shapes
+### Normal
+```html
+<fw-button>
+  Normal button
+</fw-button>
+```
+<fw-button>
+  Normal button
+</fw-button>
+
+### Round
+```html
+<fw-button round>
+  Round button
+</fw-button>
+```
+<fw-button round>
+  Round button
+</fw-button>
+
 ## Button states
 ### Disabled
 ```html
@@ -112,3 +133,28 @@ const click = () => new Promise(resolve => setTimeout(resolve, 1000))
 <fw-button @click="click">
   Click me
 </fw-button>
+
+## Icons
+You can use [Bootstrap Icons](https://icons.getbootstrap.com/) in your button component
+
+::: info
+When the button doesn't have any contents or it's contents are empty, it will shrink down to the icon size.
+To avoid this, you can add `&nbsp;`.
+:::
+```html
+<fw-button secondary icon="bi-three-dots-vertical" />
+
+<fw-button secondary is-round icon="bi-x" />
+
+<fw-button icon="bi-save">&nbsp;</fw-button>
+
+<fw-button destructive icon="bi-trash">
+  Delete
+</fw-button>
+```
+<fw-button secondary icon="bi-three-dots-vertical" />
+<fw-button secondary round icon="bi-x" />
+<fw-button icon="bi-save">&nbsp;</fw-button>
+<fw-button destructive icon="bi-trash">
+  Delete
+</fw-button>

src/components/button/Button.vue

 <script setup lang="ts">
 import { type TypeProps, useType } from '~/composables/useType'
 import { FwLoader } from '~/components'
-import { ref, computed } from 'vue'
+import { ref, computed, useSlots } from 'vue'
 
 interface Props extends TypeProps {
   outline?: boolean
@@ -9,6 +9,9 @@ interface Props extends TypeProps {
   isActive?: boolean
   isLoading?: boolean
 
+  round?: boolean
+  icon?: string
+
   onClick?: (...args: any[]) => void | Promise<void>
 
   // TODO (wvffle): Remove after https://github.com/vuejs/core/pull/4512 is merged
@@ -21,6 +24,9 @@ const props = defineProps<Props>()
 
 const type = useType(props)
 
+const slots = useSlots()
+const iconOnly = computed(() => !!props.icon && !slots.default)
+
 const internalLoader = ref(false)
 const isLoading = computed(() => props.isLoading || internalLoader.value)
 
@@ -38,10 +44,14 @@ const click = async (...args: any[]) => {
 <template>
 	<button
     class="funkwhale input button"
-    :class="[type, { 'is-active': isActive, 'is-outline': outline, 'is-loading': isLoading }]"
+    :class="[type, { 'is-active': isActive, 'is-outline': outline, 'is-loading': isLoading, 'icon-only': iconOnly, 'is-round': round }]"
     @click="click"
   >
     <span>
+      <i
+        v-if="icon"
+        :class="['bi', icon]"
+      />
       <slot />
     </span>
 

src/components/button/style.scss

@@ -10,7 +10,6 @@
     font-family: $font-main;
     font-weight: 900;
 
-    min-width: 8.5rem;
     height: 2.125rem;
 
     line-height: 1rem;
@@ -19,6 +18,15 @@
     padding: 0.5rem;
 
     border-radius: var(--fw-border-radius);
+    margin: 0 0.5ch;
+
+    &:not(.icon-only) {
+      min-width: 8.5rem;
+    }
+
+    &.is-round {
+      border-radius: 100vh;
+    }
 
     &[disabled] {
       font-weight: normal;