superdesk-ui-framework 5.1.2 → 5.1.3

package/app/styles/_helpers.scss

@@ -346,7 +346,7 @@ h6 {
     white-space: nowrap;
 }
 
-// FONT FAMILY
+// FONT FAMILY (DEPRECATED)
 .sd-text__serif,
 .sd-text--serif {
     font-family: $baseFontFamilySerif;
@@ -358,6 +358,23 @@ h6 {
     font-family: $baseFontFamilyMono;
 }
 
+// FONT FAMILY VARIABLES -------------------------------------------------------------------------
+// Use these utility classes to change the font family of the text. Useful for overriding the font family of the text.
+.font-primary {
+    font-family: var(--font-primary);
+}
+.font-secondary {
+    font-family: var(--font-secondary);
+}
+.font-mono {
+    font-family: var(--font-mono);
+}
+.font-alt {
+    font-family: var(--font-alt);
+}
+
+
+
 // WHITESPACE
 .sd-whitespace--normal,
 .whitespace-normal {
@@ -2195,65 +2212,4 @@ h6 {
     container-type: inline-size;
     container-name: left-panel;
 }
-@container left-panel (width <= 900px) {
-    .new-form-layout {
-        --form-group-gap: var(--gap-3);
-        --form-padding: var(--space--3);
-    }
-}
-@container left-panel (width<= 500px) {
-    .new-form-layout {
-        --form-group-gap: var(--gap-1-5);
-        --form-padding: var(--space--2);
-        --form-layout-gap: var(--gap-2);
-    }
-}
-// ------------------------------------------------------------------------
-
-.new-form-layout {
-    --form-group-gap: var(--gap-5);
-    --form-layout-gap: var(--gap-4);
-    --form-padding: var(--space--5);
-    --form-heading-font-size: clamp(1.8rem, 4cqi, 2.4rem);
-    padding: var(--form-padding);
-    display: flex;
-    flex-direction: column;
-    gap: var(--form-layout-gap);
-    background-color: var(--color-surface-base);
-    border-radius: var(--b-radius--large);
-    border: 1px solid var(--color-line-light);
-    .new-form-heading {
-        font-family: $baseFontFamilySerif;
-        font-weight: 900;
-        font-size: var(--form-heading-font-size);
-        line-height: 1.2;
-    }
-    legend {
-        float: left;
-    }
-}
-.new-form-group {
-    display: flex;
-    gap: var(--form-group-gap);
-    &.new-form-group--grid {
-        display: grid;
-        grid-template-columns: repeat(4, 1fr);
-        gap: var(--form-group-gap);
-    }
-}
-.new-form-group-item {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    &.new-form-group-item--span-2 {
-        grid-column: span 2;
-    }
-    &.new-form-group-item--span-3 {
-        grid-column: span 3;
-    }
-    &.new-form-group-item--span-4 {
-        grid-column: span 4;
-    }
-}
-
 

package/app/styles/_simple-list.scss

@@ -8,7 +8,7 @@ $simple-list-border-color: $neutral-border-color;
     align-self: stretch;
 
     .simple-list__item {
-        padding: 0.5rem 0;
+        padding: var(--space--1) 0;
         display: flex;
         flex-direction: row;
         align-items: center;
@@ -87,7 +87,7 @@ $simple-list-border-color: $neutral-border-color;
 
 .simple-list--dotted {
     .simple-list__item {
-        padding: 0.8rem 0;
+        padding: var(--space--1) 0;
         border-block-end: 1px dotted $simple-list-border-color;
 
         &:first-child {
@@ -111,19 +111,25 @@ $simple-list-border-color: $neutral-border-color;
         }
     }
 }
-
 .simple-list--comfortable {
     .simple-list__item {
         padding: 1.2rem 0;
     }
 }
 
+.simple-list--comfortable {
+    .simple-list__item {
+        padding: var(--space--1-5) 0;
+    }
+}
+
 .simple-list--loose {
     .simple-list__item {
-        padding: 2.4rem 0;
+        padding: var(--space--2) 0;
     }
 }
 
+
 .simple-list--no-padding {
     padding: 0 0 2rem 0;
 }

package/app/styles/form-elements/_forms-general.scss

@@ -299,7 +299,7 @@
 
 
 
-/// ---------------------------- NEW FORM LAYOUT TEST---------------------------- ///
+/// ----------------------------  FORM LAYOUT (Do not use anymore) --------------------------- ///
 
 .form__group-new {
 	display: flex;
@@ -388,8 +388,152 @@
 		margin-block-end: $sd-base-increment * 1.5;
 		line-height: 1;
 		color: var(--color-label-text);
-		//text-transform: uppercase;
 		font-weight: 500;
 		letter-spacing: 0.02em;
 	}
 }
+/// --------------------------  FORM LAYOUT (Do not use anymore) END ------------------------ ///
+/// ----------------------------------------------------------------------------------------- ///
+
+
+/// ---------------------------- NEW FORM LAYOUT !!! USE THIS ONE INSTEAD OF THE OLD ONE ---------------------------- ///
+
+.form-layout {
+	container-type: inline-size;
+    container-name: form-container;
+	--form-layout-row-gap: var(--gap-4);
+    --form-padding: 0;
+    --form-heading-font-size: clamp(1.8rem, 4cqi, 2.1rem);
+	--form-heading-margin: 0;
+    padding: var(--form-padding);
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--form-layout-row-gap);
+	width: 100%;
+    .form-heading-new {
+        font-family: $baseFontFamilySerif;
+        font-weight: 900;
+        font-size: var(--form-heading-font-size);
+        line-height: 1.1;
+		margin-block-end: var(--form-heading-margin);
+    }
+    legend {
+        float: left;
+    }
+	&.form-layout--compact {
+		--form-layout-row-gap: var(--gap-2);
+	}
+	&.form-layout--standard {
+		--form-layout-row-gap: var(--gap-4);
+	}
+	&.form-layout--relaxed {
+		--form-layout-row-gap: var(--gap-5);
+	}
+	&.form-layout--preserve-spaces {
+		--form-layout-row-gap: var(--gap-1-5);
+		--form-heading-margin: var(--space--2);
+		.sd-input .sd-input__message-box {
+			min-height: var(--space--3);
+		}
+		&.form-layout--compact {
+			--form-layout-row-gap: var(--gap-0-5);
+			--form-heading-margin: var(--space--2);
+		}
+		&.form-layout--standard {
+			--form-layout-row-gap: var(--gap-1-5);
+			--form-heading-margin: var(--space--2);
+		}
+		&.form-layout--relaxed {
+			--form-layout-row-gap: var(--gap-2);
+			--form-heading-margin: var(--space--1);
+		}
+	}
+	&.form-layout--mb-none {
+		margin-block-end: 0;
+	}
+	&.form-layout--mb-spaces {
+		margin-block-end: var(--form-layout-row-gap);
+	}
+}
+
+.form-group {
+	--form-group-col-gap: var(--gap-5);
+    display: flex;
+	row-gap: var(--form-layout-row-gap);
+    column-gap: var(--form-group-col-gap);
+    &.form-group--grid {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+    }
+	.form-group__text-block {
+		min-height: var(--form-element-height-default);
+		color: inherit;
+		font-size: 1.3rem;
+		display: inline-flex;
+		align-items: center;
+	}
+}
+
+.form-group__wrapper {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	row-gap: var(--form-layout-row-gap);
+	.form-group__label {
+		font-size: 1.6rem;
+		font-weight: 500;
+		color: var(--color-text);
+		line-height: 1;
+		margin-block-end: var(--space--0-5);
+	}
+}
+
+.form-group-item {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+	min-height: var(--form-element-height-default);
+    &.form-group-item--span-2 {
+        grid-column: span 2;
+    }
+    &.form-group-item--span-3 {
+        grid-column: span 3;
+    }
+    &.form-group-item--span-4 {
+        grid-column: span 4;
+    }
+	&.form-group-item--auto-width {
+		flex-grow: 0;
+		min-width: 0;
+		flex-basis: auto;
+	}
+	> *:not(.sd-input):not(.form-group-item__inner):not(.sd-check__group-new) {
+		margin-block-start: 1.6rem;
+	}
+	.form-group-item__inner {
+		display: flex;
+		gap: var(--space--1);
+		align-items: flex-start;
+		> *:not(.sd-input) {
+			margin-block-start: 1.6rem;
+		}
+	}
+}
+
+.form-group-item--auto-width {
+	flex-grow: 0;
+	min-width: 0;
+	flex-basis: auto;
+}
+
+@container form-container (width <= 900px) {
+    .form-group {
+        --form-group-col-gap: var(--gap-3);
+    }
+}
+
+@container form-container (width<= 500px) {
+    .form-group {
+        --form-group-col-gap: var(--gap-1-5);
+    }
+}

package/app-typescript/components/Form/FormGroupItem.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+interface IProps {
+    children: React.ReactNode;
+
+    /**
+     * Defaults to `false`. Only works with `flex` based FormGroupV2.
+     */
+    autoWidth?: boolean;
+
+    /**
+     * Defaults to `4` (full width). Only works with `grid` based FormGroupV2.
+     */
+    colSpan?: 1 | 2 | 3 | 4;
+
+    /**
+     * Additional CSS class names to apply to the form group item.
+     */
+    className?: string;
+}
+
+export const FormGroupItem: React.FC<IProps> = React.memo(({children, autoWidth, colSpan, className}) => {
+    const classes = classNames(
+        'form-group-item',
+        {
+            'form-group-item--auto-width': autoWidth,
+            'form-group-item--span-1': colSpan === 1,
+            'form-group-item--span-2': colSpan === 2,
+            'form-group-item--span-3': colSpan === 3,
+            'form-group-item--span-4': colSpan === 4 || !colSpan,
+        },
+        className,
+    );
+
+    return <div className={classes}>{children}</div>;
+});

package/app-typescript/components/Form/FormGroupV2.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+interface IProps {
+    children: React.ReactNode;
+
+    /**
+     * Defaults to `false`.
+     */
+    inlineLabels?: boolean;
+
+    rowLabel?: string;
+    grid?: boolean;
+
+    /**
+     * Additional CSS class names to apply to the form group.
+     */
+    className?: string;
+}
+
+export const FormGroupV2: React.FC<IProps> = React.memo(({children, rowLabel, grid, className}) => {
+    const classes = classNames(
+        'form-group',
+        {
+            'form-group--grid': grid,
+        },
+        className,
+    );
+
+    if (rowLabel) {
+        return (
+            <div className="form-group__wrapper">
+                <label className="form-group__label">{rowLabel}</label>
+                <div className={classes}>{children}</div>
+            </div>
+        );
+    }
+
+    return <div className={classes}>{children}</div>;
+});

package/app-typescript/components/Form/FormLayout.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+interface IProps {
+    children: React.ReactNode;
+
+    /**
+     * Spacing between form elements. Defaults to `standard`.
+     */
+    spaces?: 'compact' | 'standard' | 'relaxed';
+
+    /**
+     * Bottom margin for the form layout. `spaces` adds a bottom margin equal to the row gap. Defaults to `none`.
+     */
+    marginBottom?: 'none' | 'spaces';
+
+    /**
+     * Optional legend for the form layout/fieldset. Can be used to group items together.
+     */
+    legend?: string;
+
+    /**
+     * Additional CSS class names to apply to the form layout.
+     */
+    className?: string;
+
+    /**
+     * Reserve space for info text on input fields regardless of whether they are present.
+     */
+    preserveSpaces?: boolean;
+}
+
+export const FormLayout: React.FC<IProps> = React.memo(
+    ({children, spaces = 'standard', marginBottom = 'none', legend, className, preserveSpaces}) => {
+        const hasLabel = legend && legend.trim() !== '';
+        const classes = classNames(
+            'form-layout',
+            {
+                [`form-layout--${spaces}`]: spaces,
+                [`form-layout--mb-${marginBottom}`]: marginBottom,
+                'form-layout--preserve-spaces': preserveSpaces,
+            },
+            className,
+        );
+
+        if (hasLabel) {
+            return (
+                <fieldset className={classes}>
+                    <legend className="form-heading-new">{legend}</legend>
+                    {children}
+                </fieldset>
+            );
+        }
+
+        return <div className={classes}>{children}</div>;
+    },
+);

package/app-typescript/components/Form/index.tsx

@@ -7,3 +7,6 @@ export {InputWrapper} from './InputWrapper';
 export {InputBase} from './InputBase';
 export {InputNew} from './InputNew';
 export {FormRowNew} from './FormRowNew';
+export {FormLayout} from './FormLayout';
+export {FormGroupV2} from './FormGroupV2';
+export {FormGroupItem} from './FormGroupItem';