refactor: enhancements & bug fixes (wk14) (#117)

closes #111 closes #118 closes #119 closes #122 closes #123 closes #126 closes #127 closes #128 closes #133 closes #134 closes #135 closes #96
fold-dev · Apr 7, 2024 · 12ab181 · 12ab181
1 parent 69fcbb2
commit 12ab181
Show file tree

Hide file tree

Showing 31 changed files with 382 additions and 141 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "fold-dev",
     "title": "Fold",
-    "version": "0.7.0",
+    "version": "0.8.0",
     "description": "The UI library for product teams.",
     "workspaces": {
         "packages": [

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@fold-dev/core",
     "title": "Fold",
-    "version": "0.7.0",
+    "version": "0.8.0",
     "description": "The UI library for product teams.",
     "main": "dist/index.js",
     "module": "dist/index.js",

diff --git a/packages/core/src/avatar/avatar.css b/packages/core/src/avatar/avatar.css
@@ -5,6 +5,7 @@
     --f-avatar-group-overlap: -1rem;
     --f-avatar-group-overlap-small: -0.66rem;
     --f-avatar-group-spacing: 1px;
+    --f-avatar-badge-outline: 0.2rem solid var(--f-color-surface);
 }
 
 .f-avatar {
@@ -57,45 +58,36 @@
 
 /* group */
 
+.f-avatar.xs,
+.f-avatar.sm {
+    --f-avatar-group-overlap: var(--f-avatar-group-overlap-small);
+}
+
 .f-avatar-group {
     width: fit-content;
     z-index: 1;
 }
 
-.f-avatar-group:not(.is-inverted)::after {
-    content: ' ';
-    width: calc(var(--f-avatar-group-overlap) * -1);
-    height: 1rem;
-    display: block;
+.f-avatar-group > .f-avatar + .f-avatar {
+    margin-left: var(--f-avatar-group-overlap);
 }
 
-.f-avatar-group.is-inverted::before {
-    content: ' ';
-    width: calc(var(--f-avatar-group-overlap) * -1);
-    height: 1rem;
-    display: block;
+.f-avatar-group.is-animated:hover > .f-avatar + .f-avatar {
+    margin-left: var(--f-avatar-group-spacing);
+    transition: margin-left .1s;
 }
 
-/* adjust spacing for small ones  */
-
-.f-avatar.xs,
-.f-avatar.sm {
-    --f-avatar-group-overlap: var(--f-avatar-group-overlap-small);
+.f-avatar-group.is-inverted {
+     flex-direction: row-reverse; 
 }
 
-.f-avatar-group .f-avatar {
-    margin-right: var(--f-avatar-group-overlap);
+.f-avatar-group.is-inverted > .f-avatar + .f-avatar {
+    margin-right: var(--f-avatar-group-overlap) !important;
+    margin-left: 0 !important;
 }
 
-.f-avatar-group.is-animated .f-avatar {
-    margin-right: var(--f-avatar-group-overlap);
+.f-avatar-group.is-inverted.is-animated:hover > .f-avatar + .f-avatar {
+    margin-right: 0 !important;
+    margin-left: var(--f-avatar-group-spacing);
     transition: margin-right .1s;
 }
-
-.f-avatar-group.is-animated:hover .f-avatar {
-    margin-right: var(--f-avatar-group-spacing);
-}
-
-.f-avatar-group.is-inverted {
-     flex-direction: row-reverse; 
-}
diff --git a/packages/core/src/avatar/avatar.stories.tsx b/packages/core/src/avatar/avatar.stories.tsx
@@ -182,3 +182,43 @@ export const GroupInverted = () => {
         </AvatarGroup>
     )
 }
+
+// --
+
+export const Presence = () => (
+    <View
+        row
+        gap={5}
+        width="fit-content">
+        <Avatar
+            size="xs"
+            name="Etienne Dreyer"
+            presence="online"
+            src="/men/01.jpg"
+        />
+        <Avatar
+            size="sm"
+            name="Aubrey Moagi"
+            presence="away"
+            src="/men/02.jpg"
+        />
+        <Avatar
+            size="md"
+            name="Patrick Anthony"
+            presence="busy"
+            src="/men/03.jpg"
+        />
+        <Avatar
+            size="lg"
+            name="Charlene Singh"
+            presence="online"
+            src="/men/04.jpg"
+        />
+        <Avatar
+            size="xl"
+            name="Craig Pather"
+            presence="away"
+            src="/men/05.jpg"
+        />
+    </View>
+)
diff --git a/packages/core/src/avatar/avatar.tsx b/packages/core/src/avatar/avatar.tsx
@@ -1,5 +1,5 @@
 import React, { forwardRef, useEffect, useMemo, useState } from 'react'
-import { IconLib, Image, ImageProps, View } from '../'
+import { Badge, IconLib, Image, ImageProps, View } from '../'
 import { classNames, cleanObject, documentObject, getForegroundColor } from '../helpers'
 import { Text, TextProps } from '../text/text'
 import { CoreViewProps, Size } from '../types'
@@ -13,6 +13,7 @@ export type AvatarProps = {
     src?: string
     textProps?: TextProps
     imageProps?: ImageProps
+    presence?: 'online' | 'busy' | 'away'
 } & CoreViewProps
 
 export const Avatar = forwardRef((props: AvatarProps, ref) => {
@@ -26,6 +27,7 @@ export const Avatar = forwardRef((props: AvatarProps, ref) => {
         imageProps = {},
         style = {},
         textProps = {},
+        presence,
         ...rest
     } = props
     const initials = useMemo(() => {
@@ -36,6 +38,23 @@ export const Avatar = forwardRef((props: AvatarProps, ref) => {
             .join('')
             .toUpperCase()
     }, [name])
+    const presenceVariant = useMemo(() => {
+        switch (presence) {
+            case 'online': return 'success'
+            case 'away': return 'warning'
+            case 'busy': return 'danger'
+            default: return
+        }
+    }, [presence])
+    const presenceBadgeDistance = useMemo(() => {
+        switch (size) {
+            case 'xs': return '0.3rem'
+            case 'sm': return '0.15rem'
+            case 'lg': return '-0.05rem'
+            case 'xl': return '-0.3rem'
+            default: return '0.1rem'
+        }
+    }, [size])
     const styles = useMemo(() => {
         if (color) {
             const foreground = getForegroundColor(color)
@@ -106,6 +125,20 @@ export const Avatar = forwardRef((props: AvatarProps, ref) => {
 
             {/* Otherwise, display children */}
             {props.children}
+
+            {presence && (
+                <Badge
+                    variant={presenceVariant}
+                    anchor="bottom-right"
+                    width={8}
+                    height={8}
+                    zIndex={10}
+                    style={{
+                        '--f-badge-dot-distance': presenceBadgeDistance,
+                        outline: 'var(--f-avatar-badge-outline)',
+                    }}
+                />
+            )}
         </View>
     )
 })

diff --git a/packages/core/src/button/button.css b/packages/core/src/button/button.css
@@ -359,6 +359,7 @@
     background: transparent;
     transition-property: background-color, outline, color, filter, -webkit-filter;
     transition-duration: var(--f-button-transition-delay);
+    border-color: var(--f-button-color);
 }
 
 .f-button.is-outline:disabled:hover,
@@ -566,55 +567,55 @@
 /* TODO: find a better way to handle this */
 
 .f-button-group.is-horizontal .f-button.is-accent:not(.is-subtle):not(.is-outline) {
-    border-left-color: var(--f-color-accent-weak);
+    border-left-color: var(--f-color-accent-subtle);
 }
 
 .f-button-group.is-horizontal .f-button.is-accent:not(.is-subtle):not(.is-outline):first-child {
     border-left-color: var(--f-color-accent);
 }
 
 .f-button-group.is-horizontal  .f-button.is-success:not(.is-subtle):not(.is-outline) {
-    border-left-color: var(--f-color-success-weak);
+    border-left-color: var(--f-color-success-subtle);
 }
 
 .f-button-group.is-horizontal .f-button.is-success:not(.is-subtle):not(.is-outline):first-child {
     border-left-color: var(--f-color-success);
 }
 
 .f-button-group.is-horizontal  .f-button.is-neutral:not(.is-subtle):not(.is-outline) {
-    border-left-color: var(--f-color-neutral-weak);
+    border-left-color: var(--f-color-neutral-subtle);
 }
 
 .f-button-group.is-horizontal .f-button.is-neutral:not(.is-subtle):not(.is-outline):first-child {
     border-left-color: var(--f-color-neutral);
 }
 
 .f-button-group.is-horizontal  .f-button.is-caution:not(.is-subtle):not(.is-outline) {
-    border-left-color: var(--f-color-caution-weak);
+    border-left-color: var(--f-color-caution-subtle);
 }
 
 .f-button-group.is-horizontal .f-button.is-caution:not(.is-subtle):not(.is-outline):first-child {
     border-left-color: var(--f-color-caution);
 }
 
 .f-button-group.is-horizontal  .f-button.is-warning:not(.is-subtle):not(.is-outline) {
-    border-left-color: var(--f-color-warning-weak);
+    border-left-color: var(--f-color-warning-subtle);
 }
 
 .f-button-group.is-horizontal .f-button.is-warning:not(.is-subtle):not(.is-outline):first-child {
     border-left-color: var(--f-color-warning);
 }
 
 .f-button-group.is-horizontal  .f-button.is-danger:not(.is-subtle):not(.is-outline) {
-    border-left-color: var(--f-color-danger-weak);
+    border-left-color: var(--f-color-danger-subtle);
 }
 
 .f-button-group.is-horizontal .f-button.is-danger:not(.is-subtle):not(.is-outline):first-child {
     border-left-color: var(--f-color-danger);
 }
 
 .f-button-group.is-horizontal  .f-button.is-highlight:not(.is-subtle):not(.is-outline) {
-    border-left-color: var(--f-color-highlight-weak);
+    border-left-color: var(--f-color-highlight-subtle);
 }
 
 .f-button-group.is-horizontal .f-button.is-highlight:not(.is-subtle):not(.is-outline):first-child {
@@ -624,55 +625,55 @@
 /* colors - vertical */
 
 .f-button-group.is-vertical .f-button.is-accent:not(.is-subtle):not(.is-outline) {
-    border-top-color: var(--f-color-accent-weak);
+    border-top-color: var(--f-color-accent-subtle);
 }
 
 .f-button-group.is-vertical .f-button.is-accent:not(.is-subtle):not(.is-outline):first-child {
     border-top-color: var(--f-color-accent);
 }
 
 .f-button-group.is-vertical  .f-button.is-success:not(.is-subtle):not(.is-outline) {
-    border-top-color: var(--f-color-success-weak);
+    border-top-color: var(--f-color-success-subtle);
 }
 
 .f-button-group.is-vertical .f-button.is-success:not(.is-subtle):not(.is-outline):first-child {
     border-top-color: var(--f-color-success);
 }
 
 .f-button-group.is-vertical  .f-button.is-neutral:not(.is-subtle):not(.is-outline) {
-    border-top-color: var(--f-color-neutral-weak);
+    border-top-color: var(--f-color-neutral-subtle);
 }
 
 .f-button-group.is-vertical .f-button.is-neutral:not(.is-subtle):not(.is-outline):first-child {
     border-top-color: var(--f-color-neutral);
 }
 
 .f-button-group.is-vertical  .f-button.is-caution:not(.is-subtle):not(.is-outline) {
-    border-top-color: var(--f-color-caution-weak);
+    border-top-color: var(--f-color-caution-subtle);
 }
 
 .f-button-group.is-vertical .f-button.is-caution:not(.is-subtle):not(.is-outline):first-child {
     border-top-color: var(--f-color-caution);
 }
 
 .f-button-group.is-vertical  .f-button.is-warning:not(.is-subtle):not(.is-outline) {
-    border-top-color: var(--f-color-warning-weak);
+    border-top-color: var(--f-color-warning-subtle);
 }
 
 .f-button-group.is-vertical .f-button.is-warning:not(.is-subtle):not(.is-outline):first-child {
     border-top-color: var(--f-color-warning);
 }
 
 .f-button-group.is-vertical  .f-button.is-danger:not(.is-subtle):not(.is-outline) {
-    border-top-color: var(--f-color-danger-weak);
+    border-top-color: var(--f-color-danger-subtle);
 }
 
 .f-button-group.is-vertical .f-button.is-danger:not(.is-subtle):not(.is-outline):first-child {
     border-top-color: var(--f-color-danger);
 }
 
 .f-button-group.is-vertical  .f-button.is-highlight:not(.is-subtle):not(.is-outline) {
-    border-top-color: var(--f-color-highlight-weak);
+    border-top-color: var(--f-color-highlight-subtle);
 }
 
 .f-button-group.is-vertical .f-button.is-highlight:not(.is-subtle):not(.is-outline):first-child {