superdesk-ui-framework 3.1.9 → 3.1.13

package/app/styles/_master-desk.scss

@@ -39,7 +39,7 @@ $board-header-border-color: var(--color-kanban-border);
 }
 
 .sd-board__content-block {
-    @include sd-shadow('z2');
+    box-shadow: var(--sd-shadow--z2);
     border-radius: $border-radius__base--x-small;
     background-color: var(--sd-item__main-Bg);
     display: flex;
@@ -51,7 +51,7 @@ $board-header-border-color: var(--color-kanban-border);
     cursor: pointer;
 
     &:hover {
-       @include sd-shadow('z3');
+       box-shadow: var(--sd-shadow--z3);
        outline: 1px solid var(--sd-colour-interactive--alpha-50);
     }
 }

package/app/styles/_toggle-box.scss

@@ -2,30 +2,31 @@
 
 .toggle-box {
     position: relative;
-    align-self: stretch;
-
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr auto;
+    transition: grid-template-rows 0.2s ease;
     &.hidden {
+        grid-template-rows: auto 0fr auto;
+        transition: grid-template-rows 0.2s ease;
         .toggle-box__chevron {
             i {
                 transform: rotate(0);
             }
         }
-
         .toggle-box__chevron--circle {
             background-color: var(--sd-colour-btn-bg-neutral);
-
             i {
                 color: var(--color-text-light);
             }
         }
-
         .toggle-box__content-wraper {
-            max-height: 0;
             transition: all ease-out .5s;
         }
-
-        .toggle-box__header {
-            margin-block-end: 0;
+    }
+    &.open {
+        .toggle-box__content {
+            animation: fadeIn 0.3s ease-in 0s 1;
         }
     }
 
@@ -39,23 +40,35 @@
             }
         }
     }
+    &.toggle-box--large-title {
+        .toggle-box__header,
+        a.toggle-box__header  {
+            .toggle-box__label {
+                font-size: var(--text-size-medium);
+                color: var(--color-text);
+                text-transform: none;
+                font-weight: 500;
+            }
+            &:hover {
+                .toggle-box__label {
+                    color: var(--sd-colour-interactive);
+                }
+            }
+        }
+    }
 
     &.toggle-box--marg-b10 {
         margin-block-end: 1rem;
     }
-
     &.toggle-box--margin-none {
         margin-block-end: 0;
     }
-
     &.toggle-box--margin-small {
         margin-block-end: $sd-base-increment * 2;
     }
-
     &.toggle-box--margin-normal {
         margin-block-end: $sd-base-increment * 3;
     }
-
     &.toggle-box--margin-large {
         margin-block-end: $sd-base-increment * 4;
     }
