superdesk-ui-framework 3.0.1-beta.28 → 3.0.1-beta.30

package/app/styles/design-tokens/_new-colors.scss

@@ -564,7 +564,7 @@
   
   
     --color-text:                         hsla(214, 13%, 20%, 1);
-    --color-text--inverse:                hsla(0, 0%, 98%, 1); // equals #333;
+    --color-text--inverse:                hsla(214, 13%, 98%, 1);
     --color-text-light:                   hsla(214, 13%, 40%, 1);
     --color-text-lighter:                 hsla(214, 13%, 60%, 1);
     --color-icon-default:                 hsla(214, 13%, 30%, 1);
@@ -615,14 +615,20 @@
     --color-border-line--medium:          hsla(0, 0%, 80%, 1);
   
     // SubNav & Nav Buttons
-    --color-subnav-bg--00:                hsla(0, 0%, 96%, 1);
-    --color-subnav-bg--10:                hsla(0, 0%, 87%, 1);
+    --color-subnav-bg--00:                hsla(214, 13%, 96%, 1);
+    --color-subnav-bg--10:                hsla(214, 13%, 87%, 1);
     --color-subnav-bg--blueGrey-00:       hsla(200, 34%, 30%, 1);
     --color-subnav-bg--blueGrey-10:       hsla(200, 34%, 24%, 1);
-    --color-navbutton-bg-hover:           hsla(0, 0%, 0%, 0.05);
-    --color-navbutton-bg-active:          hsla(0, 0%, 100%);
-    --color-navbutton-bg-100:             hsla(0, 0%, 0%, 0.06);
-    --color-navbutton-bg-100-hover:       hsla(0, 0%, 0%, 0.12);
+    --color-navbutton-bg-hover:           hsla(214, 13%, 10%, 0.05);
+    --color-navbutton-bg-active:          hsla(214, 13%, 100%, 1);
+    
+    --color-navbutton-bg-100:             hsla(214, 13%, 10%, 0.06);
+    --color-navbutton-bg-100-hover:       hsla(214, 13%, 10%, 0.12);
+
+    --color-navbutton-bg-dark:            hsla(214, 13%, 55%, 1);
+    --color-navbutton-bg-dark-hover:      hsla(214, 13%, 60%, 1);
+
+    --color-navbutton-shadow-active:      hsla(214, 13%, 5%, 0.12);
   }
   
   // CSS variables for dark theme
@@ -692,8 +698,14 @@
   
     --color-navbutton-bg-hover:           hsla(0, 0%, 0%, 0.1);
     --color-navbutton-bg-active:          hsla(0, 0%, 100%, 0.08);
+
     --color-navbutton-bg-100:             hsla(0, 0%, 0%, 0.1);
     --color-navbutton-bg-100-hover:       hsla(0, 0%, 0%, 0.2);
