superdesk-ui-framework 3.0.1-beta.3 → 3.0.1-beta.4

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

@@ -81,13 +81,6 @@
              margin-bottom: 1rem;
              margin-right: 0;
          }
-         & + div {
-             margin-top: .4rem;
-
-             .label {
-                 margin-bottom: .3rem;
-             }
-         }
     }
 }
 .label--active {
@@ -260,3 +253,25 @@
     background-color: var(--color-form-bg);
     color: var(--color-text);
 }
+
+
+/// ---------------------------- NEW FORM LAYOUT TEST---------------------------- ///
+
+
+
+.form__group-new {
+    display: flex;
+    flex-direction: row;
+    width:100%;
+    align-items: flex-start;
+    gap: $sd-base-increment * 2;
+    .sd-input {
+        flex: 1 1 0;
+        min-width: 12rem;
+        margin: 0;
+    }
+    .btn {
+        flex: 0 0 auto;
+        margin-top: $form-label-height;
+    }
+}

package/app/styles/form-elements/_inputs.scss

@@ -471,12 +471,18 @@
     grid-template-rows: $form-label-height auto auto;
     grid-gap: 0;
     position: relative;
+    align-self: stretch;
+
 
     .sd-input__input {
         @include Line-input-base;
         grid-row: 2/3;
         grid-column: 2/4;
     }
+    .sd-input__input-container {
+        grid-row: 2/3;
+        grid-column: 2/4;
+    }
 
     textarea {
         &.sd-input__input {
@@ -687,6 +693,24 @@
                 }
             }
         }
+        div {
+            &.sd-input__duration-input, &.sd-input__duration-input:hover, &.sd-input__duration-input:focus {
+                opacity: 0.5;
+                //background-color: var(--color-input-bg);
+                //border-bottom: 1px dotted var(--color-input-border);
+                cursor: not-allowed !important;
+                box-shadow: none;
+            }
+            input {
+                &.duration-input, &.duration-input:hover, &.duration-input:focus {  
+                    opacity: 0.5;
+                    //background-color: var(--color-input-bg);
+                    //border-bottom: 1px dotted var(--color-input-border);
+                    cursor: not-allowed !important;
+                    box-shadow: none;
+                }
+            }
+        }
         .sd-input__label, .sd-input__message-box, .sd-input__char-count {
             opacity: 0.5 !important;
             pointer-events: none !important;
@@ -704,6 +728,54 @@
         flex-grow: 1;
         width: 100%;
     }
+
+    &--medium {
+        &.sd-input--boxed-style {
+            .sd-input__input,
+            .sd-input__select {
+                border-radius: var(--b-radius--medium);
+                &:focus {
+                    box-shadow: inset 0 0 0 3px var(--sd-colour-interactive--alpha-20);
+                }
+            }
+        }
+    }
+    &--large {
+        .sd-input__input,
+        .sd-input__select {
+            padding: 0 1.6rem;
+            min-height: 4.8rem;
+            font-size: 2.4rem;
+            font-weight: 500;
+        }
+        .sd-input__select {
+            line-height: 2.4rem;
+            option {
+                color: var(--color-text);
+                font-size: 1.4rem !important;
+                line-height: 2rem;
+                background-color: var(--color-dropdown-menu-Bg);
+            }
+        }
+    }
+    &--x-large {
+        .sd-input__input,
+        .sd-input__select {
+            padding: 0 1.6rem;
+            min-height: 5.6rem;
+            font-size: 3.2rem;
+            font-weight: 500;
+        }
+        .sd-input__select {
+            line-height: 3.2rem;
+            option {
+                color: var(--color-text);
+                font-size: 1.4rem !important;
+                line-height: 2rem;
+                background-color: var(--color-dropdown-menu-Bg);
+            }
+        }
+    }
     &--boxed-style {
         .sd-input__input,
         .sd-input__select {
@@ -724,18 +796,23 @@
                 background-color: transparent;
             }
         }
