superdesk-ui-framework 5.1.5 → 5.2.0

package/.github/workflows/publish-to-npm.yml

@@ -26,16 +26,23 @@ jobs:
             - run: npm run build
             - uses: JS-DevTools/npm-publish@v3
               id: publish
+              continue-on-error: true
               with:
                   token: ${{ secrets.NPM_TOKEN }}
 
+            - name: Check publish result
+              if: steps.publish.outcome == 'failure'
+              run: |
+                  echo "::notice::Package was not published. Version may already exist on npm."
+                  exit 0
+
             - name: Get package version
-              if: steps.publish.outputs.type != 'none'
+              if: steps.publish.outputs.type != 'none' && steps.publish.outcome == 'success'
               id: package-version
               run: echo "version=$(node -p "require('./package.json').version")" >> $GITHUB_OUTPUT
 
             - name: Create Git tag
-              if: steps.publish.outputs.type != 'none'
+              if: steps.publish.outputs.type != 'none' && steps.publish.outcome == 'success'
               run: |
                   git config user.name "github-actions[bot]"
                   git config user.email "github-actions[bot]@users.noreply.github.com"
@@ -43,7 +50,7 @@ jobs:
                   git push origin "v${{ steps.package-version.outputs.version }}"
 
             - name: Create GitHub Release
-              if: steps.publish.outputs.type != 'none'
+              if: steps.publish.outputs.type != 'none' && steps.publish.outcome == 'success'
               uses: softprops/action-gh-release@v1
               with:
                   tag_name: v${{ steps.package-version.outputs.version }}

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';

package/app-typescript/components/TreeMenu.tsx

