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

package/app/styles/grids/_grid-layout.scss

@@ -216,6 +216,12 @@
             transition-delay: 0;
         }
     }
+    &.sd-column-box__slide-in-column--light {
+        background-color: var(--sd-colour-panel-bg--000);
+        .sd-column-box__slide-in-column-inner {
+            background-color: var(--sd-colour-panel-bg--000);
+        }
+    }
 }
 .sd-slide-in-panel {
     display: flex;
@@ -685,9 +691,33 @@ $planningEditor-width: 53rem;
     .side-panel__container {
         width: var(--width__container--medium);
         overflow-y: auto;
-        &.side-panel__container--xx-large{
+        &.side-panel__container--xxx-small {
+            width: var(--width__container--xxx-small);
+        }
+        &.side-panel__container--xx-small {
+            width: var(--width__container--xx-small);
+        }
+        &.side-panel__container--x-small {
+            width: var(--width__container--x-small);
+        }
+        &.side-panel__container--small {
+            width: var(--width__container--small);
+        }
+        &.side-panel__container--large {
+            width: var(--width__container--large);
+        }
+        &.side-panel__container--x-large {
+            width: var(--width__container--x-large);
+        }
+        &.side-panel__container--xx-large {
             width: var(--width__container--xx-large);
         }
+        &.side-panel__container--xxx-large {
+            width: var(--width__container--xxx-large);
+        }
+        &.side-panel__container--full {
+            width: var(--width__container--full);
+        }
         .side-panel {
             opacity: 1;
         }
@@ -717,6 +747,9 @@ $planningEditor-width: 53rem;
     .sd-main-content-grid {
         grid-column: contentArea;
     }
+    &--editor-full {
+        grid-template-columns: [sideTabsLeft] auto [contentArea] auto [contentSplitter] auto [authoringArea] 1fr;
+    }
 }
 .sd-content-wrapper__left-tabs { 
     grid-column: sideTabsLeft;

package/app/styles/interface-elements/_side-panel.scss

@@ -15,7 +15,7 @@ $side-panel-Bg-200: var(--sd-colour-panel-bg--200);
     .side-panel__header {
         grid-column: 1/2;
         grid-row: 1/2;
-        z-index: 1;
+        z-index: 2;
         position: relative;
         min-height: 4.8rem;
         display: flex;

package/app/styles/layout/_basic-layout.scss

@@ -38,10 +38,10 @@
 
 .sd-page__sidebar {
     & + .sd-page__main-content {
-        left: 200px;
+        left: 240px;
     }
     & + .sd-content-navigation-panel {
-        left: 200px;
+        left: 240px;
         top: 0;
         bottom: 0;
         position: absolute;

package/app/styles/layout/_editor.scss

@@ -82,7 +82,7 @@
         overflow: visible;
         .sidetabs-content-overlay__inner {
             opacity: 1;
-            width: 320px;
+            width: auto;
             position: absolute;
             overflow: hidden;
             inset-inline-end: 0;
@@ -365,12 +365,18 @@
         overflow-y: auto;
         width: auto;
         min-width: 45vw;
-        //min-width: 45%;
-        //max-width: 1200px;
-
+        max-width: 45vw;
+        &.sd-editor__container--large {
+            min-width: 52vw;
+        }
     }
 }
 
+.sd-content-wrapper--editor-full .open-editor .sd-editor__container {
+    min-width: auto;
+    max-width: none;
+}
+
 .sd-editor__input--title {
     -webkit-appearance: none;
     -moz-appearance: none;

package/app/styles/primereact/_pr-datepicker.scss

@@ -78,11 +78,13 @@
 // add background when hovering a selectable date
 .p-datepicker table td > span {
     &:not(.p-highlight):not(.p-disabled) {
+        transition: all ease 0.2s;
         &:hover {
-            background-color: $sd-colour-background__menu-item--hover;
+            background-color: var(--sd-colour-interactive--alpha-10);
+            box-shadow: inset 0 0 0 1px var(--sd-colour-interactive);
         }
         &:active {
-            background-color: $sd-colour-background__menu-item--active;
+            background-color: var(--sd-colour-interactive--alpha-20);
         }
     }
 }

package/app/styles/primereact/_pr-dialog.scss

@@ -2,6 +2,7 @@
     background-color: hsla(214, 13%, 16%, 0.5) !important;
     backdrop-filter: blur(1px);
     -webkit-backdrop-filter: blur(1px);
+    z-index: 1000;
 }
 
 
@@ -42,6 +43,10 @@
     overflow-y: auto;
 }
 
+.p-dialog-flex {
+    display: flex;
+}
+
 .p-dialog-header {
     display: flex;
     align-items: center;

package/app/styles/primereact/_pr-dropdown.scss

@@ -1,7 +1,7 @@
 @import './../tag-labels';
 @import './../form-elements/checkbox';
 
-.p-dropdown, .p-multiselect {
+.p-dropdown {
     @include pr-input-item-base;
     padding-block-start: 6px;
     padding-block-end: 6px;
@@ -10,6 +10,14 @@
     color: $sd-text;
 }
 
+.p-multiselect {
+    @include pr-input-item-base;
+    height: auto !important;
+    min-height: 3.2rem !important;
+    color: $sd-text;
+    padding: 0.4rem;
+}
+
 .p-dropdown-clear-icon,
 .p-multiselect-clear-icon {
     position: static;
@@ -69,13 +77,21 @@
 }
 
 .p-multiselect-label {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
     display: flex;
+    justify-content: flex-start;
     align-items: center;
+    flex-wrap: wrap;
+    padding-inline-start: 0.4rem;
+    gap: 0.4rem;
 }
 
 .p-multiselect-token {
     @extend .tag-label;
     cursor: default;
+    margin: 0 !important;
  
     .pi-times-circle {
         overflow: inherit;

package/app/styles/primereact/_pr-menu.scss

@@ -23,13 +23,14 @@
     padding: .8rem 1.6rem;
     min-width: 100px;
     font-size: 14px;
-    color: $sd-text;
+    color: var(--color-text);
+    width: 100%;
 
     &:hover, &:focus-visible {
         background: $sd-colour-background__menu-item--hover;
     }
-}
-
-.p-menuitem-icon {
-    margin-right: 0.8rem;
+    .p-menuitem-icon {
+        margin-right: 0.8rem;
+        color: var(--color-icon-default);
+    }
 }

package/app/styles/variables/_colors.scss

@@ -81,29 +81,29 @@ $yellow:                hsla(45, 100%, 53%, 1);
 $orange:                hsla(35, 100%, 43%, 1);
 $purple:                hsla(291, 64%, 42%, 1);
 
-$black:                 #000;
-$grayDarker:            #222;
-$grayDark:              #333333;
-$grayMedium:            #444;
-$gray:                  #666;
-$grayNeutral:           #7b7b7b;
-$grayText:              #747474;
-$grayLight:             #999;
-$grayLighter:           #F5F5F5;
-$white:                 #fff;
+$black:                 hsl(214, 13%, 0%);
+$grayDarker:            hsl(214, 13%, 13%);
+$grayDark:              hsl(214, 13%, 20%);
+$grayMedium:            hsl(214, 13%, 27%);
+$gray:                  hsl(214, 13%, 40%);
+$grayNeutral:           hsl(214, 13%, 48%);
+$grayText:              hsl(214, 13%, 45%);
+$grayLight:             hsl(214, 13%, 60%);
+$grayLighter:           hsl(214, 13%, 96%);
+$white:                 hsl(214, 13%, 100%);
 
 // Greys
-$gray--900:             #333;
-$gray--800:             #444;
-$gray--700:             #555;
-$gray--600:             #666;
-$gray--500:             #747474;
-$gray--400:             #888;
-$gray--300:             #999;
-$gray--200:             #ccc;
-$gray--100:             #dedede;
-$gray--75:              #ededed;
-$grey--50:              #F5F5F5;
+$gray--900:             hsl(214, 13%, 20%);
+$gray--800:             hsl(214, 13%, 27%);
+$gray--700:             hsl(214, 13%, 33%);
+$gray--600:             hsl(214, 13%, 40%);
+$gray--500:             hsl(214, 13%, 45%);
+$gray--400:             hsl(214, 13%, 53%);
+$gray--300:             hsl(214, 13%, 60%);
+$gray--200:             hsl(214, 13%, 80%);
+$gray--100:             hsl(214, 13%, 87%);
+$gray--75:              hsl(214, 13%, 93%);
+$grey--50:              hsl(214, 13%, 96%);
 
 // Extended colors
 $fernGreen:             hsla(91, 47%, 34%, 1);

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/ContentDivider.tsx

@@ -6,6 +6,7 @@ interface IProps {
     orientation?: 'horizontal' |'vertical'; // defaults to 'horizontal'
     align?: 'center' | 'left' | 'right'; // defaults to 'center'
     border?: boolean;
+    margin?: 'x-small' | 'small' |'medium' | 'large' | 'none';
     children?: React.ReactNode;
 }
 
@@ -19,6 +20,8 @@ export class ContentDivider extends React.PureComponent<IProps> {
             [`sd-content-divider--text-${this.props.align}`]: this.props.align || this.props.align !== undefined,
             [`sd-content-divider--${this.props.orientation}`]:
             this.props.orientation || this.props.orientation !== undefined,
+            'sd-content-divider--margin-medium': this.props.margin === undefined,
+            [`sd-content-divider--margin-${this.props.margin}`]: this.props.margin || this.props.margin !== undefined,
         });
 
         if (this.props.children) {

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}
             />
         );
     }