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

components/badge/badge.js

@@ -9,6 +9,7 @@ import style from './badge.css';
 /**
  * @name Badge
  * @category Components
+ * @tags Ring UI Language
  * @constructor
  * @description Displays a badge.
  * @extends {PureComponent}

components/data-list/data-list.js

@@ -1,6 +1,7 @@
 /**
   * @name Data List
   * @category Components
+  * @tags Ring UI Language
   * @framework React
   * @extends {PureComponent}
   * @description A component for rendering interactive hierarchical tables.

components/error-message/error-message.js

@@ -11,6 +11,7 @@ import styles from './error-message.css';
 /**
  * @name Error Message
  * @category Components
+ * @tags Ring UI Language
  * @framework React
  * @constructor
  * @description Displays an error message centered both vertically and horizontally inside the parent container.

components/island-legacy/island-legacy.examples.html

@@ -1,24 +1,3 @@
-<example name="Island in React">
-  <file type="html">
-    <div id="island"></div>
-  </file>
-
-  <file type="js">
-     import {render} from 'react-dom';
-     import React from 'react';
-     import Island, {Header, Content} from '@jetbrains/ring-ui/components/island/island';
-
-     const renderIslandDemo = () => (
-       <Island>
-         <Header>Title</Header>
-         <Content>Content</Content>
-       </Island>
-     );
-
-     render(renderIslandDemo(), document.getElementById('island'));
-  </file>
-</example>
-
 <example name="Island in HTML/CSS">
   <file type="html">
     <div>

components/island-legacy/island-legacy.js

@@ -4,13 +4,6 @@ import classNames from 'classnames';
 
 import './island-legacy.scss';
 
-/**
- * @name Island Legacy
- * @category Components
- * @description Displays an island.
- * @example-file ./island-legacy.examples.html
- */
-
 export default class Island extends PureComponent {
   static propTypes = {
     className: PropTypes.string,

components/island-legacy/island-legacy.scss

@@ -1,5 +1,12 @@
 @import '../global/global';
 
+/**
+ * @name Island Legacy
+ * @category Style-only
+ * @description Displays an island.
+ * @example-file ./island-legacy.examples.html
+ */
+
 .ring-island {
   @include ring-font;
 

components/loader-screen-ng/loader-screen-ng.js

@@ -1,7 +1,7 @@
 import angular from 'angular';
 
 import loaderNg from '../loader-ng/loader-ng';
-import '../loader-screen/loader-screen.scss';
+import styles from '../loader-screen/loader-screen.css';
 
 /**
  * @name Loader Screen Ng
@@ -104,7 +104,12 @@ angularModule.directive('rgLoaderScreen', function rgLoaderScreenDirective() {
       message: '@rgLoaderScreen'
     },
 
-    template: require('./loader-screen-ng.html')
+    template: `
+<div class="${styles.loaderScreen}" ng-if="$root.isLoaderVisible()">
+  <rg-loader class="${styles.loader}"
+    message="{{$root.isInitialLoading() ? message : ''}}"></rg-loader>
+</div>
+    `
   };
 });
 

components/loader-screen/loader-screen.scss → components/loader-screen/loader-screen.css

@@ -1,24 +1,27 @@
-.ring-loader-screen {
+.loaderScreen {
   position: absolute;
+
   width: 100%;
   height: 100%;
 
   text-align: center;
   vertical-align: middle;
 
-  .ring-loader-screen__loader {
+  &::before {
     display: inline-block;
 
-    &_without-spacings canvas {
-      margin: 0;
-    }
-  }
+    height: 100%;
 
-  &:before {
     content: '';
-    display: inline-block;
-    height: 100%;
 
     vertical-align: middle;
   }
 }
+
+.loader {
+  display: inline-block;
+}
+
+.loaderWithoutSpacing canvas {
+  margin: 0;
+}

components/loader-screen/loader-screen.js

@@ -4,11 +4,12 @@ import PropTypes from 'prop-types';
 
 import Loader from '../loader/loader';
 
-import './loader-screen.scss';
+import styles from './loader-screen.css';
 
 /**
  * @name Loader Screen
  * @category Components
+ * @tags Ring UI Language
  * @constructor
  * @description Displays a large animated loader and an (optional) text. Use cases: while the site is loading, during major actions.
  * @extends {ReactComponent}
@@ -56,10 +57,10 @@ export default class LoaderScreen extends PureComponent {
   render() {
     const {message, className, containerClassName, ...restProps} = this.props;
 
-    const containerClasses = classNames(containerClassName, 'ring-loader-screen');
+    const containerClasses = classNames(containerClassName, styles.loaderScreen);
 
-    const loaderClasses = classNames(className, 'ring-loader-screen__loader', {
-      'ring-loader-screen__loader_without-spacings': !message
+    const loaderClasses = classNames(className, styles.loader, {
+      [styles.loaderWithoutSpacing]: !message
     });
 
     return (

components/old-browsers-message/old-browsers-message.css

@@ -0,0 +1,27 @@
+@value unit, font-size-larger, text-color from '../global/global.css';
+
+:global(.ring-old-browsers-message) {
+  display: block;
+
+  margin-top: 15%;
+
+  text-align: center;
+
+  color: text-color;
+
+  font-family: -apple-system, BlinkMacSystemFont, Ubuntu, "Helvetica Neue", Arial, sans-serif;
+  font-size: font-size-larger;
+  line-height: calc(2.5 * unit);
+}
+
+:global(.ring-old-browsers-message_hidden) {
+  display: none;
+}
+
+:global(.ring-old-browsers-message__smile) {
+  cursor: pointer;
+  user-select: none;
+
+  font-size: calc(3 * unit);
+}
+

components/old-browsers-message/old-browsers-message.js

@@ -3,6 +3,7 @@ import sniffer from '../global/sniffer';
 /**
  * @name Old Browsers Message
  * @category Components
+ * @tags Ring UI Language
  * @description Displays a full-screen "Browser is unsupported" message if a JavaScript error occurs on page load in an old browser.
  *
  * Note: this script does not have any dependencies, you should include it directly.
@@ -24,7 +25,7 @@ import sniffer from '../global/sniffer';
         </div>
       </file>
       <file type="js">
-        import '@jetbrains/ring-ui/components/old-browsers-message/old-browsers-message.scss';
+        import '@jetbrains/ring-ui/components/old-browsers-message/old-browsers-message.css';
         import '@jetbrains/ring-ui/components/old-browsers-message/old-browsers-message';
 
         //Trigger an error to imitate an unsupported browser

components/progress-bar-ng/progress-bar-ng.examples.html

@@ -6,7 +6,7 @@
         <rg-progress-bar value="ctrl.value"></rg-progress-bar>
       </div>
       <div style="height: 25px; background: #000; padding-top: 25px;">
-        <rg-progress-bar value="ctrl.value" light="true"></rg-progress-bar>
+        <rg-progress-bar value="ctrl.value" theme="'dark'"></rg-progress-bar>
       </div>
       <div style="height: 25px; background: #F0F0F0; padding-top: 25px;">
         <rg-progress-bar value="ctrl.value"></rg-progress-bar>

components/progress-bar/progress-bar.scss → components/progress-bar/progress-bar.css

@@ -1,61 +1,79 @@
-@import "../global/global";
+@value unit, font-size-larger, main-color from '../global/global.css';
 
-.ring-progress-bar {
-  background-color: rgba(0, 0, 0, 0.2);
-  border-radius: 2px;
-  height: $ring-unit/2;
-  margin-bottom: $ring-unit/2;
-  max-width: 36*$ring-unit;
-  overflow: hidden;
-  position: relative;
-  z-index: 1; // Required to see border-radius on animated background
+.light {
+  &.progressBar {
+    background-color: rgba(0, 0, 0, 0.2);
+  }
+}
 
-  &_light {
+.dark {
+  &.progressBar {
     background-color: rgba(255, 255, 255, 0.3);
   }
+
+  & .line::after {
+    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0));
+  }
 }
 
+.progressBar {
+  position: relative;
+  z-index: 1; /* Required to see border-radius on animated background */
 
-.ring-progress-bar_global {
-  background: transparent;
-  max-width: none;
+  overflow: hidden;
+
+  max-width: calc(36 * unit);
+  height: calc(unit / 2);
+  margin-bottom: calc(unit / 2);
+
+  border-radius: 2px;
+}
+
+.globalMode {
   position: absolute;
   top: 0;
+
   width: 100%;
+  max-width: none;
+
+  background: transparent;
 }
 
-.ring-progress-bar__i {
-  border-radius: 2px;
-  background-color: $ring-blue-color;
-  color: #FFF;
+.line {
   float: left;
+
+  width: 0;
   height: 100%;
-  line-height: $ring-unit/2;
-  transition: width .6s ease;
+
+  transition: width 0.6s ease;
   text-align: center;
-  width: 0;
 
-  &:after {
-    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));
-    background-repeat: no-repeat;
-    bottom: 0;
-    content: '';
-    left: 0;
+  color: #fff;
+  border-radius: 2px;
+  background-color: main-color;
+
+  line-height: calc(unit / 2);
+
+  &::after {
     position: absolute;
-    right: 0;
     top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
 
-    .ring-progress-bar_light & {
-      background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0));
-    }
+    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));
+    background-repeat: no-repeat;
   }
 }
 
 @keyframes progress-bar {
   from {
     transform: translateX(-100%);
   }
+
   to {
     transform: translateX(100%);
   }

components/progress-bar/progress-bar.examples.html

@@ -13,6 +13,7 @@
     import React from 'react';
     import {render} from 'react-dom';
     import ProgressBar from '@jetbrains/ring-ui/components/progress-bar/progress-bar';
+    import Theme from '@jetbrains/ring-ui/components/global/theme';
 
     let value = 0;
 
@@ -25,7 +26,7 @@
       );
 
       render(
-        <ProgressBar value={value} light={true}/>,
+        <ProgressBar value={value} theme={Theme.DARK}/>,
         document.getElementById('progress-bar-black')
       );