superdesk-ui-framework 5.0.2 → 5.0.4

package/.mocharc.json

@@ -1,5 +1,5 @@
 {
     "extension": ["ts", ".tsx"],
-    "spec": "app-typescript/components/*.spec.*",
+    "spec": "app-typescript/**/*.spec.*",
     "require": ["ts-node/register", "./mocha-setup.ts"]
 }

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/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/TimePicker/TimePickerPopover.spec.ts

@@ -0,0 +1,163 @@
+import {describe, it} from 'mocha';
+import * as assert from 'assert';
+import {convert12HourTo24Hour, convert24HourTo12Hour, toInternalState} from './TimePickerPopover';
+
+it('should convert all 12-hour times to 24-hour format', () => {
+    // AM times
+    assert.strictEqual(convert12HourTo24Hour(12, 'am'), 0);
+    assert.strictEqual(convert12HourTo24Hour(1, 'am'), 1);
+    assert.strictEqual(convert12HourTo24Hour(2, 'am'), 2);
+    assert.strictEqual(convert12HourTo24Hour(3, 'am'), 3);
+    assert.strictEqual(convert12HourTo24Hour(4, 'am'), 4);
+    assert.strictEqual(convert12HourTo24Hour(5, 'am'), 5);
+    assert.strictEqual(convert12HourTo24Hour(6, 'am'), 6);
+    assert.strictEqual(convert12HourTo24Hour(7, 'am'), 7);
+    assert.strictEqual(convert12HourTo24Hour(8, 'am'), 8);
+    assert.strictEqual(convert12HourTo24Hour(9, 'am'), 9);
+    assert.strictEqual(convert12HourTo24Hour(10, 'am'), 10);
+    assert.strictEqual(convert12HourTo24Hour(11, 'am'), 11);
+
+    // PM times
+    assert.strictEqual(convert12HourTo24Hour(12, 'pm'), 12);
+    assert.strictEqual(convert12HourTo24Hour(1, 'pm'), 13);
+    assert.strictEqual(convert12HourTo24Hour(2, 'pm'), 14);
+    assert.strictEqual(convert12HourTo24Hour(3, 'pm'), 15);
+    assert.strictEqual(convert12HourTo24Hour(4, 'pm'), 16);
+    assert.strictEqual(convert12HourTo24Hour(5, 'pm'), 17);
+    assert.strictEqual(convert12HourTo24Hour(6, 'pm'), 18);
+    assert.strictEqual(convert12HourTo24Hour(7, 'pm'), 19);
+    assert.strictEqual(convert12HourTo24Hour(8, 'pm'), 20);
+    assert.strictEqual(convert12HourTo24Hour(9, 'pm'), 21);
+    assert.strictEqual(convert12HourTo24Hour(10, 'pm'), 22);
+    assert.strictEqual(convert12HourTo24Hour(11, 'pm'), 23);
+});
+
+it('should convert all 24-hour times to 12-hour format', () => {
+    assert.strictEqual(convert24HourTo12Hour(0), 12);
+    assert.strictEqual(convert24HourTo12Hour(1), 1);
+    assert.strictEqual(convert24HourTo12Hour(2), 2);
+    assert.strictEqual(convert24HourTo12Hour(3), 3);
+    assert.strictEqual(convert24HourTo12Hour(4), 4);
+    assert.strictEqual(convert24HourTo12Hour(5), 5);
+    assert.strictEqual(convert24HourTo12Hour(6), 6);
+    assert.strictEqual(convert24HourTo12Hour(7), 7);
+    assert.strictEqual(convert24HourTo12Hour(8), 8);
+    assert.strictEqual(convert24HourTo12Hour(9), 9);
+    assert.strictEqual(convert24HourTo12Hour(10), 10);
+    assert.strictEqual(convert24HourTo12Hour(11), 11);
+    assert.strictEqual(convert24HourTo12Hour(12), 12);
+    assert.strictEqual(convert24HourTo12Hour(13), 1);
+    assert.strictEqual(convert24HourTo12Hour(14), 2);
+    assert.strictEqual(convert24HourTo12Hour(15), 3);
+    assert.strictEqual(convert24HourTo12Hour(16), 4);
+    assert.strictEqual(convert24HourTo12Hour(17), 5);
+    assert.strictEqual(convert24HourTo12Hour(18), 6);
+    assert.strictEqual(convert24HourTo12Hour(19), 7);
+    assert.strictEqual(convert24HourTo12Hour(20), 8);
+    assert.strictEqual(convert24HourTo12Hour(21), 9);
+    assert.strictEqual(convert24HourTo12Hour(22), 10);
+    assert.strictEqual(convert24HourTo12Hour(23), 11);
+});
+
+describe('toInternalState', () => {
+    describe('null/undefined/empty input', () => {
+        it('should return null state for null input', () => {
+            assert.deepStrictEqual(toInternalState(null), {
+                hours: null,
+                minutes: null,
+                seconds: null,
+                period: null,
+            });
+        });
+
+        it('should return null state for undefined input', () => {
+            assert.deepStrictEqual(toInternalState(undefined), {
+                hours: null,
+                minutes: null,
+                seconds: null,
+                period: null,
+            });
+        });
+
+        it('should return null state for empty string', () => {
+            assert.deepStrictEqual(toInternalState(' '), {
+                hours: null,
+                minutes: null,
+                seconds: null,
+                period: null,
+            });
+        });
+    });
+
+    it('should convert 00:00:00 to 12:00:00 am', () => {
+        assert.deepStrictEqual(toInternalState('00:00:00'), {
+            hours: '12',
+            minutes: '00',
+            seconds: '00',
+            period: 'am',
+        });
+    });
+
+    it('should convert 01:30:45 to 01:30:45 am', () => {
+        assert.deepStrictEqual(toInternalState('01:30:45'), {
+            hours: '01',
+            minutes: '30',
+            seconds: '45',
+            period: 'am',
+        });
+    });
+
+    it('should convert 11:59:59 to 11:59:59 am', () => {
+        assert.deepStrictEqual(toInternalState('11:59:59'), {
+            hours: '11',
+            minutes: '59',
+            seconds: '59',
+            period: 'am',
+        });
+    });
+
+    it('should convert 12:00:00 to 12:00:00 pm', () => {
+        assert.deepStrictEqual(toInternalState('12:00:00'), {
+            hours: '12',
+            minutes: '00',
+            seconds: '00',
+            period: 'pm',
+        });
+    });
+
+    it('should convert 13:30:15 to 01:30:15 pm', () => {
+        assert.deepStrictEqual(toInternalState('13:30:15'), {
+            hours: '01',
+            minutes: '30',
+            seconds: '15',
+            period: 'pm',
+        });
+    });
+
+    it('should convert 23:59:59 to 11:59:59 pm', () => {
+        assert.deepStrictEqual(toInternalState('23:59:59'), {
+            hours: '11',
+            minutes: '59',
+            seconds: '59',
+            period: 'pm',
+        });
+    });
+
+    it('should handle time without seconds and default to 00', () => {
+        assert.deepStrictEqual(toInternalState('14:30'), {
+            hours: '02',
+            minutes: '30',
+            seconds: '00',
+            period: 'pm',
+        });
+    });
+
+    it('should handle time without seconds in morning', () => {
+        assert.deepStrictEqual(toInternalState('09:15'), {
+            hours: '09',
+            minutes: '15',
+            seconds: '00',
+            period: 'am',
+        });
+    });
+});