@jetbrains/ring-ui 5.1.23 → 5.1.24

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

@@ -0,0 +1,235 @@
+@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: 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);
+
+  line-height: normal;
+}
+
+.buttonGroup .button {
+  --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-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-disabled-color) inset, 0 -1px var(--ring-border-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;
+  }
+}
+
+.buttonGroup > .button:only-child,
+.buttonGroup > :only-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,
+    1px 0 var(--ring-button-group-button-border-color) inset;
+
+  /* stylelint-disable-next-line selector-max-specificity */
+  &::before {
+    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: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: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-selected-disabled-color);
+}
+
+.split {
+  composes: common;
+  composes: buttonGroup from "../button-toolbar/button-toolbar.css";
+
+  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";
+
+  margin-right: unit;
+
+  font-size: var(--ring-font-size);
+
+  &:empty {
+    margin-right: 0;
+  }
+}
+
+.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);
+}
+
+/* stylelint-disable-next-line selector-max-specificity */
+.common > button:first-child > div:first-child,
+.common > .button:first-child > div:first-child,
+.common > :first-child .button > div:first-child {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.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);
+}
+
+/* stylelint-disable-next-line selector-max-specificity */
+.common > .button:last-child > div:first-child,
+.common > button:last-child > div:first-child,
+.common > :last-child .button > div:first-child {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.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);
+
+    &[disabled] {
+      z-index: var(--ring-button-group-disabled-z-index);
+    }
+
+    &:active {
+      z-index: var(--ring-button-group-active-z-index);
+    }
+
+    &:hover {
+      z-index: var(--ring-button-group-hover-z-index);
+    }
+
+    &:focus {
+      z-index: var(--ring-button-group-focus-z-index);
+    }
+  }
+
+  & .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,18 @@
+import React, { PureComponent, HTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+import Caption from './caption';
+export interface ButtonGroupProps extends HTMLAttributes<HTMLElement> {
+    split?: boolean | null | undefined;
+    'data-test'?: string | null | undefined;
+}
+/**
+ * @name Button Group
+ */
+export default class ButtonGroup extends PureComponent<ButtonGroupProps> {
+    static propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+    };
+    render(): React.JSX.Element;
+}
+export { Caption };

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

@@ -0,0 +1,21 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import dataTests from '../global/data-tests';
+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, split, 'data-test': dataTest, ...restProps } = this.props;
+        const classes = classNames(split ? styles.split : styles.buttonGroup, className);
+        return (<div {...restProps} data-test={dataTests('ring-button-group', dataTest)} className={classes}/>);
+    }
+}
+export { Caption };

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

@@ -0,0 +1,8 @@
+import React, { 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(): React.JSX.Element;
+}

package/components/button-group/caption.js

@@ -0,0 +1,14 @@
+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}/>);
+    }
+}

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

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

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

@@ -0,0 +1,43 @@
+import angular from 'angular';
+
+import classNames from 'classnames';
+
+import styles from '../button-group/button-group.css';
+
+import ngStyles from './button-group-ng.css';
+
+/**
+ * @name Button Group Ng
+ */
+
+const angularModule = angular.module('Ring.button-group', []);
+const buttonGroupClasses = classNames(styles.buttonGroup, ngStyles.buttonGroup);
+
+function rgButtonGroup() {
+  return {
+    restrict: 'A',
+    link: function link($scope, iElement, attrs) {
+      const element = iElement[0];
+      if (attrs.split) {
+        element.classList.add(...styles.split.split(' '));
+      } else {
+        element.classList.add(...buttonGroupClasses.split(' '));
+      }
+    }
+  };
+}
+
+function rgButtonGroupCaption() {
+  return {
+    restrict: 'A',
+    link: function link($scope, iElement) {
+      const element = iElement[0];
+      element.classList.add(...styles.caption.split(' '));
+    }
+  };
+}
+
+angularModule.directive('rgButtonGroup', rgButtonGroup);
+angularModule.directive('rgButtonGroupCaption', rgButtonGroupCaption);
+
+export default angularModule.name;

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

