@jetbrains/ring-ui 5.0.0-beta.2 → 5.0.0-beta.20

package/components/button-group/button-group.css

@@ -1,33 +1,141 @@
 @import "../global/variables.css";
 
 @value unit from "../global/global.css";
+@value button, active, primary, button-shadow from "../button/button.css";
 
 :root {
-  --ring-button-group-default-z-index: 0;
-  --ring-button-group-disabled-z-index: -1;
-  --ring-button-group-active-z-index: 1;
-  --ring-button-group-hover-z-index: 2;
-  --ring-button-group-focus-z-index: 3;
+  --ring-button-group-default-z-index: 1;
+  --ring-button-group-disabled-z-index: 0;
+  --ring-button-group-active-z-index: 2;
+  --ring-button-group-hover-z-index: 3;
+  --ring-button-group-focus-z-index: 4;
+}
+
+.common {
+  display: inline-block;
+
+  white-space: nowrap;
 }
 
 .buttonGroup {
+  composes: common;
   composes: buttonGroup from "../button-toolbar/button-toolbar.css";
 
-  position: relative;
-  z-index: 0;
+  border-radius: var(--ring-border-radius);
 
-  display: inline-block;
+  box-shadow: button-shadow var(--ring-borders-color);
 
-  white-space: nowrap;
+  line-height: normal;
 }
 
-.buttonGroup button,
 .buttonGroup .button {
-  margin: 0 0 0 -1px;
+  --ring-button-group-button-border-color: var(--ring-borders-color);
+
+  position: relative;
+
+  transition: none;
+
+  box-shadow: 0 1px var(--ring-button-group-button-border-color) inset, 0 -1px var(--ring-button-group-button-border-color) inset;
+}
+
+.buttonGroup .button[disabled] {
+  --ring-button-group-button-border-color: var(--ring-border-unselected-disabled-color);
+
+  /* stylelint-disable-next-line selector-max-specificity */
+  &::before,
+  &::after {
+    position: absolute;
+    z-index: 0;
+    top: 0;
+    bottom: 0;
+
+    width: var(--ring-border-radius);
 
+    content: "";
+
+    background-color: var(--ring-disabled-background-color);
+
+    box-shadow: 0 1px var(--ring-border-unselected-disabled-color) inset, 0 -1px var(--ring-border-unselected-disabled-color) inset;
+  }
+
+  /* stylelint-disable-next-line selector-max-specificity */
+  &::before {
+    left: calc(var(--ring-border-radius) * -1);
+  }
+
+  /* stylelint-disable-next-line selector-max-specificity */
+  &::after {
+    right: calc(var(--ring-border-radius) * -1);
+  }
+}
+
+.buttonGroup > .button:first-child,
+.buttonGroup > :first-child .button {
+  box-shadow: 0 1px var(--ring-button-group-button-border-color) inset, 0 -1px var(--ring-button-group-button-border-color) inset, 1px 0 var(--ring-button-group-button-border-color) inset;
+
+  /* stylelint-disable-next-line selector-max-specificity */
+  &::before {
+    display: none;
+  }
+}
+
+.buttonGroup > .button:last-child,
+.buttonGroup > :last-child .button {
+  box-shadow: 0 1px var(--ring-button-group-button-border-color) inset, 0 -1px var(--ring-button-group-button-border-color) inset, -1px 0 var(--ring-button-group-button-border-color) inset;
+
+  /* stylelint-disable-next-line selector-max-specificity */
+  &::after {
+    display: none;
+  }
+}
+
+/* stylelint-disable-next-line selector-max-specificity */
+.buttonGroup .button.button:hover,
+.buttonGroup .button.button:active {
+  border-radius: var(--ring-border-radius);
+  box-shadow: button-shadow var(--ring-border-hover-color);
+}
+
+/* stylelint-disable-next-line selector-max-specificity */
+.buttonGroup .button.button:global(.focus-visible) {
+  border-radius: var(--ring-border-radius);
+  box-shadow: button-shadow var(--ring-border-hover-color), 0 0 0 1px var(--ring-border-hover-color);
+}
+
+/* stylelint-disable-next-line selector-max-specificity */
+.buttonGroup .button.button.active {
+  border-radius: var(--ring-border-radius);
+  box-shadow: inset 0 0 0 2px var(--ring-main-color);
+}
+
+/* stylelint-disable-next-line selector-max-specificity */
+.buttonGroup .button:global(.focus-visible).active {
+  border-radius: var(--ring-border-radius);
+  box-shadow: inset 0 0 0 2px var(--ring-main-color), 0 0 0 1px var(--ring-border-hover-color);
+}
+
+/* stylelint-disable-next-line selector-max-specificity */
+.buttonGroup .button.active[disabled] {
+  box-shadow: button-shadow var(--ring-border-disabled-color);
+}
+
+.split {
+  composes: common;
+
+  position: relative;
+  z-index: 0;
+}
+
+.common button,
+.common .button {
   border-radius: 0;
 }
 
