superdesk-ui-framework 5.2.3 → 6.0.2

package/app/styles/_avatar.scss

@@ -92,6 +92,10 @@
 
     .sd-avatar-content--text {
         background-color: var(--sd-colour-avatar-bg);
+        cursor: default;
+        span {
+            pointer-events: none;
+        }
     }
 
     .sd-avatar-content--dummy-img {
@@ -99,6 +103,7 @@
         background-image: url('~../../images/avatar_dummy.svg');
         background-repeat: no-repeat;
         background-size: cover;
+        pointer-events: none;
     }
 
     &.sd-avatar--empty-light {
@@ -121,6 +126,7 @@
         inset-inline-end: -4px;
         opacity: 1;
         color: var(--color-text-subdued);
+        pointer-events: none;
         [class^="icon-"], [class*=" icon-"] {
             color: inherit;
             text-shadow: -1px 1px 0 var(--sd-item__main-Bg), 1px 1px 0 var(--sd-item__main-Bg), 1px -1px 0 var(--sd-item__main-Bg), -1px -1px 0 var(--sd-item__main-Bg);
@@ -139,6 +145,7 @@
         inset-block-end: -3px;
         inset-inline-end: 3px;
         box-shadow: 0 0 0 1px var(--sd-item__main-Bg);
+        pointer-events: none;
     }
 
     &.sd-avatar--x-small {
@@ -329,8 +336,9 @@
         gap: 0;
         margin-inline-end: 8px;
 
-        > .sd-avatar {
-            margin: 0 -0.8rem 0 0;
+        > .sd-avatar,
+        > .d-contents .sd-avatar {
+            margin: 0 calc(-1 * var(--space--1)) 0 0;
             .sd-avatar-content {
                 --avatar-shadow: var(--sd-item__main-Bg);
                 box-shadow: 0 0 0 2px var(--avatar-shadow);
@@ -340,29 +348,33 @@
             }
         }
 
-        > .sd-avatar--large {
-            margin: 0 -1.2rem 0 0;
+        > .sd-avatar--large,
+        > .d-contents .sd-avatar--large {
+            margin: 0 calc(-1 * var(--space--1-5)) 0 0;
         }
 
         &.sd-avatar-group--stacked--gap-small {
-            gap: $sd-base-increment * 0.5;
-            > .sd-avatar {
+            gap: var(--gap-0-5);
+            > .sd-avatar,
+            > .d-contents .sd-avatar {
                 margin: 0;
             }
             margin-inline-end: 0;
         }
 
         &.sd-avatar-group--stacked--gap-medium {
-            gap: $sd-base-increment * 1;
-            > .sd-avatar {
+            gap: var(--gap-1);
+            > .sd-avatar,
+            > .d-contents .sd-avatar {
                 margin: 0;
             }
             margin-inline-end: 0;
         }
 
         &.sd-avatar-group--stacked--gap-large {
-            gap: $sd-base-increment * 1.5;
-            > .sd-avatar {
+            gap: var(--gap-1-5);
+            > .sd-avatar,
+            > .d-contents .sd-avatar {
                 margin: 0;
             }
             margin-inline-end: 0;
@@ -371,14 +383,15 @@
     &.sd-avatar-group--grid {
         flex-wrap: wrap;
         justify-content: flex-start;
-        gap: $sd-base-increment * 1.5;
+        gap: var(--gap-1-5);
     }
 }
 
 .avatar-popup {
     background-color: var(--color-dropdown-menu-Bg);
     border-radius: var(--b-radius--large);
-    padding: var(--space--2);
+    padding-block: var(--space--2);
+    padding-inline-start: var(--space--1-5);
     padding-inline-end: var(--space--3);
     box-shadow: var(--sd-shadow__dropdown);
     display: flex;
@@ -386,3 +399,125 @@
     gap: var(--gap-1-5);
     overflow: auto;
 }
+
+// Inline avatar display mode (like Material Design Chip)
+.sd-avatar--inline {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--gap-1);
+    vertical-align: middle;
+    background-color: var(--color-surface-faded);
+    border-radius: var(--b-radius--full);
+    
+
+    .sd-avatar--inline__text {
+        color: var(--color-text);
+        font-size: var(--name-font-size);
+        line-height: 1;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        // max-width: 200px;
+        
+    }
+    &:has(.sd-avatar--x-small) {
+        gap: var(--gap-0-5);
+        .sd-avatar--inline__text {
+            --name-font-size: var(--text-size-xx-small);
+            padding-inline-end: 1em;
+        }
+    }
+    &:has(.sd-avatar--small) {
+        gap: var(--gap-0-5);
+        .sd-avatar--inline__text {
+            --name-font-size: var(--text-size-x-small);
+            padding-inline-end: 1em;
+            
+        }
+    }
+    &:has(.sd-avatar--medium) {
+        gap: var(--gap-1);
+        .sd-avatar--inline__text {
+            --name-font-size: var(--text-size-small);
+            padding-inline-end: 1em;
+        }
+    }
+    &:has(.sd-avatar--large) {
+        gap: var(--gap-1);
+        .sd-avatar--inline__text {
+            --name-font-size: var(--text-size-small);
+            padding-inline-end: 1.5em;
+        }
+    }
+    &:has(.sd-avatar--x-large) {
+        gap: var(--gap-2);
+        .sd-avatar--inline__text {
+            --name-font-size: var(--text-size-medium);
+            padding-inline-end: 2.25em;
+        }
+    }
+    &:has(.sd-avatar--xx-large) {
+        gap: var(--gap-3);
+        .sd-avatar--inline__text {
+            --name-font-size: var(--text-size-large);
+            padding-inline-end: 2.25em;
+        }
+    }
+
+    // Modifier for text-start positioning (text before avatar)
+    &.sd-avatar--inline--text-start {
+        flex-direction: row-reverse;
+
+        .sd-avatar--inline__text {
+            padding-inline-end: 0;
+            padding-inline-start: 1em;
+        }
+
+        &:has(.sd-avatar--x-small) {
+            .sd-avatar--inline__text {
+                padding-inline-start: 1em;
+            }
+        }
+        &:has(.sd-avatar--small) {
+            .sd-avatar--inline__text {
+                padding-inline-start: 1em;
+            }
+        }
+        &:has(.sd-avatar--medium) {
+            .sd-avatar--inline__text {
+                padding-inline-start: 1em;
+            }
+        }
+        &:has(.sd-avatar--large) {
+            .sd-avatar--inline__text {
+                padding-inline-start: 1.5em;
+            }
+        }
+        &:has(.sd-avatar--x-large) {
+            .sd-avatar--inline__text {
+                padding-inline-start: 2.25em;
+            }
+        }
+        &:has(.sd-avatar--xx-large) {
+            .sd-avatar--inline__text {
+                padding-inline-start: 2.25em;
+            }
+        }
+    }
+    &:not(.sd-avatar--inline--text-start) {
+        &:has(.sd-avatar--x-small) {
+            &:has(.sd-avatar__icon) {
+                .sd-avatar--inline__text {
+                    padding-inline-start: 0.5em;
+                }
+            }
+        }
+        &:has(.sd-avatar--small) {
+            &:has(.sd-avatar__icon) {
+                .sd-avatar--inline__text {
+                    padding-inline-start: 0.25em;
+                }
+            }
+        }
+    }
+}

package/app/styles/_tooltips.scss

@@ -422,4 +422,10 @@
             border-right-color: var(--sd-colour-background__tooltip);
         }
     }
-}
+}
+
+.sd-popup-positioner {
+	&:has(.tooltip) {
+		pointer-events: none;
+	}
+}

package/app-typescript/components/CopyableTextBox.tsx

@@ -5,15 +5,18 @@ import {InputWrapper} from './Form';
 import nextId from 'react-id-generator';
 import {IInputCommon} from './Form/InputWrapper';
 import {toasted} from './Toast';
+import {Position} from './ToastMessage';
 
 interface ICopyableTextBoxProps extends IInputCommon {
     value: string;
 
     /**
-     * Defaults to medium
+     * Defaults to `medium`
      */
     size?: 'medium' | 'large';
 
+    disableCopyButton?: boolean;
+    toastMessagePosition?: Position;
     'data-test-id'?: string;
 }
 
@@ -37,6 +40,7 @@ export const CopyableTextBox: React.FC<ICopyableTextBoxProps> = (props) => {
                 toasted.notify(gettext('Copied to clipboard'), {
                     type: 'success',
                     duration: 500,
+                    position: props.toastMessagePosition,
                 });
 
                 setCopied(true);
@@ -52,6 +56,8 @@ export const CopyableTextBox: React.FC<ICopyableTextBoxProps> = (props) => {
             .catch(() => {
                 toasted.notify(gettext("Couldn't copy"), {
                     type: 'warning',
+                    duration: 500,
+                    position: props.toastMessagePosition,
                 });
             });
     };
@@ -88,6 +94,7 @@ export const CopyableTextBox: React.FC<ICopyableTextBoxProps> = (props) => {
                     icon={copied ? 'ok' : 'copy'}
                     iconOnly={true}
                     onClick={handleCopy}
+                    disabled={props.disableCopyButton}
                     type="default"
                     style="hollow"
                     size={props.size === 'medium' ? 'normal' : (props.size ?? 'normal')}

package/app-typescript/components/DatePicker.tsx

@@ -337,6 +337,13 @@ export class DatePickerISO extends React.PureComponent<IDatePickerISO> {
     }
 }
 
+function getOptionLabel(options: Array<{id: string; label?: string}>, id: string | null | undefined): string {
+    if (id == null) {
+        return '';
+    }
+    return options.find((option) => option.id === id)?.label ?? id;
+}
+
 const MonthNavigator = ({
     value,
     options,
@@ -346,7 +353,7 @@ const MonthNavigator = ({
         kind="synchronous"
         value={[value]}
         getOptions={() => options.map((option) => ({value: option.id}))}
-        getLabel={(option) => options[parseInt(option, 10)].label}
+        getLabel={(optionId) => getOptionLabel(options, optionId)}
         getId={(option) => option}
         onChange={(selected) => {
             onChange(selected[0]);
@@ -355,7 +362,7 @@ const MonthNavigator = ({
         labelHidden
         valueTemplate={(item) => (
             <div className="sd-datepicker__navigator-value sd-datepicker__navigator-month">
-                <div>{options[parseInt(item, 10)].label}</div>
+                <div>{getOptionLabel(options, item)}</div>
                 <Icon name="chevron-down-thin" />
             </div>
         )}

package/app-typescript/components/ShowPopup.tsx

@@ -186,6 +186,7 @@ export class PopupPositioner extends React.PureComponent<IPropsPopupPositioner>
             <>
                 {ReactDOM.createPortal(
                     <div
+                        className="sd-popup-positioner"
                         ref={(el) => {
                             this.wrapperEl = el;
                         }}

package/app-typescript/components/avatar/avatar-group.tsx

@@ -1,13 +1,11 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import {Avatar, IPropsAvatar} from './avatar';
-import {AvatarWrapper} from './avatar-wrapper';
+import {Avatar, IAvatarWithTooltip, IPropsAvatar} from './avatar';
 import {AvatarContentNumber} from './avatar-number';
 import {AvatarPlaceholder, IPropsAvatarPlaceholder} from './avatar-placeholder';
-import {Spacer} from '@sourcefabric/common';
 import {WithPopover} from '../WithPopover';
 
-export type IAvatarInGroup = Omit<IPropsAvatar, 'size'>;
+export type IAvatarInGroup = {nameDisplay?: IAvatarWithTooltip} & Omit<IPropsAvatar, 'size' | 'nameDisplay'>;
 export type IAvatarPlaceholderInGroup = Omit<IPropsAvatarPlaceholder, 'size'>;
 
 export type IAvatarGroupItem = IAvatarInGroup | IAvatarPlaceholderInGroup;
@@ -81,32 +79,32 @@ export class AvatarGroup extends React.PureComponent<IPropsAvatarGroup> {
                     <div className="avatar-popup">
                         {this.props.items.map((item, index) => {
                             return someHaveDisplayName ? (
-                                <Spacer h alignItems="center" gap="16" noGrow key={index}>
-                                    {isAvatar(item) && item.displayName}
-
+                                <div className="d-flex items-center gap-1" key={index}>
                                     {isAvatar(item) ? (
                                         <Avatar
-                                            size="small"
+                                            size="medium"
                                             imageUrl={item.imageUrl}
                                             initials={item.initials}
                                             displayName={item.displayName}
                                             icon={item.icon}
                                             statusDot={item.statusDot}
+                                            nameDisplay={{kind: 'none'}}
                                         />
                                     ) : (
                                         <AvatarPlaceholder
                                             kind="plus-button"
-                                            size="small"
+                                            size="medium"
                                             icon={item.icon}
                                             onClick={item.onClick}
                                         />
                                     )}
-                                </Spacer>
+                                    {isAvatar(item) && item.displayName}
+                                </div>
                             ) : (
                                 <div>
                                     <AvatarPlaceholder
                                         kind="plus-button"
-                                        size="small"
+                                        size="medium"
                                         icon={item.icon}
                                         onClick={isAvatar(item) ? undefined : item.onClick}
                                         key={index}
@@ -129,7 +127,14 @@ export class AvatarGroup extends React.PureComponent<IPropsAvatarGroup> {
                     >
                         {items.slice(0, max).map((item, index) => {
                             if (isAvatar(item)) {
-                                return <Avatar {...item} key={index} size={size} />;
+                                return (
+                                    <Avatar
+                                        {...item}
+                                        key={index}
+                                        size={size}
+                                        nameDisplay={item.nameDisplay ?? {kind: 'none'}}
+                                    />
+                                );
                             } else {
                                 return <AvatarPlaceholder {...item} key={index} size={this.props.size} />;
                             }
@@ -137,9 +142,14 @@ export class AvatarGroup extends React.PureComponent<IPropsAvatarGroup> {
 
                         {itemsOverLimit > 0 && (
                             <PlusButtonWrapper onToggle={onToggle}>
-                                <AvatarWrapper size={size}>
-                                    <AvatarContentNumber number={`${itemsOverLimit}`} />
-                                </AvatarWrapper>
+                                <Avatar
+                                    size={size}
+                                    imageUrl={null}
+                                    displayName=""
+                                    initials={null}
+                                    customContent={<AvatarContentNumber number={`${itemsOverLimit}`} />}
+                                    nameDisplay={{kind: 'none'}}
+                                />
                             </PlusButtonWrapper>
                         )}
                     </div>

package/app-typescript/components/avatar/avatar-with-inline-text-wrapper.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import type {IAvatarWithInlineText, IPropsAvatar} from './avatar';
+import classNames from 'classnames';
+
+interface IProps {
+    placement: IAvatarWithInlineText['placement'];
+    displayName: IPropsAvatar['displayName'];
+    avatarElement: JSX.Element;
+}
+
+export const AvatarWithInlineTextWrapper = ({placement, avatarElement, displayName}: IProps) => {
+    return (
+        <span
+            className={classNames('sd-avatar--inline', {
+                'sd-avatar--inline--text-start': placement === 'start',
+            })}
+        >
+            {avatarElement}
+            <span className="sd-avatar--inline__text">{displayName}</span>
+        </span>
+    );
+};

package/app-typescript/components/avatar/avatar.tsx

@@ -1,17 +1,37 @@
 import * as React from 'react';
+import classNames from 'classnames';
 import {AvatarContentImage} from './avatar-image';
-import {AvatarWrapper} from './avatar-wrapper';
 import {AvatarContentText} from './avatar-text';
+import {Icon} from '../Icon';
+import {TooltipV2} from '../TooltipV2';
+import {AvatarWithInlineTextWrapper} from './avatar-with-inline-text-wrapper';
+import {assertNever} from '../../helpers';
+
+export type IAvatarWithTooltip = {
+    kind: 'tooltip';
+
+    /** Defaults to `top` */
+    placement?: 'top' | 'left' | 'right' | 'bottom';
+
+    /** `displayName` used if not provided */
+    content?: string;
+};
+
+export type IAvatarWithInlineText = {
+    kind: 'inline';
+
+    /** Defaults to `end` */
+    placement?: 'start' | 'end';
+};
 
 export interface IPropsAvatar {
-    imageUrl: string | null; // nullable, but mandatory to communicate importance
-    displayName: string;
+    imageUrl: string | null;
 
     /** 3 letters max */
-    initials: string | null; // nullable, but mandatory to communicate importance
+    initials: string | null;
 
+    displayName: string;
     size: 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large';
-
     statusIndicator?: 'online' | 'offline';
     administratorIndicator?: boolean;
     icon?: {
@@ -21,13 +41,12 @@ export interface IPropsAvatar {
     statusDot?: {
         color?: string;
     };
-    noAvatarPlaceholderColor?: 'subtle' | 'strong'; // defaults to strong; only applies to placeholder image
 
     /**
-     * displayName is shown as tooltip by default
-     * use this if you need to add additional information (it will be added on a new line)
+     * Defaults to `strong`.
+     * Color scheme for placeholder when no image is available.
      */
-    tooltip?: string;
+    noAvatarPlaceholderColor?: 'subtle' | 'strong';
 
     /**
      * JSX resulting from rendering of one of the following components:
@@ -35,46 +54,100 @@ export interface IPropsAvatar {
      * AvatarContentImage
      */
     customContent?: JSX.Element;
+
+    /**
+     * Defaults to `tooltip`.
+     *
+     * Controls how `tooltip` is displayed:
+     * - `tooltip`: Shows name in a tooltip
+     * - `none`: No name is displayed at all
+     * - `inline`: Shows name inline next to avatar (like Material Design Chip)
+     */
+    nameDisplay?: IAvatarWithInlineText | IAvatarWithTooltip | {kind: 'none'};
 }
 
-export class Avatar extends React.PureComponent<IPropsAvatar> {
-    render() {
-        const {
-            imageUrl,
-            initials,
-            size,
-            statusIndicator,
-            administratorIndicator,
-            icon,
-            noAvatarPlaceholderColor,
-            displayName,
-            customContent,
-            statusDot,
-        } = this.props;
-
-        const tooltipCombined = [displayName, this.props.tooltip]
-            .filter((str) => (str ?? '').trim().length > 0)
-            .join('\n');
+export const Avatar = React.memo<IPropsAvatar>((props) => {
+    const {
+        imageUrl,
+        initials,
+        size,
+        statusIndicator,
+        administratorIndicator,
+        icon,
+        noAvatarPlaceholderColor,
+        displayName,
+        customContent,
+        statusDot,
+        nameDisplay = {kind: 'tooltip'},
+    } = props;
 
+    const avatarContent = React.useMemo(() => {
+        if (customContent != null) {
+            return customContent;
+        } else if (imageUrl != null || initials == null) {
+            return <AvatarContentImage imageUrl={imageUrl} tooltipText={''} />;
+        } else {
+            return <AvatarContentText text={initials} tooltipText={''} />;
+        }
+    }, [customContent, imageUrl, initials]);
+
+    const avatarClassName = React.useMemo(
+        () =>
+            classNames('sd-avatar', {
+                'sd-avatar--x-small': size === 'x-small',
+                'sd-avatar--small': size === 'small',
+                'sd-avatar--medium': size === 'medium',
+                'sd-avatar--large': size === 'large',
+                'sd-avatar--x-large': size === 'x-large',
+                'sd-avatar--xx-large': size === 'xx-large',
+                'sd-avatar--indicator-status--online': statusIndicator === 'online',
+                'sd-avatar--indicator-status--offline': statusIndicator === 'offline',
+                'sd-avatar--empty-light': noAvatarPlaceholderColor === 'subtle',
+            }),
+        [size, statusIndicator, noAvatarPlaceholderColor],
+    );
+
+    const avatarElement = (
+        <span className={avatarClassName}>
+            {avatarContent}
+
+            {administratorIndicator === true && <i className="icon-settings sd-avatar--indicator-admin" />}
+
+            {icon != null && (
+                <span className="sd-avatar__icon">
+                    <Icon name={icon.name} color={icon.color} />
+                </span>
+            )}
+
+            {statusDot != null && (
+                <span style={{backgroundColor: statusDot.color}} className="sd-avatar__coverage-state" />
+            )}
+        </span>
+    );
+
+    const kind = nameDisplay.kind;
+
+    if (kind === 'inline') {
         return (
-            <AvatarWrapper
-                size={size}
-                statusIndicator={statusIndicator ? {status: statusIndicator, tooltipText: ''} : undefined}
-                administratorIndicator={administratorIndicator ? {enabled: true, tooltipText: ''} : undefined}
-                icon={icon}
-                statusDot={statusDot}
-                noAvatarPlaceholderColor={noAvatarPlaceholderColor}
-            >
-                {(() => {
-                    if (customContent != null) {
-                        return customContent;
-                    } else if (imageUrl != null || initials == null) {
-                        return <AvatarContentImage imageUrl={imageUrl} tooltipText={tooltipCombined} />;
-                    } else {
-                        return <AvatarContentText text={initials} tooltipText={tooltipCombined} />;
-                    }
-                })()}
-            </AvatarWrapper>
+            <AvatarWithInlineTextWrapper
+                avatarElement={avatarElement}
+                displayName={displayName}
+                placement={nameDisplay.placement}
+            />
         );
+    } else if (kind === 'tooltip') {
+        return (
+            <TooltipV2 content={nameDisplay.content ?? displayName} placement={nameDisplay.placement}>
+                {({attributes}) => (
+                    <span className="d-contents" {...attributes}>
+                        {avatarElement}
+                    </span>
+                )}
+            </TooltipV2>
+        );
+    } else if (kind === 'none') {
+        return avatarElement;
+    } else {
+        assertNever(kind);
     }
-}
+});