@jetbrains/ring-ui 4.1.0-beta.4 → 4.1.2

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

@@ -23,6 +23,7 @@ export default class ProgressBar extends PureComponent {
   }
 
   static propTypes = {
+    label: PropTypes.string,
     theme: PropTypes.string,
 
     /**
@@ -58,7 +59,8 @@ export default class ProgressBar extends PureComponent {
   static defaultProps = {
     max: 1.0,
     value: 0,
-    theme: Theme.LIGHT
+    theme: Theme.LIGHT,
+    label: 'Progress'
   };
 
   progressbarWrapperRef = el => {
@@ -70,7 +72,7 @@ export default class ProgressBar extends PureComponent {
   };
 
   render() {
-    const {theme, className, global, max, value, ...otherProps} = this.props;
+    const {theme, className, global, max, value, label, ...otherProps} = this.props;
 
     const width = value ? `${ProgressBar.toPercent(value, max)}%` : null;
     const classes = classNames(styles.progressBar, className, {
@@ -89,6 +91,7 @@ export default class ProgressBar extends PureComponent {
           className={styles.line}
           ref={this.progressbarRef}
           role="progressbar"
+          aria-label={label}
           aria-valuenow={value}
           aria-valuemin={0}
           aria-valuemax={max}

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

@@ -1,6 +1,4 @@
-/* eslint-disable react/no-find-dom-node */
 import React from 'react';
-import {findDOMNode} from 'react-dom';
 import {shallow, mount} from 'enzyme';
 
 import Theme from '../global/theme';
@@ -9,8 +7,9 @@ import ProgressBar from './progress-bar';
 import styles from './progress-bar.css';
 
 describe('Progress Bar', () => {
-  const shallowProgressBar = props => shallow(<ProgressBar {...props}/>);
-  const mountProgressBar = props => mount(<ProgressBar {...props}/>).find('ProgressBar');
+  const shallowProgressBar = props => shallow(<ProgressBar label="Progress" {...props}/>);
+  const mountProgressBar = props =>
+    mount(<ProgressBar label="Progress" {...props}/>).find('ProgressBar');
 
   it('should create component', () => {
     shallowProgressBar().should.exist;
@@ -48,14 +47,14 @@ describe('Progress Bar', () => {
         className: 'test-class'
       });
 
-      findDOMNode(wrapper.instance().progressbarWrapper).should.have.class('test-class');
+      wrapper.instance().progressbarWrapper.should.have.class('test-class');
     });
 
     it('should set light modifier', () => {
       const wrapper = mountProgressBar({
         theme: Theme.DARK
       });
-      findDOMNode(wrapper.instance().progressbarWrapper).
+      wrapper.instance().progressbarWrapper.
         should.have.class(styles.dark);
     });
 
@@ -64,7 +63,7 @@ describe('Progress Bar', () => {
         global: true
       });
 
-      findDOMNode(wrapper.instance().progressbarWrapper).
+      wrapper.instance().progressbarWrapper.
         should.have.class(styles.globalMode);
     });
   });
@@ -76,7 +75,7 @@ describe('Progress Bar', () => {
   describe('#render', () => {
     it('should set min value to equal zero', () => {
       const wrapper = mountProgressBar();
-      findDOMNode(wrapper.instance().progressbar).should.have.attr('aria-valuemin', '0');
+      wrapper.instance().progressbar.should.have.attr('aria-valuemin', '0');
     });
 
     it('should update max value in DOM', () => {
@@ -84,7 +83,7 @@ describe('Progress Bar', () => {
         max: 100
       });
 
-      findDOMNode(wrapper.instance().progressbar).should.have.attr('aria-valuemax', '100');
+      wrapper.instance().progressbar.should.have.attr('aria-valuemax', '100');
     });
 
     it('should update progress value in DOM', () => {
@@ -92,8 +91,8 @@ describe('Progress Bar', () => {
         value: 0.5
       });
 
-      findDOMNode(wrapper.instance().progressbar).should.have.attr('aria-valuenow', '0.5');
-      findDOMNode(wrapper.instance().progressbar).should.have.attr('style').match(/width: 50%;/);
+      wrapper.instance().progressbar.should.have.attr('aria-valuenow', '0.5');
+      wrapper.instance().progressbar.should.have.attr('style').match(/width: 50%;/);
     });
 
     it('should set width equal 100% if progress value more than max value', () => {
@@ -102,14 +101,14 @@ describe('Progress Bar', () => {
         value: 10
       });
 
-      findDOMNode(wrapper.instance().progressbar).should.have.attr('style').match(/width: 100%;/);
+      wrapper.instance().progressbar.should.have.attr('style').match(/width: 100%;/);
     });
 
     it('should not set style if value is not a number', () => {
       const wrapper = mountProgressBar({
         value: null
       });
-      findDOMNode(wrapper.instance().progressbar).should.not.have.attr('style');
+      wrapper.instance().progressbar.should.not.have.attr('style');
     });
   });
 });

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