@@ -73,12 +86,12 @@
 
 .toggle-box__header,
 a.toggle-box__header {
+    grid-row: 1 / 2;
     display: flex;
     cursor: pointer;
-    margin-block-end: 1.8rem;
     align-items: center;
     text-decoration: none !important;
-
+    align-self: flex-start;
     .toggle-box__chevron {
         i {
             transition: all .3s;
@@ -87,10 +100,11 @@ a.toggle-box__header {
     }
 
     .toggle-box__label {
-        font-size: 1.2rem;
-        padding: 0 1rem 0 0.8rem;
-        color: var(--color-label-text);
+        font-size: var(--text-size-x-small);
+        padding: 0 var(--space--2) 0 var(--space--1);
+        color: var(--color-text-light);
         text-transform: uppercase;
+        transition: color 0.2s ease;
     }
 
     .toggle-box__line {
@@ -101,7 +115,8 @@ a.toggle-box__header {
     }
 
     &:hover {
-        .toggle-box__label {
+        .toggle-box__label,
+         {
             color: var(--sd-colour-interactive);
             text-decoration: none !important;
         }
@@ -115,7 +130,6 @@ a.toggle-box__header {
         .toggle-box__chevron {
             box-shadow: 0 0 0 3px $sd-colour--focus-shadow;
         }
-
         .toggle-box__label {
             color: var(--sd-colour-interactive);
         }
@@ -127,30 +141,33 @@ a.toggle-box__header {
 }
 
 .toggle-box__content-wraper {
-    transition: all ease-out .5s;
+    grid-row: 2 / 3;
+    transition: grid-template-rows 0.2s ease;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    overflow: hidden;
 }
 
-.toggle-box__content {  
-    animation: fadeIn 0.3s ease-in 0s 1;
+.toggle-box__content {
+    overflow-y: auto;
+    padding-block-start: 1.8rem;
+    flex:1;
 }
 
 // Buttons
 .toggle-box__button {
     color: $grayLight;
     cursor: pointer;
-
     i {
         color: $grayLight;
         margin-inline-end: 0.5rem;
         vertical-align: text-bottom;
     }
-    
     &:hover {
         text-decoration: none;
         color: $white;
         i { color: $white; }
     }
 }
-
-
-

package/app/styles/components/_sd-collapse-box.scss

@@ -140,3 +140,116 @@
         align-items: center;
     }
 }
+
+// NEW COLLAPSE BOX
+.new-collapse-box {
+    --collapse-box-clor-bg: var(--sd-colour-panel-bg--100);
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 0fr auto;
+    border-radius: var(--b-radius--small);
+    position: relative;
+    overflow: hidden;
+    transition: all 0.2s ease;
+    outline: 1px solid var(--sd-colour-line--x-light);
+}
+.new-collapse-box__header {
+    grid-row: 1 / 2;
+    height: auto;
+    padding: 0;
+    overflow: hidden;
+    transition: all 0.2s ease;
+}
+.new-collapse-box__content {
+    grid-row: 2 / 3;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    overflow: hidden;
+    padding-block: 0;
+    background-color: var(--sd-colour-panel-bg--100);
+    transition: grid-template-rows 0.2s ease;
+}
+.new-collapse-box {
+    &.new-collapse-box--open {
+        grid-template-rows: auto 1fr auto;
+        .new-collapse-box__content {
+            > .new-collapse-box__content-inner {
+                animation: fadeIn 0.3s ease-in 0s 1;
+                overflow-y: auto;
+                .new-collapse-box { // Nested -- collapse-box inside a parent collapse-box
+                    &.new-collapse-box--open {
+                        .new-collapse-box__content {
+                            .new-collapse-box__content-inner {
+                                animation: fadeIn2 0.3s ease-in 0s 1;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        &:focus-within {
+            outline-color: var(--sd-colour-interactive);
+        }
+    }
+    .sd-list-item {
+        border-radius: var(--b-radius--small) var(--b-radius--small) 0 0;
+
+        + .sd-list-item {
+            border-block-start: none;
+        }
+
+        .sd-list-item__border {
+            border-radius: var(--b-radius--small) 0 0 0;
+        }
+    }
+}
+.new-collapse-box__divider {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    min-width: 100%;
+    background: linear-gradient(to bottom, transparent 50%, var(--collapse-box-clor-bg) 50%);
+    padding-inline: 0;
+    margin-inline: 0;
+    margin-block-start: -9px;
+    margin-block-end: 8px;
+    border-block-start: 0;
+    border-block-end: 0;
+    border-inline-start: 0;
+    border-inline-end: 0;
+    border-block-start-color: var(--sd-colour-line--light);
+    border-style: solid;
+    &::before,
+    &::after {
+        content: "";
+        position: relative;
+        inset-block-start: 50%;
+        width: 50%;
+        border-block-start: 1px solid transparent;
+        border-top-color: transparent;
+        border-top-color: inherit;
+        border-block-end: 0;
+        border-inline-start: 0;
+        border-inline-end: 0;
+        transform: translateY(50%);
+        border-style: inherit;
+    }
+    .new-collapse-box__divider-label {
+        background-color: var(--collapse-box-button-color-bg-default);
+        color: var(--collapse-box-button-color-fg-default);
+        transition: all 0.2s ease;
+    }
+    &:hover {
+        border-block-start-color: var(--sd-colour-line--medium);
+        .new-collapse-box__divider-label {
+            background-color: var(--collapse-box-button-color-bg-hover);
+            color: var(--collapse-box-button-color-fg-hover);
+            transition: all 0.2s ease;
+        }           
+    }
+}

package/app/styles/components/_subnav.scss

@@ -12,7 +12,6 @@
     align-items: center;
     color: $sd-text;
     flex-shrink: 0;
-    flex-grow: 1;
     
     .sd-check__group {
         padding: 0;

package/app/styles/design-tokens/_design-tokens-general.scss

@@ -78,10 +78,11 @@
     --sd-shadow--z4: 0 0 0 1px var(--sd-shadow-outline), 0 2px 10px hsla(0, 0%, 0%, 0.2), 0 6px 16px hsla(0, 0%, 0%, 0.3), 0 0 1px hsla(0, 0%, 0%, 0.1);
 
     // DROP-SHADOW Filter
-    --sd-drop-shadow--z1: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 3px hsla(0, 0%, 0%, 0.18)) drop-shadow(0 0 1px rhsla(0, 0%, 0%, 0.12));
-    --sd-drop-shadow--z2: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 4px hsla(0, 0%, 0%, 0.18)) drop-shadow(0 2px 6px rhsla(0, 0%, 0%, 0.14)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.1));
-    --sd-drop-shadow--z3: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 6px hsla(0, 0%, 0%, 0.18)) drop-shadow(0 3px 8px rhsla(0, 0%, 0%, 0.26)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.1));
-    --sd-drop-shadow--z4: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 2px 10px hsla(0, 0%, 0%, 0.24)) drop-shadow(0 6px 16px rhsla(0, 0%, 0%, 0.32)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.1));
+    --sd-drop-shadow--z1: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 3px hsla(0, 0%, 0%, 0.18)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.12));
+    --sd-drop-shadow--z2: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 4px hsla(0, 0%, 0%, 0.18)) drop-shadow(0 2px 6px hsla(0, 0%, 0%, 0.14)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.1));
+    --sd-drop-shadow--z3: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 6px hsla(0, 0%, 0%, 0.18)) drop-shadow(0 3px 8px hsla(0, 0%, 0%, 0.26)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.1));
+    --sd-drop-shadow--z4: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 2px 10px hsla(0, 0%, 0%, 0.24)) drop-shadow(0 6px 16px hsla(0, 0%, 0%, 0.32)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.1));
+    --sd-drop-shadow--none: drop-shadow(0 0 0 transparent);
 
     // FORM ELEMENTS
     // Size 
