From c65b4bd4f0c889f17fd91671351bef929bbc8412 Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Sun, 22 Dec 2024 02:27:20 +0100
Subject: [PATCH] feat(ui): more consistent props

---
 front/src/components/ui/Button.vue           |  6 ++-
 front/src/components/ui/Card.vue             | 37 ++++++++++++-----
 front/src/components/ui/Layout.vue           |  6 ++-
 front/src/components/ui/Link.vue             |  4 +-
 front/src/components/ui/Pill.vue             |  3 +-
 front/src/components/ui/layout/Spacer.vue    | 22 ++++++----
 front/src/style/colors.scss                  |  8 ++--
 front/src/ui/layouts/constrained.vue         |  1 -
 front/ui-docs/components/ui/card.md          | 42 ++++++++++----------
 front/ui-docs/components/ui/layout.md        | 10 ++---
 front/ui-docs/components/ui/layout/flex.md   |  8 +---
 front/ui-docs/components/ui/layout/spacer.md | 14 ++++++-
 front/ui-docs/using-color.md                 |  8 +++-
 13 files changed, 105 insertions(+), 64 deletions(-)

diff --git a/front/src/components/ui/Button.vue b/front/src/components/ui/Button.vue
index 24b902219..46d4d9199 100644
--- a/front/src/components/ui/Button.vue
+++ b/front/src/components/ui/Button.vue
@@ -90,9 +90,9 @@ onMounted(() => {
 
     line-height: 1em;
 
-    padding: 0.642857142857em 0.714em 0.714em 0.714em;
+    padding: 9px 10px 11px 10px;
     &.is-icon-only {
-      padding: 0.675em 0.714em 0.678em 0.714em;
+      padding: 10px;
     }
 
     border-radius: var(--fw-border-radius);
@@ -161,6 +161,8 @@ onMounted(() => {
       &.large {
         font-size:2rem;
       }
+      /* Must not increase the height of the button */
+      margin: -0.5rem 0;
     }
 
     i.bi + span:not(:empty) {
diff --git a/front/src/components/ui/Card.vue b/front/src/components/ui/Card.vue
index 3d45b9e51..15956d194 100644
--- a/front/src/components/ui/Card.vue
+++ b/front/src/components/ui/Card.vue
@@ -16,21 +16,35 @@ const props = defineProps<{
   tags?: string[]
   image?: string | { src: string, style?: "withPadding" }
   icon?: string
-} & ({
-  [Width in 'small' | 'auto']?: true
-} | { width: string }) & Partial<RouterLinkProps> & (PastelProps | ColorProps | DefaultProps) & RaisedProps & VariantProps>()
+} & (
+  { [Width in 'large' | 'medium' | 'small' | 'auto']?: true } | { width?: string }
+) & Partial<RouterLinkProps> & (PastelProps | ColorProps | DefaultProps) & RaisedProps & VariantProps>()
 
 const image = typeof props.image === 'string' ? { src: props.image } : props.image
 
+const width =
+  'width' in props && props.width
+    ? props.width
+    : 'auto' in props && props.auto
+      ? 'auto'
+      : 'large' in props && props.large ?
+        '304px'
+      : 'medium' in props && props.medium ?
+        '208px'
+      : 'small' in props && props.small ?
+        'min-content'
+        : '304px'
+
+console.log("WIDTH", width, props)
+
 const isExternalLink = computed(() => {
   return typeof props.to === 'string' && props.to.startsWith('http')
 })
 </script>
 
 <template>
-  <Layout stack
+  <Layout stack no-gap
     :class="{ [$style.card]: true, [$style['is-category']]: category }"
-    style="--gap:16px"
     v-bind="propsToColor({...(props.to? { interactive: true, solid: true, default: true } : {}), ...props})"
   >
 
@@ -46,7 +60,7 @@ const isExternalLink = computed(() => {
     </div>
     <img v-else-if="image" :src="image?.src"
       :class="{ [$style.image]: true, [$style['with-padding']]: image?.style === 'withPadding' }" />
-    <Spacer v-else :size="'small' in props ? 4 : 12" />
+    <Spacer v-else :size="'small' in props ? 20 : 28" />
 
     <!-- Icon -->
 
@@ -83,15 +97,14 @@ const isExternalLink = computed(() => {
       <slot name="action" />
     </div>
 
-    <Spacer v-if="!$slots.footer && !$slots.action" :size="'small' in props? 8 : 16" />
+    <Spacer v-if="!$slots.footer && !$slots.action" :size="'small' in props? 24 : 32" />
 
   </Layout>
 </template>
 
 <style module>
 .card {
-  /* Override --width with your preferred value */
-  --fw-card-width: var(--width, v-bind("'small' in props ? 'min-content' : 'auto' in props ? 'auto' : props.width || '320px'"));
+  --fw-card-width: v-bind(width);
   --fw-card-padding: v-bind("props.small ? '16px' : '24px'");
 
   position: relative;
@@ -169,6 +182,9 @@ const isExternalLink = computed(() => {
     font-size: 1.75em;
     padding-bottom: .125em;
   }
+  &:has(>.image:not(.with-padding))>.title {
+    margin-top:16px;
+  }
 
   >.alert {
     padding-left: var(--fw-card-padding);
@@ -178,6 +194,7 @@ const isExternalLink = computed(() => {
   >.tags {
     /* Tags have an inherent padding which we offset here: */
     padding: 0 calc(var(--fw-card-padding) - 12px);
+    margin-top: 8px;
   }
 
   >.content {
@@ -185,6 +202,7 @@ const isExternalLink = computed(() => {
     /* Consider making all line height, vertical paddings, margins and borders,
     a multiple of a global vertical rhythm so that side-by-side lines coincide */
     line-height: 24px;
+    margin-top: 16px;
   }
 
   >.footer {
@@ -203,6 +221,7 @@ const isExternalLink = computed(() => {
     background: color-mix(in oklab, var(--fw-bg-color) 80%, var(--fw-gray-500));
     border-bottom-left-radius: var(--fw-border-radius);
     border-bottom-right-radius: var(--fw-border-radius);
+    margin-top:16px;
 
     >*:not(.with-padding) {
       margin: 0;
diff --git a/front/src/components/ui/Layout.vue b/front/src/components/ui/Layout.vue
index 115ba248e..4d7ab47ac 100644
--- a/front/src/components/ui/Layout.vue
+++ b/front/src/components/ui/Layout.vue
@@ -2,7 +2,8 @@
 const props = defineProps<{
   columnWidth?: number,
   noGap?:true,
-  noRule?:true
+  noRule?:true,
+  noWrap?:true
 }
   & { [P in "stack" | "grid" | "flex" | "columns"]?: true | string }
   & { [C in "nav" | "aside" | "header" | "footer" | "main"]?:true }>()
@@ -15,6 +16,7 @@ const columnWidth = props.columnWidth ?? 320
     :class="[
     $style.layout,
     noGap || $style.gap,
+    noWrap || $style.wrap,
     props.grid ? $style[props.grid===true ? 'grid' : 'grid-custom']
       : props.flex ? $style.flex
         : props.columns? $style.columns
@@ -77,7 +79,7 @@ const columnWidth = props.columnWidth ?? 320
   &.flex {
     display: flex;
     flex-direction: row;
-    flex-wrap: wrap;
+    flex-wrap: v-bind('props.noWrap ? "no-wrap" : "wrap"');
   }
 
 }
diff --git a/front/src/components/ui/Link.vue b/front/src/components/ui/Link.vue
index 776345943..8b8c3ec51 100644
--- a/front/src/components/ui/Link.vue
+++ b/front/src/components/ui/Link.vue
@@ -108,9 +108,9 @@ const isSimple = propsToColor(colorProps).class === ''
     border-radius: var(--fw-border-radius);
     margin: 0 0.5ch;
 
-    padding: 0.642857142857em 0.714em 0.714em 0.714em;
+    padding: 9px 10px 11px 10px;
     &.is-icon-only {
-      padding: 0.675em 0.714em 0.678em 0.714em;
+      padding: 10px;
     }
     &.no-spacing{
       padding: 0;
diff --git a/front/src/components/ui/Pill.vue b/front/src/components/ui/Pill.vue
index 4b613d345..862ae2d89 100644
--- a/front/src/components/ui/Pill.vue
+++ b/front/src/components/ui/Pill.vue
@@ -12,8 +12,7 @@ const props = defineProps<PastelProps | ColorProps>()
 
 <template>
   <button
-    type="button"
-    class="funkwhale is-colored pill"
+    class="funkwhale pill outline"
     v-bind="propsToColor({...props, interactive:true})"
     @click.stop="handleClick"
   >
diff --git a/front/src/components/ui/layout/Spacer.vue b/front/src/components/ui/layout/Spacer.vue
index b0752b95e..46f636b4c 100644
--- a/front/src/components/ui/layout/Spacer.vue
+++ b/front/src/components/ui/layout/Spacer.vue
@@ -1,17 +1,23 @@
 <script setup lang="ts">
 import { ref, watchEffect } from 'vue';
 
-const { grow, shrink, title, size = 16 } = defineProps<{ grow?:true, shrink?:true, title?:string, size?:number }>()
+const { grow, shrink, title, size = 16, ...direction } = defineProps<{
+  grow?:true;
+  shrink?:true;
+  title?:string;
+  size?:number;
+} & { [Direction in 'h' | 'v']? : true }>()
 
-const minSize = 32
+const minSize = 0;
 
 const measure = ref()
 
-watchEffect(() => { measure.value = {
-    size: `${Math.max(size, minSize)}px`,
-    margin: `${(size-Math.max(size, minSize))/2}px`
-  }
+watchEffect(() => measure.value = {
+  size: `${Math.max(size, minSize)}px`,
+  margin: `${(size-Math.max(size, minSize))/2}px`
 })
+
+console.log(size)
 </script>
 
 <template>
@@ -22,8 +28,8 @@ watchEffect(() => { measure.value = {
 
 <style module lang="scss">
 .spacer {
-  width: v-bind('measure.size');
-  height: v-bind('measure.size');
+  width: v-bind('direction.v ? 0 : measure.size');
+  height: v-bind('direction.h ? 0 : measure.size');
   margin: v-bind('measure.margin');
   flex-grow:v-bind('grow ? 1 : 0');
   flex-shrink:v-bind('shrink ? 1 : 0');
diff --git a/front/src/style/colors.scss b/front/src/style/colors.scss
index 1aa6e0800..a52bb9a86 100644
--- a/front/src/style/colors.scss
+++ b/front/src/style/colors.scss
@@ -91,7 +91,7 @@
 
     --hover-color:var(--fw-gray-800);
     --hover-background-color:var(--fw-beige-200);
-    --hover-border-color:var(--fw-gray-800);
+    --hover-border-color:var(--fw-gray-500);
 
     --active-color:var(--fw-gray-900);
     --active-background-color:var(--fw-beige-400);
@@ -573,9 +573,9 @@
     background-color: transparent;
     border: 1px solid var(--border-color);
 
-    &.interactive{
-      &:hover{
-        border-color: var(--hover-background-color);
+    &.interactive, button {
+      &:hover {
+        border-color: var(--hover-border-color);
       }
       &[aria-pressed=true] {
         color: var(--pressed-color, var(--active-color));
diff --git a/front/src/ui/layouts/constrained.vue b/front/src/ui/layouts/constrained.vue
index c0db1b2e2..89bdd225a 100644
--- a/front/src/ui/layouts/constrained.vue
+++ b/front/src/ui/layouts/constrained.vue
@@ -10,7 +10,6 @@
 main {
   padding: 56px 48px;
   font-size: 16px;
-  max-width: 78rem;
 }
 
 </style>
diff --git a/front/ui-docs/components/ui/card.md b/front/ui-docs/components/ui/card.md
index fb616aaf1..f736bfb43 100644
--- a/front/ui-docs/components/ui/card.md
+++ b/front/ui-docs/components/ui/card.md
@@ -99,34 +99,34 @@ Category cards are basic cards that contain only a title. To create a category c
 
 Pass an image source to the `image` prop or set both `image.src` and `image.style` by passing an object.
 
-<Layout :columnWidth="200" grid>
+<Layout grid>
+
+<div style="max-width: 320px;">
 
 ```vue-html{4,11-12}
-<Card
-  style="--width:208px"
+<Card medium
   title="For music lovers"
   image="https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb">
 />
 
 
-<Card
-  style="--width:208px"
+<Card medium
   title="For music lovers"
   :image="{ src:'https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb',
             style:'withPadding' }"
 />
 ```
 
+</div>
+
 <Layout stack class="preview">
-  <Card
+  <Card medium
     title="For music lovers"
-    style="--width:208px"
     image="https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb"
   />
 
-<Card
+<Card medium
     title="For music lovers"
-    style="--width:208px"
     :image="{ src:'https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb',
               style:'withPadding' }"
   />
@@ -212,7 +212,7 @@ Large Buttons or links at the bottom edge of the card serve as Call-to-Actions (
 <Card title="Join an existing pod">
   The easiest way to get started with Funkwhale is to register an account on a public pod.
   <template #action>
-    <Button @click="alert('Open the pod picker')">Action!
+    <Button secondary @click="alert('Open the pod picker')">Action!
     </Button>
   </template>
 </Card>
@@ -222,7 +222,7 @@ Large Buttons or links at the bottom edge of the card serve as Call-to-Actions (
   <Card title="Join an existing pod">
     The easiest way to get started with Funkwhale is to register an account on a public pod.
     <template #action>
-      <Button @click="alert('Open the pod picker')">Action!
+      <Button secondary @click="alert('Open the pod picker')">Action!
       </Button>
     </template>
   </Card>
@@ -231,28 +231,28 @@ Large Buttons or links at the bottom edge of the card serve as Call-to-Actions (
 If there are multiple actions, they will be presented in a row:
 
 ```vue-html{4,7}
-<Card title="Delete this pod?">
-  You cannot undo this action.
+<Card title="Creating a new playlist...">
+  All items have been assimilated. Ready to go!
   <template #action>
-    <Button style="justify-content: flex-start;" icon="bi-chevron-left" color="secondary" variant="ghost">
+    <Button secondary ghost style="justify-content: flex-start;" icon="bi-chevron-left">
       Back
     </Button>
-    <Button style="flex-grow:0;" color="destructive" @click="alert('Deleted')">
-      Delete
+    <Button style="flex-grow:0;" primary @click="alert('Yay')">
+      Create
     </Button>
   </template>
 </Card>
 ```
 
 <div class="preview">
-  <Card title="Delete this pod?">
-    You cannot undo this action.
+  <Card title="Creating a new playlist...">
+    All items have been assimilated. Ready to go!
     <template #action>
-      <Button style="width:50%; justify-content: flex-start;" icon="bi-chevron-left" color="secondary" variant="ghost">
+      <Button secondary ghost style="width:50%; justify-content: flex-start;" icon="bi-chevron-left">
         Back
       </Button>
-      <Button style="width:50%" color="destructive" @click="alert('Deleted')">
-        Delete
+      <Button style="width:50%" primary @click="alert('Yay')">
+        Next: Pick a color
       </Button>
     </template>
   </Card>
diff --git a/front/ui-docs/components/ui/layout.md b/front/ui-docs/components/ui/layout.md
index 206d93660..82a825f9c 100644
--- a/front/ui-docs/components/ui/layout.md
+++ b/front/ui-docs/components/ui/layout.md
@@ -18,28 +18,28 @@ const noGap = ref(true)
 
 The following containers are responsive. Change your window's size or select a device preset from your browser's dev tools to see how layouts are affected by available space.
 
-<Layout grid="auto / repeat(auto-fit, minmax(min-content, 163px))" style="--gap:8px">
-  <Card auto title="flex" to="./layout/flex" >
+<Layout flex style="--gap:8px">
+  <Card width="163px" title="flex" to="./layout/flex" >
     <Layout flex>
       <Button primary icon="bi-eye" />
       <Button secondary icon="bi-eye" />
       <Button destructive icon="bi-eye" />
     </Layout>
   </Card>
-  <Card auto title="grid" to="./layout/grid" >
+  <Card width="163px" title="grid" to="./layout/grid" >
     <Layout grid column-width="40">
       <Button primary icon="bi-eye" />
       <Button secondary icon="bi-eye" style="grid-row: span 2; height: 100%;"  />
       <Button destructive icon="bi-eye" />
     </Layout>
   </Card>
-  <Card auto title="stack" to="./layout/stack" >
+  <Card width="163px" title="stack" to="./layout/stack" >
     <Layout stack style="--gap:0; margin:-8px;">
       <Button primary icon="bi-eye" />
       <Button secondary icon="bi-eye" />
       <Button destructive icon="bi-eye" />
     </Layout></Card>
-  <Card auto title="columns" to="./layout/columns" >
+  <Card width="163px" title="columns" to="./layout/columns" >
     <Layout columns column-width="40">
       <Button primary icon="bi-eye" />
       <Button secondary icon="bi-eye" />
diff --git a/front/ui-docs/components/ui/layout/flex.md b/front/ui-docs/components/ui/layout/flex.md
index fbd8149ce..e4be62371 100644
--- a/front/ui-docs/components/ui/layout/flex.md
+++ b/front/ui-docs/components/ui/layout/flex.md
@@ -30,22 +30,18 @@ By default, all items in a row assume the same (maximum) height.
 </Layout>
 ```
 
-<div class="preview">
-<Layout flex>
+<Layout flex class="preview">
   <Card title="A" style="width:100px; min-width:100px"></Card>
   <Card title="B" :tags="['funk', 'dunk', 'punk']"></Card>
   <Card title="C" style="width:100px; min-width:100px"></Card>
   <Card title="D"></Card>
 </Layout>
-</div>
 
 ## Use additional `flexbox` properties
 
 <Layout flex
 class="preview"
-style="font-size:11px; font-weight:bold; --gap: 4px;"
-
->
+style="font-size:11px; font-weight:bold; --gap: 4px;">
 
 --gap: 4px
 
diff --git a/front/ui-docs/components/ui/layout/spacer.md b/front/ui-docs/components/ui/layout/spacer.md
index dd5c98949..20e2255db 100644
--- a/front/ui-docs/components/ui/layout/spacer.md
+++ b/front/ui-docs/components/ui/layout/spacer.md
@@ -108,7 +108,7 @@ const size = ref(1);
 </div>
 </Layout>
 
-## Make the Spacer elastic
+## Make the Spacer elastic (responsive)
 
 <Layout flex>
 
@@ -154,3 +154,15 @@ const size = ref(1);
 
 </div>
 </Layout>
+
+## Use the Spacer to vary an element's dimensions
+
+<Layout flex style="align-items:flex-start">
+<Input v-model="size" type="range" />
+<Card small title="h">
+  <Spacer h :size="size * 4" style="border:5px dashed;" />
+</Card>
+<Card small title="v">
+  <Spacer v :size="size * 4" style="border:5px dashed;" />
+</Card>
+</Layout>
diff --git a/front/ui-docs/using-color.md b/front/ui-docs/using-color.md
index 4d269795c..0ca33f20d 100644
--- a/front/ui-docs/using-color.md
+++ b/front/ui-docs/using-color.md
@@ -13,11 +13,17 @@ const route = useRoute();
 const here = route.path
 </script>
 
-<Link disabled to="#theme-color-definitions">Want to fix colors?</Link>
+<Alert blue style="margin: 0 -48px">
+Want to fix colors?
+<Spacer h />
+<Layout flex no-gap>
 <Link solid primary to="#change-a-color-value">Change a color value</Link>
 <Link solid primary to="#alter-the-shade-of-a-color">Alter the shade of a color</Link>
 <Link solid primary to="#choose-a-different-style-for-a-specific-variant">Modify a specific variant</Link>
+</Layout>
+</Alert>
 
+<Spacer />
 # Using Color
 
 ## Add color via props