superdesk-ui-framework 3.0.50 → 3.0.53

package/app/styles/_simple-list.scss

@@ -13,6 +13,7 @@ $simple-list-border-color: $neutral-border-color;
         flex-direction: row;
         align-items: center;
         gap: 0.8rem;
+        color: var(--color-text);
 
         [class^="icon-"], [class*=" icon-"] {
             flex-grow: 0;

package/app/styles/components/_list-item.scss

@@ -16,6 +16,7 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
     background-color: $sd-ListItem-background;
     transition: background-color 0.2s linear;
     flex-shrink: 0;
+    color: var(--color-text);
 
     &:hover {
         background-color: $sd-ListItem-background-hover;

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

@@ -3,13 +3,17 @@ import {IPropsBase} from './interfaces';
 
 interface IPropsImageAvatar extends IPropsBase {
     imageUrl?: string | null; // defaults to a placeholder image
+    onClick?(): void;
 }
 
 export class AvatarContentImage extends React.PureComponent<IPropsImageAvatar> {
     render() {
-        if (this.props.imageUrl == null) {
+        const {imageUrl, tooltipText, onClick} = this.props;
+        const role: string | undefined = onClick == null ? undefined : 'button';
+
+        if (imageUrl == null) {
             return (
-                <span className="sd-avatar-content sd-avatar-content--dummy-img" title={this.props.tooltipText}>
+                <span className="sd-avatar-content sd-avatar-content--dummy-img" title={tooltipText} role={role}>
                     <svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <circle cx="100" cy="100" r="100" fill="white" fill-opacity="0.01"/>
                         <path fill-rule="evenodd" clip-rule="evenodd" d="M40 153V145.384C40 141.557 41.16 137.981 43.16 135C49.14 126.057 66.24 119.711 77.14 118C82.74 117.115 90.16 116.538 100 116.538C109.84 116.538 117.26 117.115 122.86 118C133.76 119.711 150.86 126.057 156.84 135C158.84 137.981 160 141.557 160 145.384V153C150 165 130 180 100 180C70 180 50 165 40 153ZM100 30C122.08 30 140 47.2307 140 68.4614C140 89.6922 122.08 106.923 100 106.923C77.92 106.923 60 89.6922 60 68.4614C60 47.2307 77.92 30 100 30Z" fill="var(--sd-colour-avatar-dummy)" fill-opacity="1"/>
@@ -17,8 +21,8 @@ export class AvatarContentImage extends React.PureComponent<IPropsImageAvatar> {
                 </span>);
         } else {
             return (
-                <span className="sd-avatar-content" title={this.props.tooltipText} >
-                    <img src={this.props.imageUrl} />
+                <span className="sd-avatar-content" title={tooltipText} role={role}>
+                    <img src={imageUrl} />
                 </span>
             );
         }

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

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import {AvatarWrapper} from './avatar-wrapper';
 import {AvatarContentAdd} from './avatar-action-add';
+import {AvatarContentImage} from './avatar-image';
 
 export interface IPropsAvatarPlaceholder {
     // kind is used to it's easy to add
     // other types of placeholders without breaking existing usages
-    kind: 'plus-button';
+    kind: 'plus-button' | 'user-icon';
     tooltip?: string | null; // nullable, but mandatory to communicate importance
 
     size: 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large';
@@ -20,7 +21,7 @@ export interface IPropsAvatarPlaceholder {
 
 export class AvatarPlaceholder extends React.PureComponent<IPropsAvatarPlaceholder> {
     render() {
-        const {size, tooltip, icon} = this.props;
+        const {size, tooltip, icon, kind, onClick} = this.props;
 
         return (
             <AvatarWrapper
@@ -28,7 +29,26 @@ export class AvatarPlaceholder extends React.PureComponent<IPropsAvatarPlacehold
                 isEmpty={false}
                 icon={icon}
             >
-                <AvatarContentAdd tooltipText={tooltip ?? undefined} onClick={this.props.onClick} />
+                {(() => {
+                    if (kind === 'plus-button') {
+                        return (
+                            <AvatarContentAdd
+                                tooltipText={tooltip ?? undefined}
+                                onClick={onClick}
+                            />
+                        );
+                    } else if (kind === 'user-icon') {
+                        return (
+                            <AvatarContentImage
+                                imageUrl={null}
+                                tooltipText={tooltip ?? undefined}
+                                onClick={onClick}
+                            />
+                        );
+                    } else {
+                        return null;
+                    }
+                })()}
             </AvatarWrapper>
         );
     }

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

@@ -18,11 +18,35 @@ export interface IPropsAvatar {
         name: string;
         color?: string;
     };
+
+    /**
+     * displayName is shown as tooltip by default
+     * use this if you need to add additional information (it will be added on a new line)
+     */
+    tooltip?: string;
+
+    /**
+     * JSX resulting from rendering of one of the following components:
+     * AvatarContentText
+     * AvatarContentImage
+     */
+    customContent?: JSX.Element;
 }
 
 export class Avatar extends React.PureComponent<IPropsAvatar> {
     render() {
-        const {imageUrl, initials, size, statusIndicator, administratorIndicator, icon, displayName} = this.props;
+        const {
+            imageUrl,
+            initials,
+            size,
+            statusIndicator,
+            administratorIndicator,
+            icon,
+            displayName,
+            customContent,
+        } = this.props;
+
+        const tooltipCombined = [displayName, this.props.tooltip].filter((str) => (str ?? '').trim().length > 0).join('\n');
 
         return (
             <AvatarWrapper
@@ -32,16 +56,19 @@ export class Avatar extends React.PureComponent<IPropsAvatar> {
                 icon={icon}
                 isEmpty={false}
             >
-                {
-                    imageUrl != null || initials == null
-                        ? (
-                            <AvatarContentImage imageUrl={imageUrl} tooltipText={displayName} />
-                        )
-                        : (
-                            <AvatarContentText text={initials} tooltipText={displayName} />
-                        )
-                }
-
+                {(() => {
+                    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>
         );
     }