superdesk-ui-framework 5.0.3 → 5.0.5

package/app/scripts/helpers/dropdown.helper.js

@@ -192,6 +192,15 @@ angular.module('superdesk-ui.helper.dropdown', ['superdesk-ui.helper.position'])
             }
 
             $animate[isOpen ? 'addClass' : 'removeClass'](self.$element, openClass).then(() => {
+                // NOTE: this checks whether there is at least one dropdown open - not only this instance
+                const legacyAngularDropdownOpen = document.querySelector('.dropdown.open') != null;
+
+                if (legacyAngularDropdownOpen) {
+                    document.body.classList.add('legacyAngularDropdownOpen');
+                } else {
+                    document.body.classList.remove('legacyAngularDropdownOpen');
+                }
+
                 if (angular.isDefined(isOpen) && isOpen !== wasOpen) {
                     toggleInvoker($scope, {open: !!isOpen});
                 }

package/app/styles/_buttons.scss

@@ -372,6 +372,7 @@ $icn-button-focus-box-shadow: 0 0 0 2px $sd-colour--focus-shadow;
     [class^="icon-"], [class*=" icon-"] {
         color: var(--color-icon-default) !important;
         vertical-align: baseline !important;
+        pointer-events: none;
     }
 
     &:hover {
@@ -401,8 +402,10 @@ $icn-button-focus-box-shadow: 0 0 0 2px $sd-colour--focus-shadow;
         }
     }
 
-    &--disabled {
+    &--disabled,
+    &:disabled {
         opacity: $icn-button-opacity-disabled;
+        pointer-events: none;
 
         &:hover, &:active, &:focus-visible {
             background-color: transparent !important;

package/app/styles/_helpers.scss

@@ -1866,21 +1866,22 @@ h6 {
 
 // LINE HIGHT
 .line-height-1 {
-    line-height: 1;
+    line-height: var(--l-height-none);
 }
 .line-height-xs {
-    line-height: 1.1;
+    line-height: var(--l-height-xs);
 }
 .line-height-sm {
-    line-height: 1.2;
+    line-height: var(--l-height-sm);
 }
 .line-height-md {
-    line-height: 1.4;
+    line-height: var(--l-height-md);
 }
 .line-height-lg {
-    line-height: 1.5;
+    line-height: var(--l-height-lg);
 }
 
+
 // 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;
@@ -2204,6 +2205,8 @@ h6 {
     container-type: inline-size;
     container-name: left-panel;
 }
+
+
 .new-form-layout {
     --form-group-gap: var(--gap-5);
     --form-layout-gap: var(--gap-4);
@@ -2216,22 +2219,38 @@ h6 {
     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;
+    }
 }
 
 @container left-panel (width <= 900px) {

package/app/styles/_popover.scss

@@ -1,9 +1,9 @@
 .sd-popover {
-    background: var(--sd-colour-bg--05);
-    color: #fff;
-    padding: 8px 12px 12px;
-    border-radius: $border-radius__base--medium;
-    box-shadow: 0 3px 7px rgba(0,0,0,0.3);
+    background: var(--color-surface-base);
+    color: var(--color-text-default);
+    padding: var(--space--1) var(--space--1-5) var(--space--1-5);
+    border-radius: var(--b-radius--medium);
+    box-shadow: var(--sd-shadow--z4);
     max-width: 320px !important;
 }
 
@@ -11,15 +11,15 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-block-end: 4px;
+    margin-block-end: var(--space--0-5);
     min-height: 20px;
 }
 
 .sd-popover__title {
-    font-size: 11px;
+    font-size: var(--text-size-xx-small);
     line-height: 1;
     text-transform: uppercase;
-    color: #ccc;
+    color: var(--color-text-muted);
     padding: 0;
     margin: 0;
 }

package/app/styles/_tooltips.scss

@@ -340,3 +340,86 @@
 .p-tooltip-right {
 	margin-inline-start: 8px;
 }
+
+
+
+
+// NEW TOOLTIP STYLES ----------------------------------------------------------------------------
+
+.tooltip {
+	--tooltip-arrow_border: 6px;
+	margin: calc(var(--tooltip-arrow_border) / 2);
+	border-radius: var(--b-radius--medium);
+	padding: var(--space--1) var(--space--1-5);
+	font-size: var(--text-size-small);
+	position: relative;
+	background-color: var(--sd-colour-background__tooltip);
+	box-shadow: var(--sd-shadow--z3);
+	color: var(--color-text-ondark);
+	opacity: 1;
+	transition: opacity 400ms ease-out, margin 200ms ease-out;
+	transition-behavior: allow-discrete;
+
+	@starting-style {
+		opacity: 0;
+	}
+
+	&::before {
+		content: '';
+		border: var(--tooltip-arrow_border) solid transparent;
+		border-width: var(--tooltip-arrow_border);
+		z-index: 1001;
+		user-select: none;
+		pointer-events: none;
+		position: absolute;
+		overflow: hidden;
+	}
+}
+
+[data-popper-placement^="top"] {
+    .tooltip {   
+		margin-block-end: var(--tooltip-arrow_border);
+        &::before {   
+            inset-block-end: calc(var(--tooltip-arrow_border) * -1);
+            inset-inline-start: calc(50% - var(--tooltip-arrow_border));
+            border-bottom-width: 0;
+            border-top-color: var(--sd-colour-background__tooltip);
+        }
+    }
+}
+
+[data-popper-placement^="bottom"] {
+    .tooltip {
+        margin-block-start: var(--tooltip-arrow_border);
+        &::before {
+            inset-block-start: calc(var(--tooltip-arrow_border) * -1);
+            inset-inline-start: calc(50% - var(--tooltip-arrow_border));
+            border-top-width: 0;
+            border-bottom-color: var(--sd-colour-background__tooltip);
+        }
+    }
+}
+
+[data-popper-placement^="left"] {
+    .tooltip {
+        margin-inline-end: var(--tooltip-arrow_border);
+        &::before {
+            inset-inline-end: calc(var(--tooltip-arrow_border) * -1);
+            inset-block-start: calc(50% - var(--tooltip-arrow_border));
+            border-right-width: 0;
+            border-left-color: var(--sd-colour-background__tooltip);
+        }
+    }
+}
+
+[data-popper-placement^="right"] {
+    .tooltip {
+        margin-inline-start: var(--tooltip-arrow_border);
+        &::before {
+            inset-inline-start: calc(var(--tooltip-arrow_border) * -1);
+            inset-block-start: calc(50% - var(--tooltip-arrow_border));
+            border-left-width: 0;
+            border-right-color: var(--sd-colour-background__tooltip);
+        }
+    }
+}

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

@@ -70,6 +70,12 @@
     --text-size-x-large: calc(var(--text-size--base) * 2.4); // 24px;
     --text-size-xx-large: calc(var(--text-size--base) * 3.2); // 32px;
 
+    // LINE HEIGHT
+    --l-height-none: 1;
+    --l-height-xs: 1.1;    
+    --l-height-sm: 1.2;
+    --l-height-md: 1.4;
+    --l-height-lg: 1.5;
 
     // SHADOW
     --sd-shadow--z1: 0 0 0 1px var(--sd-shadow-outline), 0 1px 3px hsla(0, 0%, 0%, 0.16), 0 0 1px hsla(0, 0%, 0%, 0.1);

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

@@ -8,8 +8,9 @@ $checkButtonBorderColorHover: var(--sd-colour-line--strong);
 $checkButtonBorderRadius: $border-radius__base--small;
 
 @mixin check-base {
-    width: 1.6rem;
-    height: 1.6rem;
+    --check-size: 1.6rem;
+    width: var(--check-size);
+    height: var(--check-size);
     display: inline-block;
     position: relative;
     background: transparent;
@@ -17,6 +18,7 @@ $checkButtonBorderRadius: $border-radius__base--small;
     vertical-align: middle;
     font-family: $baseFontFamily;
     transition: all 0.2s ease-out;
+    flex: 0 0 var(--check-size);
 }
 
 .sd-checkbox {
@@ -132,7 +134,8 @@ $checkButtonBorderRadius: $border-radius__base--small;
     }
 
     i + label {
-        margin-inline-start: 8px;
+        margin-inline-start: var(--space--1);
+        font-size: var(--text-size-small);
     }
 
     &::after {
@@ -383,7 +386,7 @@ $checkButtonBorderRadius: $border-radius__base--small;
     }
 
     i + .sd-check-button__text-label {
-        margin-inline-start: $sd-base-increment;
+        margin-inline-start: var(--space--1);
     }
 
     &:hover {
@@ -501,7 +504,8 @@ $checkButtonBorderRadius: $border-radius__base--small;
 
     .sd-check-new + label,
     .sd-radio-new + label {
-        margin-inline-start: $sd-base-increment;
+        margin-inline-start: var(--space--1);
+        font-size: var(--text-size-small);
     }
 
     .sd-check-new + label:empty,

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

@@ -781,7 +781,7 @@ input[type="color" i].sd-input__color-input::-webkit-color-swatch {
     margin: 0;
     display: grid;
     grid-template-columns: auto 1fr auto;
-    grid-template-rows: $form-label-height auto auto;
+    grid-template-rows: $form-label-height auto 1fr;
     grid-gap: 0;
     position: relative;
     align-self: stretch;
@@ -940,6 +940,12 @@ input[type="color" i].sd-input__color-input::-webkit-color-swatch {
         margin: 0;
         grid-row: 1/2;
         grid-column: 2/4;
+        span {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            max-width: 100%;
+        }
     }
 
     .sd-input__label--required::after {

package/app-typescript/components/Autocomplete.tsx

@@ -126,7 +126,7 @@ export class Autocomplete extends React.Component<IProps, IState> {
                 <div className={classes}>
                     {this.props.label && !this.props.isSearchField ? (
                         <label className="sd-input__label" htmlFor={this.htmlId}>
-                            {this.props.label}
+                            <span>{this.props.label}</span>
                         </label>
                     ) : null}
 

package/app-typescript/components/DatePicker.tsx

@@ -304,6 +304,7 @@ export class DatePickerISO extends React.PureComponent<IDatePickerISO> {
                 }}
                 disabled={this.props.disabled}
                 preview={this.props.preview}
+                hideClearButton={this.props.hideClearButton}
                 headerButtonBar={this.props.headerButtonBar}
                 dateFormat={this.props.dateFormat}
                 locale={this.props.locale}

package/app-typescript/components/Form/InputWrapper.tsx

@@ -95,7 +95,7 @@ export class InputWrapper extends React.Component<IProps, IState> {
                     id={this.props.htmlId + 'label'}
                     tabIndex={this.props.tabindex === undefined ? undefined : -1}
                 >
-                    {this.props.label}
+                    <span>{this.props.label}</span>
                 </label>
                 <div className="sd-input__input-container">{this.props.children}</div>
                 {this.props.maxLength && (

package/app-typescript/components/Popover.tsx

@@ -7,6 +7,7 @@ interface IProps {
     triggerSelector: string; // CSS selector for an element that will be used to toggle the popover.
     displayCloseButton?: boolean; // defaults to true
     placement?: PopperOptions['placement']; // defaults to auto
+    theme?: 'light-ui' | 'dark-ui';
 }
 
 export class Popover extends React.Component<IProps> {
@@ -14,6 +15,7 @@ export class Popover extends React.Component<IProps> {
         return (
             <Positioner
                 triggerSelector={this.props.triggerSelector}
+                theme={this.props.theme}
                 placement={this.props.placement ?? 'auto'}
                 className="sd-popover"
             >

package/app-typescript/components/SelectGrid.tsx

@@ -171,7 +171,9 @@ export class SelectGrid extends React.PureComponent<IProps, IState> {
                     aria-label={this.props.label}
                     key={this.props.label}
                 >
-                    <label className="sd-input__label">{this.props.label}</label>
+                    <label className="sd-input__label">
+                        <span>{this.props.label}</span>
+                    </label>
                     <TriggerTemplate onClick={this.mountPopup} />
                 </div>
                 <OverlayPanel

package/app-typescript/components/Tooltip.tsx

@@ -37,7 +37,7 @@ export class Tooltip extends React.PureComponent<IProps> {
             return (
                 <TooltipV2 content={this.props.text ?? ''} placement={flowToPlacement(this.props.flow)}>
                     {({attributes}) => (
-                        <div {...attributes} style={{display: 'inline-flex'}}>
+                        <div {...attributes} style={{display: 'contents'}}>
                             {this.props.children}
                         </div>
                     )}

package/app-typescript/components/TooltipV2.tsx

@@ -24,27 +24,16 @@ export class TooltipV2 extends React.PureComponent<IPropsTooltipV2> {
                 placement={this.props.placement ?? 'top'}
                 component={() => {
                     return (
-                        <div data-theme="dark-ui">
-                            <div
-                                style={{
-                                    background: 'var(--color-bg-100)',
-                                    color: 'var(--color-text)',
-                                    borderRadius: 'var(--b-radius--medium)',
-                                    paddingInline: 'var(--space--0-5)',
-                                    fontSize: 'var(--text-size-x-small)',
-                                    margin: 2,
-                                }}
-                            >
-                                {(() => {
-                                    if (typeof this.props.content === 'string') {
-                                        return <span>{this.props.content}</span>;
-                                    } else {
-                                        const Component = this.props.content;
+                        <div className="tooltip">
+                            {(() => {
+                                if (typeof this.props.content === 'string') {
+                                    return <span>{this.props.content}</span>;
+                                } else {
+                                    const Component = this.props.content;
 
-                                        return <Component />;
-                                    }
-                                })()}
-                            </div>
+                                    return <Component />;
+                                }
+                            })()}
                         </div>
                     );
                 }}
@@ -63,7 +52,7 @@ export class TooltipV2 extends React.PureComponent<IPropsTooltipV2> {
                         return this.props.children({attributes});
                     } else {
                         return (
-                            <span {...attributes} style={{display: 'inline-flex'}}>
+                            <span {...attributes} style={{display: 'contents'}}>
                                 {this.props.children}
                             </span>
                         );

package/app-typescript/components/_Positioner.tsx

@@ -93,6 +93,7 @@ class PopperWrapper extends React.Component<IPropsPopperWrapper> {
                 }}
                 tabIndex={0}
                 role="dialog"
+                data-theme={this.props.theme}
                 aria-labelledby="popoverTitle"
                 onKeyDown={(event) => {
                     if (event.key === 'Escape') {
@@ -111,6 +112,7 @@ interface IPropsPositioner {
     triggerSelector: string;
     placement: PopperOptions['placement'];
     className?: string;
+    theme?: 'light-ui' | 'dark-ui';
 }
 
 interface IStatePositioner {

package/dist/components/Popover.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {Popover, PropsList, Prop} from '../../../app-typescript';
+import {Popover, PropsList, Prop, Button, ButtonGroup} from '../../../app-typescript';
 
 import * as Markup from '../../js/react';
 
@@ -23,13 +23,20 @@ export class PopoverDoc extends React.Component {
                     <Markup.ReactMarkupPreview>
                         <div className="docs-page__content-row docs-page__content-row--no-margin">
                             <div className="form__row">
-                                <button
-                                    className="btn btn-default btn--small"
-                                    aria-haspopup="true"
-                                    id="button-view-content"
-                                >
-                                    Open popover
-                                </button>
+                                <ButtonGroup>
+                                    <Button
+                                        aria-haspopup="true"
+                                        id="button-view-content"
+                                        text="Open popover"
+                                        onClick={() => false}
+                                    />
+                                    <Button
+                                        aria-haspopup="true"
+                                        id="button-view-content-dark"
+                                        text="Open popover"
+                                        onClick={() => false}
+                                    />
+                                </ButtonGroup>
 
                                 <Popover
                                     triggerSelector="#button-view-content"
@@ -38,6 +45,15 @@ export class PopoverDoc extends React.Component {
                                 >
                                     Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur.
                                 </Popover>
+                                <Popover
+                                    triggerSelector="#button-view-content-dark"
+                                    title="Popover test"
+                                    placement="top-end"
+                                    theme="dark-ui"
+                                >
+                                    Enforce a dark theme. Donec sed odio dui. Aenean lacinia bibendum nulla sed
+                                    consectetur.
+                                </Popover>
                             </div>
                         </div>
                     </Markup.ReactMarkupPreview>
@@ -83,6 +99,13 @@ export class PopoverDoc extends React.Component {
                         default="auto"
                         description="Define the placement of the Popover."
                     />
+                    <Prop
+                        name="theme"
+                        isRequired={false}
+                        type="light-ui | dark-ui"
+                        default="/"
+                        description="Define the theme of the Popover. It will inherit the default theme if not set."
+                    />
                 </PropsList>
             </section>
         );

package/dist/components/Tooltips.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import * as Markup from '../../js/react';
 
-import {Tooltip, Prop, PropsList, Button} from '../../../app-typescript';
+import {Tooltip, Prop, PropsList, Button, ButtonGroup} from '../../../app-typescript';
 
 export default class TooltipDoc extends React.Component {
     render() {
@@ -20,18 +20,20 @@ export default class TooltipDoc extends React.Component {
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <div className="docs-page__content-row docs-page__content-row--no-margin">
-                            <Tooltip content="I'm on top">
-                                <Button text="top" onClick={() => false} />
-                            </Tooltip>
-                            <Tooltip content="I'm at the bottom" placement="bottom">
-                                <Button text="bottom" onClick={() => false} />
-                            </Tooltip>
-                            <Tooltip content="I open on the left" placement="left">
-                                <Button text="left" onClick={() => false} />
-                            </Tooltip>
-                            <Tooltip content="Right on!" placement="right">
-                                <Button text="right" onClick={() => false} />
-                            </Tooltip>
+                            <ButtonGroup>
+                                <Tooltip content="I'm on top">
+                                    <Button text="top" onClick={() => false} />
+                                </Tooltip>
+                                <Tooltip content="I'm at the bottom" placement="bottom">
+                                    <Button text="bottom" onClick={() => false} />
+                                </Tooltip>
+                                <Tooltip content="I open on the left" placement="left">
+                                    <Button text="left" onClick={() => false} />
+                                </Tooltip>
+                                <Tooltip content="Right on!" placement="right">
+                                    <Button text="right" onClick={() => false} />
+                                </Tooltip>
+                            </ButtonGroup>
                         </div>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>