@@ -31,13 +31,13 @@ export const basic = () => {
   return `
       <div ng-controller="ExampleCtrl as ctrl">
         <div style="height: 25px; padding-top: 25px;">
-          <rg-progress-bar value="ctrl.value" class="example-progress"></rg-progress-bar>
+          <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 value="ctrl.value" theme="'dark'" class="example-progress"></rg-progress-bar>
+          <rg-progress-bar label="'Progress'" value="ctrl.value" theme="'dark'" class="example-progress"></rg-progress-bar>
         </div>
         <div style="height: 25px; background: #F0F0F0; padding-top: 25px;">
-          <rg-progress-bar value="ctrl.value" class="example-progress"></rg-progress-bar>
+          <rg-progress-bar label="'Progress'" value="ctrl.value" class="example-progress"></rg-progress-bar>
         </div>
       </div>
     `;

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

@@ -161,7 +161,7 @@
 }
 
 .queryAssist {
-  composes: font from '../global/global.css';
+  composes: font from "../global/global.css";
 
   position: relative;
 
@@ -176,7 +176,7 @@
   top: 1px;
   left: 1px;
 
-  overflow: hidden;
+  overflow: auto;
 
   box-sizing: border-box;
 
@@ -194,6 +194,8 @@
 
   line-height: 16px;
 
+  scrollbar-width: none;
+
   &:active,
   &:focus {
     outline: 0;
@@ -227,8 +229,12 @@
   }
 
   &.inputDisabled {
-    color: var(--ring-disabled-color);
     border-color: var(--ring-line-color);
+    box-shadow: 0 0 0 1px var(--ring-line-color);
+  }
+
+  &.inputDisabled span > span {
+    color: var(--ring-disabled-color);
   }
 }
 
@@ -326,3 +332,7 @@
 .input:active ~ .focusUnderline {
   width: 100%;
 }
+
+.input::-webkit-scrollbar {
+  display: none;
+}

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

