superdesk-ui-framework 3.1.5 → 3.1.7

package/app/styles/_expand-button.scss

@@ -0,0 +1,31 @@
+.expand-button {
+    --sd-btn-bg: var(--sd-colour-btn-bg-neutral);
+    --sd-btn-bg--hover: var(--sd-colour-btn-bg-neutral--hover);
+    --sd-btn-bg--active: var(--sd-colour-btn-bg-neutral--active);
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    height: 3.2rem;
+    transition: all 0.2s ease;
+    outline: none;
+    padding-inline: var(--space--0-5);
+    background-color: var(--sd-btn-bg);
+    border-radius: 0 var(--b-radius--medium) var(--b-radius--medium) 0;
+    opacity: 0.75;
+    color: var(--color-text);
+    [class^="icon-"], [class*=" icon-"] {
+        transition: transform 0.2s ease;
+        color: currentColor;
+    }
+    &:hover {
+        padding-inline: var(--space--1);
+    }
+    &:active {
+        opacity: 1;
+    }
+    &.expand-button--expanded {
+        [class^="icon-"], [class*=" icon-"] {
+            transform: rotate(180deg);
+        }
+    }
+}

package/app/styles/_helpers.scss

@@ -288,7 +288,7 @@
     overflow-y: scroll !important;
 }
 