+
+    --color-navbutton-bg-dark:            hsla(214, 13%, 30%, 1);
+    --color-navbutton-bg-dark-hover:      hsla(214, 13%, 35%, 1);
+
+    --color-navbutton-shadow-active:      hsla(214, 13%, 96%, 0.12);
   
     [class^="big-icon--"],
     [class*=" big-icon--"] {

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

@@ -78,11 +78,13 @@
 // add background when hovering a selectable date
 .p-datepicker table td > span {
     &:not(.p-highlight):not(.p-disabled) {
+        transition: all ease 0.2s;
         &:hover {
-            background-color: $sd-colour-background__menu-item--hover;
+            background-color: var(--sd-colour-interactive--alpha-10);
+            box-shadow: inset 0 0 0 1px var(--sd-colour-interactive);
         }
         &:active {
-            background-color: $sd-colour-background__menu-item--active;
+            background-color: var(--sd-colour-interactive--alpha-20);
         }
     }
 }

package/app/styles/variables/_colors.scss

@@ -81,29 +81,29 @@ $yellow:                hsla(45, 100%, 53%, 1);
 $orange:                hsla(35, 100%, 43%, 1);
 $purple:                hsla(291, 64%, 42%, 1);
 
-$black:                 #000;
-$grayDarker:            #222;
-$grayDark:              #333333;
-$grayMedium:            #444;
-$gray:                  #666;
-$grayNeutral:           #7b7b7b;
-$grayText:              #747474;
-$grayLight:             #999;
-$grayLighter:           #F5F5F5;
-$white:                 #fff;
+$black:                 hsl(214, 13%, 0%);
+$grayDarker:            hsl(214, 13%, 13%);
+$grayDark:              hsl(214, 13%, 20%);
+$grayMedium:            hsl(214, 13%, 27%);
+$gray:                  hsl(214, 13%, 40%);
+$grayNeutral:           hsl(214, 13%, 48%);
+$grayText:              hsl(214, 13%, 45%);
+$grayLight:             hsl(214, 13%, 60%);
+$grayLighter:           hsl(214, 13%, 96%);
+$white:                 hsl(214, 13%, 100%);
 
 // Greys
-$gray--900:             #333;
-$gray--800:             #444;
-$gray--700:             #555;
-$gray--600:             #666;
-$gray--500:             #747474;
-$gray--400:             #888;
-$gray--300:             #999;
-$gray--200:             #ccc;
-$gray--100:             #dedede;
-$gray--75:              #ededed;
-$grey--50:              #F5F5F5;
+$gray--900:             hsl(214, 13%, 20%);
+$gray--800:             hsl(214, 13%, 27%);
+$gray--700:             hsl(214, 13%, 33%);
+$gray--600:             hsl(214, 13%, 40%);
+$gray--500:             hsl(214, 13%, 45%);
+$gray--400:             hsl(214, 13%, 53%);
+$gray--300:             hsl(214, 13%, 60%);
+$gray--200:             hsl(214, 13%, 80%);
+$gray--100:             hsl(214, 13%, 87%);
+$gray--75:              hsl(214, 13%, 93%);
+$grey--50:              hsl(214, 13%, 96%);
 
 // Extended colors
 $fernGreen:             hsla(91, 47%, 34%, 1);

package/app-typescript/components/Lists/TableList.tsx

@@ -15,7 +15,7 @@ export interface IProps {
     showDragHandle?: 'always' | 'onHover' | 'none'; // always default
     append?: boolean;
     onDrag?(start: number, end: number): void;
-    onAddItem?(index: number, item?: IPropsArrayItem ): void;
+    onAddItem?(index: number, item?: IPropsArrayItem): void;
     itemsDropdown?(index?: number): Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
 }
 
@@ -126,46 +126,46 @@ class TableList extends React.PureComponent<IProps, IState> {
                                         <Draggable key={index} draggableId={`${index}`} index={index}>
                                             {(provided2, snapshot) => (
                                                 this.props.append
-                                                ? <PortalItem
-                                                    provided={provided2}
-                                                    snapshot={snapshot}
-                                                    item={item}
-                                                    index={index}
-                                                    dragAndDrop={this.props.dragAndDrop}
-                                                    showDragHandle={this.props.showDragHandle}
-                                                    addItem={this.props.addItem}
-                                                    onAddItem={() => this.props.onAddItem
-                                                        && this.props.onAddItem(index, item)}
-                                                    itemsDropdown={() => this.props.itemsDropdown
-                                                        ? this.props.itemsDropdown(index)
-                                                        : []}
-                                                />
-                                                : <div
-                                                    ref={provided2.innerRef}
-                                                    {...provided2.draggableProps}
-                                                    {...provided2.dragHandleProps} >
-                                                    <TableListItem
+                                                    ? <PortalItem
+                                                        provided={provided2}
+                                                        snapshot={snapshot}
+                                                        item={item}
+                                                        index={index}
                                                         dragAndDrop={this.props.dragAndDrop}
-                                                        start={item.start}
-                                                        center={item.center}
-                                                        end={item.end}
-                                                        action={item.action}
-                                                        onClick={item.onClick ? item.onClick : undefined}
-                                                        onDoubleClick={item.onDoubleClick
-                                                            ? item.onDoubleClick
-                                                            : undefined}
+                                                        showDragHandle={this.props.showDragHandle}
                                                         addItem={this.props.addItem}
+                                                        onAddItem={() => this.props.onAddItem
+                                                            && this.props.onAddItem(index, item)}
                                                         itemsDropdown={() => this.props.itemsDropdown
                                                             ? this.props.itemsDropdown(index)
                                                             : []}
-                                                        hexColor={item.hexColor}
-                                                        locked={item.locked}
-                                                        positionLocked={item.positionLocked}
-                                                        onAddItem={() => this.props.onAddItem
-                                                            && this.props.onAddItem(index, item)}
-                                                        showDragHandle={this.props.showDragHandle}
                                                     />
-                                                </div>
+                                                    : <div
+                                                        ref={provided2.innerRef}
+                                                        {...provided2.draggableProps}
+                                                        {...provided2.dragHandleProps} >
+                                                        <TableListItem
+                                                            dragAndDrop={this.props.dragAndDrop}
+                                                            start={item.start}
+                                                            center={item.center}
+                                                            end={item.end}
+                                                            action={item.action}
+                                                            onClick={item.onClick ? item.onClick : undefined}
+                                                            onDoubleClick={item.onDoubleClick
+                                                                ? item.onDoubleClick
+                                                                : undefined}
+                                                            addItem={this.props.addItem}
+                                                            itemsDropdown={() => this.props.itemsDropdown
+                                                                ? this.props.itemsDropdown(index)
+                                                                : []}
+                                                            hexColor={item.hexColor}
+                                                            locked={item.locked}
+                                                            positionLocked={item.positionLocked}
+                                                            onAddItem={() => this.props.onAddItem
+                                                                && this.props.onAddItem(index, item)}
+                                                            showDragHandle={this.props.showDragHandle}
+                                                        />
+                                                    </div>
                                             )}
                                         </Draggable>
                                     ))}
