refactor: Drag, Input, Button & Progress improvements (#66)

- closes #60 - closes #62 - closes #64 - closes #68 - adds more variable support to drag placeholders - increase base font size to 15px
fold-dev · Feb 28, 2024 · 1452854 · 1452854
1 parent 7778dea
commit 1452854
Show file tree

Hide file tree

Showing 15 changed files with 412 additions and 104 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.3.0",
+    "version": "0.4.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.3.0",
+    "version": "0.4.0",
     "description": "The UI library for product teams.",
     "main": "dist/index.js",
     "module": "dist/index.js",

diff --git a/packages/core/src/button/button.css b/packages/core/src/button/button.css
@@ -472,36 +472,72 @@
     width: 100%;
 }
 
-.f-button-group.is-vertical > .f-button:not(.f-button:first-of-type):not(.f-button:last-of-type) {
+.f-button-group.is-vertical > .f-button:not(.f-button:first-of-type):not(.f-button:last-of-type),
+.f-button-group.is-vertical > .f-button:not(.f-button:first-of-type):not(.f-button:last-of-type)::after {
     border-radius: 0px;
     border-bottom: 0px;
 }
 
-.f-button-group.is-vertical > .f-button:last-of-type:not(.f-button:first-of-type) {
+.f-button-group.is-vertical > .f-button:last-of-type:not(.f-button:first-of-type),
+.f-button-group.is-vertical > .f-button:last-of-type:not(.f-button:first-of-type)::after {
     border-top-left-radius: 0px;
     border-top-right-radius: 0px;
 }
 
-.f-button-group.is-vertical > .f-button:first-of-type:not(.f-button:last-of-type) {
+.f-button-group.is-vertical > .f-button:first-of-type:not(.f-button:last-of-type),
+.f-button-group.is-vertical > .f-button:first-of-type:not(.f-button:last-of-type)::after {
     border-bottom-right-radius: 0px;
     border-bottom-left-radius: 0px;
     border-bottom: 0px;
 }
 
 /* horizontal */
 
-.f-button-group.is-horizontal > .f-button:not(.f-button:first-of-type):not(.f-button:last-of-type) {
+.f-button-group.is-horizontal > .f-button:not(.f-button:first-of-type):not(.f-button:last-of-type),
+.f-button-group.is-horizontal > .f-button:not(.f-button:first-of-type):not(.f-button:last-of-type)::after {
     border-radius: 0px;
     border-right: 0px;
 }
 
-.f-button-group.is-horizontal > .f-button:last-of-type:not(.f-button:first-of-type) {
+.f-button-group.is-horizontal > .f-button:last-of-type:not(.f-button:first-of-type),
+.f-button-group.is-horizontal > .f-button:last-of-type:not(.f-button:first-of-type)::after {
     border-top-left-radius: 0px;
     border-bottom-left-radius: 0px;
 }
 
-.f-button-group.is-horizontal > .f-button:first-of-type:not(.f-button:last-of-type) {
+.f-button-group.is-horizontal > .f-button:first-of-type:not(.f-button:last-of-type),
+.f-button-group.is-horizontal > .f-button:first-of-type:not(.f-button:last-of-type)::after {
     border-bottom-right-radius: 0px;
     border-top-right-radius: 0px;
     border-right: 0px;
 }
+
+/* colors */
+
+.f-button-group .f-button.is-accent:not(.is-subtle):not(.is-outline) {
+    border-color: var(--f-color-accent-weak);
+}
+
+.f-button-group .f-button.is-success:not(.is-subtle):not(.is-outline) {
+    border-color: var(--f-color-success-weak);
+}
+
+.f-button-group .f-button.is-neutral:not(.is-subtle):not(.is-outline) {
+    border-color: var(--f-color-neutral-weak);
+}
+
+.f-button-group .f-button.is-caution:not(.is-subtle):not(.is-outline) {
+    border-color: var(--f-color-caution-weak);
+}
+
+.f-button-group .f-button.is-warning:not(.is-subtle):not(.is-outline) {
+    border-color: var(--f-color-warning-weak);
+}
+
+.f-button-group .f-button.is-danger:not(.is-subtle):not(.is-outline) {
+    border-color: var(--f-color-danger-weak);
+}
+
+.f-button-group .f-button.is-highlight:not(.is-subtle):not(.is-outline) {
+    border-color: var(--f-color-highlight-weak);
+}
diff --git a/packages/core/src/button/button.stories.tsx b/packages/core/src/button/button.stories.tsx
@@ -252,13 +252,19 @@ export const States = () => (
 
 export const AsLink = () => (
     <Stack spacing={5}>
+        <Button
+            as="a"
+            href="https://google.com"
+            target="_blank">
+            Default
+        </Button>
         <Button
             as="a"
             href="https://google.com"
             target="_blank"
             subtle
             underlined>
-            Default
+            Subtle
         </Button>
         <Button
             as="a"
@@ -381,8 +387,33 @@ export const ButtonGroups = () => (
             width={300}>
             <Button>With</Button>
             <Button>Direction</Button>
+            <Button>Going</Button>
             <Button>Vertical</Button>
         </ButtonGroup>
+        <ButtonGroup>
+            <Button variant="accent" outline>Accented</Button>
+            <Button variant="accent" outline>Accented</Button>
+        </ButtonGroup>
+        <ButtonGroup
+            direction="vertical"
+            width={300}>
+            <Button variant="highlight" outline>With</Button>
+            <Button variant="highlight" outline>Direction</Button>
+            <Button variant="highlight" outline>Going</Button>
+            <Button variant="highlight" outline>Vertical</Button>
+        </ButtonGroup>
+        <ButtonGroup>
+            <Button variant="accent">Accented</Button>
+            <Button variant="accent">Accented</Button>
+        </ButtonGroup>
+        <ButtonGroup
+            direction="vertical"
+            width={300}>
+            <Button variant="highlight">With</Button>
+            <Button variant="highlight">Direction</Button>
+            <Button variant="highlight">Going</Button>
+            <Button variant="highlight">Vertical</Button>
+        </ButtonGroup>
     </Stack>
 )
 

diff --git a/packages/core/src/drag/drag.css b/packages/core/src/drag/drag.css
@@ -85,6 +85,12 @@
     in the parent DragElementArea (.f-drag-area)
 */
 
+:root {
+    --f-drag-lined-x-offset: -50%;
+    --f-drag-lined-y-offset: -50%;
+    --f-drag-lined-size: 3px;
+}
+
 .f-drag-area__element__line {
     position: absolute;
     background: var(--f-color-accent);
@@ -96,28 +102,36 @@
     top: 0px;
     left: 0px;
     width: 100%;
-    height: 0.25rem;
+    height: var(--f-drag-lined-size);
 }
 
 .f-drag-area__element__line.is-vertical.is-last {
     bottom: 0; 
     left: 0; 
     width: 100%;
-    height: 0.25rem;
+    height: var(--f-drag-lined-size);
 }
 
 .f-drag-area__element__line.is-horizontal.is-first {
     left: 0; 
     top: 0;
     height: 100%;
-    width: 0.25rem;
+    width: var(--f-drag-lined-size);
 }
 
 .f-drag-area__element__line.is-horizontal.is-last {
     right: 0; 
     top: 0; 
     height: 100%;
-    width: 0.25rem;
+    width: var(--f-drag-lined-size);
+}
+
+.f-drag-area__element__line.is-horizontal {
+    transform: translateX(var(--f-drag-lined-x-offset));
+}
+
+.f-drag-area__element__line.is-vertical {
+    transform: translateY(var(--f-drag-lined-y-offset));
 }
 
 /* lined-focus variant */
@@ -168,21 +182,33 @@
     position: absolute;
     top: 0px;
     left: 0px;
-    height: 0.25rem;
+    height: var(--f-drag-lined-size);
     pointer-events: none;
     z-index: 10000;
     background: var(--f-color-accent);
     animation: f-drag-fadein var(--f-transition-duration-fast);
     transition: transform 0.05s var(--f-drag-transition);
 }
 
+:root {
+    --f-drag-placeholder-background: var(--f-color-surface-stronger);
+    --f-drag-placeholder-radius: 0;
+    --f-drag-placeholder-border: none;
+    --f-drag-placeholder-outline: none;
+    --f-drag-placeholder-margin: 0;
+}
+
 .f-drag-area__placeholder {
     position: absolute;
     top: 0px;
     left: 0px;
     pointer-events: none;
     z-index: 1;
-    background: var(--f-color-surface-stronger);
+    margin: var(--f-drag-placeholder-margin);
+    border: var(--f-drag-placeholder-border);
+    outline: var(--f-drag-placeholder-outline);
+    border-radius: var(--f-drag-placeholder-radius);
+    background: var(--f-drag-placeholder-background);
     /* animation: f-drag-fadein var(--f-transition-duration-fast); */
     /* transition: transform 0.1s var(--f-drag-transition); */
     /* background: red; */

diff --git a/packages/core/src/drag/drag.tsx b/packages/core/src/drag/drag.tsx
@@ -512,7 +512,7 @@ export const DragManager = (props: DragManagerProps) => {
                                     nextIndent,
                                 }
 
-                                // debug
+                                // outline the previous & next elements
                                 // for (let target of element.parentNode.children) target.style.border = 'none'
                                 // if (previous) previous.style.border = '0.2rem solid crimson'
                                 // if (next) next.style.border = '0.2rem solid darkcyan'

diff --git a/packages/core/src/input/input.css b/packages/core/src/input/input.css
@@ -8,13 +8,14 @@
     --f-input-color-placeholder: var(--f-color-text-weakest);
     --f-input-color-disabled: var(--f-color-text-weakest);
     --f-input-border-radius: var(--f-radius);
-    --f-input-padding: 0 var(--f-space-4);
+    --f-input-base-padding: var(--f-space-4);
+    --f-input-padding: 0 var(--f-input-base-padding);
     --f-input-padding-combo: var(--f-space-1) var(--f-space-2);
     --f-input-shadow: var(--f-shadow-sm);
     --f-combo-input-min-width: 50px;
     --f-combo-input-spacing: var(--f-space-1);
-    --f-input-prefix-padding: 0 0 0 var(--f-space-4);
-    --f-input-suffix-padding: 0  var(--f-space-4) 0 0;
+    --f-input-prefix-padding: 0 0 0 var(--f-input-base-padding);
+    --f-input-suffix-padding: 0  var(--f-input-base-padding) 0 0;
 }
 
 /* control */
@@ -399,11 +400,29 @@ input.f-input[type=color].xl {
     justify-content: stretch;
     align-items: stretch;
     align-content: stretch;
-    height: 100%;
     border: var(--f-input-border-width) solid var(--f-input-border-color);
+}
+
+.f-input-number-control.xs {
+    height: var(--f-size-8);
+}
 
+.f-input-number-control.sm {
+    height: var(--f-size-9);
 }
 
+.f-input-number-control.md {
+    height: var(--f-size-11);
+}
+
+.f-input-number-control.lg {
+    height: var(--f-size-13);
+}
+
+.f-input-number-control.xl {
+    height: var(--f-size-15);
+}
+
 .f-input-prefix .f-input-number-control,
 .f-input-suffix .f-input-number-control {
     border: none;
@@ -412,12 +431,12 @@ input.f-input[type=color].xl {
 
 .f-input-prefix .f-input-number-control {
     border-right: var(--f-input-border-width) solid var(--f-input-border-color);    
-    margin-left: calc((var(--f-space-3) * -1) + var(--f-input-border-width));   
+    margin-left: calc(var(--f-input-base-padding) * -1); 
 }
 
 .f-input-suffix .f-input-number-control {
     border-left: var(--f-input-border-width) solid var(--f-input-border-color);
-    margin-right: calc((var(--f-space-3) * -1) + var(--f-input-border-width));   
+    margin-right: calc(var(--f-input-base-padding) * -1);   
 }
 
 /* they always need to be the first or last element */

diff --git a/packages/core/src/input/input.tsx b/packages/core/src/input/input.tsx
@@ -30,7 +30,7 @@ export const InputNumberControl = (props: InputNumberControlProps) => {
             className={className}>
             <button
                 onClick={onIncrease}
-                disabled={disableDecrease}
+                disabled={disableIncrease}
                 className="f-row f-buttonize">
                 <IconLib
                     size={size}
@@ -39,7 +39,7 @@ export const InputNumberControl = (props: InputNumberControlProps) => {
             </button>
             <button
                 onClick={onDecrease}
-                disabled={disableIncrease}
+                disabled={disableDecrease}
                 className="f-row f-buttonize">
                 <IconLib
                     size={size}