@jetbrains/ring-ui 4.1.12 → 5.0.0-beta.11

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

@@ -0,0 +1,58 @@
+import { HTMLAttributes, PureComponent } from 'react';
+import PropTypes from 'prop-types';
+export interface ProgressBarProps extends HTMLAttributes<HTMLElement> {
+    max: number;
+    value: number;
+    label: string;
+    global?: boolean | null | undefined;
+}
+/**
+ * @name Progress Bar
+ */
+export default class ProgressBar extends PureComponent<ProgressBarProps> {
+    /**
+     * @param {number} value The progress task value
+     * @param {number} max The maximum value
+     * @return {number} The progress task value in percents
+     * @private
+     */
+    static toPercent(value: number, max: number): number;
+    static propTypes: {
+        label: PropTypes.Requireable<string>;
+        /**
+         * Sets the ring-progress-bar_global class to position the progress bar on top of the screen.
+         * Should be placed directly inside body, will be positioned right below .ring-header
+         * if placed adjacent to it.
+         * @type {boolean}
+         */
+        global: PropTypes.Requireable<boolean>;
+        /**
+         * Custom class
+         * @type {string}
+         */
+        className: PropTypes.Requireable<string>;
+        style: PropTypes.Requireable<object>;
+        /**
+         * A floating point number that specifies minimum completion rate for a task to be considered
+         * complete. Default value is 1.0.
+         * @type {number}
+         */
+        max: PropTypes.Requireable<number>;
+        /**
+         * A floating point number that specifies current task completion rate.
+         * @type {number}
+         */
+        value: PropTypes.Requireable<number>;
+    };
+    static defaultProps: {
+        max: number;
+        value: number;
+        label: string;
+    };
+    progressbarWrapper?: (HTMLElement | null);
+    progressbarWrapperRef: (el: HTMLElement | null) => void;
+    progressbar?: (HTMLElement | null);
+    progressbarRef: (el: HTMLElement | null) => void;
+    render(): JSX.Element;
+}
+export declare type ProgressBarAttrs = JSX.LibraryManagedAttributes<typeof ProgressBar, ProgressBarProps>;

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

@@ -1,103 +1,70 @@
-import React, {PureComponent} from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
-import Theme from '../global/theme';
-
 import styles from './progress-bar.css';
