@jetbrains/ring-ui 7.0.0-beta.4 → 7.0.0-beta.6

package/components/auth/auth__core.js

@@ -137,7 +137,10 @@ export default class Auth {
             this.addListener(LOGOUT_EVENT, this.config.onLogout);
         }
         if (this.config.reloadOnUserChange) {
-            this.addListener(USER_CHANGED_EVENT, () => this._reloadCurrentPage());
+            this.addListener(USER_CHANGED_EVENT, () => {
+                // Timeout is needed to ensure all other listeners triggered before stopping current page
+                setTimeout(() => this._reloadCurrentPage());
+            });
         }
         this.addListener(LOGOUT_POSTPONED_EVENT, () => this._setPostponed(true));
         this.addListener(USER_CHANGE_POSTPONED_EVENT, () => this._setPostponed(true));

package/components/auth/storage.js

@@ -39,8 +39,7 @@ export default class AuthStorage {
         this.stateTTL = config.stateTTL || DEFAULT_STATE_TTL;
         this._lastMessage = null;
         const StorageConstructor = config.storage || Storage;
-        this.stateQuota = Math.min(config.stateQuota ||
-            DEFAULT_STATE_QUOTA, StorageConstructor.QUOTA || Infinity);
+        this.stateQuota = config.stateQuota || DEFAULT_STATE_QUOTA;
         this._stateStorage = new StorageConstructor({
             cookieName: 'ring-state'
         });

package/components/button/button.css

@@ -5,147 +5,166 @@
 
 .heightS {
   --ring-button-height: calc(var(--ring-unit) * 3);
+  --ring-button-padding-block: calc(var(--ring-unit) * 0.5);
   --ring-button-font-size: var(--ring-font-size-smaller);
+  --ring-button-line-height: var(--ring-line-height-lowest);
+  --ring-button-icon-line-height: calc(var(--ring-unit) * 1.5);
 }
 
 .heightM {
   --ring-button-height: calc(var(--ring-unit) * 3.5);
+  --ring-button-padding-block: calc(var(--ring-unit) * 0.5);
   --ring-button-font-size: var(--ring-font-size);
+  --ring-button-line-height: var(--ring-line-height);
+  --ring-button-icon-line-height: calc(var(--ring-unit) * 2);
 }
 
 .heightL {
   --ring-button-height: calc(var(--ring-unit) * 4);
+  --ring-button-padding-block: calc(var(--ring-unit) * 0.75);
   --ring-button-font-size: var(--ring-font-size);
+  --ring-button-line-height: var(--ring-line-height);
+  --ring-button-icon-line-height: calc(var(--ring-unit) * 2);
 }
 
 .button {
-  position: relative;
-
-  display: inline-block;
+  --ring-button-focus-border-color: var(--ring-border-hover-color);
 
   box-sizing: border-box;
-  height: var(--ring-button-height);
   margin: 0;
-  padding: 0 calc(var(--ring-unit) * 2);
 
   cursor: pointer;
   transition: color var(--ring-ease), background-color var(--ring-ease), box-shadow var(--ring-ease);
   white-space: nowrap;
   text-decoration: none;
 
-  color: var(--ring-text-color);
-
   border: 0;
   border-radius: var(--ring-border-radius);
   outline: 0;
-  background-color: var(--ring-content-background-color);
-  box-shadow: button-shadow var(--ring-borders-color);
-
-  font-family: var(--ring-font-family);
-  font-size: var(--ring-button-font-size);
 
-  line-height: var(--ring-button-height);
+  font-family: var(--ring-font-family), sans-serif;
 
-  &:hover {
+  &:hover,
+  &:active,
+  &:focus-visible {
     transition: none;
-
-    box-shadow: button-shadow var(--ring-border-hover-color);
   }
 
-  &:active {
-    transition: none;
+  &::-moz-focus-inner {
+    padding: 0;
 
-    background-color: var(--ring-selected-background-color);
-    box-shadow: button-shadow var(--ring-border-hover-color);
+    border: 0;
+    outline: 0;
   }
+}
 
-  &:focus-visible {
-    transition: none;
+.block {
+  --ring-button-background-color: var(--ring-content-background-color);
+  --ring-button-border-color: var(--ring-borders-color);
+  --ring-button-padding-inline: calc(var(--ring-unit) * 2);
 
-    box-shadow: button-shadow var(--ring-border-hover-color), 0 0 0 1px var(--ring-border-hover-color);
-  }
+  display: inline-block;
 
-  &.active {
-    transition: none;
+  height: var(--ring-button-height);
+  padding: var(--ring-button-padding-block) var(--ring-button-padding-inline);
 
-    background-color: var(--ring-hover-background-color);
-    box-shadow: button-shadow var(--ring-main-color);
-  }
+  color: var(--ring-text-color);
 
-  &:focus-visible.active {
-    box-shadow: inset 0 0 0 2px var(--ring-main-color), 0 0 0 1px var(--ring-border-hover-color);
-  }
+  background-color: var(--ring-button-background-color);
+  box-shadow: button-shadow var(--ring-button-border-color);
 
-  &[disabled] {
-    cursor: auto;
+  font-size: var(--ring-button-font-size);
+  line-height: var(--ring-button-line-height);
 
-    background-color: var(--ring-disabled-background-color);
-    box-shadow: button-shadow var(--ring-border-disabled-color);
+  &:hover {
+    --ring-button-border-color: var(--ring-border-hover-color);
   }
 
-  &[disabled].active {
-    background-color: var(--ring-disabled-selected-background-color);
-    box-shadow: button-shadow var(--ring-border-selected-disabled-color);
+  &:active {
+    --ring-button-background-color: var(--ring-selected-background-color);
+    --ring-button-border-color: var(--ring-border-hover-color);
   }
 
-  &[disabled],
-  &[disabled].withIcon,
-  &[disabled]:hover {
-    color: var(--ring-disabled-color);
+  &:focus-visible {
+    box-shadow: button-shadow var(--ring-button-focus-border-color), 0 0 0 1px var(--ring-button-focus-border-color);
   }
+}
 
-  /* stylelint-disable-next-line selector-max-specificity */
-  &[disabled] .icon.icon {
-    color: var(--ring-icon-disabled-color);
-  }
+.inline {
+  display: inline;
 
-  &::-moz-focus-inner {
-    padding: 0;
+  margin: 0;
+  padding: 0;
 
-    border: 0;
-    outline: 0;
+  color: var(--ring-action-link-color);
+  background: transparent;
+
+  font-size: inherit;
+  line-height: inherit;
+
+  &:focus-visible {
+    box-shadow: 0 0 0 2px var(--ring-button-focus-border-color);
   }
 }
 
-.withIcon {
-  color: var(--ring-secondary-color);
+.icon {
+  margin-right: calc(var(--ring-unit) * 0.5);
+
+  transition: color var(--ring-ease);
+
+  color: inherit;
+
+  line-height: var(--ring-button-icon-line-height);
 }
 
-.primary {
-  color: var(--ring-white-text-color);
-  background-color: var(--ring-main-color);
-  box-shadow: none;
+.inline .icon {
+  color: var(--ring-main-color);
+}
 
-  &:hover {
-    transition: none;
+.withNormalIcon .icon {
+  color: var(--ring-icon-color);
+}
+
+.inline {
+  &:hover,
+  &:active,
+  &.active {
+    color: var(--ring-link-hover-color);
 
-    background-color: var(--ring-main-hover-color);
-    box-shadow: none;
+    & .icon {
+      color: inherit;
+    }
   }
+}
 
-  &.withIcon,
-  &.withIcon:active,
-  &.withIcon.active {
-    color: var(--ring-action-link-color);
+.primaryBlock {
+  --ring-button-background-color: var(--ring-main-color);
+  --ring-button-border-color: transparent;
+
+  color: var(--ring-white-text-color);
+
+  &:hover {
+    --ring-button-background-color: var(--ring-main-hover-color);
+    --ring-button-border-color: transparent;
   }
 
   &:focus-visible,
   &:active,
   &.active {
-    background-color: var(--ring-button-primary-background-color);
+    --ring-button-background-color: var(--ring-button-primary-background-color);
   }
 
   &:active,
   &.active {
-    box-shadow: button-shadow var(--ring-button-primary-border-color);
+    --ring-button-border-color: var(--ring-button-primary-border-color);
   }
 
-  &[disabled] {
-    background-color: var(--ring-disabled-background-color);
-    box-shadow: button-shadow var(--ring-border-disabled-color);
+  &.disabled {
+    --ring-button-background-color: var(--ring-disabled-background-color);
+    --ring-button-border-color: var(--ring-border-disabled-color);
   }
 
-  &[disabled].loader {
+  &.loader {
     color: var(--ring-white-text-color);
   }
 
@@ -170,145 +189,81 @@
 }
 
 .danger {
-  &,
-  &.withIcon,
-  &.withIcon:active,
-  &.withIcon.active,
-  &.text,
-  &.text:active,
-  &.text.active {
-    color: var(--ring-error-color);
-  }
+  --ring-button-focus-border-color: var(--ring-button-danger-hover-color);
+
+  color: var(--ring-error-color);
 
   &:active,
   &.active {
-    background-color: var(--ring-button-danger-active-color);
+    --ring-button-background-color: var(--ring-button-danger-active-color);
   }
 
   &:active,
   &.active,
-  &:focus-visible,
   &:hover {
-    box-shadow: button-shadow var(--ring-button-danger-hover-color);
-  }
-
-  &:focus-visible,
-  &:hover {
-    transition: none;
+    --ring-button-border-color: var(--ring-button-danger-hover-color);
   }
 }
 
-.text.text,
-.withIcon.withIcon {
-  background-color: transparent;
-  box-shadow: none;
+.disabled {
+  cursor: auto;
 
-  &:hover {
-    transition: none;
-  }
+  &, &:hover, &:active {
+    --ring-button-background-color: var(--ring-disabled-background-color);
+    --ring-button-border-color: var(--ring-border-disabled-color);
 
-  &:active,
-  &.active {
-    background-color: transparent;
-    box-shadow: none;
-  }
+    color: var(--ring-disabled-color);
 
-  &:focus-visible {
-    box-shadow: inset 0 0 0 2px var(--ring-border-hover-color);
+    & .icon {
+      color: var(--ring-icon-disabled-color);
+    }
   }
 }
 
-.loader.text > .content {
-  animation-name: text-loading;
-  animation-duration: 1200ms;
-  animation-iteration-count: infinite;
-}
-
-.text.text:hover {
-  background-color: transparent;
-  box-shadow: none;
-}
+.active {
+  &.block {
+    --ring-button-background-color: var(--ring-hover-background-color);
+    --ring-button-border-color: var(--ring-main-color);
 
-.withIcon:hover:not(:focus-visible) {
-  background-color: transparent;
-  box-shadow: none;
-}
-
-.text {
-  color: var(--ring-action-link-color);
-}
-
-.inline {
-  display: inline-block;
-
-  margin: 0;
-  padding: 0;
-
-  font-size: var(--ring-font-size);
-}
-
-.withIcon {
-  padding: 0 var(--ring-unit);
-}
-
-.text {
-  &:active,
-  &.active {
-    color: var(--ring-link-hover-color);
+    transition: none;
   }
-}
 
-.withIcon {
-  &:active,
-  &.active {
-    color: var(--ring-action-link-color);
+  &.disabled {
+    --ring-button-background-color: var(--ring-disabled-selected-background-color);
+    --ring-button-border-color: var(--ring-border-selected-disabled-color);
   }
 }
 
-.withIcon:hover {
-  color: var(--ring-link-hover-color);
-}
-
-.text:hover {
-  color: var(--ring-link-hover-color);
-}
-
-.icon {
-  color: inherit;
-
-  line-height: normal;
-
-  &:not(:last-child) {
-    margin-right: calc(var(--ring-unit) * 0.5);
+.iconOnly {
+  &.heightS {
+    --ring-button-padding-block: calc(var(--ring-unit) * 0.75);
+    --ring-button-padding-inline: calc(var(--ring-unit) * 0.75);
   }
-}
 
-.withNormalIcon .icon {
-  transition: color var(--ring-ease);
-
-  color: var(--ring-icon-color);
-}
+  &.heightM {
+    --ring-button-padding-block: calc(var(--ring-unit) * 0.75);
+    --ring-button-padding-inline: var(--ring-unit);
+  }
 
-.withNormalIcon:active,
-.withNormalIcon.active {
-  color: var(--ring-main-color);
+  &.heightL {
+    --ring-button-padding-block: var(--ring-unit);
+    --ring-button-padding-inline: var(--ring-unit);
+  }
 
   & .icon {
-    transition: none;
-
-    color: inherit;
+    margin: 0;
   }
-}
 
-.withNormalIcon:hover .icon,
-.withDangerIcon:hover .icon {
-  transition: none;
+  &.block {
+    vertical-align: -2px;
 
-  color: inherit;
+    & .icon {
+      vertical-align: 2px;
+    }
+  }
 }
 
-.withDangerIcon .icon,
-.withDangerIcon:active .icon {
+.danger .icon {
   color: var(--ring-icon-error-color);
 }
 
@@ -316,9 +271,19 @@
   position: relative;
   z-index: 0;
 
-  pointer-events: none;
+  cursor: auto;
 
   background-color: transparent;
+
+  &:hover {
+    --ring-button-border-color: var(--ring-borders-color);
+  }
+}
+
+.loader.inline {
+  animation-name: text-loading;
+  animation-duration: 1200ms;
+  animation-iteration-count: infinite;
 }
 
 .loaderBackground {
@@ -355,29 +320,32 @@
   }
 }
 
-.delayed .content::after {
+.delayed::after {
   content: "…";
 }
 
 .short {
+  --ring-button-padding-inline: 0;
+
   width: calc(var(--ring-unit) * 4);
-  padding: 0;
 }
 
 .dropdownIcon {
-  margin-right: calc(var(--ring-unit) * -0.5);
-
   margin-left: 2px;
 
   transition: color var(--ring-ease);
 
-  color: var(--ring-icon-secondary-color);
+  .block & {
+    margin-right: calc(var(--ring-unit) * -0.5);
+
+    color: var(--ring-icon-secondary-color);
+  }
 
   .primary & {
     color: unset;
   }
 
-  line-height: normal;
+  line-height: var(--ring-button-icon-line-height);
 }
 
 .button:hover .dropdownIcon {

package/components/button/button.js

@@ -2,11 +2,13 @@ import { createRef, PureComponent } from 'react';
 import * as React from 'react';
 import classNames from 'classnames';
 import chevronDown from '@jetbrains/icons/chevron-down';
+import deprecate from 'util-deprecate';
 import Icon, { Size } from '../icon/icon';
 import ClickableLink from '../link/clickableLink';
 import { ControlsHeightContext } from '../global/controls-height';
 import styles from './button.css';
 import { getButtonClasses } from './button__classes';
+const warnText = deprecate(() => { }, 'Button: "text" prop is deprecated and will be removed in 8.0. Use inline instead.');
 /**
  * @name Button
  */
@@ -20,24 +22,27 @@ export class Button extends PureComponent {
     render() {
         const { 
         // Modifiers
-        active, danger, delayed, loader, primary, short, text, inline, dropdown, height = this.context, 
+        active, danger, delayed, loader, primary, short, text, dropdown, height, 
         // Props
-        icon, iconSize, iconClassName, iconSuppressSizeWarning, className, children, ...props } = this.props;
-        const classes = getButtonClasses({ className, active, danger, delayed, icon, loader,
-            primary, short, text, inline, height });
-        const content = (<span className={styles.content}>
-        {icon && (<span className={classNames(styles.icon, iconClassName)}>
-            <Icon glyph={icon} size={iconSize} loading={loader} suppressSizeWarning={iconSuppressSizeWarning}/>
-          </span>)}
-        {children && (<span>{children}</span>)}
+        icon, iconSize, iconClassName, iconSuppressSizeWarning, className, children, inline, ...props } = this.props;
+        const isInline = inline ?? text ?? icon != null;
+        if (text != null) {
+            warnText();
+        }
+        const classes = getButtonClasses({
+            ...this.props, inline: isInline, height: height ?? this.context
+        });
+        const content = (<>
+        {icon && (<Icon className={classNames(styles.icon, iconClassName)} glyph={icon} size={iconSize} loading={loader && isInline} suppressSizeWarning={iconSuppressSizeWarning}/>)}
+        {children}
         {dropdown && (<Icon glyph={chevronDown} className={styles.dropdownIcon}/>)}
-      </span>);
+      </>);
         const commonProps = {
             tabIndex: loader ? -1 : 0,
             ...props,
             className: classes,
             children: <>
-        {loader && !text && !icon && <div className={styles.loaderBackground}/>}
+        {loader && !isInline && <div className={styles.loaderBackground}/>}
         {content}
       </>
         };

package/components/button/button__classes.d.ts

@@ -1,2 +1,2 @@
 import { ButtonProps } from './button';
-export declare function getButtonClasses({ className, active, disabled, loader, primary, short, text, inline, danger, delayed, icon, height }: ButtonProps): string;
+export declare function getButtonClasses({ className, active, disabled, loader, primary, short, inline, danger, delayed, icon, height, children }: ButtonProps): string;

package/components/button/button__classes.js

@@ -1,18 +1,20 @@
 import classNames from 'classnames';
 import styles from './button.css';
-export function getButtonClasses({ className, active, disabled, loader, primary, short, text, inline, danger, delayed, icon, height }) {
-    const withNormalIcon = icon && !active && !danger && !primary && !disabled;
-    return classNames(styles.button, className, styles[`height${height}`], {
+export function getButtonClasses({ className, active, disabled, loader, primary, short, inline, danger, delayed, icon, height, children }) {
+    const iconOnly = icon && !children;
+    const primaryBlock = primary && !inline;
+    const withNormalIcon = icon && !active && !danger && !primary && !disabled &&
+        (!inline || iconOnly);
+    return classNames(styles.button, className, styles[`height${height}`], inline ? styles.inline : styles.block, {
         [styles.active]: active,
         [styles.danger]: danger,
         [styles.delayed]: delayed,
-        [styles.withIcon]: icon,
         [styles.withNormalIcon]: withNormalIcon,
-        [styles.withDangerIcon]: icon && danger,
-        [styles.loader]: loader && !icon,
+        [styles.loader]: loader,
         [styles.primary]: primary,
+        [styles.primaryBlock]: primaryBlock,
         [styles.short]: short,
-        [styles.text]: text,
-        [styles.inline]: inline
+        [styles.disabled]: disabled,
+        [styles.iconOnly]: iconOnly
     });
 }

package/components/data-list/data-list.css

@@ -64,6 +64,7 @@
 }
 
 .collapseButton {
+  position: relative;
   top: 1px;
   left: -5px;
 

package/components/dialog/dialog.css

@@ -102,8 +102,8 @@
 }
 
 .closeButtonOutside {
-  top: 0;
-  right: calc(var(--ring-unit) * -4);
+  top: calc(var(--ring-unit) / 2);
+  right: calc(var(--ring-unit) * -3);
 }
 
 .closeButtonInside {

package/components/global/variables.css

@@ -90,6 +90,8 @@
   --ring-popup-background-color: rgb(var(--ring-popup-background-components)); /* #FFFFFF */
   --ring-sidebar-background-components: 247, 248, 250;
   --ring-sidebar-background-color: rgb(var(--ring-sidebar-background-components)); /* #F7F8FA */
+  --ring-secondary-background-components: 247, 248, 250;
+  --ring-secondary-background-color: rgb(var(--ring-secondary-background-components)); /* #F7F8FA */
   --ring-selected-background-components: 212, 226, 255;
   --ring-selected-background-color: rgb(var(--ring-selected-background-components)); /* #D4E2FF */
   --ring-hover-background-components: 237, 243, 255;

package/components/global/variables_dark.css

@@ -76,6 +76,8 @@
   --ring-popup-background-color: rgb(var(--ring-popup-background-components)); /* #393B40 */
   --ring-sidebar-background-components: 43, 45, 48;
   --ring-sidebar-background-color: rgb(var(--ring-sidebar-background-components)); /* #2B2D30 */
+  --ring-secondary-background-components: 43, 45, 48;
+  --ring-secondary-background-color: rgb(var(--ring-secondary-background-components)); /* #2B2D30 */
   --ring-selected-background-components: 46, 67, 110;
   --ring-selected-background-color: rgb(var(--ring-selected-background-components)); /* #2E436E */
   --ring-hover-background-components: 37, 50, 77;

package/components/header/header.css

@@ -130,6 +130,7 @@
 }
 
 .icon {
+  display: inline-block;
   flex-shrink: 0;
 
   width: calc(var(--ring-unit) * 5);

package/components/icon/icon.css

@@ -16,7 +16,7 @@
   }
 
   &[width="12"] {
-    vertical-align: -1px;
+    vertical-align: -2px;
   }
 
   &[width="16"] {

package/components/input/input.css

@@ -121,7 +121,7 @@
 
 .clear {
   position: absolute;
-  top: calc(var(--ring-input-padding-block) + 1px);
+  top: var(--ring-input-padding-block);
   right: var(--ring-input-padding-inline);
 
   height: auto;

package/components/message/message.css

@@ -41,8 +41,8 @@
   line-height: var(--ring-line-height-lowest);
 }
 
-.button {
-  margin-top: calc(var(--ring-unit) * 1.5);
+.gotIt {
+  margin: calc(var(--ring-unit) * 1.5) calc(var(--ring-unit) * 2) 0 0;
 }
 
 .tail {