@jetbrains/ring-ui 4.1.12 → 5.0.0-beta.11

package/components/button/button__classes.js

@@ -1,40 +1,18 @@
 import classNames from 'classnames';
-
-import Theme from '../global/theme';
-
 import styles from './button.css';
-
-export function getButtonClasses(
-  {className, active, disabled, loader, primary, short, text, inline, danger, delayed, icon, theme}
-) {
-  const withNormalIcon = icon && !active && !danger && !primary && !disabled;
-
-  return classNames(
-    styles.button,
-    className,
-    styles[theme],
-    {
-      [styles.active]: active,
-      [styles.danger]: danger,
-      [styles.delayed]: delayed,
-      [styles.withIcon]: icon,
-      [styles.withNormalIconLight]: (
-        withNormalIcon && theme === Theme.LIGHT
-      ),
-      [styles.withNormalIconDark]: (
-        withNormalIcon && theme === Theme.DARK
-      ),
-      [styles.withDangerIconLight]: (
-        icon && danger && theme === Theme.LIGHT
-      ),
-      [styles.withDangerIconDark]: (
-        icon && danger && theme === Theme.DARK
-      ),
-      [styles.loader]: loader && !icon,
-      [styles.primary]: primary,
-      [styles.short]: short,
-      [styles.text]: text,
-      [styles.inline]: inline
-    }
-  );
+export function getButtonClasses({ className, active, disabled, loader, primary, short, text, inline, danger, delayed, icon, height }) {
+    const withNormalIcon = icon && !active && !danger && !primary && !disabled;
+    return classNames(styles.button, className, styles[`height${height}`], {
+        [styles.active]: active,
+        [styles.danger]: danger,
+        [styles.delayed]: delayed,
+        [styles.withIcon]: icon,
+        [styles.withNormalIcon]: withNormalIcon,
+        [styles.withDangerIcon]: icon && danger,
+        [styles.loader]: loader && !icon,
+        [styles.primary]: primary,
+        [styles.short]: short,
+        [styles.text]: text,
+        [styles.inline]: inline
+    });
 }

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

@@ -1,33 +1,139 @@
 @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";
 
+  border-radius: var(--ring-border-radius);
+
+  box-shadow: button-shadow var(--ring-borders-color);
+}
+
+.buttonGroup .button {
+  --ring-button-group-button-border-color: var(--ring-borders-color);
+
   position: relative;
-  z-index: 0;
 
-  display: inline-block;
+  transition: none;
 
-  white-space: nowrap;
+  box-shadow: 0 1px var(--ring-button-group-button-border-color) inset, 0 -1px var(--ring-button-group-button-border-color) inset;
 }
 
-.buttonGroup button,
-.buttonGroup .button {
-  margin: 0 0 0 -1px;
+.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: button-shadow 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: button-shadow 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 +146,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 +194,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

@@ -0,0 +1,17 @@
+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<ButtonGroupProps> {
+    static propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+    };
+    render(): JSX.Element;
+}
+export { Caption };

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

@@ -1,30 +1,20 @@
-import React, {PureComponent} from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
 import Caption from './caption';
 import styles from './button-group.css';
-
 /**
  * @name Button Group
  */
 export default class ButtonGroup extends PureComponent {
-  static propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string
-  };
-
-  render() {
-    const {className} = this.props;
-    const classes = classNames(styles.buttonGroup, className);
-
-    return (
-      <div
-        {...this.props}
-        className={classes}
-      />
-    );
-  }
+    static propTypes = {
+        children: PropTypes.node,
+        className: PropTypes.string
+    };
+    render() {
+        const { className, split, ...restProps } = this.props;
+        const classes = classNames(split ? styles.split : styles.buttonGroup, className);
+        return (<div {...restProps} className={classes}/>);
+    }
 }
-
-export {Caption};
+export { Caption };

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