-
 /**
  * @name Progress Bar
  */
 export default class ProgressBar extends PureComponent {
-  /**
-   * @param {number} value The progress task value
-   * @param {number} max The maximum value
-   * @return {number} The progress task value in percents
-   * @private
-   */
-  static toPercent(value, max) {
-    const HUNDRED_PERCENT = 100;
-    const percents = (value * HUNDRED_PERCENT) / max;
-    return percents > HUNDRED_PERCENT ? HUNDRED_PERCENT : percents;
-  }
-
-  static propTypes = {
-    label: PropTypes.string,
-    theme: PropTypes.string,
-
     /**
-     * Sets the ring-progress-bar_global class to position the progress bar on top of the screen.
-     * Should be placed directly inside body, will be positioned right below .ring-header
-     * if placed adjacent to it.
-     * @type {boolean}
+     * @param {number} value The progress task value
+     * @param {number} max The maximum value
+     * @return {number} The progress task value in percents
+     * @private
      */
-    global: PropTypes.bool,
-
-    /**
-     * Custom class
-     * @type {string}
-     */
-    className: PropTypes.string,
-
-    style: PropTypes.object,
-
-    /**
-     * A floating point number that specifies minimum completion rate for a task to be considered
-     * complete. Default value is 1.0.
-     * @type {number}
-     */
-    max: PropTypes.number,
-
-    /**
-     * A floating point number that specifies current task completion rate.
-     * @type {number}
-     */
-    value: PropTypes.number
-  };
-
-  static defaultProps = {
-    max: 1.0,
-    value: 0,
-    theme: Theme.LIGHT,
-    label: 'Progress'
-  };
-
-  progressbarWrapperRef = el => {
-    this.progressbarWrapper = el;
-  };
-
-  progressbarRef = el => {
-    this.progressbar = el;
-  };
-
-  render() {
-    const {theme, className, global, max, value, label, ...otherProps} = this.props;
-
-    const width = value ? `${ProgressBar.toPercent(value, max)}%` : null;
-    const classes = classNames(styles.progressBar, className, {
-      [styles.light]: theme === Theme.LIGHT,
-      [styles.dark]: theme === Theme.DARK,
-      [styles.globalMode]: global
-    });
-
-    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}}
-        />
-      </div>
-    );
-  }
+    static toPercent(value, max) {
+        const HUNDRED_PERCENT = 100;
+        const percents = (value * HUNDRED_PERCENT) / max;
+        return percents > HUNDRED_PERCENT ? HUNDRED_PERCENT : percents;
+    }
+    static propTypes = {
+        label: PropTypes.string,
+        /**
+         * Sets the ring-progress-bar_global class to position the progress bar on top of the screen.
+         * Should be placed directly inside body, will be positioned right below .ring-header
+         * if placed adjacent to it.
+         * @type {boolean}
+         */
+        global: PropTypes.bool,
+        /**
+         * Custom class
+         * @type {string}
+         */
+        className: PropTypes.string,
+        style: PropTypes.object,
+        /**
+         * A floating point number that specifies minimum completion rate for a task to be considered
+         * complete. Default value is 1.0.
+         * @type {number}
+         */
+        max: PropTypes.number,
+        /**
+         * A floating point number that specifies current task completion rate.
+         * @type {number}
+         */
+        value: PropTypes.number
+    };
+    static defaultProps = {
+        max: 1.0,
+        value: 0,
+        label: 'Progress'
+    };
+    progressbarWrapper;
+    progressbarWrapperRef = (el) => {
+        this.progressbarWrapper = el;
+    };
+    progressbar;
+    progressbarRef = (el) => {
+        this.progressbar = el;
+    };
+    render() {
+        const { className, global, max, value, label, ...otherProps } = this.props;
+        const width = value ? `${ProgressBar.toPercent(value, max)}%` : undefined;
+        const classes = classNames(styles.progressBar, className, {
+            [styles.globalMode]: global
+        });
+        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 }}/>
+      </div>);
+    }
 }

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

@@ -1,8 +1,9 @@
 import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
+import darkStyles from '../global/variables_dark.css';
 
-import RingProgressBar from '@jetbrains/ring-ui/components/progress-bar-ng/progress-bar-ng';
+import RingProgressBar from './progress-bar-ng';
 
 const disableAnimations = window.location.search.includes('block-animations');
 
