superdesk-ui-framework 4.0.67 → 4.0.68

package/app/styles/_buttons.scss

@@ -242,9 +242,17 @@ $new-button-active-shadow-hollow: inset 0 0 0 1px;
     }
 
     &.btn--icon-only {
+        padding-inline: var(--space--1);
         [class^="icon-"], [class*=" icon-"] {
             margin: 0;
         }
+        &.btn--small {
+            padding-inline: var(--space--0-5);
+        }
+
+        &.btn--large {
+            padding-inline: var(--space--1-5);
+        }
 
         &.btn--icon-only-circle {
             border-radius: $border-radius__base--full;

package/app/styles/_time.scss

@@ -1,9 +1,93 @@
-.time-unit-highlight {
-    background-color: var(--sd-colour-interactive);
-    color: $white;
+.time-picker__input {
+    input[type="time"] {
+        -webkit-appearance: none;
+        -moz-appearance: textfield;
+        appearance: textfield;
+        &::-webkit-calendar-picker-indicator {
+            display: none;
+        }
+    }
+    position: relative;
+    &:has(.time-picker__icon-wrapper) {
+        .sd-input__input:not(.p-calendar) {
+            padding-inline-end: var(--space--4);
+        }
+    }
+    .time-picker__icon-wrapper {
+        position: relative;
+        height: 2.4rem;
+        width: 2.4rem;
+        position: absolute;
+        inset-block-start: var(--space--0-5);
+        inset-inline-end: var(--space--0-5);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 1;
+        pointer-events: none;
+        
+        .clear-time-picker {
+            position: absolute;
+            inset-block-start: 0;
+            inset-inline-end: 0;
+            transition: opacity 0.2s ease;
+            z-index: 2;
+            opacity: 0;
+        }
+    }
+    &:has(.sd-input__input--has-value) {
+        .icon-time {
+            opacity: 1;
+            transition: opacity 0.2s ease;
+        }
+        .time-picker__icon-wrapper {
+            pointer-events: all;
+        }
+        &:hover {
+            .icon-time {
+                opacity: 0;
+            }
+            .clear-time-picker {
+                opacity: 1;
+            }
+        }
+        &:focus-within {
+            .icon-time {
+                opacity: 0;
+            }
+            .clear-time-picker {
+                opacity: 1;
+            }
+        }
+    }
+}
+.time-picker--date-time { // only for the DateTimePicker component. Disable the clearing of the time input only.
+    .time-picker__input,
+    .time-picker__input:hover,
+    .time-picker__input:focus-within {
+        .time-picker__icon-wrapper {
+            pointer-events: none;
+        }
+        .clear-time-picker {
+            display: none;
+        }
+        .icon-time, {
+            opacity: 1;
+        }
+    }
 }
 
+
 .time-unit {
+    display: flex;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border-radius: var(--b-radius--x-small);
+    font-weight: normal;
+    margin-inline-start: var(--gap--x-small);
+    margin-inline-end: var(--gap--x-small);
+    transition: var(--transition__menu-item);
     transition: all ease 0.2s;
 
     &:hover {
@@ -14,15 +98,16 @@
 
     &:active {
         background-color: var(--sd-colour-interactive--alpha-20);
+
     }
 
-    display: flex;
-    justify-content: center;
-    width: 32px;
-    height: 32px;
-    border-radius: var(--b-radius--x-small);
-    font-weight: normal;
-    margin-inline-start: var(--gap--x-small);
-    margin-inline-end: var(--gap--x-small);
-    transition: var(--transition__menu-item);
+    &:focus-visible {
+        outline: 2px solid var(--sd-colour-interactive--alpha-40);
+    }
+
+    &.time-unit-highlight,
+    &.time-unit-highlight:hover {
+        background-color: var(--sd-colour-interactive);
+        color: var(--color-text-ondark);
+    }
 }

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

@@ -124,7 +124,7 @@
     &.form-label--required {
         &::after {
             margin-inline-start: 0.2rem;
-            color: #e41b21;
+            color: var(--color-warning-default);
             content: "*";
             vertical-align: top;
             font-size: 1.2rem;
@@ -762,7 +762,7 @@
     }
 
     .sd-input__input-container:has(input[type="time"]) {
-        min-width: 110px;
+        min-width: min-content;
     }
 
     textarea {
@@ -783,23 +783,24 @@
             }
         }
     }
+    input[type="time"] {
+        &.sd-input__input {
+            -webkit-appearance: none;
+            -moz-appearance: textfield;
+            appearance: textfield;
+            &::-webkit-calendar-picker-indicator {
+                display: none;
+            }
+        }
+    }
+
+
+
+
 
     .sd-input__select {
-        // display: block;
-        // position: relative;
-        // @include Line-input-base;
-        // padding-inline-end: 2rem;
         grid-row: 2/3;
         grid-column: 2/4;
-        // min-width: 5rem;
-        // cursor: pointer;
-        // option {
-        //     color:inherit;
-        //     font-size: 1.4rem;
-        //     line-height: 2rem;
-        //     background-color: var(--color-dropdown-menu-Bg);
-        //     color: var(--color-dropdown-menu-text);
-        // }
     }
 
     &.sd-input--is-select {
@@ -872,7 +873,6 @@
         }
     }
 
-
     .sd-input__message-box {
         grid-row: 3/4;
         grid-column: 2/3;
@@ -887,25 +887,12 @@
     .sd-input__hint,
     .sd-input__message,
     .sd-input__char-count {
-        // font-size: 1.2rem;
-        // line-height: 1.4rem;
-        // transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
-        // color: var(--color-text-light);
-        // font-weight: 300;
         margin: 0.5rem 0;
-        // letter-spacing: 0.03em;
-        // display: block;
     }
 
     .sd-input__char-count {
-        // font-size: 1.1rem;
-        // font-weight: 400;
-        // font-style: italic;
         grid-row: 3/4;
         grid-column: 3/4;
-        // &--error {
-        //     color: $red;
-        // }
     }
 
     .sd-input__label {

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

@@ -109,6 +109,13 @@
         }
     }
 }
+.p-datepicker table td > span {
+    &:not(.p-disabled) {
+        &:focus-visible {
+            outline: 2px solid var(--sd-colour-interactive--alpha-40);
+        }
+    }
+}
 
 // styles for a day box
 .p-datepicker table td > span {
@@ -181,6 +188,9 @@
             background-color: var(--color-input-bg);
         }
     }