@@ -104,12 +105,25 @@
 
 [data-theme="dark-ui"],
 .dark-ui {
-    --sd-shadow-outline: hsl(214, 13%, 60%, 0.14);
+    --sd-shadow-outline: hsl(214, 13%, 60%, 0.28);
     --sd-shadow-outline--2: hsl(214, 13%, 60%, 0.1);
     --sd-shadow__dropdown: 0 0 0 1px var(--sd-shadow-outline), 0 2px 10px hsla(0, 0%, 0%, 0.6), 0 3px 1px -2px hsla(0, 0%, 0%, 0.2);
     --sd-shadow__modal: 0 0 0 1px var(--sd-shadow-outline), 0 0 8px 2px hsla(0, 0%, 0%, 0.4);
     --sd-shadow__toast: 0 0 0 1px var(--sd-shadow-outline--2), 0 2px 4px hsla(0, 0%, 0%, 0.24), 0 8px 12px hsla(0, 0%, 0%, 0.26);
     --sd-shadow__menu-item--focus-inner: inset 0 0 0 4px var(--sd-colour-interactive--alpha-20), inset 0 0 0 1px var(--sd-colour-interactive--alpha-50);
+
+    // SHADOW
+    --sd-shadow--z1: 0 0 0 1px var(--sd-shadow-outline), 0 1px 3px hsla(0, 0%, 0%, 0.36), 0 0 1px hsla(0, 0%, 0%, 0.2);
+    --sd-shadow--z2: 0 0 0 1px var(--sd-shadow-outline), 0 1px 4px hsla(0, 0%, 0%, 0.36), 0 2px 6px hsla(0, 0%, 0%, 0.24), 0 0 1px hsla(0, 0%, 0%, 0.2);
+    --sd-shadow--z3: 0 0 0 1px var(--sd-shadow-outline), 0 1px 6px hsla(0, 0%, 0%, 0.36), 0 3px 8px hsla(0, 0%, 0%, 0.48), 0 0 1px hsla(0, 0%, 0%, 0.2);
+    --sd-shadow--z4: 0 0 0 1px var(--sd-shadow-outline), 0 2px 10px hsla(0, 0%, 0%, 0.4), 0 6px 16px hsla(0, 0%, 0%, 0.6), 0 0 1px hsla(0, 0%, 0%, 0.2);
+
+    // DROP-SHADOW Filter
+    --sd-drop-shadow--z1: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 3px hsla(0, 0%, 0%, 0.38)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.2));
+    --sd-drop-shadow--z2: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 4px hsla(0, 0%, 0%, 0.38)) drop-shadow(0 2px 6px hsla(0, 0%, 0%, 0.28)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.2));
+    --sd-drop-shadow--z3: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 6px hsla(0, 0%, 0%, 0.38)) drop-shadow(0 3px 8px hsla(0, 0%, 0%, 0.50)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.2));
+    --sd-drop-shadow--z4: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 2px 10px hsla(0, 0%, 0%, 0.44)) drop-shadow(0 6px 16px hsla(0, 0%, 0%, 0.64)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.2));
+    
 }
 
 .sd-top-menu,

package/app/styles/design-tokens/_new-colors.scss