@@ -33,8 +34,8 @@ export const basic = () => {
         <div style="height: 25px; padding-top: 25px;">
           <rg-progress-bar label="'Progress'" value="ctrl.value" class="example-progress"></rg-progress-bar>
         </div>
-        <div style="height: 25px; background: #000; padding-top: 25px;">
-          <rg-progress-bar label="'Progress'" value="ctrl.value" theme="'dark'" class="example-progress"></rg-progress-bar>
+        <div class="${darkStyles.dark}" style="height: 25px; background: var(--ring-content-background-color); padding-top: 25px;">
+          <rg-progress-bar label="'Progress'" value="ctrl.value" class="example-progress"></rg-progress-bar>
         </div>
         <div style="height: 25px; background: #F0F0F0; padding-top: 25px;">
           <rg-progress-bar label="'Progress'" value="ctrl.value" class="example-progress"></rg-progress-bar>

package/components/promised-click-ng/promised-click-ng.examples.js

@@ -2,9 +2,9 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import ButtonNG from '@jetbrains/ring-ui/components/button-ng/button-ng';
+import ButtonNG from '../button-ng/button-ng';
 
-import PromisedClickNG from '@jetbrains/ring-ui/components/promised-click-ng/promised-click-ng';
+import PromisedClickNG from './promised-click-ng';
 
 export default {
   title: 'Legacy Angular/Promised Click Ng',

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

@@ -1,72 +1,70 @@
 @import "../global/variables.css";
 
+@value dark from "../global/variables_dark.css";
 @value unit from "../global/global.css";
 @value overInputZIndex: 2;
 @value inputGap: calc(unit * 3);
 
-.light {
-  &.queryAssist {
-    height: calc(unit * 3);
+.queryAssist {
+  height: calc(unit * 3);
 
-    background: var(--ring-content-background-color);
-  }
+  background: var(--ring-content-background-color);
+}
 
-  & .input {
-    height: calc(unit * 3 - 2px);
+.input {
+  height: calc(unit * 3 - 2px);
 
-    box-shadow: 0 0 0 1px var(--ring-borders-color);
+  box-shadow: 0 0 0 1px var(--ring-borders-color);
 
-    /* stylelint-disable-next-line selector-max-specificity */
-    &:not([disabled]):active,
-    /* stylelint-disable-next-line selector-max-specificity */
-    &:not([disabled]):focus {
-      border-color: transparent;
-      box-shadow: 0 0 0 1px var(--ring-main-color);
-    }
+  /* stylelint-disable-next-line selector-max-specificity */
+  &:not([disabled]):active,
+  &:not([disabled]):focus {
+    border-color: transparent;
+    box-shadow: 0 0 0 1px var(--ring-main-color);
   }
+}
 
-  & .placeholder {
-    color: var(--ring-secondary-color);
-  }
+.placeholder {
+  color: var(--ring-secondary-color);
+}
 
-  & .letter-text {
-    color: var(--ring-warning-color);
-  }
+.letter-text {
+  color: var(--ring-warning-color);
+}
 
-  & .letterDefault,
-  & .letter-field-name {
-    color: var(--ring-text-color);
-  }
+.letterDefault,
+.letter-field-name {
+  color: var(--ring-text-color);
+}
 
-  & .letter-field-value {
-    color: var(--ring-link-color);
-  }
+.letter-field-value {
+  color: var(--ring-link-color);
+}
 
-  & .letter-operator {
-    color: var(--ring-secondary-color);
-  }
+.letter-operator {
+  color: var(--ring-secondary-color);
+}
 
-  & .letter-error {
-    padding-bottom: 1px;
+.letter-error {
+  padding-bottom: 1px;
 
-    border-bottom: 1px solid var(--ring-icon-error-color);
-  }
+  border-bottom: 1px solid var(--ring-icon-error-color);
+}
 
-  & .iconInner {
-    color: var(--ring-icon-secondary-color);
-  }
+.iconInner {
+  color: var(--ring-icon-secondary-color);
+}
 
-  & .highlight {
-    font-weight: 600;
-  }
+.highlight {
+  font-weight: 600;
+}
 
-  & .service {
-    color: var(--ring-secondary-color);
-  }
+.service {
+  color: var(--ring-secondary-color);
 }
 
 .dark {
-  &.queryAssist {
+  & .queryAssist {
     height: calc(unit * 4);
 
     font-size: 16px;
@@ -80,7 +78,7 @@
     color: var(--ring-search-color);
 
     border-top-width: 5px;
-    background: var(--ring-dark-selected-background-color);
+    background: var(--ring-selected-background-color);
 
     &:active,
     &:focus {
@@ -117,7 +115,7 @@
   }
 
   & .letter-field-value {
-    color: var(--ring-dark-text-color);
+    color: var(--ring-active-text-color);
   }
 
   & .letter-operator {
@@ -131,7 +129,7 @@
   }
 
   & .icon {
-    top: 8px;
+    top: 7px;
   }
 
   & .iconInner {
@@ -151,7 +149,7 @@
   }
 
   & .actions {
-    background-color: var(--ring-dark-selected-background-color);
+    background-color: var(--ring-selected-background-color);
   }
 
   /* stylelint-disable-next-line selector-max-specificity */
@@ -288,7 +286,7 @@
 .icon {
   position: absolute;
   z-index: overInputZIndex;
-  top: 4px;
+  top: 3px;
 
   box-sizing: border-box;
 
@@ -319,20 +317,6 @@
   left: auto;
 }
 
-.focusUnderline {
-  width: 0;
-  height: 2px;
-
-  transition: width 0.15s ease-out;
-
-  background: var(--ring-main-color);
-}
-
-.input:focus ~ .focusUnderline,
-.input:active ~ .focusUnderline {
-  width: 100%;
-}
-
 .input::-webkit-scrollbar {
   display: none;
 }