@@ -0,0 +1,30 @@
+import angular from 'angular';
+
+import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
+
+import ButtonNG from '../button-ng/button-ng';
+
+import ButtonGroupNG from './button-group-ng';
+
+export default {
+  title: 'Legacy Angular/Button Group Ng',
+  decorators: [angularDecorator()],
+
+  parameters: {
+    notes: 'Provides an Angular wrapper for Button Group.'
+  }
+};
+
+export const basic = () => {
+  angular.module(APP_NAME, [ButtonNG, ButtonGroupNG]);
+
+  return `
+      <span rg-button-group-caption>Side</span>
+      <div rg-button-group>
+        <rg-button>Left</rg-button>
+        <rg-button>Right</rg-button>
+      </div>
+    `;
+};
+
+basic.storyName = 'Button Group Ng';

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

@@ -0,0 +1,23 @@
+@import "../global/variables.css";
+
+/* stylelint-disable-next-line selector-type-no-unknown */
+.ringIconDefaultColor rg-icon,
+.ringIconDefaultColor :global(.ring-icon) {
+  color: var(--ring-icon-secondary-color);
+}
+
+.iconMarginFix.iconMarginFix {
+  margin-right: 0;
+}
+
+.transcludeSpacer:not(:empty) {
+  margin-left: 4px;
+}
+
+.buttonWithoutIcon .iconNg {
+  display: none;
+}
+
+.narrowRight {
+  padding-right: 12px;
+}

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

