@jetbrains/ring-ui 4.1.0-beta.13 → 4.1.0-beta.17

package/components/error-bubble/error-bubble.css

@@ -46,7 +46,7 @@
   width: unit;
   height: unit;
 
-  content: '';
+  content: "";
   transform: rotate(45deg);
 
   border: 1px solid var(--ring-popup-border-color);

package/components/error-page/error-page.css

@@ -15,10 +15,10 @@
   width: 100%;
   height: 100%;
 
-  content: '';
+  content: "";
 }
 
 .enabled::before {
   opacity: 0.06;
-  background: url('error-page.gif');
+  background: url("error-page.gif");
 }

package/components/footer-ng/footer-ng.js

@@ -4,8 +4,6 @@ import RingAngularComponent from '../global/ring-angular-component';
 import styles from '../footer/footer.css';
 import {copyright} from '../footer/footer';
 
-import template from './footer-ng.html';
-
 /**
  * @name Footer Ng
  */
@@ -22,7 +20,19 @@ class rgFooterComponent extends RingAngularComponent {
     right: '?rgFooterRight'
   };
 
-  static template = template;
+  static template = `<footer ng-class=":: $ctrl.styles.footer" data-test="ring-footer">
+  <div ng-class=":: $ctrl.styles.columnLeft">
+    <div ng-transclude="left" ng-class=":: $ctrl.styles.columnItem"></div>
+  </div>
+
+  <div ng-class=":: $ctrl.styles.columnCenter">
+    <div ng-transclude="center" ng-class=":: $ctrl.styles.columnItem"></div>
+  </div>
+
+  <div ng-class=":: $ctrl.styles.columnRight">
+    <div ng-transclude="right" ng-class=":: $ctrl.styles.columnItem"></div>
+  </div>
+</footer>`;
 }
 
 class rgFooterLineComponent extends RingAngularComponent {

package/components/form/form.css

@@ -96,7 +96,7 @@
   display: block;
   clear: both;
 
-  content: '';
+  content: "";
 }
 
 :global(.ring-form__group_united) {
@@ -167,7 +167,7 @@
 
   height: calc(unit * 3);
 
-  content: '';
+  content: "";
   vertical-align: middle;
 }
 

package/components/form-ng/form-ng.js

@@ -54,7 +54,9 @@ angularModule.directive('rgErrorBubble', function rgErrorBubbleDirective(getForm
     },
 
     replace: true,
-    template: require('./form-ng__error-bubble.html'),
+    template: `<div class="ring-error-bubble" ng-class="{ active: active, 'ring-error-bubble_material': material }" ng-style="style">
+  <div ng-repeat="errorMessage in getFormErrorMessages(errorBubble().$error)">{{ errorMessage }}</div>
+</div>`,
 
     link: function link(scope, iElement, iAttrs) {
       scope.style = {};

package/components/global/global.css

@@ -11,7 +11,7 @@ Also it won't form in FF47 https://bugzilla.mozilla.org/show_bug.cgi?id=594933
     display: block;
     clear: both;
 
-    content: '';
+    content: "";
   }
 }
 

package/components/global/variables.css

@@ -87,7 +87,14 @@
   --ring-ease: 0.3s ease-out;
   --ring-fast-ease: 0.15s ease-out;
   --ring-font-family: system-ui, Arial, sans-serif;
-  --ring-font-family-monospace: Menlo, "Bitstream Vera Sans Mono", "Ubuntu Mono", Consolas, "Courier New", Courier, monospace;
+  --ring-font-family-monospace:
+    Menlo,
+    "Bitstream Vera Sans Mono",
+    "Ubuntu Mono",
+    Consolas,
+    "Courier New",
+    Courier,
+    monospace;
 
   /* Common z-index-values */
 

package/components/grid/grid.css

@@ -1,23 +1,24 @@
 @import "../global/variables.css";
 