@@ -223,7 +223,7 @@ class TableList extends React.PureComponent<IProps, IState> {
                         </Tooltip>
                     </div>
                 </div>
-                : null
+                    : null
         );
     }
 }
@@ -272,6 +272,11 @@ class TableListItem extends React.PureComponent<IPropsItem> {
         }, this.delay);
     }
 
+    onActionMenuClick = (event: React.MouseEvent<HTMLElement>) => {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+
     render() {
 
         let classes = classNames('table-list__item', {
@@ -291,7 +296,7 @@ class TableListItem extends React.PureComponent<IPropsItem> {
                         onClick={() => this.onSingleClick()}
                         onDoubleClick={() => this.onDoubleClick()}
                         className={classes}>
-                        <div className='table-list__item-border' style={{backgroundColor: this.props.hexColor}}></div>
+                        <div className='table-list__item-border' style={{ backgroundColor: this.props.hexColor }}></div>
                         <div className='table-list__item-content'>
                             <div className='table-list__item-content-block'>
                                 {this.props.start && this.props.start}
@@ -303,7 +308,7 @@ class TableListItem extends React.PureComponent<IPropsItem> {
                                 {this.props.end && this.props.end}
                             </div>
                         </div>
-                        {this.props.action && <div className='table-list__slide-in-actions'>
+                        {this.props.action && <div className='table-list__slide-in-actions' onClick={this.onActionMenuClick}>
                             {this.props.action}
                         </div>}
                     </div>
@@ -320,7 +325,7 @@ class TableListItem extends React.PureComponent<IPropsItem> {
                                         size="small"
                                         shape="round"
                                         iconOnly={true}
-                                        onClick={() => false }
+                                        onClick={() => false}
                                     />
                                 </Dropdown>
                             </div>
@@ -332,7 +337,7 @@ class TableListItem extends React.PureComponent<IPropsItem> {
                     className={`${classes} table-list__item--margin`}
                     onClick={() => this.onSingleClick()}
                     onDoubleClick={() => this.onDoubleClick()}>
-                    <div className='table-list__item-border' style={{backgroundColor: this.props.hexColor}}></div>
+                    <div className='table-list__item-border' style={{ backgroundColor: this.props.hexColor }}></div>
                     <div className='table-list__item-content'>
                         <div className='table-list__item-content-block'>
                             {this.props.start && this.props.start}
@@ -344,7 +349,7 @@ class TableListItem extends React.PureComponent<IPropsItem> {
                             {this.props.end && this.props.end}
                         </div>
                     </div>
-                    {this.props.action && <div className='table-list__slide-in-actions'>
+                    {this.props.action && <div className='table-list__slide-in-actions' onClick={this.onActionMenuClick}>
                         {this.props.action}
                     </div>}
                 </div>

package/app-typescript/components/NavButton.tsx

@@ -8,12 +8,13 @@ interface IProps {
     text?: string;
     iconSize?: 'small' | 'big'; // defaults to 'small'
     theme?: 'light' | 'dark'; // defaults to 'light'
-    type?: 'default' | 'primary' | 'highlight' | 'darker';
+    type?: 'default' | 'primary' | 'highlight' | 'darker' | 'dark';
     state?: 'normal' | 'active'; // defaults to 'normal'
     value?: 'button' | 'submit' | 'reset'; // defaults to 'button'
     onClick(): void;
     badgeValue?: string;
 }
+
 export class NavButton extends React.PureComponent<IProps> {
     render() {
         let classes = classNames('sd-navbtn', {