@@ -0,0 +1,192 @@
+import angular from 'angular';
+
+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 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;
+
+/**
+ * @name Button Ng
+ */
+
+
+const angularModule = angular.module('Ring.button', [IconNG]);
+const ORDER_NOT_DEFINED = '-1';
+
+const buttonClassesMap = Object.values({...styles, ...overrides}).
+  reduce((acc, classes) => {
+    classes.split(' ').forEach(value => (acc[value] = true));
+    return acc;
+  }, {});
+
+export const LOADER_BACKGROUND_SELECTOR = '.js-button-loader';
+
+class ButtonController extends RingAngularComponent {
+
+  constructor(...args) {
+    super(...args);
+
+    const {$element, $attrs, $scope} = this.$inject;
+    $scope.styles = styles;
+    this.element = $element[0];
+
+    const modifiers = ['delayed', 'loader', 'danger', 'short', 'active', 'text', 'inline', 'narrowRight'];
+
+    modifiers.forEach(mod => {
+      $scope.$watch(() => $scope.$eval($attrs[mod]), val => {
+        this.updateClasses();
+        const attrName = `data-test-${mod}`;
+
+        if (val) {
+          this.element.setAttribute(attrName, true);
+        } else {
+          this.element.removeAttribute(attrName);
+        }
+
+        if (mod === 'loader') {
+          const isText = this.getAttrValue($attrs.text);
+          const withIcon = !!$attrs.icon;
+          applyMethodToClasses((val && !isText && !withIcon) ? 'add' : 'remove')(
+            this.element.querySelector(LOADER_BACKGROUND_SELECTOR).classList,
+            styles.loaderBackground
+          );
+        }
+      });
+    });
+
+    const tabIndex = $attrs.tabindex || ORDER_NOT_DEFINED;
+    if (tabIndex !== ORDER_NOT_DEFINED) {
+      this.element.setAttribute('tabindex', tabIndex);
+    }
+
+    $scope.$watch(() => $scope.$eval($attrs.loader), val => {
+      if (val) {
+        this.element.setAttribute('tabindex', ORDER_NOT_DEFINED);
+      } else if (tabIndex !== ORDER_NOT_DEFINED) {
+        this.element.setAttribute('tabindex', tabIndex);
+      } else {
+        this.element.removeAttribute('tabindex');
+      }
+    });
+  }
+
+  $postLink() {
+    this.updateClasses();
+
+    const {$attrs} = this.$inject;
+    $attrs.$observe('mode', this.updateClasses);
+    $attrs.$observe('icon', () => {
+      this.updateClasses();
+      this.updateIcon();
+    });
+    $attrs.$observe('iconSize', () => {
+      this.updateClasses();
+      this.updateIcon();
+    });
+  }
+
+  getAttrValue(attribute) {
+    const {$scope} = this.$inject;
+    return $scope.$eval(attribute);
+  }
+
+  updateClasses = () => {
+    const {$attrs} = this.$inject;
+
+    const foreignClasses = [...this.element.classList].filter(name => !buttonClassesMap[name]);
+
+    this.element.className = classNames(
+      foreignClasses,
+      getButtonClasses({
+        height: $attrs.height || ControlsHeight.S,
+        className: styles.button,
+        active: this.getAttrValue($attrs.active),
+        disabled: this.getAttrValue($attrs.disabled),
+        loader: this.getAttrValue($attrs.loader),
+        primary: $attrs.mode === 'primary' || $attrs.mode === 'blue',
+        short: this.getAttrValue($attrs.short),
+        text: this.getAttrValue($attrs.text),
+        inline: this.getAttrValue($attrs.inline),
+        danger: this.getAttrValue($attrs.danger),
+        delayed: this.getAttrValue($attrs.delayed),
+        icon: $attrs.icon
+      }),
+      {
+        // Some overrides for angular buttons
+        [overrides.buttonWithoutIcon]: !$attrs.icon,
+        [overrides.narrowRight]: this.getAttrValue($attrs.narrowRight)
+      },
+    );
+
+    if (!$attrs.hasOwnProperty('mode')) {
+      addClasses(this.findTranscludeNode().classList, ringIconDefaultColor);
+    } else {
+      removeClasses(this.findTranscludeNode().classList, ringIconDefaultColor);
+    }
+  };
+
+  findTranscludeNode = () => this.element.querySelector('ng-transclude');
+
+  updateIcon = () => {
+    const {$attrs, $compile, $scope} = this.$inject;
+    const icon = this.element.querySelector('rg-icon');
+    const transcludeNode = this.findTranscludeNode();
+    const glyph = $attrs.icon;
+    const size = $attrs.iconSize;
+    const isLoading = this.getAttrValue($attrs.loader);
+
+    if (glyph && isLoading) {
+      icon.setAttribute('loading', true);
+    } else {
+      icon.setAttribute('loading', false);
+    }
+
+    if (glyph) {
+      addClasses(transcludeNode.classList, transcludeSpacer);
+      icon.setAttribute('glyph', glyph);
+      if (size) {
+        icon.setAttribute('size', size);
+      }
+    } else {
+      removeClasses(transcludeNode.classList, transcludeSpacer);
+      icon.removeAttribute('glyph');
+      icon.removeAttribute('size');
+    }
+
+    $compile(icon)($scope);
+  };
+}
+ButtonController.$inject = ['$element', '$attrs', '$scope', '$compile', '$log'];
+
+function createButtonDirective(tagName) {
+  return () => ({
+    restrict: 'E',
+    transclude: true,
+    replace: true,
+    template: `
+  <${tagName} class="${styles.button}">
+  <span class="${styles.content}"
+  ><rg-icon class="${classNames(styles.icon, overrides.iconNg, iconMarginFix)}"></rg-icon
+  ><ng-transclude></ng-transclude
+  ></span
+  ><div class="js-button-loader"></div>
+  </${tagName}>
+    `,
+    controller: ButtonController
+  });
+}
+
+
+angularModule.directive('rgButton', createButtonDirective('button'));
+angularModule.directive('rgButtonLink', createButtonDirective('a'));
+
+export default angularModule.name;