-@value unit, breakpoint-small, breakpoint-middle, breakpoint-large, large-screen-media, middle-screen-media, small-screen-media from '../global/global.css';
+@value unit, breakpoint-small, breakpoint-middle, breakpoint-large  from "../global/global.css";
+@value large-screen-media, middle-screen-media, small-screen-media from "../global/global.css";
 @value gutterWidth: (unit*2);
 @value gutterCompensation: calc(gutterWidth / -2);
 @value outerMargin: calc(unit*2);
 @value containerSmall: calc(breakpoint-small + gutterWidth);
 @value containerMedium: calc(breakpoint-middle + gutterWidth);
 @value containerLarge: calc(breakpoint-large + gutterWidth);
-@value width-1: 8.33333333%;
-@value width-2: 16.66666667%;
+@value width-1: 8.3333%;
+@value width-2: 16.6667%;
 @value width-3: 25%;
-@value width-4: 33.33333333%;
-@value width-5: 41.66666667%;
+@value width-4: 33.3333%;
+@value width-5: 41.6667%;
 @value width-6: 50%;
-@value width-7: 58.33333333%;
-@value width-8: 66.66666667%;
+@value width-7: 58.3333%;
+@value width-8: 66.6667%;
 @value width-9: 75%;
-@value width-10: 83.33333333%;
-@value width-11: 91.66666667%;
+@value width-10: 83.3333%;
+@value width-11: 91.6667%;
 @value width-12: 100%;
 
 .container-fluid,

package/components/header/header.css

@@ -152,7 +152,7 @@
     width: unit;
     height: unit;
 
-    content: '';
+    content: "";
 
     border: 1px solid var(--ring-dark-text-color);
     border-radius: 50%;

package/components/header/header.examples.js

@@ -13,8 +13,7 @@ import hubConfig from '../../.storybook/hub-config';
 import Link from '@jetbrains/ring-ui/components/link/link';
 
 
-import PopupMenu from '@jetbrains/ring-ui/components/popup-menu/popup-menu';
-import Dropdown from '@jetbrains/ring-ui/components/dropdown/dropdown';
+import DropdownMenu from '@jetbrains/ring-ui/components/dropdown-menu/dropdown-menu';
 import showAuthDialog from '@jetbrains/ring-ui/components/auth-dialog-service/auth-dialog-service';
 
 import Theme from '@jetbrains/ring-ui/components/global/theme';
@@ -77,13 +76,13 @@ export const header = ({isCompact, ...args}) => {
             <TrayIcon title="Help" icon={helpIcon}/>
             <TrayIcon title="What's new" icon={giftIcon}/>
             <TrayIcon title="Search" icon={searchIcon}/>
-            <Dropdown
-              anchor={({active}) => (
-                <TrayIcon title="Settings" active={active} icon={settingsIcon}/>
+            <DropdownMenu
+              data={[{label: 'Test'}, {label: 'Test2'}]}
+              anchor={({active, pinned, ...ariaProps}) => (
+                <TrayIcon title="Settings" active={active} icon={settingsIcon} {...ariaProps}/>
               )}
-            >
-              <PopupMenu top={-12} closeOnSelect data={[{label: 'Test'}, {label: 'Test2'}]}/>
-            </Dropdown>
+              menuProps={{top: -12}}
+            />
             <SmartServices auth={auth}/>
             <SmartProfile auth={auth} hasUpdates LinkComponent={Comp}/>
           </Tray>

package/components/header/profile.js

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import Avatar, {Size} from '../avatar/avatar';
 import Button from '../button/button';
-import Dropdown from '../dropdown/dropdown';
+import DropdownMenu from '../dropdown-menu/dropdown-menu';
 import PopupMenu from '../popup-menu/popup-menu';
 
 import styles from './header.css';
@@ -162,21 +162,20 @@ export default class Profile extends PureComponent {
     ].filter(it => !!it);
 
     return (
-      <Dropdown
+      <DropdownMenu
         {...props}
         title={user.name}
         anchor={anchor}
+        data={renderPopupItems(items)}
         data-test="ring-profile"
         className={classNames(styles.profile, className)}
-      >
-        <PopupMenu
-          closeOnSelect={closeOnSelect}
-          data={renderPopupItems(items)}
-          left={-2}
-          top={-8}
-          sidePadding={32}
-        />
-      </Dropdown>
+        menuProps={{
+          closeOnSelect,
+          left: -2,
+          top: -8,
+          sidePadding: 32
+        }}
+      />
     );
   }
 }

package/components/http/http.js

@@ -192,5 +192,5 @@ export default class HTTP {
       method: 'POST',
       ...params
     })
