refactor: general improvements & bug fixes (#70)

closes #69 closes #71 closes #72 closes #73 closes #74 closes #75 closes #76 closes #77 closes #78 closes #79 closes #80 closes #81 closes #82 closes #83 closes #84 closes #85 closes #86
fold-dev · Mar 10, 2024 · 7a6d4f1 · 7a6d4f1
1 parent 1452854
commit 7a6d4f1
Show file tree

Hide file tree

Showing 50 changed files with 546 additions and 204 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "fold-dev",
     "title": "Fold",
-    "version": "0.4.0",
+    "version": "0.5.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.4.0",
+    "version": "0.5.0",
     "description": "The UI library for product teams.",
     "main": "dist/index.js",
     "module": "dist/index.js",

diff --git a/packages/core/src/accordion/accordion.css b/packages/core/src/accordion/accordion.css
@@ -1,7 +1,7 @@
 :root {
     --f-accordion-border-radius: var(--f-radius);
     --f-accordion-border-color: var(--f-color-border);
-    --f-accordion-border-width: 0.1rem;
+    --f-accordion-border-width: 1px;
     --f-accordion-background: var(--f-color-surface);
     --f-accordion-color: var(--f-color-text-weak);
     --f-accordion-color-description: var(--f-color-text-weakest);

diff --git a/packages/core/src/attachment/attachment.css b/packages/core/src/attachment/attachment.css
@@ -19,7 +19,7 @@
     position: relative;
     cursor: pointer;
     min-height: var(--f-size-12);
-    border: 0.1rem solid;
+    border: 1px solid;
     border-color: var(--f-attachment-border-color);
     border-radius: var(--f-attachment-border-radius);
     padding: var(--f-space-2); 
@@ -70,14 +70,17 @@
 
 .f-attachment__text {
     flex: 1;
-    min-height: var(--f-size-11);
     align-items: flex-start;
 }
 
 /* hack to remove padding from the bottom on default settings so the icon sites flush */
 
 .f-attachment__text > * + * {
-    margin-top: -2px;
+    margin-top: 2px;
+}
+
+.f-attachment.sm .f-attachment__text > * + * {
+    margin-top: 0px;
 }
 
 .f-attachment__text-meta {
@@ -97,6 +100,7 @@
 }
 
 /* sizes */
+/* xs & xl not supported yet */
 
 .f-attachment.xs .f-attachment__icon { 
     width: var(--f-size-8); 
@@ -132,7 +136,7 @@
     color: var(--f-attachment-color);
     position: relative;
     min-height: var(--f-size-12);
-    border: 0.1rem solid;
+    border: 1px solid;
     border-color: var(--f-attachment-border-color);
     border-radius: var(--f-attachment-border-radius);
     width: var(--f-attachment-thumb-size); 
@@ -182,7 +186,7 @@
     border-radius: var(--f-attachment-border-radius);
     width: 100%; 
     height: 100%; 
-    border: 0.1rem solid transparent;
+    border: 1px solid transparent;
     gap: var(--f-space-1);
 }
 

diff --git a/packages/core/src/attachment/attachment.stories.tsx b/packages/core/src/attachment/attachment.stories.tsx
@@ -137,14 +137,6 @@ export const Size = () => (
         gap={10}>
         <Attachment
             size="sm"
-            poster="/photos/07.jpg"
-            mime="image/png"
-            filesize={24325}
-            label="filename.png"
-            href="https://fold.dev"
-        />
-        <Attachment
-            poster="/photos/08.jpg"
             mime="image/png"
             filesize={24325}
             label="filename.png"

diff --git a/packages/core/src/avatar/avatar.stories.tsx b/packages/core/src/avatar/avatar.stories.tsx
@@ -37,7 +37,6 @@ export const Usage = () => (
             <Badge
                 variant="success"
                 anchor="bottom-right"
-                bordered
                 width={15}
                 height={15}
                 style={{

diff --git a/packages/core/src/badge/badge.css b/packages/core/src/badge/badge.css
@@ -4,7 +4,7 @@
     --f-badge-color: var(--f-color-text-weaker);
     --f-badge-dot-size: var(--f-size-3);
     --f-badge-border-color: var(--f-color-border);
-    --f-badge-border-size: 0.1rem;
+    --f-badge-border-size: 1px;
     --f-badge-dot-distance: 0.3rem;
 }
 
@@ -21,7 +21,7 @@
     padding: 0;
 }
 
-.f-badge.is-bordered {
+.f-badge.is-outline {
     border-width: var(--f-badge-border-size);
     border-style: solid;
 }
@@ -78,7 +78,7 @@
 .f-badge.is-danger {
     background: var(--f-color-danger);
     color: var(--f-color-danger-weak);
-    border-color: var(--f-color-warning-weak);
+    border-color: var(--f-color-danger-weak);
 }
 
 .f-badge.is-highlight {
@@ -87,6 +87,50 @@
     border-color: var(--f-color-highlight-weak);
 }
 
+/* outline */
+
+.f-badge.is-outline.is-accent {
+    background: var(--f-color-accent-weak);
+    color: var(--f-color-accent);
+    border-color: var(--f-color-accent);
+}
+
+.f-badge.is-outline.is-success {
+    background: var(--f-color-success-weak);
+    color: var(--f-color-success);
+    border-color: var(--f-color-success);
+}
+
+.f-badge.is-outline.is-neutral {
+    background: var(--f-color-neutral-weak);
+    color: var(--f-color-neutral);
+    border-color: var(--f-color-neutral);
+}
+
+.f-badge.is-outline.is-caution {
+    background: var(--f-color-caution-weak);
+    color: var(--f-color-caution);
+    border-color: var(--f-color-caution);
+}
+
+.f-badge.is-outline.is-warning {
+    background: var(--f-color-warning-weak);
+    color: var(--f-color-warning);
+    border-color: var(--f-color-warning);
+}
+
+.f-badge.is-outline.is-danger {
+    background: var(--f-color-danger-weak);
+    color: var(--f-color-danger);
+    border-color: var(--f-color-danger);
+}
+
+.f-badge.is-outline.is-highlight {
+    background: var(--f-color-highlight-weak);
+    color: var(--f-color-highlight);
+    border-color: var(--f-color-highlight);
+}
+
 /* positions */
 
 .f-badge.is-top-right {
@@ -116,8 +160,9 @@
 /* size */
 
 .f-badge.xs {
-    padding: 0 0.1rem;
+    padding: 0;
     font-weight: var(--f-font-weight-semibold);
+    height: var(--f-size-3);
 }
 
 .f-badge.sm {

diff --git a/packages/core/src/badge/badge.stories.tsx b/packages/core/src/badge/badge.stories.tsx
@@ -20,7 +20,7 @@ export const Usage = () => (
         gap={5}
         width="fit-content">
         <Badge>+34 notifications</Badge>
-        <Badge bordered>+12 bordered notifications</Badge>
+        <Badge outline>+12 outline notifications</Badge>
     </View>
 )
 
@@ -43,40 +43,40 @@ export const Variants = () => (
 
 // --
 
-export const VariantsBordered = () => (
+export const VariantsOutline = () => (
     <View
         row
         gap={5}
         width="fit-content">
-        <Badge bordered>default</Badge>
+        <Badge outline>default</Badge>
         <Badge
             variant="accent"
-            bordered>
+            outline>
             accent
         </Badge>
         <Badge
             variant="success"
-            bordered>
+            outline>
             success
         </Badge>
         <Badge
             variant="neutral"
-            bordered>
+            outline>
             neutral
         </Badge>
         <Badge
             variant="caution"
-            bordered>
+            outline>
             caution
         </Badge>
         <Badge
             variant="warning"
-            bordered>
+            outline>
             warning
         </Badge>
         <Badge
             variant="danger"
-            bordered>
+            outline>
             danger
         </Badge>
     </View>
@@ -141,22 +141,18 @@ export const Position = () => (
         <Badge
             variant="accent"
             anchor="top-left"
-            bordered
         />
         <Badge
             variant="success"
             anchor="top-right"
-            bordered
         />
         <Badge
             variant="neutral"
             anchor="bottom-left"
-            bordered
         />
         <Badge
             variant="warning"
             anchor="bottom-right"
-            bordered
         />
     </View>
 )
diff --git a/packages/core/src/badge/badge.tsx b/packages/core/src/badge/badge.tsx
@@ -9,16 +9,16 @@ export type BadgeProps = {
     size?: Size
     variant?: Variant
     anchor?: BadgeAnchor
-    bordered?: boolean
+    outline?: boolean
 } & CoreViewProps
 
 export const Badge = (props: BadgeProps) => {
-    const { size = 'md', variant = 'default', anchor, bordered, ...rest } = props
+    const { size = 'md', variant = 'default', anchor, outline, ...rest } = props
     const className = classNames(
         {
             'f-badge': true,
             'f-row': true,
-            'is-bordered': bordered,
+            'is-outline': outline,
             'no-children': !props.children,
         },
         [props.className, getActionClass(variant), getActionClass(anchor), size]