Merge branch 'master' into dependencies.io-update-build-255.1.0

components/island/content.js

@@ -18,13 +18,15 @@ export default class Content extends Component {
     scrollableWrapperClassName: PropTypes.string,
     fade: PropTypes.bool,
     bottomBorder: PropTypes.bool,
-    onScroll: PropTypes.func
+    onScroll: PropTypes.func,
+    onScrollToBottom: PropTypes.func
   };
 
   static defaultProps = {
     fade: true,
     bottomBorder: false,
-    onScroll: noop
+    onScroll: noop,
+    onScrollToBottom: noop
   };
 
   state = {
@@ -56,6 +58,11 @@ export default class Content extends Component {
     const {scrollTop, scrollHeight, offsetHeight} = scrollableNode;
     const scrolledToTop = scrollTop === 0;
     const scrolledToBottom = offsetHeight + scrollTop >= scrollHeight;
+
+    if (scrolledToBottom) {
+      this.props.onScrollToBottom();
+    }
+
     this.setState({scrolledToTop, scrolledToBottom});
   });
 
@@ -74,7 +81,7 @@ export default class Content extends Component {
   };
 
   render() {
-    const {children, className, bottomBorder, scrollableWrapperClassName, onScroll, fade, ...restProps} = this.props; // eslint-disable-line no-unused-vars, max-len
+    const {children, className, bottomBorder, scrollableWrapperClassName, onScroll, onScrollToBottom, fade, ...restProps} = this.props; // eslint-disable-line no-unused-vars, max-len
     const {scrolledToTop, scrolledToBottom} = this.state;
 
     const classes = classNames(styles.content, className, {

components/island/island.css

@@ -58,6 +58,7 @@
   overflow: auto;
 
   width: 100%;
+  -webkit-overflow-scrolling: touch;
 }
 
 .scrollableWrapper {

components/user-agreement/user-agreement.css

@@ -1,18 +1,21 @@
-@value unit from '../global/global.css';
+@value unit, extra-small-screen-media from '../global/global.css';
 
 .dialogContent {
-  width: auto;
-  padding: calc(unit * 3) 0 calc(unit * 2);
+  width: 600px;
+
+  @media extra-small-screen-media {
+    & {
+      width: 90vw;
+    }
+  }
 }
 
-.text {
-  overflow-y: auto;
+.scrollableWrapper {
+  padding-top: 0;
+}
 
-  min-width: 260px;
-  max-width: 600px;
-  max-height: 300px;
-  padding: calc(unit * 2);
+.suggestion {
+  white-space: nowrap;
 
-  border: 1px solid #e7ebf0;
-  background-color: #fafafa;
+  font-size: 12px;
 }

components/user-agreement/user-agreement.examples.html

@@ -9,13 +9,11 @@
     import UserAgreement from '@jetbrains/ring-ui/components/user-agreement/user-agreement';
     import text from './toolbox.eula';
 
-    const onAccept = () => {
-      console.log('accept');
-    };
+    const onAccept = () => console.log('accept');
 
-    const onDecline = () => {
-      console.log('decline');
-    };
+    const onDecline = () => console.log('decline');
+
+    const onClose = () => console.log('close');
 
     class Demo extends Component {
       render() {
@@ -26,6 +24,7 @@
                text={text}
                onAccept={onAccept}
                onDecline={onDecline}
+               onClose={onClose}
              />
           </div>
          );

components/user-agreement/user-agreement.js

@@ -8,19 +8,16 @@
  */
 
 import React, {PureComponent} from 'react';
-import {findDOMNode} from 'react-dom';
 import PropTypes from 'prop-types';
 
 import Dialog from '../dialog/dialog';
-import {Content} from '../island/island';
+import {Content, Header} from '../island/island';
 import Panel from '../panel/panel';
 import Button from '../button/button';
 import Markdown from '../markdown/markdown';
 
 import style from './user-agreement.css';
 
-const SCROLL_TOLERANCE = 10;
-
 export default class UserAgreement extends PureComponent {
   static propTypes = {
     show: PropTypes.bool,
@@ -46,23 +43,7 @@ export default class UserAgreement extends PureComponent {
     scrolledDown: false
   };
 
-  onTextRef = component => {
-    // eslint-disable-next-line react/no-find-dom-node
-    const textRef = this.textRef = findDOMNode(component);
-    if (textRef) {
-      textRef.addEventListener('scroll', this.onScroll);
-      this.onScroll();
-    }
-  };
-
-  onScroll = () => {
-    const textRef = this.textRef;
-    const delta = Math.abs(textRef.scrollTop - (textRef.scrollHeight - textRef.offsetHeight));
-
-    if (delta < SCROLL_TOLERANCE) {
-      this.setState({scrolledDown: true});
-    }
-  };
+  onScrollToBottom = () => this.setState({scrolledDown: true});
 
   render() {
     const {scrolledDown} = this.state;
@@ -75,16 +56,23 @@ export default class UserAgreement extends PureComponent {
         trapFocus
         autoFocusFirst={false}
       >
-        <Content>
-          <Markdown source={text} className={style.text} ref={this.onTextRef} tabindex={-1}/>
+        <Header>&nbsp;</Header>
+        <Content
+          scrollableWrapperClassName={style.scrollableWrapper}
+          fade
+          onScrollToBottom={this.onScrollToBottom}
+        >
+          <Markdown source={text} tabindex={-1}/>
         </Content>
         {!preview && (
           <Panel>
             <Button primary disabled={!scrolledDown} onClick={onAccept}>
               {translations.accept}
             </Button>
             <Button onClick={onDecline} autoFocus>{translations.decline}</Button>
-            {!scrolledDown && translations.scrollToAccept}
+            {!scrolledDown && (
+              <span className={style.suggestion}>{translations.scrollToAccept}</span>
+            )}
           </Panel>
         )}
         {preview && (

components/user-card/user-card.gemini.js

@@ -4,5 +4,6 @@ gemini.suite('UserCard', suite => {
   suite.
     setUrl('user-card/user-card.html').
     setCaptureElements('[data-test~="user-card-inline"]').
+    ignoreElements('img').
     capture('user card');
 });

packages/docs/example.twig

@@ -2,6 +2,7 @@
 <html>
 <head>
   <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="icon" href="../../favicon.ico?v=1" />
   <title>{{ example.attrs.name }}</title>
   {% include './inc/google-tag-manager.twig' %}