-// Text overflow
+// TEXT OVERFLOW
 .sd-overflow-ellipsis,
 .sd-overflow--ellipsis {
     text-overflow: ellipsis;
@@ -512,140 +512,8 @@ h6 {
     letter-spacing: 0.025em;
 }
 
-// Font weights
 
-.sd-text__light,
-.sd-text--light {
-    font-weight: 300;
-}
-
-.sd-text__normal,
-.sd-text--normal {
-    font-weight: 400;
-}
-
-.sd-text--medium {
-    font-weight: 500;
-}
-
-.sd-text__strong,
-.sd-text--strong {
-    font-weight: 700;
-}
-
-.sd-text--bold {
-    font-weight: 700;
-}
-
-// Font style
-.sd-text__italic,
-.sd-text--italic {
-    font-style: italic;
-}
-
-.sd-text--non-italic {
-    font-style: normal;
-}
-
-// Text alignment
-.sd-text-align--left,
-.sd-text-align--start {
-    text-align: start;
-}
-
-.sd-text__center,
-.sd-text-align--center {
-    text-align: center;
-}
-
-.sd-text__right,
-.sd-text-align--right,
-.sd-text-align--end {
-    text-align: end;
-}
-
-.sd-text-align--justify {
-    text-align: justify;
-}
-
-// Font family
-.sd-text__serif,
-.sd-text--serif {
-    font-family: $baseFontFamilySerif;
-}
-
-.sd-text--sans {
-    font-family: $baseFontFamily;
-}
-
-.sd-text--mono {
-    font-family: $baseFontFamilyMono;
-}
-
-// Word Break
-.sd-word-break--normal {
-    overflow-wrap: normal;
-    word-break: normal;
-}
-
-.sd-word-break--words {
-    overflow-wrap: break-word;
-}
-
-.sd-word-break--all {
-    word-break: break-all;
-}
-
-// Whitespace
-.sd-whitespace--normal {
-    white-space: normal;
-}
 
-.sd-whitespace--nowrap {
-    white-space: nowrap;
-}
-
-.sd-whitespace--pre {
-    white-space: pre;
-}
-
-.sd-whitespace--pre-line {
-    white-space: pre-line;
-}
-
-.sd-whitespace--pre-wrap {
-    white-space: pre-wrap;
-}
-
-// Text Transform
-.sd-txt-transform--uppercase {
-    text-transform: uppercase;
-}
-
-.sd-txt-transform--lowercase {
-    text-transform: lowercase;
-}
-
-.sd-txt-transform--capitalize {
-    text-transform: capitalize;
-}
-
-.sd-txt-transform--none {
-    text-transform: none;
-}
-
-// Text Decoration
-.sd-txt-decoration--underline {
-    text-decoration: underline;
-}
-
-.sd-txt-decoration--line-through {
-    text-decoration: line-through;
-}
-
-.sd-txt-decoration--none {
-    text-decoration: none;
-}
 
 // Line Clamp
 // limit the number of horizontal lines in an elemnt (e.g. <p>)
@@ -777,13 +645,21 @@ h6 {
 
 
 // Margin auto
+
+.m-auto,
+.sd-margin--auto {
+    margin: auto !important;
+}
+
 .ml-auto,
+.ms-auto,
 .sd-margin-l--auto,
 .sd-margin-s--auto {
     margin-inline-start: auto !important;
 }
 
 .mr-auto,
+.me-auto,
 .sd-margin-r--auto,
 .sd-margin-e--auto {
     margin-inline-end: auto !important;
@@ -800,19 +676,18 @@ h6 {
 }
 
 .mlr-auto,
+.mx-auto,
 .sd-margin-x--auto {
     margin-inline-start: auto !important;
     margin-inline-end: auto !important;
 }
 
+.my-auto,
 .sd-margin-y--auto {
     margin-block-start: auto !important;
     margin-block-end: auto !important;
 }
 
-.sd-margin--auto {
-    margin: auto !important;
-}
 
 // MARGINS ---------------------------------------------- //
 // MARGIN (all sides)
@@ -1237,7 +1112,7 @@ h6 {
     padding-block-start: calc(5 * var(--base-increment)) !important;
 }
 // PADDING BLOCK END (bottom)
-.pb--0,
+.pb-0,
 .sd-padding-b--0 {
     padding-block-end: 0 !important;
 }
@@ -1524,36 +1399,277 @@ h6 {
     border-width: 3px;
 }
 
-// Font size
-.sd-font-size--x-small {
+// ==================== TYPOGRAPHY =================== //
+
+// FONT SIZE
+.text-2xs {
+    font-size: calc(var(--text-size--base) * 1); // 12px;
+}
+.sd-font-size--x-small,
+.text-xs {
     font-size: calc(var(--text-size--base) * 1.2); // 12px;
 }
-
-.sd-font-size--small {
+.sd-font-size--small,
+.text-sm {
     font-size: calc(var(--text-size--base) * 1.4); // 14px;
 }
-
-.sd-font-size--medium {
+.sd-font-size--medium ,
+.text-md {
     font-size: calc(var(--text-size--base) * 1.6); // 16px;
 }
-
-.sd-font-size--large {
+.sd-font-size--large,
+.text-lg {
     font-size: calc(var(--text-size--base) * 2); // 20px;
 }
+.sd-font-size--x-large,
+.text-xl {
+    font-size: calc(var(--text-size--base) * 2.4); // 24px;
+}
+.sd-font-size--x-large,
+.text-2xl {
+    font-size: calc(var(--text-size--base) * 3.2); // 32px;
+}
 
-// Text colour
-.sd-text-color--lighter {
+// TEXT COLOR
+.sd-text-color--normal,
+.text-color-normal {
+    color: var(--color-text) !important;
+}
+.sd-text-color--light,
+.text-color-muted {
+    color: var(--color-text-light) !important;
+}
+.sd-text-color--lighter,
+.text-color-subdued {
     color: var(--color-text-lighter) !important;
 }
+.sd-text-color--inverse,
+.text-color-inverse {
+    color: var(--color-text--inverse) !important;
+}
 
-.sd-text-color--light {
-    color: var(--color-text-light) !important;
+// FONT WEIGHTS
+.sd-text__light,
+.sd-text--light,
+.font-light {
+    font-weight: 300;
+}
+.sd-text__normal,
+.sd-text--normal,
+.font-normal {
+    font-weight: 400;
+}
+.sd-text--medium,
+.font-medium {
+    font-weight: 500;
+}
+.sd-text--medium,
+.font-semibold {
+    font-weight: 500;
+}
+.sd-text__strong,
+.sd-text--strong,
+.sd-text--bold,
+.font-bold {
+    font-weight: 700;
+}
+.font-black {
+    font-weight: 900;
 }
 
-.sd-text-color--normal {
-    color: var(--color-text) !important;
+// FONT STYLE
+.sd-text__italic,
+.sd-text--italic,
+.italic {
+    font-style: italic;
 }
 
+.sd-text--non-italic,
+.non-italic {
+    font-style: normal;
+}
+
+// TEXT ALIGN
+.sd-text-align--left,
+.sd-text-align--start,
+.text-start,
+.text-left {
+    text-align: start;
+}
+.sd-text__center,
+.sd-text-align--center,
+.text-center {
+    text-align: center;
+}
+.sd-text__right,
+.sd-text-align--right,
+.sd-text-align--end,
+.text-end {
+    text-align: end;
+}
+.sd-text-align--justify,
+.text-justify {
+    text-align: justify;
+}
+
+// FONT FAMILY
+.sd-text__serif,
+.sd-text--serif {
+    font-family: $baseFontFamilySerif;
+}
+.sd-text--sans {
+    font-family: $baseFontFamily;
+}
+.sd-text--mono {
+    font-family: $baseFontFamilyMono;
+}
+
+// WHITESPACE
+.sd-whitespace--normal,
+.whitespace-normal {
+    white-space: normal;
+}
+.sd-whitespace--nowrap,
+.whitespace-nowrap {
+    white-space: nowrap;
+}
+.sd-whitespace--pre,
+.whitespace-pre {
+    white-space: pre;
+}
+.sd-whitespace--pre-line,
+.whitespace-pre-line {
+    white-space: pre-line;
+}
+.sd-whitespace--pre-wrap,
+.whitespace-pre-wrap {
+    white-space: pre-wrap;
+}
+.whitespace-break-spaces {
+    white-space: break-spaces;
+}
+
+// TEXT TRANSFORM
+.sd-txt-transform--uppercase,
+.text-uppercase {
+    text-transform: uppercase;
+}
+
+.sd-txt-transform--lowercase,
+.text-lowercase {
+    text-transform: lowercase;
+}
+
+.sd-txt-transform--capitalize,
+.text-capitalize {
+    text-transform: capitalize;
+}
+
+.sd-txt-transform--none,
+.text-normal-case {
+    text-transform: none;
+}
+
+// TEXT DECORATION
+.sd-txt-decoration--underline,
+.text-underline {
+    text-decoration: underline;
+}
+.sd-txt-decoration--line-through,
+.text-line-through {
+    text-decoration: line-through;
+}
+.sd-txt-decoration--none,
+.text-no-underline  {
+    text-decoration: none;
+}
+
+// TEXT OVERFLOW
+.sd-overflow-ellipsis,
+.sd-overflow--ellipsis,
+.text-ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.text-clip {
+    text-overflow: clip;
+}
+
+// TEXT WRAP
+.text-wrap {
+    text-wrap: wrap;
+}
+.text-nowrap {
+    text-wrap: clip;
+}
+.text-balance {
+    text-wrap: balance;
+}
+.text-pretty {
+    text-wrap: pretty;
+}
+
+// WORD BREAK
+.sd-word-break--normal,
+.break-normal {
+    overflow-wrap: normal;
+    word-break: normal;
+}
+.sd-word-break--words,
+.break-words {
+    overflow-wrap: break-word;
+}
+.sd-word-break--all,
+.break-all {
+    word-break: break-all;
+}
+
+// LINE CLAMP
+// limit the number of horizontal lines in an elemnt (e.g. <p>)
+// it doesn't work if the element has set flex-grow: 1;
+@mixin line-clamp-base {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+}
+.sd-line-clamp--1,
+.line-clamp-1 {
+    @include line-clamp-base;
+    -webkit-line-clamp: 1;
+}
+.sd-line-clamp--2,
+.line-clamp-2 {
+    @include line-clamp-base;
+    -webkit-line-clamp: 2;
+}
+.sd-line-clamp--3,
+.line-clamp-3 {
+    @include line-clamp-base;
+    -webkit-line-clamp: 3;
+}
+.sd-line-clamp--4,
+.line-clamp-4 {
+    @include line-clamp-base;
+    -webkit-line-clamp: 4;
+}
+.sd-line-clamp--5,
+.line-clamp-5 {
+    @include line-clamp-base;
+    -webkit-line-clamp: 5;
+}
+.sd-line-clamp--6,
+.line-clamp-6 {
+    @include line-clamp-base;
+    -webkit-line-clamp: 6;
+}
+.sd-line-clamp--none,
+.line-clamp-none {
+    -webkit-line-clamp: none;
+}
+
+// ==================================================== //
+
 // Background colours
 .sd-panel-bg--100 {
     background-color: var(--sd-colour-panel-bg--100);
@@ -1644,6 +1760,59 @@ h6 {
 
 // MAX-HEIGHT:
 
+.max-h-5 {
+    max-height: calc(5 * var(--base-increment)) !important;
+}
+.max-h-6 {
+    max-height: calc(6 * var(--base-increment)) !important;
+}
+.max-h-8 {
+    max-height: calc(8 * var(--base-increment)) !important;
+}
+.max-h-10 {
+    max-height: calc(10 * var(--base-increment)) !important;
+}
+.max-h-15 {
+    max-height: calc(15 * var(--base-increment)) !important;
+}
+.max-h-20 {
+    max-height: calc(20 * var(--base-increment)) !important;
+}
+.max-h-25 {
+    max-height: calc(25 * var(--base-increment)) !important;
+}
+.max-h-30 {
+    max-height: calc(30 * var(--base-increment)) !important;
+}
+
 .max-h-full {
     max-height: 100%;
 }
+.max-h-screen {
+    max-height: 100svh;
+}
+
+.gap-0 {
+    gap: var(--gap-0); // 0px
+}
+.gap-0-5 {
+    gap: var(--gap-0-5); // 4px
+}
+.gap-1 {
+    gap: var(--gap-1); // 8px
+}
+.gap-1-5 {
+    gap: var(--gap-1-5); // 12px
+}
+.gap-2 {
+    gap: var(--gap-2); // 16px
+}
+.gap-3 {
+    gap: var(--gap-3); // 24px
+}
+.gap-4 {
+    gap: var(--gap-4); // 32px
+}
+.gap-5 {
+    gap: var(--gap-5); // 40px
+}

package/app/styles/app.scss

@@ -36,6 +36,7 @@
 @import 'table-list';
 @import 'hamburger';
 @import 'drag-handle';
+@import 'expand-button';
 
 // Interface elements
 @import 'interface-elements/side-panel';

package/app/styles/components/_subnav.scss

@@ -12,6 +12,7 @@
     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

@@ -16,13 +16,22 @@
     --space--8: calc(8 * var(--base-increment)); // 64px;
 
     --gap--none: 0; // 0px
-    --gap--x-small: 0.4rem; // 4px
-    --gap--small: 0.8rem; // 8px
-    --gap--medium-small: 1.2rem; // 12px
-    --gap--medium: 1.6rem; // 16px
-    --gap--large: 2.4rem; // 24px;
-    --gap--x-large: 3.2rem; // 32px;
-    --gap--xx-large: 4rem; // 40px;
+    --gap-0: 0;
+    --gap--x-small: calc(0.5 * var(--base-increment)); // 4px
+    --gap-0-5: calc(0.5 * var(--base-increment)); // 4px
+    --gap--small: calc(1 * var(--base-increment)); // 8px
+    --gap-1: calc(1 * var(--base-increment)); // 8px
+    --gap--medium-small: calc(1.5 * var(--base-increment)); // 12px
+    --gap-1-5: calc(1.5 * var(--base-increment)); // 12px
+    --gap--medium: calc(2 * var(--base-increment)); // 16px
+    --gap-2: calc(2 * var(--base-increment)); // 16px
+    --gap--large: calc(3 * var(--base-increment)); // 24px;
+    --gap-3: calc(3 * var(--base-increment)); // 24px;
+    --gap--x-large: calc(4 * var(--base-increment)); // 32px;
+    --gap-4: calc(4 * var(--base-increment)); // 32px;
+    --gap--xx-large: calc(5 * var(--base-increment)); // 40px;
+    --gap-5: calc(5 * var(--base-increment)); // 40px;
+    
     --gap--auto: auto;
 
     // BORDER RADIUS
@@ -53,10 +62,13 @@
 
     // TEXT SIZE
     --text-size--base: 1rem;
+    --text-size-xx-small: calc(var(--text-size--base) * 1); // 10px;
     --text-size-x-small: calc(var(--text-size--base) * 1.2); // 12px;
     --text-size-small: calc(var(--text-size--base) * 1.4); // 14px;
     --text-size-medium: calc(var(--text-size--base) * 1.6); // 16px;
     --text-size-large: calc(var(--text-size--base) * 2); // 20px;
+    --text-size-x-large: calc(var(--text-size--base) * 2.4); // 24px;
+    --text-size-xx-large: calc(var(--text-size--base) * 3.2); // 32px;
 
 
     // SHADOW

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

@@ -604,9 +604,11 @@
     --sd-colour-background__base--30:     hsla(0, 0%, 70%, 1);
   
     --color-text:                         hsla(214, 13%, 20%, 1);
-    --color-text--inverse:                hsla(214, 13%, 98%, 1);
     --color-text-light:                   hsla(214, 13%, 40%, 1);
+    --color-text-muted:                   hsla(214, 13%, 40%, 1);
     --color-text-lighter:                 hsla(214, 13%, 60%, 1);
+    --color-text-subdued:                 hsla(214, 13%, 60%, 1);
+    --color-text--inverse:                hsla(214, 13%, 98%, 1);
     --color-icon-default:                 hsla(214, 13%, 30%, 1);
     --sd-slugline-color:                  hsla(197, 100%, 15%, 1) !important;
     --sd-time-schedule-color:             hsla(268, 100%, 25%, 1);
@@ -687,7 +689,10 @@
     //color:                                hsla(0, 0%, 100%, 1);
     --color-text:                         hsla(0, 0%, 96%, 1);
     --color-text-light:                   hsla(214, 13%, 76%, 1);
+    --color-text-muted:                   hsla(214, 13%, 76%, 1);
     --color-text-lighter:                 hsla(214, 13%, 56%, 1);
+    --color-text-subdued:                 hsla(214, 13%, 56%, 1);
+    --color-text--inverse:                hsla(214, 13%, 20%, 1);
     --color-icon-default:                 hsla(214, 13%, 90%, 1);
     --sd-slugline-color:                  hsla(197, 60%, 75%, 1) !important;
     --sd-time-schedule-color:             hsla(268, 60%, 65%, 1);

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

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

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

@@ -40,6 +40,10 @@ $side-panel-Bg-200: var(--sd-colour-panel-bg--200);
         color: $white;
     }
 
+    .side-panel__header--light {
+        background-color: var(--sd-colour-panel-bg--000);
+    }
+
     .side-panel__header--darker {
         background-color: var(--sd-colour-panel-bg--100);
     }

package/app-typescript/components/IconPicker.tsx

@@ -61,7 +61,7 @@ export class IconPicker extends React.PureComponent<IProps, IState> {
     itemTemplate = ({ item }: { item: IItem | null }) => item ?
         (<>
             <Icon name={item.value} />
-            <span className="sd-text__normal sd-padding-t--1">
+            <span className="sd-text--normal sd-padding-t--1">
                 {item.label}
             </span>
         </>) : null