+    &.sd-input__input {
+        padding-inline: 0;
+    }
 }
 
 .p-calendar-w-btn {

package/app-typescript/components/DatePicker.tsx

@@ -238,6 +238,7 @@ export class DatePicker extends React.PureComponent<IDatePicker, IState> {
                         }
                     }}
                     locale={locale}
+                    placeholder={this.props.dateFormat.replace('YYYY', 'yyyy').replace('MM', 'mm').replace('DD', 'dd')}
                     dateFormat={this.props.dateFormat.replace('YYYY', 'yy').replace('MM', 'mm').replace('DD', 'dd')}
                     showIcon={true}
                     icon="icon-calendar"

package/app-typescript/components/DateTimePicker.tsx

@@ -3,12 +3,12 @@ import {DatePicker} from '../components/DatePicker';
 import {Spacer} from '@sourcefabric/common';
 import {defaultTo} from 'lodash';
 import {TimePicker} from './TimePicker';
-import {IconButton} from './IconButton';
 import {InputWrapper} from './Form';
 import {IInputWrapper} from './Form/InputWrapper';
 import nextId from 'react-id-generator';
 import {format} from 'date-fns';
 import {assertNever} from '../helpers';
+import {Button} from './Button';
 
 interface IPropsValueDate extends IInputWrapper {
     valueType: 'date';
@@ -157,7 +157,7 @@ export class DateTimePicker extends React.PureComponent<IProps> {
                 data-test-id={this.props['data-test-id']}
                 ref={this.props.ref}
             >
-                <Spacer h gap="8" alignItems="end" noWrap>
+                <Spacer h gap="8" alignItems="center" noWrap>
                     <div style={{flexGrow: 1}}>
                         <DatePicker
                             disabled={this.props.disabled}
@@ -173,7 +173,8 @@ export class DateTimePicker extends React.PureComponent<IProps> {
                             data-test-id="date-input"
                         />
                     </div>
-                    <div style={{flexGrow: 1}}>
+                    <div style={{flexGrow: 0, color: 'var(--color-text-muted)'}}>@</div>
+                    <div className="time-picker--date-time" style={{flexGrow: 1}}>
                         <TimePicker
                             disabled={this.props.disabled || (timeRequiresDate && dateValue == null)}
                             preview={this.props.preview}
@@ -190,11 +191,15 @@ export class DateTimePicker extends React.PureComponent<IProps> {
                         />
                     </div>
                     {this.props.preview !== true && (
-                        <IconButton
-                            disabled={this.props.disabled}
+                        <Button
                             icon="remove-sign"
+                            text="Clear"
+                            tooltip="Clear"
                             onClick={this.handleClear}
-                            ariaValue="Clear"
+                            type="default"
+                            style="hollow"
+                            iconOnly={true}
+                            disabled={this.props.disabled}
                         />
                     )}
                 </Spacer>

package/app-typescript/components/TimePicker.tsx

@@ -1,13 +1,16 @@
 import * as React from 'react';
 import nextId from 'react-id-generator';
+import classNames from 'classnames';
 import {InputWrapper} from './Form';
 import {IInputWrapper} from './Form/InputWrapper';
 import {TimePickerPopover} from './TimePickerPopover';
 import {PopupPositioner} from './ShowPopup';
+import {Icon} from './Icon';
+import {IconButton} from './IconButton';
 
 interface IProps extends IInputWrapper {
     value: string | null; // ISO8601 time string(e.g. 16:55) or null if there's no value
-    onChange(valueNext: string): void;
+    onChange(valueNext: string | null): void;
     allowSeconds?: boolean;
     headerTemplate?: React.ReactNode;
     footerTemplate?: React.ReactNode;
@@ -52,6 +55,7 @@ export class TimePicker extends React.PureComponent<IProps, IState> {
                 labelHidden={this.props.labelHidden}
                 htmlId={this.htmlId}
                 tabindex={this.props.tabindex}
+                inputWrapper={this.props.inputWrapper}
             >
                 {this.state.popupOpen && (
                     <PopupPositioner
@@ -78,32 +82,62 @@ export class TimePicker extends React.PureComponent<IProps, IState> {
                         />
                     </PopupPositioner>
                 )}
-                <input
-                    style={{
-                        cursor: 'pointer',
-                    }}
-                    ref={this.timeInputRef}
-                    value={this.props.value ?? ''}
-                    type="time"
-                    onClick={(e) => {
-                        // don't show default popup
-                        e.preventDefault();
+                <div className="time-picker__input">
+                    <input
+                        style={{
+                            cursor: 'pointer',
+                        }}
+                        ref={this.timeInputRef}
+                        value={this.props.value ?? ''}
+                        type="time"
+                        onClick={(e) => {
+                            // don't show default popup
+                            e.preventDefault();
 
-                        this.setState({
-                            popupOpen: true,
-                        });
-                    }}
-                    className="sd-input__input"
-                    id={this.htmlId}
-                    aria-labelledby={this.htmlId + 'label'}
-                    step={this.props.allowSeconds ? 1 : undefined}
-                    required={this.props.required}
-                    disabled={this.props.disabled}
-                    onChange={(event) => {
-                        this.props.onChange(event.target.value);
-                    }}
-                    data-test-id={this.props['data-test-id']}
-                />
+                            this.setState({
+                                popupOpen: true,
+                            });
+                        }}
+                        onKeyDown={(event) => {
+                            // don't show default popup
+                            event.preventDefault();
+
+                            if (event.key === ' ') {
+                                this.setState({
+                                    popupOpen: !this.state.popupOpen,
+                                });
+                            } else if ((event.key === 'Enter' || event.key === 'Escape') && this.state.popupOpen) {
+                                this.setState({
+                                    popupOpen: false,
+                                });
+                            }
+                        }}
+                        className={classNames('sd-input__input', {
+                            'sd-input__input--has-value': this.props.value != null,
+                        })}
+                        id={this.htmlId}
+                        aria-labelledby={this.htmlId + 'label'}
+                        step={this.props.allowSeconds ? 1 : undefined}
+                        required={this.props.required}
+                        disabled={this.props.disabled}
+                        onChange={(event) => {
+                            this.props.onChange(event.target.value);
+                        }}
+                        data-test-id={this.props['data-test-id']}
+                    />
+                    <div className="time-picker__icon-wrapper">
+                        <Icon name="time" />
+                        <div className="clear-time-picker">
+                            <IconButton
+                                icon="remove-sign"
+                                size="small"
+                                ariaValue="Clear"
+                                toolTipFlow="left"
+                                onClick={() => this.props.onChange(null)}
+                            />
+                        </div>
+                    </div>
+                </div>
             </InputWrapper>
         );
     }

package/app-typescript/components/TimePickerPopover.tsx

@@ -30,7 +30,7 @@ class TimeValueHolder extends React.PureComponent<IPropsTimeValueHolder> {
     }
 
     public scrollToValue() {
-        this.spanEl.current?.scrollIntoView();
+        this.spanEl.current?.scrollIntoView({block: 'start', behavior: 'smooth'});
     }
 
     render() {
@@ -133,27 +133,45 @@ export class TimePickerPopover extends React.PureComponent<IProps> {
             overflowY: 'auto',
             scrollbarWidth: 'none',
             marginTop: 'var(--gap-1)',
+            scrollBehavior: 'smooth',
         };
 
         return (
-            <div className="sd-shadow--z2 radius-md" onBlur={this.props.closePopup}>
+            <div
+                className="sd-shadow--z2 radius-md"
+                onBlur={this.props.closePopup}
+                onKeyDown={(event) => {
+                    if (event.key === 'Enter' || event.key === 'Escape') {
+                        event.preventDefault();
+                        this.props.closePopup();
+                    }
+                }}
+                tabIndex={0}
+            >
                 <Spacer
                     v
                     gap="0"
                     style={{
-                        width: 200,
-                        padding: 'var(--gap-1)',
-                        backgroundColor: 'var(--color-bg-00)',
+                        minWidth: 200,
+                        maxWidth: 'max-content',
+                        backgroundColor: 'var(--color-dropdown-menu-Bg)',
                         borderRadius: 'var(--b-radius--small)',
                     }}
                 >
                     {this.props.headerTemplate && (
-                        <>
+                        <div className="px-1-5 py-1" style={{borderBottom: '1px solid var(--color-line-x-light)'}}>
                             {this.props.headerTemplate}
-                            <ContentDivider border type="solid" orientation="horizontal" margin="none" />
-                        </>
+                        </div>
                     )}
-                    <Spacer h gap="4" noWrap justifyContent="center" alignItems="start">
+
+                    <Spacer
+                        h
+                        gap="4"
+                        noWrap
+                        justifyContent="center"
+                        alignItems="start"
+                        style={{paddingInline: 'var(--gap-1)'}}
+                    >
                         <Spacer v gap="4" style={styleForColumnOfUnit} alignItems="center" noWrap>
                             {getOptionsForTimeUnit('hours', this.is12HourFormat).map((hour) => {
                                 const isActiveHour =
@@ -265,10 +283,9 @@ export class TimePickerPopover extends React.PureComponent<IProps> {
                         )}
                     </Spacer>
                     {this.props.footerTemplate && (
-                        <>
-                            <ContentDivider border type="solid" orientation="horizontal" margin="none" />
+                        <div className="px-1-5 py-1" style={{borderTop: '1px solid var(--color-line-x-light)'}}>
                             {this.props.footerTemplate}
-                        </>
+                        </div>
                     )}
                 </Spacer>
             </div>

package/dist/components/DatePicker.tsx

@@ -15,7 +15,7 @@ class DatePickerExample extends React.PureComponent<{}, {date: Date | null}> {
         return (
             <DatePicker
                 value={this.state.date}
-                dateFormat="YYYY-MM-DD"
+                dateFormat="DD.MM.YYYY"
                 onChange={(date) => {
                     this.setState({date});
                 }}

package/dist/components/DateTimePicker.tsx

@@ -15,13 +15,11 @@ class DateTimePickerExample extends React.PureComponent<{}, {dateTime: Date | nu
         return (
             <DateTimePicker
                 label="Planning date"
-                labelHidden
                 inlineLabel
                 fullWidth
                 valueType="date"
                 value={this.state.dateTime}
                 dateFormat="YYYY-MM-DD"
-                fullWidth
                 onChange={(val) => {
                     const parsedVal = val != null ? new Date(val) : null;
 

package/dist/components/TimePicker.tsx

@@ -3,10 +3,22 @@ import * as Markup from '../../js/react';
 import {PropsList, Prop} from '../../../app-typescript';
 import {TimePicker} from '../../../app-typescript/components/TimePicker';
 import {TimePickerV2} from '../../../app-typescript/components/TimePickerV2';
+import {ButtonGroup} from '../../../app-typescript/components/ButtonGroup';
+import {Button} from '../../../app-typescript/components/Button';
 
 let minutes = Array.from(Array(60).keys());
 let changedMinutes = minutes.filter((num) => num % 15 !== 0);
 
+const inputWrapper: React.ComponentProps<typeof TimePicker>['inputWrapper'] = {
+    kind: 'custom',
+    component: ({input}) => (
+        <div>
+            <div style={{border: '1px solid red'}}>custom label</div>
+            <div>{input}</div>
+        </div>
+    ),
+};
+
 class TimePickerExample extends React.PureComponent<{}, {time: string | null}> {
     constructor(props) {
         super(props);
@@ -19,6 +31,15 @@ class TimePickerExample extends React.PureComponent<{}, {time: string | null}> {
     render() {
         return (
             <TimePicker
+                headerTemplate={
+                    <ButtonGroup spaces="compact" align="center">
+                        <Button size="small" text="In 30 min" style="hollow" onClick={() => false} />
+                        <Button size="small" text="In 1 hr" style="hollow" onClick={() => false} />
+                        <Button size="small" text="In 2 hr" style="hollow" onClick={() => false} />
+                        <Button size="small" text="In 5 hr" style="hollow" onClick={() => false} />
+                    </ButtonGroup>
+                }
+                footerTemplate={<div>Footer</div>}
                 value={this.state.time}
                 onChange={(time) => {
                     this.setState({time});
@@ -26,6 +47,7 @@ class TimePickerExample extends React.PureComponent<{}, {time: string | null}> {
                 allowSeconds
                 label="This is Label"
                 info="This is info"
+                inputWrapper={inputWrapper}
             />
         );
     }