v1.11.4

CHANGELOG.md

@@ -1,5 +1,8 @@
 # CHANGELOG
 
+## 1.11.4
+- Fix `FormItemGroup` alignment bug
+
 ## 1.11.3
 - Tweak `ThemeProvider` to accept any string for theme name, so you can switch between many themes, instead of just `light` and `dark`
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "fictoan-react",
-    "version": "1.11.3",
+    "version": "1.11.4",
     "private": false,
     "description": "A full-featured, designer-friendly, yet performant framework with plain-English props and focus on rapid iteration.",
     "repository": {

src/components/Form/FormItem/form-item.css

@@ -12,9 +12,9 @@
 /* Need this as a common parent to align the left/right icons */
 [data-input-wrapper] {
     position : relative;
+    display  : flex;
 }
 
-
 /* PARENT ELEMENT /////////////////////////////////////////////////////////// */
 [data-form-item] {
     position              : relative;

src/components/Form/FormItemGroup/form-item-group.css

@@ -2,10 +2,10 @@
     display     : flex;
     flex-wrap   : wrap;
     width       : 100%;
-    align-items : flex-start;
+    align-items : stretch;
 
-    & > * {
-        flex : 1 1;
+    & * {
+        line-height: 1;
     }
 
     /*&.spacing-none > [data-form-item]:not(:last-of-type) { margin-right : 0; }*/
@@ -26,27 +26,6 @@
     &.spacing-large { gap : 40px; }
     &.spacing-huge { gap : 48px; }
 
-    &.is-joint {
-        gap       : 0 !important;
-        flex-wrap : nowrap;
-
-        & > [data-form-item] {
-            &:first-of-type input, select, textarea {
-                border-top-right-radius    : 0;
-                border-bottom-right-radius : 0;
-            }
-
-            &:not(:first-of-type):not(:last-of-type) input, select, textarea {
-                border-radius : 0;
-            }
-
-            &:last-of-type input, select, textarea {
-                border-top-left-radius    : 0;
-                border-bottom-left-radius : 0;
-            }
-        }
-    }
-
     /*@media screen and (max-width : 520px) {*/
     /*    &:not(.retain-layout) > [data-form-item] {*/
     /*        flex         : 1 1 auto;*/
@@ -59,3 +38,41 @@
     /*    }*/
     /*}*/
 }
+
+[data-form-item-group] [data-form-item] {
+    width : auto;
+}
+
+[data-form-item-group] > * {
+    flex: 0 0 auto; /* Don't grow or shrink by default */
+}
+
+/* Make only input fields grow to fill space */
+[data-form-item-group] [data-form-item]:has([data-input-field]):not(:has([data-select])):not(:has([data-button])) {
+    flex: 1 1 auto;
+}
+
+[data-form-item-group].is-joint {
+    gap       : 0 !important;
+    flex-wrap : nowrap;
+}
+
+[data-form-item-group].is-joint [data-form-item]:first-child input,
+[data-form-item-group].is-joint [data-form-item]:first-child select,
+[data-form-item-group].is-joint button:first-child {
+    border-top-right-radius    : 0;
+    border-bottom-right-radius : 0;
+}
+
+[data-form-item-group].is-joint [data-form-item]:not(:first-child):not(:last-child) input,
+[data-form-item-group].is-joint [data-form-item]:not(:first-child):not(:last-child) select,
+[data-form-item-group].is-joint button:not(:first-child):not(:last-child) {
+    border-radius : 0;
+}
+
+[data-form-item-group].is-joint [data-form-item]:last-child input,
+[data-form-item-group].is-joint [data-form-item]:last-child select,
+[data-form-item-group].is-joint button:last-child {
+    border-top-left-radius    : 0;
+    border-bottom-left-radius : 0;
+}

src/components/Form/Select/select.css

@@ -1,7 +1,6 @@
 [data-select] {
     position         : relative;
     width            : max-content;
-    align-self       : flex-start;
     border-radius    : var(--input-border-radius-default);
 
     &::after {
@@ -28,7 +27,7 @@
     select {
         display          : flex;
         height           : 100%;
-        padding          : 12px 36px 12px 8px;
+        padding          : 12px 36px 12px 12px;
         font-family      : var(--paragraph-font);
         color            : var(--input-text-default);
         background-color : var(--input-bg-default);

src/components/LoadingBar/LoadingBar.tsx

@@ -0,0 +1,92 @@
+import React, { forwardRef, useEffect, useState } from "react";
+import { Element } from "../Element/Element";
+import { CommonAndHTMLProps } from "../Element/constants";
+
+import "./loading-bar.css";
+
+interface LoadingBarCustomProps {
+    animateWhen?: boolean;
+    progress?: number;
+    isIndeterminate?: boolean;
+    height?: string;
+    position?: "top" | "bottom";
+}
+
+export type LoadingBarElementType = HTMLDivElement;
+export type LoadingBarProps =
+    Omit<CommonAndHTMLProps<LoadingBarElementType>, keyof LoadingBarCustomProps>
+    & LoadingBarCustomProps;
+
+export const LoadingBar = forwardRef<LoadingBarElementType, LoadingBarProps>(
+    (
+        {
+            animateWhen = false,
+            progress = 0,
+            isIndeterminate = false,
+            height = "4px",
+            position = "top",
+            className,
+            ...props
+        }, ref) => {
+        const [ state, setState ] = useState({
+            isVisible       : false,
+            isFading        : false,
+            currentProgress : progress,
+        });
+
+        // Handle state updates
+        useEffect(() => {
+
+            if (animateWhen && !state.isVisible) {
+                setState(prev => ({ ...prev, isVisible : true, isFading : false }));
+            } else if (progress >= 100 && !state.isFading) {
+                setState(prev => ({ ...prev, isFading : true }));
+
+                // Remove from DOM after fade
+                const timer = setTimeout(() => {
+                    setState(prev => ({
+                        ...prev,
+                        isVisible       : false,
+                        isFading        : false,
+                        currentProgress : 0,
+                    }));
+                }, 500);
+
+                return () => clearTimeout(timer);
+            }
+
+            setState(prev => ({ ...prev, currentProgress : progress }));
+        }, [ animateWhen, progress ]);
+
+        if (!state.isVisible && !animateWhen) return null;
+
+        const transformValue = isIndeterminate ?
+            undefined :
+            `translateX(${-100 + Math.min(100, state.currentProgress)}%)`;
+
+        const style = {
+            height,
+            [position] : 0,
+            bottom     : position === "bottom" ? 0 : "auto",
+            ...(transformValue ? { transform : transformValue } : {}),
+        };
+
+        const classes = [
+            className,
+            animateWhen ? "active" : "",
+            isIndeterminate ? "indeterminate" : "determinate",
+            state.isFading ? "fade-out" : "",
+        ].filter(Boolean).join(" ");
+
+
+        return (
+            <Element<LoadingBarElementType>
+                as="div"
+                data-loading-bar
+                ref={ref}
+                style={style}
+                className={classes}
+                {...props}
+            />
+        );
+    });

src/components/LoadingBar/index.tsx

@@ -0,0 +1 @@
+export { LoadingBar, type LoadingBarProps } from "./LoadingBar";

src/components/LoadingBar/loading-bar.css

@@ -0,0 +1,40 @@
+[data-loading-bar] {
+    position: fixed;
+    left: 0;
+    width: 100%;
+    background: linear-gradient(
+            to right,
+            var(--hue),
+            var(--accent),
+            var(--shade)
+    );
+    background-size: 200% 100%;
+    z-index: 60000;
+    transform: translateX(-100%);
+    pointer-events: none;
+    opacity: 1;
+    /* Separate transitions for transform and opacity */
+    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Indeterminate mode */
+[data-loading-bar].indeterminate.active {
+    transform: translateX(0);
+    animation: loading-gradient 2s linear infinite;
+}
+
+/* Determinate mode */
+[data-loading-bar].determinate {
+    background: var(--hue);
+}
+
+/* Active state */
+[data-loading-bar].active {
+    opacity: 1;
+}
+
+/* Fade out animation - explicitly set longer duration for opacity */
+[data-loading-bar].fade-out {
+    /*opacity: 0;*/
+    transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1);
+}

src/components/index.tsx

@@ -81,6 +81,9 @@ export {
     type ListBoxProps
 } from "./Form";
 
+// LOADING BAR =========================================================================================================
+export { LoadingBar, type LoadingBarProps } from "./LoadingBar";
+
 // METER ===============================================================================================================
 export { Meter, type MeterProps, type MeterMetaProps } from "./Meter";
 

src/index.tsx

@@ -108,6 +108,9 @@ export {
     type ListBoxProps
 } from "./components/Form";
 
+// LOADING BAR =========================================================================================================
+export { LoadingBar, type LoadingBarProps } from "./components/LoadingBar";
+
 // METER ===============================================================================================================
 export { Meter, type MeterProps, type MeterMetaProps } from "./components/Meter";
 

src/styles/animations.css

@@ -50,3 +50,9 @@
     from { opacity : 0; }
     to   { opacity : 1; }
 }
+
+/* LOADING BAR ////////////////////////////////////////////////////////////// */
+@keyframes loading-gradient {
+    0% { background-position: 100% 50%; }
+    100% { background-position: 0  50%; }
+}