feat(ui): add more style props to Button

front/src/components/ui/Button.vue

@@ -4,9 +4,11 @@ import { type ColorProps, type VariantProps, type DefaultProps, propsToColor } f
 
 import Loader from '~/components/ui/Loader.vue'
 
-type Props = {
+const props = defineProps<{
   width?: 'standard' | 'auto' | 'full'
   alignText?: 'left' | 'center' | 'right'
+  alignSelf?: 'start' | 'center' | 'end'
+  thin?: true
 
   isActive?: boolean
   isLoading?: boolean
@@ -19,9 +21,7 @@ type Props = {
 
   autofocus? : boolean
   ariaPressed? : true
-} & ColorProps & VariantProps & DefaultProps
+} & (ColorProps | DefaultProps) & VariantProps>()
-
-const props = defineProps<Props>()
 
 const slots = useSlots()
 const isIconOnly = computed(() => !!props.icon && !slots.default)
@@ -29,6 +29,8 @@ const isIconOnly = computed(() => !!props.icon && !slots.default)
 const internalLoader = ref(false)
 const isLoading = computed(() => props.isLoading || internalLoader.value)
 
+const fontWeight = props.thin ? 400 : 900
+
 const button = ref()
 
 const click = async (...args: any[]) => {
@@ -49,10 +51,11 @@ onMounted(() => {
   <button ref="button"
     :aria-pressed="props.ariaPressed"
     v-bind="propsToColor({...props, interactive:true})"
-    class="funkwhale is-colored button"
+    class="funkwhale button"
     :class="[
-      'is-' + (width ?? 'standard'),
+      'is-' + width,
-      'is-aligned-' + (alignText ?? 'center'),
+      'is-text-aligned-' + (alignText ?? 'center'),
+      'is-self-aligned-' + (alignSelf ?? 'start'),
       {
         'is-active': isActive,
         'is-loading': isLoading,
@@ -76,14 +79,13 @@ onMounted(() => {
 <style lang="scss">
 .funkwhale {
   &.button {
-
     position: relative;
     display: inline-flex;
     align-items: center;
     white-space: nowrap;
 
     font-family: $font-main;
-    font-weight: 900;
+    font-weight: v-bind(fontWeight);
     font-size: 0.875em;
 
     line-height: 1em;
@@ -98,17 +100,16 @@ onMounted(() => {
 
     transform: translateX(var(--fw-translate-x)) translateY(var(--fw-translate-y)) scale(var(--fw-scale));
     transition: all .2s ease;
-
+x
-
+    &.is-text-aligned-center {
-    &.is-aligned-center {
+      justify-content: center
-      justify-content: center;
     }
 
-    &.is-aligned-left {
+    &.is-text-aligned-left {
-      justify-content: flex-start;
+      justify-content: flex-start
     }
 
-    &.is-aligned-right {
+    &.is-text-aligned-right {
       justify-content: flex-end;
     }
 
@@ -116,12 +117,26 @@ onMounted(() => {
       box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
     }
 
-    &:not(.is-icon-only):not(.is-auto) {
+    &:not(.is-icon-only):not(.is-auto), &.is-standard {
       min-width: 8.5rem;
     }
 
+    align-self: start;
+
+    &.is-self-aligned-start {
+      align-self: flex-start;
+    }
+
+    &.is-self-aligned-center {
+      align-self: center;
+    }
+
+    &.is-self-aligned-end {
+      align-self: flex-end;
+    }
+
     &.is-full {
-      display: block;
+      align-self: stretch;
     }
 
     &.is-round {

front/ui-docs/components/ui/button.md

@@ -1,5 +1,6 @@
 <script setup>
 import Button from '~/components/ui/Button.vue'
+import Layout from '~/components/ui/Layout.vue'
 
 const click = () => new Promise(resolve => setTimeout(resolve, 1000))
 </script>
@@ -291,7 +292,7 @@ Icon buttons shrink down to the icon size if you don't pass any content. If you
 
 <Button color="secondary" is-round icon="bi-x" />
 
-<Button icon="bi-save">&nbsp;</Button>
+<Button icon="bi-save" />
 
 <Button color="destructive" icon="bi-trash">
   Delete
@@ -300,7 +301,45 @@ Icon buttons shrink down to the icon size if you don't pass any content. If you
 
 <Button icon="bi-three-dots-vertical" />
 <Button round icon="bi-x" />
-<Button primary icon="bi-save">&nbsp;</Button>
+<Button primary icon="bi-save" width="standard" />
 <Button destructive icon="bi-trash">
   Delete
 </Button>
+
+## Width and alignment
+
+<Layout flex>
+
+```vue-html
+    <Button width="auto">·</Button>
+    <Button width="standard">·</Button>
+    <Button width="full">·</Button>
+
+    <hr />
+
+    <Button alignSelf="start">·</Button>
+    <Button alignSelf="center">·</Button>
+    <Button alignSelf="end">·</Button>
+
+    <hr />
+
+    <Button alignText="left">·</Button>
+    <Button alignText="center">·</Button>
+    <Button alignText="right">·</Button>
+```
+
+  <Layout class="preview solid secondary" stack no-gap>
+    <Button width="auto">·</Button>
+    <Button width="standard">·</Button>
+    <Button width="full">·</Button>
+    <hr />
+    <Button alignSelf="start">·</Button>
+    <Button alignSelf="center">·</Button>
+    <Button alignSelf="end">·</Button>
+    <hr />
+    <Button alignText="left">·</Button>
+    <Button alignText="center">·</Button>
+    <Button alignText="right">·</Button>
+    (Text to stretch the column)
+  </Layout>
+</Layout>