superdesk-ui-framework 3.0.20 → 3.0.21

package/app/styles/_icon-font.scss

@@ -86,12 +86,6 @@ $icon-base-size: 16px;
 .icon--green {
     color: $green !important;
 }
-.icon--rotate-180 {
-    transform: rotate(180deg);
-}
-.icon--rotate-90 {
-    transform: rotate(90deg);
-}
 .icon--full-opacity {
     opacity: 1 !important;
 }

package/app/styles/interface-elements/_side-panel.scss

@@ -43,6 +43,9 @@ $side-panel-Bg-200: var(--sd-colour-panel-bg--200);
         position: relative;
         min-height: 4.8rem;
     }
+    .side-panel__header-wrapper {
+        display: flex;
+    }
     .side-panel__sliding-toolbar {
         @include sliding-toolbar; // See mixins.scss for details
         &.side-panel__sliding-toolbar {
@@ -53,7 +56,6 @@ $side-panel-Bg-200: var(--sd-colour-panel-bg--200);
             }
         }
     }
-    
     .side-panel__heading {
         padding-inline-start: $sd-base-increment * 2;
         padding-inline-end: $sd-base-increment * 2;
@@ -70,10 +72,9 @@ $side-panel-Bg-200: var(--sd-colour-panel-bg--200);
             letter-spacing: 0.01em;
         }
     }
-    .side-panel__close {
-        position: absolute;
-        inset-inline-end: $sd-base-increment; // equals 0.8rem or 8px
-        inset-block-start: $sd-base-increment;
+    .side-panel__btn-group {
+        padding-inline: 0.8rem;
+        padding-block: 0.8rem;
         z-index: 2;
         color: var(--color-text-light);
     }

package/app-typescript/components/IconButton.tsx

@@ -25,20 +25,26 @@ export class IconButton extends React.PureComponent<IProps> {
             [`icn-btn--${this.props.style}`]: this.props.style || this.props.style !== undefined,
             'icn-btn--disabled': this.props.disabled,
         });
+
         return (
             <Tooltip
-            text={this.props.ariaValue}
-            flow={this.props.toolTipFlow}
-            appendToBody={this.props.toolTipAppend}
-            disabled={this.props.disabled}>
+                text={this.props.ariaValue}
+                flow={this.props.toolTipFlow}
+                appendToBody={this.props.toolTipAppend}
+                disabled={this.props.disabled}
+            >
                 <button
                     id={this.props.id}
                     tabIndex={0}
                     onClick={this.props.onClick}
                     className={classes}
                     disabled={this.props.disabled}
-                    aria-label={this.props.ariaValue}>
-                    <Icon name={this.props.icon} ariaHidden={true}/>
+                    aria-label={this.props.ariaValue}
+                >
+                    <Icon
+                        name={this.props.icon}
+                        ariaHidden={true}
+                    />
                 </button>
             </Tooltip>
         );

package/app-typescript/components/Layouts/Panel.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { Icon } from '../Icon';
 import { IconButton } from '../IconButton';
 import { Spinner, LoadingOverlay } from '../Spinner';
 import classNames from 'classnames';
+import {ButtonGroup} from '../ButtonGroup';
 
 // ============= Panel ============ //
 
@@ -23,11 +23,13 @@ export default class Panel extends React.PureComponent<IPropsPanel> {
             [`side-panel--${this.props.background}`]:
                 this.props.background !== 'light' && this.props.background !== undefined,
         }, this.props.className);
+
         let classes2 = classNames('side-panel__container', {
             [`side-panel__container--${this.props.side}`]: this.props.side,
             [`side-panel__container--${this.props.size}`]: this.props.size,
             [`panel-open`]: this.props.open,
         });