+.split button,
+.split .button {
+  margin: 0 0 0 -1px;
+}
+
 .caption {
   composes: font from "../global/global.css";
 
@@ -40,24 +148,31 @@
   }
 }
 
-.buttonGroup > .caption + .button,
-.buttonGroup > button:first-child,
-.buttonGroup > .button:first-child,
-.buttonGroup > :first-child .button {
+.common > button:first-child,
+.common > .button:first-child,
+.common > :first-child .button {
   margin: 0;
 
   border-top-left-radius: var(--ring-border-radius);
   border-bottom-left-radius: var(--ring-border-radius);
 }
 
-.buttonGroup > .button:last-child,
-.buttonGroup > button:last-child,
-.buttonGroup > :last-child .button {
+.common > .button:last-child,
+.common > button:last-child,
+.common > :last-child .button {
   border-top-right-radius: var(--ring-border-radius);
   border-bottom-right-radius: var(--ring-border-radius);
 }
 
-.buttonGroup {
+.split .primary:not(:last-child) {
+  margin-right: 1px;
+}
+
+.split .primary:not(:first-child) {
+  margin-left: 1px;
+}
+
+.common {
   & .button {
     position: relative;
     z-index: var(--ring-button-group-default-z-index);
@@ -81,5 +196,9 @@
 
   & .active {
     z-index: var(--ring-button-group-active-z-index);
+
+    &[disabled] {
+      z-index: var(--ring-button-group-default-z-index);
+    }
   }
 }

package/components/button-group/button-group.d.ts

@@ -1,10 +1,13 @@
 import { PureComponent, HTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
 import Caption from './caption';
+export interface ButtonGroupProps extends HTMLAttributes<HTMLElement> {
+    split?: boolean | null | undefined;
+}
 /**
  * @name Button Group
  */
-export default class ButtonGroup extends PureComponent<HTMLAttributes<HTMLElement>> {
+export default class ButtonGroup extends PureComponent<ButtonGroupProps> {
     static propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         className: PropTypes.Requireable<string>;

package/components/button-group/{button-group.jsx → button-group.js}

@@ -12,9 +12,9 @@ export default class ButtonGroup extends PureComponent {
         className: PropTypes.string
     };
     render() {
-        const { className } = this.props;
-        const classes = classNames(styles.buttonGroup, className);
-        return (<div {...this.props} className={classes}/>);
+        const { className, split, ...restProps } = this.props;
+        const classes = classNames(split ? styles.split : styles.buttonGroup, className);
+        return (<div {...restProps} className={classes}/>);
     }
 }
 export { Caption };

package/components/button-group-ng/button-group-ng.css

@@ -1,3 +1,4 @@
 .buttonGroup {
   font-size: 0;
+  line-height: 0;
 }

package/components/button-group-ng/button-group-ng.examples.js

@@ -19,8 +19,8 @@ export const basic = () => {
   angular.module(APP_NAME, [ButtonNG, ButtonGroupNG]);
 
   return `
+      <span rg-button-group-caption>Side</span>
       <div rg-button-group>
-        <span rg-button-group-caption>Side</span>
         <rg-button>Left</rg-button>
         <rg-button>Right</rg-button>
       </div>

package/components/button-ng/button-ng.examples.js

@@ -9,6 +9,7 @@ import IconNG from '../icon-ng/icon-ng';
 import ThemeNG from '../theme-ng/theme-ng';
 import CheckboxNG from '../checkbox-ng/checkbox-ng';
 import Theme from '../global/theme';
+import styles from '../global/variables_dark.css';
 
 import ButtonNG from './button-ng';
 
@@ -88,9 +89,7 @@ export const basic = () => {
     <div ng-controller="testCtrl">
       <div class="buttons">${renderAllButtons()}</div>
 
-      <rg-theme theme="Theme.DARK">
-        <div class="buttons dark">${renderAllButtons()}</div>
-      </rg-theme>
+      <div class="buttons ${styles.dark}">${renderAllButtons()}</div>
     </div>
   `;
 
@@ -108,12 +107,12 @@ basic.parameters = {
   },
   storyStyles: `
 <style>
-  .buttons > button {
-    margin: 8px;
+  .buttons {
+    background-color: var(--ring-content-background-color);
   }
 
-  .dark {
-    background: #000;
+  .buttons > button {
+    margin: 8px;
   }
 </style>`
 };

package/components/button-ng/button-ng.js

@@ -5,10 +5,11 @@ import classNames from 'classnames';
 import RingAngularComponent from '../global/ring-angular-component';
 import {addClasses, applyMethodToClasses, removeClasses} from '../global/dom';
 import IconNG from '../icon-ng/icon-ng';
-import Theme, {applyTheme} from '../global/theme';
 import styles from '../button/button.css';
 import {getButtonClasses} from '../button/button__classes';
 
+import {ControlsHeight} from '../global/controls-height';
+
 import overrides from './button-ng.css';
 
 const {ringIconDefaultColor, iconMarginFix, transcludeSpacer} = overrides;
@@ -92,7 +93,6 @@ class ButtonController extends RingAngularComponent {
       this.updateClasses();
       this.updateIcon();
     });
-    $attrs.$observe('theme', this.updateClasses);
   }
 
   getAttrValue(attribute) {
@@ -103,13 +103,12 @@ class ButtonController extends RingAngularComponent {
   updateClasses = () => {
     const {$attrs} = this.$inject;
 
-    const theme = this.element.classList.contains(styles.light) ? Theme.LIGHT : Theme.DARK;
-
     const foreignClasses = [...this.element.classList].filter(name => !buttonClassesMap[name]);
 
     this.element.className = classNames(
       foreignClasses,
       getButtonClasses({
+        height: ControlsHeight.S,
         className: styles.button,
         active: this.getAttrValue($attrs.active),
         disabled: this.getAttrValue($attrs.disabled),
@@ -120,8 +119,7 @@ class ButtonController extends RingAngularComponent {
         inline: this.getAttrValue($attrs.inline),
         danger: this.getAttrValue($attrs.danger),
         delayed: this.getAttrValue($attrs.delayed),
-        icon: $attrs.icon,
-        theme
+        icon: $attrs.icon
       }),
       {
         // Some overrides for angular buttons
@@ -169,24 +167,13 @@ class ButtonController extends RingAngularComponent {
   };
 }
 
-function changeTheme(element, data) {
-  return applyTheme({
-    element,
-    prevTheme: data.prevTheme && styles[data.prevTheme] || styles.light,
-    currentTheme: styles[data.currentTheme]
-  });
-}
-
 function createButtonDirective(tagName) {
   return () => ({
     restrict: 'E',
     transclude: true,
     replace: true,
-    require: {
-      rgThemeCtrl: '?^^rgTheme'
-    },
     template: `
-  <${tagName} class="${styles.button} ${styles.light}">
+  <${tagName} class="${styles.button}">
   <span class="${styles.content}"
   ><rg-icon class="${classNames(styles.icon, overrides.iconNg, iconMarginFix)}"></rg-icon
   ><ng-transclude></ng-transclude
@@ -194,13 +181,7 @@ function createButtonDirective(tagName) {
   ><div class="js-button-loader"></div>
   </${tagName}>
     `,
-    controller: ButtonController,
-    link: (scope, element, attrs, {rgThemeCtrl}) => {
-      if (rgThemeCtrl) {
-        changeTheme(element[0], {currentTheme: rgThemeCtrl.theme});
-        rgThemeCtrl.on('change', (event, data) => changeTheme(element[0], data));
-      }
-    }
+    controller: ButtonController
   });
 }
 

package/components/button-set/button-set.css

@@ -1,6 +1,7 @@
 @import "../global/variables.css";
 
 @value unit from "../global/global.css";
+@value button from "../button/button.css";
 
 .buttonSet {
   position: relative;

package/components/button-toolbar/button-toolbar.css

@@ -1,6 +1,7 @@
 @import "../global/variables.css";
 
 @value unit from "../global/global.css";
+@value button from "../button/button.css";
 
 .buttonToolbar {
   display: inline-block;
@@ -8,6 +9,7 @@
   white-space: nowrap;
 
   font-size: 0;
+  line-height: 0;
 }
 
 .buttonToolbar > button,

package/components/checkbox/checkbox.css

@@ -36,7 +36,7 @@
   pointer-events: none;
 
   border: 1px solid var(--ring-borders-color);
-  border-radius: 3px;
+  border-radius: var(--ring-border-radius-small);
   background-color: var(--ring-content-background-color);
 }
 
@@ -46,9 +46,8 @@
   width: calc(unit * 2);
   height: calc(unit * 2);
 
-  transition: opacity var(--ring-fast-ease), transform var(--ring-fast-ease);
-
   opacity: 0;
+  color: var(--ring-white-text-color);
 
   & svg {
     position: absolute;
@@ -60,8 +59,8 @@
 .check {
   composes: icon;
 
-  top: calc(unit * -1.5);
-  left: 1px;
+  top: -1px;
+  left: -1px;
 }
 
 .minus {
@@ -90,18 +89,16 @@
   &:checked + .cell,
   &:indeterminate[checked] + .cell,
   &:indeterminate[data-checked="true"] + .cell {
-    border-color: var(--ring-border-hover-color);
-    background-color: var(--ring-selected-background-color);
+    border-color: transparent;
+    background-color: var(--ring-main-color);
   }
 
   /* stylelint-disable-next-line selector-max-specificity */
   &:checked + .cell .check {
-    transform: translateY(unit);
-
     opacity: 1;
   }
 
-  &:focus + .cell,
+  &:global(.focus-visible) + .cell,
   &.focus + .cell {
     transition: background-color var(--ring-ease);
 
@@ -120,14 +117,20 @@
 
   /* stylelint-disable-next-line selector-max-specificity */
   &[disabled][disabled] + .cell {
-    border-color: var(--ring-line-color);
-    background-color: var(--ring-content-background-color);
+    border-color: var(--ring-border-unselected-disabled-color);
+    background-color: var(--ring-disabled-background-color);
+  }
+
+  /* stylelint-disable-next-line selector-max-specificity */
+  &[disabled]:checked + .cell,
+  &[disabled]:indeterminate + .cell {
+    border-color: var(--ring-border-disabled-color);
   }
 
   /* stylelint-disable-next-line selector-max-specificity */
   &[disabled]:checked + .cell .check,
   &[disabled]:indeterminate + .cell .minus {
-    opacity: 0.5;
+    color: var(--ring-border-disabled-color);
   }
 
   /* stylelint-disable-next-line selector-max-specificity */

package/components/checkbox/{checkbox.jsx → checkbox.js}

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import checkmarkIcon from '@jetbrains/icons/checkmark';
+import checkmarkIcon from '@jetbrains/icons/checkmark-14px';
 import minusIcon from '@jetbrains/icons/remove-10px';
 import Icon from '../icon/icon';
 import styles from './checkbox.css';

package/components/checkbox-ng/checkbox-ng.js

@@ -1,6 +1,6 @@
 import angular from 'angular';
 
-import checkmarkIcon from '@jetbrains/icons/checkmark';
+import checkmarkIcon from '@jetbrains/icons/checkmark-14px';
 
 import IconNG from '../icon-ng/icon-ng';
 import proxyAttrs from '../proxy-attrs/proxy-attrs';

package/components/confirm-service/{confirm-service.jsx → confirm-service.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from 'react-dom';
+import { render } from '../global/react-render-adapter';
 import Confirm from '../confirm/confirm';
 /**
  * @name Confirm Service

package/components/data-list/data-list.d.ts

@@ -31,12 +31,10 @@ export default class DataListContainer<T extends SelectionItem> extends Componen
             onMouseMove: () => void;
             onKeyDown: (e: KeyboardEvent) => void;
             render(): JSX.Element;
-            context: any;
+            context: unknown;
             setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
             forceUpdate(callback?: (() => void) | undefined): void;
-            readonly props: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>> & Readonly<{
-                children?: React.ReactNode;
-            }>;
+            readonly props: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>;
             refs: {
                 [key: string]: React.ReactInstance;
             };
@@ -60,12 +58,10 @@ export default class DataListContainer<T extends SelectionItem> extends Componen
             onMouseMove: () => void;
             onKeyDown: (e: KeyboardEvent) => void;
             render(): JSX.Element;
-            context: any;
+            context: unknown;
             setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
             forceUpdate(callback?: (() => void) | undefined): void;
-            readonly props: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>> & Readonly<{
-                children?: React.ReactNode;
-            }>;
+            readonly props: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>;
             refs: {
                 [key: string]: React.ReactInstance;
             };

package/components/date-picker/{date-input.jsx → date-input.js}

@@ -2,6 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import Input from '../input/input';
+import { ControlsHeight } from '../global/controls-height';
 import { dateType } from './consts';
 import styles from './date-picker.css';
 export default class DateInput extends React.PureComponent {
@@ -92,6 +93,6 @@ export default class DateInput extends React.PureComponent {
             }
         })();
         const classes = classNames(styles.filter, styles[`${name}Input`], divider && styles[`${name}InputWithDivider`], 'ring-js-shortcuts');
-        return (<Input autoComplete="off" borderless data-name={name} inputRef={this.inputRef} className={classes} value={displayText} onChange={this.handleChange} onFocus={onActivate} onKeyDown={this.handleKeyDown} onClear={onClear} placeholder={placeholder}/>);
+        return (<Input autoComplete="off" borderless height={ControlsHeight.L} data-name={name} inputRef={this.inputRef} className={classes} value={displayText} onChange={this.handleChange} onFocus={onActivate} onKeyDown={this.handleKeyDown} onClear={onClear} placeholder={placeholder}/>);
     }
 }

package/components/date-picker/date-picker.css

@@ -1,4 +1,5 @@
 @import "../global/variables.css";
+@import "../global/global.css";
 
 @value unit from "../global/global.css";
 @value cellSize: calc(unit * 3);
@@ -94,6 +95,7 @@
 .fromInputWithDivider {
   &::after {
     position: absolute;
+    top: 0;
     right: unit;
 
     content: "—";
@@ -243,7 +245,7 @@
 }
 
 .current.current {
-  color: var(--ring-dark-text-color);
+  color: var(--ring-white-text-color);
   border-radius: var(--ring-border-radius);
   background-color: var(--ring-main-color);
 }

package/components/date-picker/{date-popup.jsx → date-popup.js}

@@ -76,7 +76,6 @@ export default class DatePopup extends Component {
             if (this.state.text && prevState.active) {
                 this.confirm(prevState.active);
             }
-            // eslint-disable-next-line react/no-did-update-set-state
             this.setState({ text: null });
         }
     }

package/components/dialog/dialog.css

@@ -1,6 +1,7 @@
 @import "../global/variables.css";
 
 @value unit from "../global/global.css";
+@value header from "../island/island.css";
 
 .container {
   position: fixed;
@@ -39,8 +40,7 @@
 
   & .panel {
     margin-top: 0;
-    padding-right: calc(unit * 4);
-    padding-left: calc(unit * 4);
+    padding: calc(unit * 2) calc(unit * 4) calc(unit * 4);
 
     border-top: none;
 
@@ -54,7 +54,7 @@
 }
 
 .content.content {
-  box-shadow: 0 2px 16px var(--ring-popup-shadow-color);
+  box-shadow: var(--ring-dialog-shadow);
 }
 
 .clickableOverlay {
@@ -117,3 +117,10 @@
     pointer-events: initial;
   }
 }
+
+.container .header {
+  padding-top: calc(unit * 4);
+
+  font-size: 24px;
+  line-height: 28px;
+}