@@ -0,0 +1,8 @@
+import { PureComponent, HTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+export default class Caption extends PureComponent<HTMLAttributes<HTMLElement>> {
+    static propTypes: {
+        className: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+    render(): JSX.Element;
+}

package/components/button-group/caption.js

@@ -1,23 +1,14 @@
-import React, {PureComponent} from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
 import styles from './button-group.css';
-
 export default class Caption extends PureComponent {
-  static propTypes = {
-    className: PropTypes.node
-  };
-
-  render() {
-    const {className} = this.props;
-    const classes = classNames(styles.caption, className);
-
-    return (
-      <span
-        {...this.props}
-        className={classes}
-      />
-    );
-  }
+    static propTypes = {
+        className: PropTypes.node
+    };
+    render() {
+        const { className } = this.props;
+        const classes = classNames(styles.caption, className);
+        return (<span {...this.props} className={classes}/>);
+    }
 }

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

@@ -2,9 +2,9 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import ButtonNG from '@jetbrains/ring-ui/components/button-ng/button-ng';
+import ButtonNG from '../button-ng/button-ng';
 
-import ButtonGroupNG from '@jetbrains/ring-ui/components/button-group-ng/button-group-ng';
+import ButtonGroupNG from './button-group-ng';
 
 export default {
   title: 'Legacy Angular/Button Group Ng',
@@ -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

@@ -5,12 +5,13 @@ import pencilIcon from '@jetbrains/icons/pencil';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import IconNG from '@jetbrains/ring-ui/components/icon-ng/icon-ng';
-import ThemeNG from '@jetbrains/ring-ui/components/theme-ng/theme-ng';
-import CheckboxNG from '@jetbrains/ring-ui/components/checkbox-ng/checkbox-ng';
-import Theme from '@jetbrains/ring-ui/components/global/theme';
+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 '@jetbrains/ring-ui/components/button-ng/button-ng';
+import ButtonNG from './button-ng';
 
 export default {
   title: 'Legacy Angular/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-set/button-set.d.ts

@@ -0,0 +1,12 @@
+import { PureComponent, HTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+/**
+ * @name Button Set
+ */
+export default class ButtonSet extends PureComponent<HTMLAttributes<HTMLElement>> {
+    static propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+    };
+    render(): JSX.Element;
+}

package/components/button-set/button-set.js

@@ -1,27 +1,19 @@
-import React, {PureComponent} from 'react';
+import React, { PureComponent } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-
 import styles from './button-set.css';
-
 /**
  * @name Button Set
  */
 export default class ButtonSet extends PureComponent {
-  static propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string
-  };
-
-  render() {
-    const classes = classNames(styles.buttonSet, this.props.className);
-    return (
-      <div
-        {...this.props}
-        className={classes}
-      >
+    static propTypes = {
+        children: PropTypes.node,
+        className: PropTypes.string
+    };
+    render() {
+        const classes = classNames(styles.buttonSet, this.props.className);
+        return (<div {...this.props} className={classes}>
         {this.props.children}
-      </div>
-    );
-  }
+      </div>);
+    }
 }

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

@@ -2,9 +2,9 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import ButtonNG from '@jetbrains/ring-ui/components/button-ng/button-ng';
+import ButtonNG from '../button-ng/button-ng';
 
-import ButtonSetNG from '@jetbrains/ring-ui/components/button-set-ng/button-set-ng';
+import ButtonSetNG from './button-set-ng';
 
 export default {
   title: 'Legacy Angular/Button Set Ng',

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/button-toolbar/button-toolbar.d.ts

@@ -0,0 +1,12 @@
+import { PureComponent, HTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+/**
+ * @name Button Toolbar
+*/
+export default class ButtonToolbar extends PureComponent<HTMLAttributes<HTMLElement>> {
+    static propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+    };
+    render(): JSX.Element;
+}

package/components/button-toolbar/button-toolbar.js

@@ -1,29 +1,18 @@
-import React, {PureComponent} from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
 import styles from './button-toolbar.css';
-
 /**
  * @name Button Toolbar
 */
-
 export default class ButtonToolbar extends PureComponent {
-  static propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string
-  };
-
-  render() {
-    const {className} = this.props;
-    const classes = classNames(styles.buttonToolbar, className);
-
-    return (
-      <div
-        {...this.props}
-        className={classes}
-      />
-    );
-  }
+    static propTypes = {
+        children: PropTypes.node,
+        className: PropTypes.string
+    };
+    render() {
+        const { className } = this.props;
+        const classes = classNames(styles.buttonToolbar, className);
+        return (<div {...this.props} className={classes}/>);
+    }
 }
-