+    
         &.sd-input--disabled {
-            input, textarea {
-                &.sd-input__input, &.sd-input__input:hover, &.sd-input__input:focus {
+            input,
+            textarea {
+                &.sd-input__input, 
+                &.sd-input__input:hover, 
+                &.sd-input__input:focus {
                     opacity: 0.5;
                     background-color: transparent;
                     border: 2px solid var(--color-input-border) !important;
-                    //cursor: not-allowed !important;
                     box-shadow: none;
                 }
             }
             select {
-                &.sd-input__select, &.sd-input__select:hover, &.sd-input__select:focus {
+                &.sd-input__select,
+                &.sd-input__select:hover,
+                &.sd-input__select:focus {
                     opacity: 0.5;
                     background-color: transparent;
                     border: 2px solid var(--color-input-border) !important;
@@ -743,8 +820,17 @@
                     box-shadow: none;
                 }
             }
-            .sd-input__label, .sd-input__message-box, .sd-input__char-count {
-                opacity: 0.5;
+            .tags-input__add-button {
+                pointer-events: none;
+            }
+            .sd-input__label,
+            .sd-input__message-box,
+            .sd-input__char-count {
+                .sd-input__label,
+                .sd-input__message-box,
+                .sd-input__char-count {
+                    opacity: 0.5;
+                }
             }
             .sd-input__hint,
             .sd-input__message,
@@ -752,6 +838,7 @@
                 pointer-events: none;
             }
         }
+    
         &.sd-input--invalid {
             input, textarea {
                 &.sd-input__input {
@@ -774,53 +861,6 @@
             }
         }
     }
-    &--medium {
-        &.sd-input--boxed-style {
-            .sd-input__input,
-            .sd-input__select {
-                border-radius: var(--b-radius--medium);
-                &:focus {
-                    box-shadow: inset 0 0 0 3px var(--sd-colour-interactive--alpha-20);
-                }
-            }
-        }
-    }
-    &--large {
-        .sd-input__input,
-        .sd-input__select {
-            padding: 0 1.6rem;
-            min-height: 4.8rem;
-            font-size: 2.4rem;
-            font-weight: 500;
-        }
-        .sd-input__select {
-            line-height: 2.4rem;
-            option {
-                color: var(--color-text);
-                font-size: 1.4rem !important;
-                line-height: 2rem;
-                background-color: var(--color-dropdown-menu-Bg);
-            }
-        }
-    }
-    &--x-large {
-        .sd-input__input,
-        .sd-input__select {
-            padding: 0 1.6rem;
-            min-height: 5.6rem;
-            font-size: 3.2rem;
-            font-weight: 500;
-        }
-        .sd-input__select {
-            line-height: 3.2rem;
-            option {
-                color: var(--color-text);
-                font-size: 1.4rem !important;
-                line-height: 2rem;
-                background-color: var(--color-dropdown-menu-Bg);
-            }
-        }
-    }
     &--boxed-label {
         grid-template-columns: auto 1fr auto;
         grid-template-rows: auto auto auto;
@@ -850,10 +890,17 @@
             }
         }
     }
+    
 }
 
 /////////////////  -------------------- Duration & Time-Date input ---------------------  /////////////////
 
+
+
+
+
+
+
 .sd-input__duration-input,
 .sd-input__time-date-input {
     @include Line-input-base;
@@ -867,6 +914,7 @@
         background-color: var(--sd-colour-interactive--alpha-20);
     }
 }
+
 .sd-input__duration-input {
     input {
         -webkit-appearance: none;
@@ -879,6 +927,7 @@
         color: var(--color-text);
         text-align: end;
         width: 2.5ch;
+        font-size: 1.4rem;
         &::-webkit-outer-spin-button,
         &::-webkit-inner-spin-button {
             -webkit-appearance: none;
@@ -888,6 +937,10 @@
             -moz-appearance: textfield;
         }
     }
+    span {
+        display: flex;
+        align-items: center;
+    }
     .sd-input__suffix {
         height: 3.2rem;
         line-height: 3.2rem;
@@ -908,5 +961,29 @@
     .tags-input {
         grid-row: 2/3;
         grid-column: 2/4;
+        width: 100%;
+    }
+    &.sd-input--disabled,
+    &.sd-input--disabled:hover {
+        .p-multiselect,
+        .p-calendar,
+        .p-multiselect,
+        .p-dropdown,
+        .tags-input {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+        .p-calendar {
+            .p-calendar-icon {
+                pointer-events: none;
+            }
+            border-bottom: 1px dotted var(--color-input-border);
+            background-color: var(--color-input-bg);
+        }
     }
-}
+}
+
+//&--boxed-style
+
+
+

package/app-typescript/components/Badge.tsx

@@ -6,6 +6,7 @@ interface IProps {
     color?: string; // https://ui-framework.superdesk.org/#/components/colors
     shape?: 'round' | 'square'; // defaults to 'round'
     children?: React.ReactNode;
+    hexColor?: string;
     'data-test-id'?: string;
 }
 
@@ -21,11 +22,11 @@ export class Badge extends React.PureComponent<IProps> {
             return (
                 <div className='element-with-badge' data-test-id={this.props['data-test-id']}>
                     {this.props.children}
-                    <span className={classes} data-test-id="badge-content">{this.props.text}</span>
+                    <span className={classes} style={{backgroundColor: this.props.hexColor}} data-test-id="badge-content">{this.props.text}</span>
                 </div>
             );
         } else {
-            return <span className={classes} data-test-id={this.props['data-test-id']}>{this.props.text}</span>;
+            return <span className={classes} style={{backgroundColor: this.props.hexColor}} data-test-id={this.props['data-test-id']}>{this.props.text}</span>;
         }
     }
 }

package/app-typescript/components/DatePicker.tsx

@@ -3,8 +3,9 @@ import addDays from 'date-fns/addDays';
 import format from 'date-fns/format';
 import {Calendar, LocaleSettings, CalendarProps} from '@superdesk/primereact/calendar';
 import {throttle} from 'lodash';
-import classNames from 'classnames';
+// import classNames from 'classnames';
 import nextId from "react-id-generator";
+import { InputWrapper } from './Form';
 
 export type DatePickerLocaleSettings = Omit<LocaleSettings, 'today' | 'clear'>;
 