+
         return (
             <div className={classes2} data-theme={this.props.theme ? `${this.props.theme}-ui` : null}>
                 <div className={classes}>
@@ -47,6 +49,7 @@ interface IPropsPanelHeader {
     theme?: 'light-ui' | 'dark-ui'; // defaults to 'light
     className?: string;
     onClose?(): void;
+    iconButtons?: Array<React.ReactNode>;
 }
 
 class PanelHeader extends React.PureComponent<IPropsPanelHeader> {
@@ -61,22 +64,43 @@ class PanelHeader extends React.PureComponent<IPropsPanelHeader> {
             [`side-panel__header--${this.props.color}`]: this.props.color || this.props.color !== undefined,
             'side-panel__header--has-close': this.props.onClose,
         }, this.props.className);
+
         let style = {
-            zIndex: 10 + (this.props.zIndex ? this.props.zIndex : 0),
+            zIndex: this.props.zIndex ? this.props.zIndex : 10,
         };
+
         let defaultTheme = darkColors.includes(this.props.color || '') ? 'dark-ui' : null;
 
         return (
             <div data-theme={this.props.theme || defaultTheme} className={classes} style={style}>
-                {this.props.onClose ?
-                    <a className="icn-btn side-panel__close"
-                        onClick={() => this.props.onClose ? this.props.onClose() : false}>
-                        <Icon name='close-small' />
-                    </a> : null}
-                {this.props.title &&
-                    <div className="side-panel__header-inner">
-                        <h3 className="side-panel__heading">{this.props.title}</h3>
-                    </div>}
+                <div className='side-panel__header-wrapper'>
+                    {this.props.title != null
+                        && <div className="side-panel__header-inner">
+                            <h3 className="side-panel__heading">{this.props.title}</h3>
+                        </div>
+                    }
+
+                    {(this.props.onClose == null && this.props.iconButtons == null)
+                        || (
+                            <ButtonGroup
+                                align='end'
+                                spaces='no-space'
+                                className='side-panel__btn-group'
+                            >
+                                {this.props.iconButtons != null
+                                    && this.props.iconButtons
+                                }
+                                {this.props.onClose != null
+                                    && <IconButton
+                                        icon='close-small'
+                                        ariaValue='Close'
+                                        onClick={this.props.onClose}
+                                    />
+                                }
+                            </ButtonGroup>
+                        )
+                    }
+                </div>
                 {this.props.children}
             </div>
         );
@@ -95,15 +119,15 @@ class PanelContent extends React.PureComponent<IPropsPanelContent> {
     render() {
         return (
             <div className="side-panel__content">
-                {this.props.loading ?
-                    <LoadingOverlay>
+                {this.props.loading
+                    && <LoadingOverlay>
                         <Spinner size="large" />
-                    </LoadingOverlay> : null
+                    </LoadingOverlay>
                 }
-                {this.props.empty ?
-                    <LoadingOverlay>
+                {this.props.empty
+                    && <LoadingOverlay>
                         {this.props.emptyTemplate}
-                    </LoadingOverlay> : null
+                    </LoadingOverlay>
                 }
                 {this.props.children}
             </div>
@@ -203,6 +227,11 @@ class PanelTools extends React.PureComponent<IPropsPanelTools> {
 }
 
 export {
-    Panel, PanelHeader, PanelContent, PanelContentBlock, PanelFooter, PanelHeaderSlidingToolbar,
-    PanelTools
+    Panel,
+    PanelHeader,
+    PanelContent,
+    PanelContentBlock,
+    PanelFooter,
+    PanelHeaderSlidingToolbar,
+    PanelTools,
 };

package/app-typescript/components/Rotate.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+interface IPropsRotate {
+    children: React.ReactNode;
+    degrees: number;
+}
+
+export class Rotate extends React.PureComponent<IPropsRotate> {
+    render() {
+        return (
+            <div
+                style={{
+                    transform: `rotate(${this.props.degrees}deg)`,
+                }}
+            >
+                {this.props.children}
+            </div>
+        );
+    }
+}

package/app-typescript/index.ts

@@ -17,6 +17,7 @@ export { AvatarContentImage } from './components/avatar/avatar-image';
 export { AvatarGroup } from './components/avatar/avatar-group';
 export { Avatar } from './components/avatar/avatar';
 export { AvatarPlaceholder } from './components/avatar/avatar-placeholder';
+export { Rotate } from './components/Rotate';
 export { IconButton } from './components/IconButton';
 export { IconLabel } from './components/IconLabel';
 export { Tooltip } from './components/Tooltip';

package/dist/examples.bundle.css

@@ -3660,12 +3660,6 @@ doc-react-playground {
 .icon--green {
   color: #46a446 !important; }
 
-.icon--rotate-180 {
-  transform: rotate(180deg); }
-
-.icon--rotate-90 {
-  transform: rotate(90deg); }
-
 .icon--full-opacity {
   opacity: 1 !important; }