@@ -368,7 +368,11 @@
     --sd-colour-state--in-progress: var(--sd-colour-highlight);
     --sd-colour-state--done: var(--sd-colour-success);
 
-
+    // New Collapsible Box
+    --collapse-box-button-color-bg-default: hsla(var(--sd-colour-cool-grey-l--85), 1);
+    --collapse-box-button-color-bg-hover: hsla(var(--sd-colour-cool-grey-l--80), 1);
+    --collapse-box-button-color-fg-default: var(--color-text);
+    --collapse-box-button-color-fg-hover: var(--color-text);
 }
 
 
@@ -531,6 +535,12 @@
     --sd-colour-state--default: var(--color-text-lighter);
     --sd-colour-state--in-progress: var(--sd-colour-highlight);
     --sd-colour-state--done: var(--sd-colour-success);
+
+    // New Collapsible Box
+    --collapse-box-button-color-bg-default: hsla(var(--sd-colour-cool-grey-l--25), 1);
+    --collapse-box-button-color-bg-hover: hsla(var(--sd-colour-cool-grey-l--30), 1);
+    --collapse-box-button-color-fg-default: var(--color-text-light);
+    --collapse-box-button-color-fg-hover: var(--color-text);
 }
 
 

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

@@ -1365,3 +1365,17 @@
         opacity: 0;
     }
 }
+
+.sd__input__time-picker-v2 {
+    display: flex;
+}
+
+.input-wrapper__time-picker-v2 {
+    display: flex;
+    align-items: center;
+}
+
+.time-picker-v2-suffix {
+    padding: 0 8px;
+    font-size: 1.6rem;
+}

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

@@ -700,6 +700,9 @@ $planningEditor-width: 53rem;
     grid-template-columns: [slideInLeft] auto [mainContent] 1fr [slideInRight] auto [overlayContainer] 0;
     grid-template-rows: [headerToolbar] auto [contentBlock] 1fr;
     overflow: auto;
+    &.sd-main-content-grid--full-height {
+        height: 100%;
+    }
 }
 
 .sd-main-content-grid__header {

package/app-typescript/components/DatePicker.tsx

@@ -37,6 +37,9 @@ interface IDatePickerBase extends IInputWrapper {
 interface IDatePicker extends IDatePickerBase {
     value: Date | null;
     onChange(valueNext: Date | null): void;
+    maxDate?: Date;
+    minDate?: Date;
+    showButtonBar?: boolean;
     'data-test-id'?: string;
 }
 
@@ -157,6 +160,7 @@ export class DatePicker extends React.PureComponent<IDatePicker, IState> {
                 tabindex={this.props.tabindex}
             >
                 <Calendar
+                    showButtonBar={this.props.showButtonBar}
                     inputId={this.htmlId}
                     ariaLabelledBy={this.htmlId + 'label'}
                     ref={(ref) => {
@@ -208,6 +212,8 @@ export class DatePicker extends React.PureComponent<IDatePicker, IState> {
                     )}
                     appendTo={document.body} // making it work inside `overflow:hidden`
                     disabled={this.props.disabled}
+                    minDate={this.props.minDate}
+                    maxDate={this.props.maxDate}
                     onBlur={(event) => {
                         // @ts-ignore: Object is possibly 'null'.
                         if (!event?.target.value) {

package/app-typescript/components/Layouts/LayoutContainer.tsx

@@ -1,13 +1,19 @@
 import * as React from 'react';
+import classNames from 'classnames';
 
 interface IProps {
     children?: React.ReactNode;
+    fullHeight?: boolean;
 }
 
 export class LayoutContainer extends React.PureComponent<IProps> {
     render() {
+        const classes = classNames('sd-content-wrapper__main-content-area sd-main-content-grid comfort', {
+            'sd-main-content-grid--full-height': this.props.fullHeight,
+        },
+    );
         return (
-            <div className='sd-content-wrapper__main-content-area sd-main-content-grid comfort'>
+            <div className={classes}>
                 {this.props.children}
             </div>
         );

package/app-typescript/components/Layouts/PageLayout.tsx

@@ -19,12 +19,13 @@ interface IProps {
     rightPanelOpen?: boolean;
     leftPanel?: React.ReactNode;
     leftPanelOpen?: boolean;
+    fullHeight?: boolean; // For cases where the parent container is not display: grid;
 }
 
 export class PageLayout extends React.PureComponent<IProps> {
     render() {
         return (
-            <LayoutContainer>
+            <LayoutContainer fullHeight={this.props.fullHeight}>
                 {this.props.header && (
                     <HeaderPanel>
                         {this.props.header}