@@ -79,7 +80,6 @@ function parseFromPrimeReactCalendarFormat(value: CalendarProps['value']): IDate
         return null;
     } else {
         // at this point value is a free input string that can't be parsed to a Date inside primereact/calendar
-
         return 'failed-to-parse';
     }
 }
@@ -91,10 +91,10 @@ function parseToPrimeReactCalendarFormat(value: IDatePicker['value']): CalendarP
 export class DatePicker extends React.PureComponent<IDatePicker, IState> {
     private instance: IPrivatePrimeReactCalendarApi | undefined;
     hidePopupOnScroll: () => void;
+    private htmlId = nextId();
 
     constructor(props: IDatePicker) {
         super(props);
-
         this.state = {
             value: parseToPrimeReactCalendarFormat(this.props.value),
             valid: true,
@@ -137,7 +137,6 @@ export class DatePicker extends React.PureComponent<IDatePicker, IState> {
 
     render() {
         let locale: LocaleSettings | undefined;
-
         if (this.props.locale != null) {
             locale = {
                 ...this.props.locale,
@@ -145,26 +144,23 @@ export class DatePicker extends React.PureComponent<IDatePicker, IState> {
                 clear: 'clear',
             };
         }
-        const classes = classNames('sd-input', {
-            'sd-input--inline-label': this.props.inlineLabel,
-            'sd-input--required': this.props.required,
-            'sd-input--disabled': this.props.disabled,
-            'sd-input--full-width': this.props.fullWidth,
-            'sd-input--invalid': this.props.invalid || this.state.invalid,
-        });
-        const labelClasses = classNames('sd-input__label', {
-            'a11y-only': this.props.labelHidden,
-        });
-
-        let htmlId = nextId();
 
         return (
-            <div className={classes}>
-                <label className={labelClasses} htmlFor={htmlId} id={htmlId + 'label'}
-                tabIndex={this.props.tabindex === undefined ? undefined : -1}>
-                    {this.props.label}
-                </label>
+            <InputWrapper
+            label={this.props.label}
+            error={this.props.error}
+            required={this.props.required}
+            disabled={this.props.disabled}
+            invalid={this.state.invalid}
+            info={this.props.info}
+            inlineLabel={this.props.inlineLabel}
+            labelHidden={this.props.labelHidden}
+            fullWidth={this.props.fullWidth}
+            htmlId={this.htmlId}
+            tabindex={this.props.tabindex}>
                 <Calendar
+                inputId={this.htmlId}
+                ariaLabelledBy={this.htmlId + 'label'}
                 ref={(ref) => {
                     this.instance = ref as unknown as IPrivatePrimeReactCalendarApi;
                 }}
@@ -214,16 +210,8 @@ export class DatePicker extends React.PureComponent<IDatePicker, IState> {
                         // restoring internal state to current props value
                         this.setState({valid: true, value: parseToPrimeReactCalendarFormat(this.props.value)});
                     }
-                }}
-                />
-                <div className='sd-input__message-box'>
-                    {this.props.info && !this.props.invalid && !this.state.invalid ?
-                        <div className='sd-input__hint'>{this.props.info}</div> : null}
-                    {this.props.invalid || this.state.invalid ?
-                        <div className='sd-input__message'>{this.props.error}</div>
-                        : null}
-                </div>
-            </div>
+                }} />
+            </InputWrapper>
         );
     }
 }
@@ -237,27 +225,27 @@ export class DatePickerISO extends React.PureComponent<IDatePickerISO> {
     render() {
         return (
             <DatePicker
-                value={new Date(this.props.value)}
-                onChange={(value) => {
-                    if (value === null) {
-                        this.props.onChange('');
-                    } else {
-                        this.props.onChange(format(value, 'yyyy-MM-dd'));
-                    }
-                }}
-                disabled={this.props.disabled}
-                shortcuts={this.props.shortcuts}
-                dateFormat={this.props.dateFormat}
-                locale={this.props.locale}
-                inlineLabel={this.props.inlineLabel}
-                required={this.props.required}
-                fullWidth={this.props.fullWidth}
-                invalid={this.props.invalid}
-                labelHidden={this.props.labelHidden}
-                tabindex={this.props.tabindex}
-                label={this.props.label}
-                info={this.props.info}
-                error={this.props.error}
+            value={new Date(this.props.value)}
+            onChange={(value) => {
+                if (value === null) {
+                    this.props.onChange('');
+                } else {
+                    this.props.onChange(format(value, 'yyyy-MM-dd'));
+                }
+            }}
+            disabled={this.props.disabled}
+            shortcuts={this.props.shortcuts}
+            dateFormat={this.props.dateFormat}
+            locale={this.props.locale}
+            inlineLabel={this.props.inlineLabel}
+            required={this.props.required}
+            fullWidth={this.props.fullWidth}
+            invalid={this.props.invalid}
+            labelHidden={this.props.labelHidden}
+            tabindex={this.props.tabindex}
+            label={this.props.label}
+            info={this.props.info}
+            error={this.props.error}
             />
         );
     }