-  )
+  );
 }

package/components/icon/icon.css

@@ -16,22 +16,22 @@
 
   pointer-events: none;
 
-  &[width='10'] {
+  &[width="10"] {
     vertical-align: -1px;
   }
 
-  &[width='14'] {
+  &[width="14"] {
     margin-right: -2px;
     margin-left: 0;
 
     vertical-align: -3px;
   }
 
-  &[width='16'] {
+  &[width="16"] {
     vertical-align: -3px;
   }
 
-  &[width='20'] {
+  &[width="20"] {
     vertical-align: -2px;
   }
 
@@ -44,6 +44,7 @@
 }
 
 /* HACK: This media query hack makes styles applied for WebKit browsers only */
+/* stylelint-disable-next-line media-feature-name-no-vendor-prefix */
 @media screen and (-webkit-min-device-pixel-ratio: 0) {
   .glyph {
     width: auto; /* Safari size bug workaround, see https://youtrack.jetbrains.com/issue/RG-1983 */

package/components/island/island.css

@@ -96,12 +96,13 @@
   width: 100%;
   height: calc(unit * 3);
 
-  content: '';
+  content: "";
 
   pointer-events: none;
 
   opacity: 0.8;
-  background: linear-gradient(to top, gradientStart, gradientStop); /* stylelint-disable-line function-linear-gradient-no-nonstandard-direction */
+
+  background: linear-gradient(to top, gradientStart, gradientStop);
 }
 
 .contentWithTopFade:first-child::before {
@@ -119,7 +120,7 @@
   width: 100%;
   height: calc(unit * 3);
 
-  content: '';
+  content: "";
   pointer-events: none;
 
   opacity: 0.8;

package/components/island-legacy/island-legacy.css

@@ -70,7 +70,9 @@
 
 :global(.ring-island__header-btn),
 :global(.ring-island__header-button:hover) {
-  background: var(--ring-hover-background-color) linear-gradient(to top, var(--ring-hover-background-color), var(--ring-content-background-color));
+  background:
+    var(--ring-hover-background-color)
+    linear-gradient(to top, var(--ring-hover-background-color), var(--ring-content-background-color));
 }
 
 :global(.ring-island__header-btn),

package/components/list/list.js

@@ -570,7 +570,11 @@ export default class List extends Component {
           )}
         </CellMeasurer>
       )
-      : cloneElement(el, {key: itemKey});
+      : (
+        <div role="row" id={itemId} key={itemKey}>
+          <div role="cell">{cloneElement(el)}</div>
+        </div>
+      );
   };
 
   addItemDataTestToProp = props => {
@@ -679,6 +683,7 @@ export default class List extends Component {
       >
         <div
           aria-label={this.props.ariaLabel}
+          role="grid"
           style={maxHeight
             ? {maxHeight: this.getVisibleListHeight(this.props)}
             : null

package/components/list/list__custom.js

@@ -24,6 +24,8 @@ export default class ListCustom extends PureComponent {
     onMouseOver: PropTypes.func,
     onMouseUp: PropTypes.func,
     onCheckboxChange: PropTypes.func,
+    role: PropTypes.string,
+    tagName: PropTypes.string,
     'data-test': PropTypes.string
   };
 
@@ -51,6 +53,8 @@ export default class ListCustom extends PureComponent {
       onCheckboxChange,
       onMouseOver,
       onMouseUp,
+      role,
+      tagName,
       ...restProps
     } = this.props;
     const classes = classNames(styles.item, className, {
@@ -65,9 +69,11 @@ export default class ListCustom extends PureComponent {
     }, restProps['data-test']);
 
     const content = (typeof template === 'function') ? template(this.props) : template;
+    const TagName = tagName || 'span';
+
     return (
-      <span
-        role="button"
+      <TagName
+        role={role || 'button'}
         tabIndex={tabIndex}
         onClick={onClick}
         onKeyPress={this.handleKeyPress}
@@ -78,7 +84,7 @@ export default class ListCustom extends PureComponent {
         data-test={dataTest}
       >
         {content}
-      </span>
+      </TagName>
     );
   }
 }

package/components/list/list__item.js

@@ -35,6 +35,8 @@ export default class ListItem extends PureComponent {
       PropTypes.element,
       PropTypes.array
     ]),
+    showGeneratedAvatar: PropTypes.bool,
+    username: PropTypes.string,
     avatar: PropTypes.string,
     subavatar: PropTypes.string,
     glyph: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
@@ -97,11 +99,14 @@ export default class ListItem extends PureComponent {
       onMouseUp,
       rightNodes,
       leftNodes,
+      showGeneratedAvatar,
+      username,
       ...restProps
     } = this.props;
 
     const checkable = checkbox !== undefined;
-    const hasLeftNodes = leftNodes || glyph || avatar;
+    const shouldShowGeneratedAvatar = showGeneratedAvatar && username != null;
+    const hasLeftNodes = leftNodes || glyph || avatar || shouldShowGeneratedAvatar;
     const showCheckbox = checkable && (checkbox || !hasLeftNodes || (hover && !disabled));
 
     const classes = classNames(styles.item, globalStyles.resetButton, className, {
@@ -177,12 +182,13 @@ export default class ListItem extends PureComponent {
                     size={this.props.iconSize}
                   />
                 )}
-                {avatar && (
+                {(avatar || shouldShowGeneratedAvatar) && (
                   <Avatar
                     className={styles.avatar}
                     url={avatar}
                     size={AvatarSize.Size20}
                     subavatar={subavatar}
+                    username={username}
                   />
                 )}
               </div>

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

@@ -49,7 +49,7 @@
     width: calc(unit * 2);
     height: calc(unit * 2);
 
-    content: '';
+    content: "";
     animation: pulse 0.85s cubic-bezier(0.68, 0, 0.74, 0.74) infinite alternate;
   }
 }

package/components/loader-screen/loader-screen.css

@@ -14,7 +14,7 @@
 
     height: 100%;
 
-    content: '';
+    content: "";
 
     vertical-align: middle;
   }

package/components/message/message.css

@@ -28,7 +28,7 @@
     bottom: 0;
     left: 0;
 
-    content: '';
+    content: "";
 
     border-radius: var(--ring-border-radius);
 

package/components/pager/pager.js

@@ -33,6 +33,7 @@ export default class Pager extends PureComponent {
     className: PropTypes.string,
     translations: PropTypes.object,
     loader: PropTypes.bool,
+    loaderNavigation: PropTypes.bool,
     hrefFunc: PropTypes.func //function which generates href for all pager's buttons based on pager state passed as a function parameter, either this function or onPageChange should be provided
   };
 
@@ -53,6 +54,7 @@ export default class Pager extends PureComponent {
       previousPage: 'Previous'
     },
     loader: false,
+    loaderNavigation: false,
     onPageSizeChange: () => {},
     onLoadPage: () => {}
   };
@@ -109,7 +111,7 @@ export default class Pager extends PureComponent {
         href={this.generateHref(page)}
         key={key}
         active={active}
-        disabled={this.props.loader && !active}
+        disabled={this.props.loader && !active && !this.props.loaderNavigation}
         loader={this.props.loader && active}
         {...this.getClickProps(this.handlePageChange(page))}
       >
@@ -187,7 +189,7 @@ export default class Pager extends PureComponent {
 
     return (
       <div className={style.links}>
-        {prevLinkAvailable && !this.props.loader
+        {prevLinkAvailable && (!this.props.loader || this.props.loaderNavigation)
           ? (
             <Link
               href={prevLinkHref}
@@ -202,7 +204,7 @@ export default class Pager extends PureComponent {
           )
         }
 
-        {nextLinkAvailable && !this.props.loader
+        {nextLinkAvailable && (!this.props.loader || this.props.loaderNavigation)
           ? (
             <Link
               href={nextLinkHref}

package/components/permissions/permissions.js

@@ -54,7 +54,7 @@ export default class Permissions {
         query
       }
     })
-  )
+  );
 
   /**
    * Returns function, which cuts off prefix from server-side permission name

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

@@ -61,7 +61,7 @@
     bottom: 0;
     left: 0;
 
-    content: '';
+    content: "";
     animation: progress-bar 2500ms linear infinite;
 
     background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.6), rgba(0, 0, 0, 0));

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;
 

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

@@ -248,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';

package/components/select/select.js

@@ -220,6 +220,7 @@ export default class Select extends Component {
 
   static propTypes = {
     className: PropTypes.string,
+    buttonClassName: PropTypes.string,
     id: PropTypes.string,
     multiple: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
     allowAny: PropTypes.bool,
@@ -521,10 +522,6 @@ export default class Select extends Component {
     return getSelectedIndex(selected, data, this.props.multiple);
   }
 
-  popupRef = el => {
-    this._popup = el;
-  };
-
   _getResetOption() {
     const isOptionsSelected = this.state.selected && this.state.selected.length;
     const hasTagsResetProp = this.props.tags && this.props.tags.reset;
@@ -1034,10 +1031,12 @@ export default class Select extends Component {
   }
 
   _getAvatar() {
-    return this.state.selected && this.state.selected.avatar && (
+    return this.state.selected &&
+      (this.state.selected.avatar || this.state.selected.showGeneratedAvatar) && (
       <Avatar
         className={styles.avatar}
         url={this.state.selected.avatar}
+        username={this.state.selected.username}
         size={AvatarSize.Size20}
       />
     );
@@ -1152,6 +1151,7 @@ export default class Select extends Component {
                 id={this.props.id}
                 onClick={this._clickHandler}
                 className={classNames(
+                  this.props.buttonClassName,
                   styles.buttonValue,
                   {
                     [styles.buttonValueOpen]: this.state.showPopup
@@ -1192,7 +1192,7 @@ export default class Select extends Component {
               onClick={this._clickHandler}
               type="button"
               disabled={this.props.disabled}
-              className={classNames(styles.value, {
+              className={classNames(this.props.buttonClassName, styles.value, {
                 [styles.open]: this.state.showPopup,
                 [styles.label]: this._selectionIsEmpty()
               })}

package/components/shortcuts-hint-ng/shortcuts-hint-ng.css

@@ -43,7 +43,7 @@
 
   height: calc(unit / 2);
 
-  content: '';
+  content: "";
 }
 
 :global(.shortcuts-hint__search-input-wrapper) {

package/components/shortcuts-hint-ng/shortcuts-hint-ng.js

@@ -10,7 +10,7 @@ import IconNg from '../icon-ng/icon-ng';
 import InputNg from '../input-ng/input-ng';
 import {getShortcutTitle} from '../shortcuts/shortcut-title';
 
-import HintPopupTpl from './shortcuts-hint-ng.html';
+import HintPopupTpl from './shortcuts-hint-ng__template';
 import './shortcuts-hint-ng.css';
 
 /**