@@ -374,104 +374,102 @@ export class TreeMenu<T> extends React.Component<IProps<T>, IState<T>> {
             <div ref={this.treeMenuRef}>
                 <div ref={this.openDropdownRef}>{this.props.children(this.toggle)}</div>
 
-                {this.state.openDropdown && (
-                    <WithPortal active={this.state.openDropdown} data-test-id="tree-menu-popover">
-                        <div
-                            ref={this.dropdownRef}
-                            className="autocomplete autocomplete--multi-select autocomplete--fixed-width"
-                            style={{
-                                zIndex: this.zIndex,
-                            }}
-                        >
-                            <div className="autocomplete__header">
+                <WithPortal active={this.state.openDropdown} data-test-id="tree-menu-popover">
+                    <div
+                        ref={this.dropdownRef}
+                        className="autocomplete autocomplete--multi-select autocomplete--fixed-width"
+                        style={{
+                            zIndex: this.zIndex,
+                        }}
+                    >
+                        <div className="autocomplete__header">
+                            <div
+                                className="autocomplete__icon"
+                                onClick={() => {
+                                    this.backButton();
+                                }}
+                            >
+                                <Icon name="search" className="search"></Icon>
+                            </div>
+
+                            <div className="autocomplete__filter">
+                                <input
+                                    className="autocomplete__input"
+                                    type="text"
+                                    placeholder={this.props.searchPlaceholder}
+                                    ref={this.inputRef}
+                                    value={this.state.searchFieldValue}
+                                    onChange={(event) => {
+                                        this.setState({searchFieldValue: event.target.value});
+                                        this.popperInstance?.update();
+                                    }}
+                                />
+                            </div>
+                        </div>
+
+                        {this.state.activeTree.length > 0 && this.state.buttonValue != null && (
+                            <div className="autocomplete__category-header">
                                 <div
                                     className="autocomplete__icon"
                                     onClick={() => {
                                         this.backButton();
                                     }}
                                 >
-                                    <Icon name="search" className="search"></Icon>
+                                    <Icon name="arrow-left" className="arrow-left"></Icon>
                                 </div>
 
                                 <div className="autocomplete__filter">
-                                    <input
-                                        className="autocomplete__input"
-                                        type="text"
-                                        placeholder={this.props.searchPlaceholder}
-                                        ref={this.inputRef}
-                                        value={this.state.searchFieldValue}
-                                        onChange={(event) => {
-                                            this.setState({searchFieldValue: event.target.value});
-                                            this.popperInstance?.update();
-                                        }}
-                                    />
+                                    <button className="autocomplete__category-title">
+                                        {this.props.optionTemplate
+                                            ? this.props.optionTemplate(this.state.buttonValue.value)
+                                            : this.props.getLabel(this.state.buttonValue.value)}
+                                    </button>
                                 </div>
                             </div>
-
-                            {this.state.activeTree.length > 0 && this.state.buttonValue != null && (
-                                <div className="autocomplete__category-header">
-                                    <div
-                                        className="autocomplete__icon"
-                                        onClick={() => {
-                                            this.backButton();
-                                        }}
-                                    >
-                                        <Icon name="arrow-left" className="arrow-left"></Icon>
-                                    </div>
-
-                                    <div className="autocomplete__filter">
-                                        <button className="autocomplete__category-title">
-                                            {this.props.optionTemplate
-                                                ? this.props.optionTemplate(this.state.buttonValue.value)
-                                                : this.props.getLabel(this.state.buttonValue.value)}
-                                        </button>
-                                    </div>
-                                </div>
-                            )}
-
-                            {this.state.searchFieldValue === '' ? (
-                                this.props.getOptions ? (
-                                    <ul
-                                        ref={this.ref}
-                                        className="suggestion-list suggestion-list--multi-select"
-                                        role="tree"
-                                    >
-                                        {this.state.options.map((option, i: React.Key | undefined) => (
-                                            <TreeSelectItem
-                                                key={i}
-                                                option={option}
-                                                handleTree={this.handleTree}
-                                                onClick={() => {
-                                                    onSelect(option);
-                                                }}
-                                                disabledItem={disabledItem(option)}
-                                                getBorderColor={this.props.getBorderColor}
-                                                getBackgroundColor={this.props.getBackgroundColor}
-                                                getId={this.props.getId}
-                                                optionTemplate={this.props.optionTemplate}
-                                                getLabel={this.props.getLabel}
-                                                onKeyDown={() =>
-                                                    this.setState({
-                                                        buttonTarget: [
-                                                            ...this.state.buttonTarget,
-                                                            this.props.getId(option.value),
-                                                        ],
-                                                    })
-                                                }
-                                            />
-                                        ))}
-                                    </ul>
-                                ) : null
-                            ) : (
-                                <ul className="suggestion-list suggestion-list--multi-select" ref={this.ref}>
-                                    {this.filteredItem(
-                                        this.props.singleLevelSearch ? this.state.options : this.state.filterArr,
-                                    )}
+                        )}
+
+                        {this.state.searchFieldValue === '' ? (
+                            this.props.getOptions ? (
+                                <ul
+                                    ref={this.ref}
+                                    className="suggestion-list suggestion-list--multi-select"
+                                    role="tree"
+                                >
+                                    {this.state.options.map((option, i: React.Key | undefined) => (
+                                        <TreeSelectItem
+                                            key={i}
+                                            option={option}
+                                            handleTree={this.handleTree}
+                                            onClick={() => {
+                                                onSelect(option);
+                                            }}
+                                            disabledItem={disabledItem(option)}
+                                            getBorderColor={this.props.getBorderColor}
+                                            getBackgroundColor={this.props.getBackgroundColor}
+                                            getId={this.props.getId}
+                                            optionTemplate={this.props.optionTemplate}
+                                            getLabel={this.props.getLabel}
+                                            onKeyDown={() =>
+                                                this.setState({
+                                                    buttonTarget: [
+                                                        ...this.state.buttonTarget,
+                                                        this.props.getId(option.value),
+                                                    ],
+                                                })
+                                            }
+                                        />
+                                    ))}
                                 </ul>
-                            )}
-                        </div>
-                    </WithPortal>
-                )}
+                            ) : null
+                        ) : (
+                            <ul className="suggestion-list suggestion-list--multi-select" ref={this.ref}>
+                                {this.filteredItem(
+                                    this.props.singleLevelSearch ? this.state.options : this.state.filterArr,
+                                )}
+                            </ul>
+                        )}
+                    </div>
+                </WithPortal>
             </div>
         );
     }