@jetbrains/ring-ui 4.1.0-beta.9 → 4.1.1

package/components/error-bubble/error-bubble.examples.js

@@ -57,7 +57,7 @@ export const inDialogForm = () => {
       const {value} = this.state;
 
       return (
-        <Dialog show>
+        <Dialog label="Dialog" show>
           <Header>Dialog example</Header>
           <Content>
             <form className="ring-form">

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/theme.js

@@ -5,7 +5,7 @@ const Theme = {
   DARK: 'dark'
 };
 
-export const ThemeContext = createContext();
+export const ThemeContext = createContext(null);
 
 const getDisplayName = Component => (typeof Component === 'string' ? Component : (Component.name ?? Component.displayName ?? 'Component'));
 

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/list/list__link.js

@@ -17,7 +17,8 @@ export default class ListLink extends PureComponent {
     description: PropTypes.string,
     label: PropTypes.oneOfType([
       PropTypes.element,
-      PropTypes.string
+      PropTypes.string,
+      PropTypes.func
     ]),
     rgItemType: PropTypes.number,
     scrolling: PropTypes.bool,

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/message/message.examples.js

@@ -40,8 +40,10 @@ export const basic = args => (
 
 basic.storyName = 'basic';
 basic.args = {
-  tailOffset: 32,
-  onDismiss: null
+  tailOffset: 32
+};
+basic.parameters = {
+  actions: {argTypesRegex: '^onClose$'}
 };
 
 export const withOnDissmiss = args => (
@@ -69,7 +71,8 @@ export const wishNarrowAnchor = args => (
 
 wishNarrowAnchor.storyName = 'with narrow anchor';
 wishNarrowAnchor.args = {
-  popupProps: {left: -8},
-  onClose: null,
-  onDismiss: null
+  popupProps: {left: -8}
+};
+wishNarrowAnchor.parameters = {
+  actions: {argTypesRegex: null}
 };

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/progress-bar/progress-bar.examples.js

@@ -35,15 +35,15 @@ export const basic = () => {
       return (
         <div>
           <div style={{height: '25px', paddingTop: '25px'}}>
-            <ProgressBar value={value} style={{width: 288}}/>
+            <ProgressBar label="Progress" value={value} style={{width: 288}}/>
           </div>
 
           <div style={{height: '25px', paddingTop: '25px', background: '#000'}}>
-            <ProgressBar value={value} theme={Theme.DARK} style={{width: 288}}/>
+            <ProgressBar label="Progress" value={value} theme={Theme.DARK} style={{width: 288}}/>
           </div>
 
           <div style={{height: '25px', paddingTop: '25px', background: '#F0F0F0'}}>
-            <ProgressBar value={value} style={{width: 288}}/>
+            <ProgressBar label="Progress" value={value} style={{width: 288}}/>
           </div>
         </div>
       );

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}