@@ -22,9 +22,6 @@ export default {
     framework: 'react'
   },
   args: {
-    // https://github.com/storybookjs/storybook/issues/12635#issuecomment-703392498
-    theme: undefined,
-    translations: undefined,
     placeholder: 'placeholder',
     glass: true,
     clear: true,
@@ -80,7 +77,8 @@ basic.args = {
   focus: true,
   hint: 'lol',
   hintOnSelection: 'lol selected',
-  popupClassName: 'test'
+  popupClassName: 'test',
+  className: 'custom-class'
 };
 
 export const noAuth = args => <QueryAssist {...args}/>;
@@ -248,6 +246,7 @@ darkThemeNoAuth.parameters = {
     actions: [
       {type: 'capture', name: 'queryAssist', selector: ['[data-test~=ring-query-assist]']},
       {type: 'click', selector: '[data-test=ring-query-assist-input]'},
+      {type: 'sendKeys', selector: '[data-test=ring-query-assist-input]', value: 'test '},
       {
         type: 'capture',
         name: 'withPopup',

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

@@ -30,7 +30,7 @@ const ngModelStateField = 'query';
 function noop() {}
 
 function cleanText(text) {
-  return text.trim().replace(/([\n\r])+/g, ' ');
+  return text.replace(/([\n\r])+/g, ' ');
 }
 
 /**
@@ -203,7 +203,7 @@ export default class QueryAssist extends Component {
 
     this.setupRequestHandler(this.props.delay);
 
-    if (this.props.autoOpen) {
+    if (this.props.autoOpen && query.length > 0) {
       this.requestHandler().
         catch(noop);
     } else {
@@ -211,6 +211,7 @@ export default class QueryAssist extends Component {
     }
 
     this.setCaretPosition();
+    this._pushHistory(this.state);
   }
 
   shouldComponentUpdate(props, state) {
@@ -245,7 +246,7 @@ export default class QueryAssist extends Component {
     if (typeof query === 'string' && queryChanged && query !== this.immediateState.query) {
       this.immediateState.query = query;
 
-      if (query && prevProps.autoOpen) {
+      if (query && prevProps.autoOpen && query.length > 0) {
         this.requestData();
       } else if (query) {
         this.requestStyleRanges();
@@ -257,6 +258,8 @@ export default class QueryAssist extends Component {
   static Theme = Theme;
 
   ngModelStateField = ngModelStateField;
+  // An array of {query: string; caret: number}[]
+  historyStack = [];
 
   handleFocusChange = e => {
     // otherwise it's blur and false
@@ -370,7 +373,9 @@ export default class QueryAssist extends Component {
 
     this.immediateState = props;
     this.props.onChange(props);
-    this.requestData();
+    if (props.query.length > 0) {
+      this.requestData();
+    }
   };
 
   // It's necessary to prevent new element creation before any other hooks
@@ -402,6 +407,38 @@ export default class QueryAssist extends Component {
     return true;
   };
 
+  setState = (state, resolve) => {
+    super.setState(state, () => {
+      this._pushHistory(state);
+      resolve?.();
+    });
+  };
+
+  _pushHistory(state) {
+    const queryIsSet = 'query' in state;
+    const queryIsSame = this.historyStack[0]?.query === state.query;
+
+    if (queryIsSet && !queryIsSame) {
+      this.historyStack.unshift({
+        query: state.query,
+        caret: this.caret?.getPosition({avoidFocus: true}) ?? -1
+      });
+    }
+  }
+
+  undo = e => {
+    // eslint-disable-next-line no-unused-vars
+    const [current, previous] = this.historyStack.splice(0, 2);
+    if (!previous) {
+      return;
+    }
+
+    this.setState({query: previous.query}, () => {
+      this.caret.setPosition(previous.caret);
+      this.handleInput(e);
+    });
+  };
+
   handlePaste = e => {
     const INSERT_COMMAND = 'insertText';
     if (e.clipboardData && document.queryCommandSupported(INSERT_COMMAND)) {
@@ -426,7 +463,13 @@ export default class QueryAssist extends Component {
     if (!this.props.disabled && (caret !== this.immediateState.caret || popupHidden)) {
       this.immediateState.caret = caret;
       this.scrollInput();
-      this.requestData();
+      if (this.immediateState.query.length > 0) {
+        this.requestData();
+      }
+    }
+
+    if (this.immediateState.query.length < 1) {
+      this.setState({showPopup: false});
     }
   };
 
@@ -437,7 +480,7 @@ export default class QueryAssist extends Component {
     caret = 0,
     styleRanges,
     suggestions = []
-  }) => new Promise((resolve, reject) => {
+  }, afterCompletion = false) => new Promise((resolve, reject) => {
     if (
       query === this.getQuery() &&
       (caret === this.immediateState.caret ||
@@ -454,7 +497,7 @@ export default class QueryAssist extends Component {
         placeholderEnabled: !query,
         query,
         suggestions,
-        showPopup: !!suggestions.length
+        showPopup: !!suggestions.length && !afterCompletion
       };
 
       this.immediateState.suggestionsQuery = query;
@@ -526,7 +569,7 @@ export default class QueryAssist extends Component {
     }
 
     this.closePopup();
-    this.requestData();
+    this.requestData(true);
   };
 
   requestStyleRanges = () => {
@@ -541,7 +584,7 @@ export default class QueryAssist extends Component {
       catch(noop);
   };
 
-  requestHandler = () => {
+  requestHandler = (afterCompletion = false) => {
     if (this.props.disabled) {
       return Promise.reject(new Error('QueryAssist(@jetbrains/ring-ui): null exception'));
     }
@@ -549,7 +592,7 @@ export default class QueryAssist extends Component {
     const {query, caret} = this.immediateState;
 
     return this.sendRequest({query, caret}).
-      then(this.handleResponse).
+      then(data => this.handleResponse(data, afterCompletion)).
       catch(noop);
   };
 
@@ -801,6 +844,7 @@ export default class QueryAssist extends Component {
     'ctrl+enter': this.handleComplete,
     'ctrl+space': this.handleCtrlSpace,
     tab: this.handleTab,
+    'meta+z': this.undo,
     right: noop,
     left: noop,
     space: noop,
@@ -831,7 +875,7 @@ export default class QueryAssist extends Component {
   }
 
   render() {
-    const {theme, glass, 'data-test': dataTest, useCustomItemRender} = this.props;
+    const {theme, glass, 'data-test': dataTest, className, useCustomItemRender} = this.props;
     const renderPlaceholder = !!this.props.placeholder && this.state.placeholderEnabled;
     const renderLoader = this.props.loader !== false && this.state.loading;
     const renderGlass = glass && !renderLoader;
@@ -849,7 +893,7 @@ export default class QueryAssist extends Component {
     return (
       <div
         data-test={dataTests('ring-query-assist', dataTest)}
-        className={classNames(styles.queryAssist, styles[theme])}
+        className={classNames(className, styles.queryAssist, styles[theme])}
         role="presentation"
         ref={this.nodeRef}
       >

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

@@ -1,7 +1,6 @@
-/* eslint-disable no-magic-numbers,react/no-find-dom-node */
+/* eslint-disable no-magic-numbers */
 
 import React from 'react';
-import {findDOMNode} from 'react-dom';
 import {Simulate} from 'react-dom/test-utils';
 import {mount} from 'enzyme';
 
@@ -243,6 +242,12 @@ describe('Query Assist', () => {
   describe('rendering', () => {
     const LETTER_CLASS = styles.letter;
 
+    it('should pass className', () => {
+      const instance = mountQueryAssist({className: 'test-class'}).find('QueryAssist').instance();
+
+      instance.node.className.should.contain('test-class');
+    });
+
     it('should render letters', () => {
       const instance = mountQueryAssist().find('QueryAssist').instance();
 
@@ -251,6 +256,19 @@ describe('Query Assist', () => {
         should.have.length(testQueryLength);
     });
 
+    it('should support undo', done => {
+      const instance = mountQueryAssist().find('QueryAssist').instance();
+
+      instance.setState({query: 'newQuery'}, () => {
+        simulateCombo('meta+z');
+
+        setTimeout(() => {
+          instance.state.query.should.equal(testQuery);
+          done();
+        });
+      });
+    });
+
 
     it('should render nothing on empty query', () => {
       const instance = mountQueryAssist({
@@ -474,7 +492,7 @@ describe('Query Assist', () => {
 
       instance.requestData().
         then(() => {
-          const list = findDOMNode(instance._popup.list);
+          const list = instance._popup.list.container;
           const {length} = suggestions;
 
           list.querySelectorAll('[data-test~=ring-list-item]').should.have.length(length);
@@ -560,6 +578,20 @@ describe('Query Assist', () => {
         instance.input.should.have.text(getSuggestionText(suggestions[2]));
       });
     });
+
+    it('should undo last applied completion', () => {
+      const instance = mountQueryAssist({
+        query: completeQuery,
+        caret: middleCaret
+      }).find('QueryAssist').instance();
+
+      return instance.requestData().then(() => {
+        simulateCombo('down down down tab');
+        instance.input.should.not.have.text(completeQuery);
+        simulateCombo('meta+z');
+        instance.input.should.have.text(completeQuery);
+      });
+    });
   });
 
   describe('callbacks', () => {
@@ -598,7 +630,7 @@ describe('Query Assist', () => {
         onApply
       }).find('QueryAssist').instance();
 
-      Simulate.click(findDOMNode(instance.glass));
+      Simulate.click(instance.glass.buttonRef.current);
       onApply.should.have.been.calledWithMatch({
         query: testQuery,
         caret: testQueryLength
@@ -612,7 +644,7 @@ describe('Query Assist', () => {
         onClear
       }).find('QueryAssist').instance();
 
-      Simulate.click(findDOMNode(instance.clear));
+      Simulate.click(instance.clear.buttonRef.current);
       onClear.should.have.been.calledWithExactly();
     });
   });

package/components/save-field-ng/save-field-ng.css

@@ -4,9 +4,6 @@
 
 :global(.ring-save-field) {
   display: inline-block;
-
-  font-size: 0;
-  line-height: 0;
 }
 
 :global(.ring-save-field .ring-save-field__button) {

package/components/save-field-ng/save-field-ng.js

@@ -13,6 +13,8 @@ import Shortcuts from '../shortcuts-ng/shortcuts-ng';
 import Button from '../button-ng/button-ng';
 import PromisedClick from '../promised-click-ng/promised-click-ng';
 
+import template from './save-field-ng__template';
+
 const angularModule = angular.module('Ring.save-field', [
   MessageBundle,
 
@@ -64,7 +66,7 @@ angularModule.directive(
     return {
       require: 'rgSaveField',
       transclude: true,
-      template: require('./save-field-ng.html'),
+      template,
       scope: {
         api: '=?',
         value: '=',

package/components/save-field-ng/{save-field-ng.html → save-field-ng__template.js}

@@ -1,4 +1,4 @@
-<div class="ring-save-field" ng-form="saveFieldForm" rg-shortcuts="ring-save-field" shortcuts-map="keyMap" shortcuts-focus="focus">
+export default `<div class="ring-save-field" ng-form="saveFieldForm" rg-shortcuts="ring-save-field" shortcuts-map="keyMap" shortcuts-focus="focus">
   <span class="ring-save-field__transclude-placeholder" ng-transclude=""></span>
 
   <rg-button
@@ -29,4 +29,4 @@
   >
     {{wording.saved}}
   </rg-button>
-</div>
+</div>`;

package/components/select/select.css

@@ -158,9 +158,15 @@
   }
 }
 
+.buttonContainer {
+  position: relative;
+}
+
 .buttonValue {
   composes: ellipsis from "../global/global.css";
 
+  display: block;
+
   width: 100%;
 
   text-align: left;
@@ -170,12 +176,6 @@
 .buttonValueOpen {
   border-color: var(--ring-selected-background-color);
   background-color: var(--ring-selected-background-color);
-
-  & .icons {
-    transition: none;
-
-    color: var(--ring-main-color);
-  }
 }
 
 .label {
@@ -189,7 +189,8 @@
 .value:focus,
 .value:focus + .icons,
 .open,
-.open + .icons {
+.open + .icons,
+.buttonValueOpen + .icons {
   transition: none;
 
   color: var(--ring-main-color);
@@ -247,3 +248,7 @@
 
   color: inherit;
 }
+
+.avatar {
+  vertical-align: -6px;
+}

package/components/select/select.examples.js

@@ -36,6 +36,7 @@ export default {
 };
 
 export const withAFilterAndTags = args => <Select {...args}/>;
+export const withAvatars = args => <Select {...args}/>;
 
 {
   const avatarUrl = `${hubConfig.serverUri}/api/rest/avatar/default?username=blue`;
@@ -53,6 +54,12 @@ export const withAFilterAndTags = args => <Select {...args}/>;
       label: 'With avatar',
       key: 5,
       avatar: avatarUrl
+    },
+    {
+      label: 'With generated avatar',
+      showGeneratedAvatar: true,
+      username: 'With generated avatar',
+      key: 6
     }
   ];
 
@@ -71,6 +78,12 @@ export const withAFilterAndTags = args => <Select {...args}/>;
     data: tags,
     selected: [tags[0]]
   };
+
+  withAvatars.args = {
+    data: tags,
+    selected: tags[4],
+    type: Select.Type.BUTTON
+  };
 }
 
 withAFilterAndTags.storyName = 'with a filter and tags';