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

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/input/input-legacy.css

@@ -38,10 +38,10 @@ Input
   appearance: none;
 }
 
-:global(.ring-input:active,
-.ring-input:focus,
-.ring-input_active,
-.ring-input_focus) {
+:global(.ring-input:active),
+:global(.ring-input:focus),
+:global(.ring-input_active),
+:global(.ring-input_focus) {
   border-color: var(--ring-main-color);
   outline: 0;
 }
@@ -72,9 +72,9 @@ Input
   border-left: 0;
 }
 
-:global(.ring-input.ring-input:disabled,
-.ring-input.ring-input[disabled],
-.ring-input.ring-input_disabled) {
+:global(.ring-input.ring-input:disabled),
+:global(.ring-input.ring-input[disabled]),
+:global(.ring-input.ring-input_disabled) {
   color: var(--ring-disabled-color);
   border-color: var(--ring-border-disabled-color);
   background-color: var(--ring-sidebar-background-color);

package/components/island/header.js

@@ -75,12 +75,12 @@ class Header extends Component {
       >
         {wrapWithTitle &&
         (
-          <div
+          <h2
             className={styles.title}
             style={titleStyle}
           >
             {children}
-          </div>
+          </h2>
         )}
 
         {!wrapWithTitle && children}

package/components/island/island.css

@@ -41,11 +41,15 @@
   display: block;
   float: left;
 
+  margin: 0;
+
   transform-origin: 0 50%;
   word-break: break-word;
 
   color: var(--ring-heading-color);
 
+  font-size: inherit;
+
   font-weight: bold;
 }
 
@@ -92,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 {
@@ -115,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

@@ -19,8 +19,6 @@ export default {
     framework: 'react'
   },
   args: {
-    // https://github.com/storybookjs/storybook/issues/12635#issuecomment-703392498
-    ...Message.defaultProps,
     title: 'This is title',
     direction: Directions.TOP_RIGHT,
     children: 'This is long long long long long long long long long long long long long long long long long long description'
@@ -42,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 => (
@@ -71,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/popup/popup.js

@@ -251,7 +251,7 @@ export default class Popup extends PureComponent {
         this._listenersEnabled = true;
         this.listeners.add(window, 'resize', this._redraw);
         this.listeners.add(window, 'scroll', this._redraw);
-        this.listeners.add(document, 'click', this._onDocumentClick, true);
+        this.listeners.add(document, 'pointerdown', this._onDocumentClick, true);
         let el = this._getAnchor();
         while (el) {
           this.listeners.add(el, 'scroll', this._redraw);

package/components/popup/popup.test.js

@@ -32,31 +32,33 @@ describe('Popup', () => {
     onCloseAttempt.should.have.been.called;
   });
 
-  describe('close by click', () => {
-    const click = document.createEvent('MouseEvent');
-    click.initEvent('click', true, false);
+  describe('close by pointer down', () => {
+    const downEvent = new PointerEvent('pointerdown', {
+      bubbles: true,
+      cancelable: false
+    });
     let clock;
 
     beforeEach(() => {
       clock = sandbox.useFakeTimers({toFake: ['setTimeout']});
     });
 
-    it('should attempt to close by click outside the element', () => {
+    it('should attempt to close by pointer down outside the element', () => {
       const onCloseAttempt = sandbox.stub();
       mountPopup({onCloseAttempt});
 
       clock.tick();
-      document.body.dispatchEvent(click);
+      document.body.dispatchEvent(downEvent);
       onCloseAttempt.should.have.been.called;
     });
 
-    it('should pass event to onCloseAttempt callback when closing by clicking by document', () => {
+    it('should pass event to onCloseAttempt callback when closing by document pointer down event', () => {
       const onCloseAttempt = sandbox.stub();
       mountPopup({onCloseAttempt});
 
       clock.tick();
-      document.body.dispatchEvent(click);
-      onCloseAttempt.should.have.been.calledWith(sinon.match({type: 'click'}));
+      document.body.dispatchEvent(downEvent);
+      onCloseAttempt.should.have.been.calledWith(sinon.match({type: 'pointerdown'}));
     });
 
     it('should not close popup if popup hidden', () => {
@@ -67,11 +69,11 @@ describe('Popup', () => {
       });
 
       clock.tick();
-      document.body.dispatchEvent(click);
+      document.body.dispatchEvent(downEvent);
       onCloseAttempt.should.not.have.been.called;
     });
 
-    it('should be closed by click outside the element after show', () => {
+    it('should be closed by pointer down event outside the element after show', () => {
       const onCloseAttempt = sandbox.stub();
       const wrapper = mountPopup({
         onCloseAttempt
@@ -79,17 +81,17 @@ describe('Popup', () => {
 
       wrapper.setProps({hidden: false}, () => {
         clock.tick();
-        document.body.dispatchEvent(click);
+        document.body.dispatchEvent(downEvent);
         onCloseAttempt.should.have.been.called;
       });
     });
 
-    it('shouldn\'t be closed by click inside the element', () => {
+    it('shouldn\'t be closed by pointer down event inside the element', () => {
       const onCloseAttempt = sandbox.stub();
       const instance = mountPopup({onCloseAttempt}).instance();
 
       clock.tick();
-      instance.popup.dispatchEvent(click);
+      instance.popup.dispatchEvent(downEvent);
       onCloseAttempt.should.not.have.been.called;
     });
   });

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>
       );