@jetbrains/ring-ui 6.0.4-beta.0 → 6.0.4

package/components/loader/loader__core.js

@@ -40,12 +40,12 @@ export default class LoaderCore {
         stop: false,
         deterministic: false,
         colors: [
-            { r: 215, g: 60, b: 234 },
-            { r: 145, g: 53, b: 224 },
-            { r: 88, g: 72, b: 224 },
-            { r: 37, g: 183, b: 255 },
-            { r: 89, g: 189, b: 0 },
-            { r: 251, g: 172, b: 2 },
+            { r: 215, g: 60, b: 234 }, //#D73CEA
+            { r: 145, g: 53, b: 224 }, //#9135E0
+            { r: 88, g: 72, b: 224 }, //#5848F4
+            { r: 37, g: 183, b: 255 }, //#25B7FF
+            { r: 89, g: 189, b: 0 }, //#59BD00
+            { r: 251, g: 172, b: 2 }, //#FBAC02
             { r: 227, g: 37, b: 129 } //#E32581
         ]
     };

package/components/loader-inline/loader-inline.css

@@ -1,7 +1,6 @@
 @import "../global/variables.css";
 
 @value dark from "../global/variables_dark.css";
-@value unit from "../global/global.css";
 
 :root {
   /* stylelint-disable-next-line color-no-hex */
@@ -48,7 +47,7 @@
   animation: spin 1s linear infinite;
   vertical-align: -3px;
 
-  border-radius: unit;
+  border-radius: var(--ring-unit);
 
   &,
   &::after {
@@ -58,17 +57,17 @@
   &::after {
     display: block;
 
-    width: calc(unit * 2);
-    height: calc(unit * 2);
+    width: calc(var(--ring-unit) * 2);
+    height: calc(var(--ring-unit) * 2);
 
     content: "";
     animation: pulse 0.85s cubic-bezier(0.68, 0, 0.74, 0.74) infinite alternate;
 
     background-image: conic-gradient(var(--ring-loader-inline-stops));
-    mask-image: radial-gradient(unit, transparent 71.875%, var(--ring-content-background-color) 71.875%);
+    mask-image: radial-gradient(var(--ring-unit), transparent 71.875%, var(--ring-content-background-color) 71.875%);
   }
 }
 
 .children {
-  margin-left: calc(unit / 2);
+  margin-left: calc(var(--ring-unit) / 2);
 }

package/components/login-dialog/login-dialog.css

@@ -1,7 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 .iFrame {
   overflow: hidden;
 
@@ -21,5 +19,5 @@
   top: 0;
   right: 0;
 
-  padding: unit;
+  padding: var(--ring-unit);
 }

package/components/markdown/markdown.css

@@ -1,6 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
 @value p-margin: 10px;
 
 .inline {
@@ -50,7 +49,7 @@
   }
 
   & blockquote {
-    padding: 0 0 0 calc(2 * unit);
+    padding: 0 0 0 calc(2 * var(--ring-unit));
 
     color: var(--ring-secondary-color);
     box-shadow: inset 2px 0 0 var(--ring-line-color);
@@ -60,7 +59,7 @@
   }
 
   & ul {
-    padding: 0 0 0 calc(2 * unit);
+    padding: 0 0 0 calc(2 * var(--ring-unit));
   }
 
   & ol {

package/components/message/message.css

@@ -1,8 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-@value padding: calc(unit * 1.5);
-
 .container {
   display: inline;
 }
@@ -10,9 +7,9 @@
 .message {
   overflow: visible;
 
-  max-width: calc(unit * 40);
+  max-width: calc(var(--ring-unit) * 40);
 
-  padding: padding padding calc(unit * 2) calc(unit * 5);
+  padding: calc(var(--ring-unit) * 1.5) calc(var(--ring-unit) * 1.5) calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 5);
 
   text-align: left;
 
@@ -24,7 +21,7 @@
 .icon {
   position: absolute;
   top: 10px;
-  left: padding;
+  left: calc(var(--ring-unit) * 1.5);
 }
 
 .title {
@@ -36,7 +33,7 @@
 }
 
 .description {
-  margin: calc(unit / 2) 0 0;
+  margin: calc(var(--ring-unit) / 2) 0 0;
 
   color: var(--ring-text-color);
 
@@ -45,7 +42,7 @@
 }
 
 .button {
-  margin-top: padding;
+  margin-top: calc(var(--ring-unit) * 1.5);
 }
 
 .tail {

package/components/old-browsers-message/old-browsers-message.css

@@ -1,7 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 :global(.ring-old-browsers-message) {
   display: block;
 
@@ -13,7 +11,7 @@
 
   font-family: -apple-system, BlinkMacSystemFont, Ubuntu, "Helvetica Neue", Arial, sans-serif;
   font-size: var(--ring-font-size-larger);
-  line-height: calc(2.5 * unit);
+  line-height: calc(2.5 * var(--ring-unit));
 }
 
 :global(.ring-old-browsers-message_hidden) {
@@ -24,5 +22,5 @@
   cursor: pointer;
   user-select: none;
 
-  font-size: calc(3 * unit);
+  font-size: calc(3 * var(--ring-unit));
 }

package/components/pager/pager.css

@@ -1,19 +1,17 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 .pager {
   user-select: none;
 }
 
 .links {
-  margin-bottom: calc(unit * 2);
+  margin-bottom: calc(var(--ring-unit) * 2);
 }
 
 .link {
   display: inline-block;
 
-  margin-right: calc(unit * 2);
+  margin-right: calc(var(--ring-unit) * 2);
 }
 
 .linkDisabled {

package/components/panel/panel.css

@@ -1,14 +1,12 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 .panel {
   composes: panel from "../dialog/dialog.css"; /* TODO: Invert dependency using :externals CSS Modules selector */
 
   position: relative;
 
-  margin-top: calc(unit * 2);
-  padding: calc(unit * 2) calc(unit * 4) calc(unit * 4);
+  margin-top: calc(var(--ring-unit) * 2);
+  padding: calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 4) calc(var(--ring-unit) * 4);
 
   border-top: 1px solid var(--ring-popup-border-color);
 
@@ -17,6 +15,6 @@
   }
 
   & > button:not(:last-child) {
-    margin-right: unit;
+    margin-right: var(--ring-unit);
   }
 }

package/components/popup/popup.js

@@ -287,9 +287,9 @@ Popup.propTypes = {
     children: PropTypes.node.isRequired,
     dontCloseOnAnchorClick: PropTypes.bool,
     shortcuts: PropTypes.bool,
-    keepMounted: PropTypes.bool,
+    keepMounted: PropTypes.bool, // pass this prop to preserve the popup's DOM state while hidden
     'data-test': PropTypes.string,
-    client: PropTypes.bool,
+    client: PropTypes.bool, // true means that it's never used in SSR
     directions: PropTypes.arrayOf(PropTypes.string),
     autoPositioning: PropTypes.bool,
     autoCorrectTopOverflow: PropTypes.bool,
@@ -298,7 +298,7 @@ Popup.propTypes = {
     maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     minWidth: PropTypes.number,
     sidePadding: PropTypes.number,
-    attached: PropTypes.bool,
+    attached: PropTypes.bool, // Popup adjacent to an input, without upper border and shadow
     onMouseDown: PropTypes.func,
     onMouseUp: PropTypes.func,
     onMouseOver: PropTypes.func,

package/components/progress-bar/progress-bar.css

@@ -1,7 +1,6 @@
 @import "../global/variables.css";
 
 @value dark from "../global/variables_dark.css";
-@value unit from "../global/global.css";
 
 :root {
   --ring-progress-bar-background-color: rgba(0, 0, 0, 0.2);
@@ -20,8 +19,8 @@
 
   overflow: hidden;
 
-  height: calc(unit / 2);
-  margin-bottom: calc(unit / 2);
+  height: calc(var(--ring-unit) / 2);
+  margin-bottom: calc(var(--ring-unit) / 2);
 
   border-radius: 2px;
   background-color: var(--ring-progress-bar-background-color);
@@ -49,7 +48,7 @@
   border-radius: 2px;
   background-color: var(--ring-main-color);
 
-  line-height: calc(unit / 2);
+  line-height: calc(var(--ring-unit) / 2);
 
   &::after {
     position: absolute;
@@ -63,6 +62,12 @@
 
     background-image: linear-gradient(to right, rgba(0, 0, 0, 0), var(--ring-progress-bar-line-background-color), rgba(0, 0, 0, 0));
     background-repeat: no-repeat;
+
+    .staticLineColor &  {
+      animation: none;
+
+      background-image: var(--ring-progress-bar-line-background-color);
+    }
   }
 }
 

package/components/progress-bar/progress-bar.d.ts

@@ -5,6 +5,7 @@ export interface ProgressBarProps extends HTMLAttributes<HTMLElement> {
     value: number;
     label: string;
     global?: boolean | null | undefined;
+    staticColor?: boolean;
 }
 /**
  * @name Progress Bar
@@ -43,6 +44,11 @@ export default class ProgressBar extends PureComponent<ProgressBarProps> {
          * @type {number}
          */
         value: PropTypes.Requireable<number>;
+        /**
+         * Disables Disabled progress bar color animation and sets it to static color.
+         * @type {boolean}
+         */
+        staticColor: PropTypes.Requireable<boolean>;
     };
     static defaultProps: {
         max: number;

package/components/progress-bar/progress-bar.js

@@ -42,7 +42,12 @@ export default class ProgressBar extends PureComponent {
          * A floating point number that specifies current task completion rate.
          * @type {number}
          */
-        value: PropTypes.number
+        value: PropTypes.number,
+        /**
+         * Disables Disabled progress bar color animation and sets it to static color.
+         * @type {boolean}
+         */
+        staticColor: PropTypes.bool
     };
     static defaultProps = {
         max: 1.0,
@@ -58,10 +63,11 @@ export default class ProgressBar extends PureComponent {
         this.progressbar = el;
     };
     render() {
-        const { className, global, max, value, label, ...otherProps } = this.props;
+        const { className, global, max, value, label, staticColor, ...otherProps } = this.props;
         const width = value ? `${ProgressBar.toPercent(value, max)}%` : undefined;
         const classes = classNames(styles.progressBar, className, {
-            [styles.globalMode]: global
+            [styles.globalMode]: global,
+            [styles.staticLineColor]: staticColor
         });
         return (<div {...otherProps} className={classes} ref={this.progressbarWrapperRef}>
         <div className={styles.line} ref={this.progressbarRef} role="progressbar" aria-label={label} aria-valuenow={value} aria-valuemin={0} aria-valuemax={max} style={{ width }}/>

package/components/query-assist/query-assist.css

@@ -1,13 +1,12 @@
 @import "../global/variables.css";
 @import "../button/button.css";
 
-@value unit from "../global/global.css";
 @value overInputZIndex: 2;
-@value inputGap: calc(unit * 3);
+@value inputGap: calc(var(--ring-unit) * 3);
 
 .queryAssist {
-  --ring-input-icon-offset: calc(unit * 2.5);
-  --ring-input-padding-inline: unit;
+  --ring-input-icon-offset: calc(var(--ring-unit) * 2.5);
+  --ring-input-padding-inline: var(--ring-unit);
   --ring-input-padding-block: 1px;
 
   position: relative;

package/components/query-assist/query-assist.js

@@ -800,7 +800,7 @@ export default class QueryAssist extends Component {
         const inputClasses = classNames(this.props.inputClassName, {
             [`${styles.input} ring-js-shortcuts`]: true,
             [styles.inputGap]: actions.length || this.isRenderingGlassOrLoader() && !glass,
-            [styles.inputGap2]: actions.length === 2,
+            [styles.inputGap2]: actions.length === 2, // TODO: replace with flex-box layout
             [styles.inputRevertOrder]: !glass || huge
         });
         const placeholderStyles = classNames({

package/components/radio/radio.css

@@ -1,8 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-@value radio-size: calc(2 * unit);
-
 .radio {
   position: relative;
 
@@ -30,15 +27,15 @@
   flex-shrink: 0;
 
   box-sizing: border-box;
-  width: radio-size;
-  height: radio-size;
+  width: calc(2 * var(--ring-unit));
+  height: calc(2 * var(--ring-unit));
 
   user-select: none;
   transition: border-color var(--ring-ease), box-shadow var(--ring-ease);
   pointer-events: none;
 
   border: 1px solid var(--ring-borders-color);
-  border-radius: unit;
+  border-radius: var(--ring-unit);
   background-color: var(--ring-content-background-color);
 
   &::after {
@@ -46,8 +43,8 @@
     top: 3px;
     left: 3px;
 
-    width: unit;
-    height: unit;
+    width: var(--ring-unit);
+    height: var(--ring-unit);
 
     content: "";
 
@@ -57,7 +54,7 @@
 
     opacity: 0;
 
-    border-radius: calc(unit / 2);
+    border-radius: calc(var(--ring-unit) / 2);
     background-color: var(--ring-main-color);
   }
 }
@@ -119,7 +116,7 @@
 }
 
 .label {
-  margin-left: unit;
+  margin-left: var(--ring-unit);
 
   line-height: var(--ring-line-height);
 }

package/components/select/select-popup.css

@@ -1,11 +1,9 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 .filterWithTags {
   overflow: hidden;
 
-  margin: calc(unit * 2) unit 0;
+  margin: calc(var(--ring-unit) * 2) var(--ring-unit) 0;
   padding: 3px;
 
   text-align: left;
@@ -42,32 +40,36 @@
   width: 0;
 }
 
+.popup {
+  overscroll-behavior: contain;
+}
+
 .filterWrapper {
   position: relative;
 
   display: flex;
 
   margin: 0;
-  padding-right: unit;
-  padding-left: calc(unit * 5.5);
+  padding-right: var(--ring-unit);
+  padding-left: calc(var(--ring-unit) * 5.5);
 
   border-bottom: 1px solid var(--ring-borders-color);
 
   [dir="rtl"] & {
-    padding-right: calc(unit * 5.5);
-    padding-left: unit;
+    padding-right: calc(var(--ring-unit) * 5.5);
+    padding-left: var(--ring-unit);
   }
 }
 
 .filterIcon {
   position: absolute;
   top: 7px;
-  left: calc(unit * 2);
+  left: calc(var(--ring-unit) * 2);
 
   color: var(--ring-icon-color);
 
   [dir="rtl"] & {
-    right: calc(unit * 2);
+    right: calc(var(--ring-unit) * 2);
     left: auto;
   }
 }
@@ -89,8 +91,8 @@
 .message {
   display: inline-block;
 
-  margin: unit 0;
-  padding: 0 calc(2 * unit);
+  margin: var(--ring-unit) 0;
+  padding: 0 calc(2 * var(--ring-unit));
 }
 
 .selectAll {

package/components/select/select.css

@@ -1,6 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
 @value button-shadow from "../button/button.css";
 
 .select {
@@ -29,12 +28,12 @@
   }
 
   .toolbar & {
-    height: calc(4 * unit);
-    margin: unit 0;
+    height: calc(4 * var(--ring-unit));
+    margin: var(--ring-unit) 0;
   }
 
   &.buttonSpaced {
-    padding: 0 calc(2 * unit);
+    padding: 0 calc(2 * var(--ring-unit));
   }
 }
 
@@ -63,8 +62,8 @@
 
   display: inline-block;
 
-  width: calc(2 * unit);
-  height: calc(2 * unit);
+  width: calc(2 * var(--ring-unit));
+  height: calc(2 * var(--ring-unit));
   margin: 0 4px;
 
   background-repeat: no-repeat;
@@ -80,15 +79,15 @@
 }
 
 .sizeS {
-  width: calc(unit * 12);
+  width: calc(var(--ring-unit) * 12);
 }
 
 .sizeM {
-  width: calc(unit * 30);
+  width: calc(var(--ring-unit) * 30);
 }
 
 .sizeL {
-  width: calc(unit * 50);
+  width: calc(var(--ring-unit) * 50);
 }
 
 .sizeFULL {
@@ -113,7 +112,7 @@
 
   box-sizing: border-box;
   width: 100%;
-  height: calc(unit * 4 + 1px);
+  height: calc(var(--ring-unit) * 4 + 1px);
   padding: 0 0 3px;
 
   cursor: pointer;
@@ -157,10 +156,10 @@
   display: block;
 
   width: 100%;
-  padding-left: unit;
+  padding-left: var(--ring-unit);
 
   text-align: left;
-  vertical-align: calc(0 - unit);
+  vertical-align: calc(var(--ring-unit) * -1);
 }
 
 .buttonValue:focus-visible {
@@ -216,8 +215,8 @@
 }
 
 .popup {
-  min-width: calc(unit * 30);
-  max-width: calc(unit * 40);
+  min-width: calc(var(--ring-unit) * 30);
+  max-width: calc(var(--ring-unit) * 40);
 }
 
 .chevron.chevron {

package/components/select/select.js

@@ -181,46 +181,46 @@ function isSameSelected(prevSelected, selected) {
 export default class Select extends Component {
     static defaultProps = {
         data: [],
-        filter: false,
+        filter: false, // enable filter (not in INPUT modes)
         filterIcon: null,
         filterRef: noop,
-        multiple: false,
-        clear: false,
-        loading: false,
-        disabled: false,
+        multiple: false, // multiple can be an object - see demo for more information
+        clear: false, // enable clear button that clears the "selected" state
+        loading: false, // show a loading indicator while data is loading
+        disabled: false, // disable select
         type: Type.BUTTON,
         size: Size.M,
-        targetElement: null,
-        hideSelected: false,
-        allowAny: false,
-        hideArrow: false,
+        targetElement: null, // element to bind the popup to (select BUTTON or INPUT by default)
+        hideSelected: false, // INPUT mode: clears the input after an option is selected (useful when the selection is displayed in some custom way elsewhere)
+        allowAny: false, // INPUT mode: allows any value to be entered
+        hideArrow: false, // hide dropdown arrow icon
         showPopup: false,
-        maxHeight: 600,
+        maxHeight: 600, // height of the options list, including the filter and the 'Add' button
         directions: [
             Popup.PopupProps.Directions.BOTTOM_RIGHT,
             Popup.PopupProps.Directions.BOTTOM_LEFT,
             Popup.PopupProps.Directions.TOP_LEFT,
             Popup.PopupProps.Directions.TOP_RIGHT
         ],
-        selected: null,
-        label: null,
-        selectedLabel: null,
-        inputPlaceholder: '',
-        hint: null,
+        selected: null, // current selection (item / array of items)
+        label: null, // BUTTON or INPUT label (nothing selected)
+        selectedLabel: null, // BUTTON or INPUT label (something selected)
+        inputPlaceholder: '', // Placeholder for input modes
+        hint: null, // hint text to display under the list
         shortcutsEnabled: false,
         onBeforeOpen: noop,
         onLoadMore: noop,
         onOpen: noop,
         onClose: noop,
-        onFilter: noop,
+        onFilter: noop, // search string as first argument
         onFocus: noop,
         onBlur: noop,
         onKeyDown: noop,
-        onSelect: noop,
-        onDeselect: noop,
-        onOutsideClick: noop,
-        onChange: noop,
-        onAdd: noop,
+        onSelect: noop, // single + multi
+        onDeselect: noop, // multi
+        onOutsideClick: noop, // multi
+        onChange: noop, // multi
+        onAdd: noop, // search string as first argument
         onDone: noop,
         onReset: noop,
         tags: null,