@jetbrains/ring-ui 5.1.23 → 5.1.25

package/components/icon-ng/icon-ng.js

@@ -0,0 +1,89 @@
+import angular from 'angular';
+
+import {Color} from '../icon/icon__constants';
+import TemplateNg from '../template-ng/template-ng';
+import styles from '../icon/icon.css';
+
+/**
+ * @name Icon Ng
+ */
+
+const angularModule = angular.module('Ring.icon', [TemplateNg]);
+const BASE64_PREFIX = 'data:image/svg+xml;base64,';
+
+angularModule.directive('rgIcon', function rgIconDirective() {
+  return {
+    restrict: 'E',
+    scope: {
+      glyph: '@',
+      loading: '=?',
+      color: '@?',
+      size: '@?',
+      height: '@?',
+      width: '@?'
+    },
+    template: `<span class="${styles.icon}" rg-template="normalizedGlyph" rg-template-class="${styles.glyph}"></span>`,
+    controller: $scope => {
+      function decodeBase64IfNeeded(glyph) {
+        // This hack allows passing SVG content as string from angular templates like
+        // <rg-icon glyph="data:image/svg+xml;base64,PHN2ZyB4bWx...></rg-icon>
+        const isEncoded = glyph.indexOf(BASE64_PREFIX) === 0;
+        return isEncoded ? window.atob(glyph.replace(BASE64_PREFIX, '')) : glyph;
+      }
+
+      $scope.$watch('glyph', value => {
+        if (!value) {
+          return;
+        }
+        $scope.normalizedGlyph = decodeBase64IfNeeded(value);
+      });
+    },
+    link: function link(scope, iElement, iAttrs) {
+      iAttrs.$addClass('ring-icon'); // TODO: We keep this class for now for compatibility reasons (styles overrides)
+
+      scope.$watch('loading', value => {
+        if (value) {
+          iAttrs.$addClass(styles.loading);
+        } else {
+          iAttrs.$removeClass(styles.loading);
+        }
+      });
+
+      scope.$watch(() => scope.color && Color[scope.color] && styles[Color[scope.color]],
+        (colorClass, prevColorClass) => {
+          if (colorClass) {
+            iAttrs.$addClass(colorClass);
+
+            // Remove previous class, but don't remove initial one
+            if (prevColorClass && prevColorClass !== colorClass) {
+              iAttrs.$removeClass(prevColorClass);
+            }
+          }
+        }
+      );
+
+      scope.$watchGroup(['size', 'width', 'height'], ([size, width, height]) => {
+        const svgNode = iElement[0].querySelector('svg');
+        if (!svgNode) {
+          return;
+        }
+
+        if (size && !width && !height) {
+          const sizeString = `${size}px`;
+          const style = `width: ${sizeString}; height: ${sizeString};`;
+          svgNode.setAttribute('style', style);
+          return;
+        }
+
+        if (width) {
+          svgNode.setAttribute('style', `width: ${width}px;`);
+        }
+        if (height) {
+          svgNode.setAttribute('style', `height: ${height}px;`);
+        }
+      });
+    }
+  };
+});
+
+export default angularModule.name;

package/components/icon-ng/icon-ng.stories.js

@@ -0,0 +1,34 @@
+import angular from 'angular';
+
+import checkmarkIcon from '@jetbrains/icons/checkmark';
+import warningIcon from '@jetbrains/icons/warning';
+
+import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
+
+import IconNG from './icon-ng';
+
+export default {
+  title: 'Legacy Angular/Icon Ng',
+  decorators: [angularDecorator()],
+
+  parameters: {
+    notes: 'Provides an Angular wrapper for Icon.'
+  }
+};
+
+export const basic = () => {
+  angular.module(APP_NAME, [IconNG]).controller('testCtrl', function ctrl() {
+    this.icon = checkmarkIcon;
+    this.error = warningIcon;
+  });
+
+  return `
+      <div ng-controller="testCtrl as ctrl">
+        <rg-icon glyph="{{ctrl.icon}}"></rg-icon>
+        <rg-icon glyph="{{ctrl.icon}}" color="MAGENTA"></rg-icon>
+        <rg-icon glyph="{{ctrl.icon}}" color="{{'BLUE'}}" loading="true"></rg-icon>
+      </div>
+    `;
+};
+
+basic.storyName = 'Icon Ng';

package/components/input/input-legacy.css

@@ -0,0 +1,125 @@
+@import "../global/variables.css";
+
+@value unit from "../global/global.css";
+
+/*
+Input
+
+ Markup:
+ <input class="{$modifiers} ring-input" type="text" placeholder="placeholder">
+
+ :disabled            - Disabled state, also available as the `.ring-input_disabled` class name.
+ :active              - Active state, also available as the `.ring-input_active` class name.
+ :focus               - Focus state, also available as the `.ring-input_focus` class name.
+ .ring-input_correct  - The entered value is correct.
+ .ring-input_error    - The entered value is incorrect.
+ */
+
+:global(.ring-input) {
+  /* .heightS */
+  --ring-input-padding-block: 1px;
+  --ring-input-padding-inline: unit;
+  --ring-input-padding-start: var(--ring-input-padding-inline);
+  --ring-input-padding-end: var(--ring-input-padding-inline);
+
+  /* stylelint-disable order/properties-order */
+
+  box-sizing: border-box;
+
+  font: inherit;
+  font-size: var(--ring-font-size);
+  line-height: var(--ring-line-height);
+
+  width: 100%;
+
+  margin: 0;
+  padding-top: var(--ring-input-padding-block);
+  padding-right: var(--ring-input-padding-end);
+  padding-bottom: var(--ring-input-padding-block);
+  padding-left: var(--ring-input-padding-start);
+
+  transition: border-color var(--ring-ease);
+
+  color: var(--ring-text-color);
+  border: 1px solid var(--ring-borders-color);
+  border-radius: var(--ring-border-radius);
+  outline: none;
+  background-color: var(--ring-content-background-color);
+
+  caret-color: var(--ring-main-color);
+
+  /* stylelint-enable order/properties-order */
+
+  [dir="rtl"] & {
+    padding-right: var(--ring-input-padding-start);
+    padding-left: var(--ring-input-padding-end);
+  }
+
+  &:hover {
+    transition: none;
+
+    border-color: var(--ring-border-hover-color);
+  }
+
+  .error & {
+    border-color: var(--ring-icon-error-color);
+  }
+
+  &:focus {
+    transition: none;
+
+    border-color: var(--ring-main-color);
+  }
+
+  &[disabled] {
+    color: var(--ring-disabled-color);
+    border-color: var(--ring-border-disabled-color);
+    background-color: var(--ring-disabled-background-color);
+
+    -webkit-text-fill-color: var(--ring-disabled-color); /* Required for Safari, see RG-2063 for details */
+  }
+
+  /*
+    Kill yellow/blue webkit autocomplete
+    https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/
+  */
+  &:-webkit-autofill {
+    &,
+    &:hover,
+    &:focus {
+      transition: background-color 50000s ease-in-out 0s;
+    }
+  }
+}
+
+:global(.ring-input_error) {
+  border-color: var(--ring-icon-error-color);
+}
+
+:global(.ring-input_filter-popup) {
+  width: 100%;
+  min-width: 200px;
+}
+
+:global(.ring-input.ring-input:disabled),
+:global(.ring-input.ring-input[disabled]),
+:global(.ring-input.ring-input_disabled) {
+  color: var(--ring-disabled-color);
+  border-color: var(--ring-border-disabled-color);
+  background-color: var(--ring-disabled-background-color);
+
+  -webkit-text-fill-color: var(--ring-disabled-color); /* Required for Safari, see RG-2063 for details */
+}
+
+:global(textarea.ring-input) {
+  box-sizing: border-box;
+
+  min-height: calc(8 * unit);
+
+  resize: none;
+}
+
+/* https://stackoverflow.com/questions/7144843/extra-space-under-textarea-differs-along-browsers */
+:global(.ring-input::placeholder) {
+  color: var(--ring-disabled-color);
+}

package/components/input/input.css

@@ -0,0 +1,196 @@
+@import "../global/variables.css";
+@import "../button/button.css";
+
+@value unit from "../global/global.css";
+
+.outerContainer {
+  --ring-input-icon-offset: calc(unit * 2.5);
+  --ring-input-padding-inline: unit;
+  --ring-input-background-color: var(--ring-content-background-color);
+}
+
+.borderless {
+  /* stylelint-disable-next-line length-zero-no-unit */
+  --ring-input-padding-inline: 0px;
+}
+
+.container {
+  position: relative;
+
+  box-sizing: border-box;
+
+  font-size: var(--ring-font-size);
+  line-height: var(--ring-line-height);
+
+  & * {
+    box-sizing: border-box;
+  }
+}
+
+.input {
+  --ring-input-padding-start: var(--ring-input-padding-inline);
+  --ring-input-padding-end: var(--ring-input-padding-inline);
+
+  width: 100%;
+
+  margin: 0;
+  padding-top: var(--ring-input-padding-block);
+  padding-right: var(--ring-input-padding-end);
+  padding-bottom: var(--ring-input-padding-block);
+  padding-left: var(--ring-input-padding-start);
+
+  transition: border-color var(--ring-ease);
+
+  color: var(--ring-text-color);
+  border: 1px solid var(--ring-borders-color);
+  border-radius: var(--ring-border-radius);
+  outline: none;
+  background-color: var(--ring-input-background-color);
+
+  font: inherit;
+
+  caret-color: var(--ring-main-color);
+
+  [dir="rtl"] & {
+    padding-right: var(--ring-input-padding-start);
+    padding-left: var(--ring-input-padding-end);
+  }
+
+  &:hover {
+    transition: none;
+
+    border-color: var(--ring-border-hover-color);
+  }
+
+  .error & {
+    border-color: var(--ring-icon-error-color);
+  }
+
+  &:focus {
+    transition: none;
+
+    border-color: var(--ring-main-color);
+  }
+
+  &[disabled] {
+    color: var(--ring-disabled-color);
+    border-color: var(--ring-border-disabled-color);
+    background-color: var(--ring-disabled-background-color);
+
+    -webkit-text-fill-color: var(--ring-disabled-color); /* Required for Safari, see RG-2063 for details */
+  }
+
+  /*
+    Kill yellow/blue webkit autocomplete
+    https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/
+  */
+  &:-webkit-autofill {
+    &,
+    &:hover,
+    &:focus {
+      transition: background-color 50000s ease-in-out 0s;
+    }
+  }
+}
+
+.borderless .input {
+  border-color: transparent;
+  background-color: transparent;
+}
+
+.withIcon .input {
+  --ring-input-padding-start: calc(var(--ring-input-padding-inline) + var(--ring-input-icon-offset));
+}
+
+.clearable .input {
+  --ring-input-padding-end: calc(var(--ring-input-padding-inline) + var(--ring-input-icon-offset));
+}
+
+.icon {
+  position: absolute;
+  top: calc(var(--ring-input-padding-block) + 1px);
+  left: var(--ring-input-padding-inline);
+
+  pointer-events: none;
+
+  color: var(--ring-icon-secondary-color);
+
+  [dir="rtl"] & {
+    right: unit;
+    left: auto;
+  }
+}
+
+.clear {
+  position: absolute;
+  top: calc(var(--ring-input-padding-block) + 2px);
+  right: var(--ring-input-padding-inline);
+
+  height: auto;
+
+  padding-right: 0;
+
+  line-height: inherit;
+
+  .empty & {
+    display: none;
+  }
+
+  [dir="rtl"] & {
+    right: auto;
+    left: unit;
+  }
+}
+
+textarea.input {
+  overflow: hidden;
+
+  box-sizing: border-box;
+
+  resize: none;
+}
+
+.input::placeholder {
+  color: var(--ring-disabled-color);
+}
+
+.input::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+}
+
+.errorText {
+  margin-top: calc(unit / 2);
+
+  color: var(--ring-error-color);
+
+  font-size: var(--ring-font-size-smaller);
+  line-height: var(--ring-line-height-lowest);
+}
+
+.sizeS {
+  width: calc(unit * 12);
+}
+
+.sizeM {
+  width: calc(unit * 30);
+}
+
+.sizeL {
+  width: calc(unit * 50);
+}
+
+.sizeFULL {
+  width: 100%;
+}
+
+.heightS {
+  --ring-input-padding-block: 1px;
+}
+
+.heightM {
+  --ring-input-padding-block: 3px;
+}
+
+.heightL {
+  --ring-input-padding-block: 5px;
+}

package/components/input/input.d.ts

@@ -0,0 +1,77 @@
+import React, { PureComponent, Ref, ComponentType, InputHTMLAttributes, TextareaHTMLAttributes, ReactNode } from 'react';
+import { ControlsHeight } from '../global/controls-height';
+import { LabelType } from '../control-label/control-label';
+declare function noop(): void;
+/**
+ * @name Input
+ */
+declare enum Size {
+    AUTO = "Auto",
+    S = "S",
+    M = "M",
+    L = "L",
+    FULL = "FULL"
+}
+export interface InputTranslations {
+    clear: string;
+}
+export interface InputBaseProps {
+    size: Size;
+    enableShortcuts: boolean | string[];
+    children?: string | undefined;
+    inputClassName?: string | null | undefined;
+    label?: ReactNode;
+    labelType?: LabelType;
+    active?: boolean | null | undefined;
+    error?: ReactNode | null | undefined;
+    borderless?: boolean | null | undefined;
+    onClear?: ((e: React.MouseEvent<HTMLButtonElement>) => void) | null | undefined;
+    loading?: boolean | null | undefined;
+    icon?: string | ComponentType | null | undefined;
+    height?: ControlsHeight | undefined;
+    afterInput?: ReactNode;
+    translations?: InputTranslations | null | undefined;
+}
+type Override<D, S> = Omit<D, keyof S> & S;
+export type InputSpecificProps = Override<InputHTMLAttributes<HTMLInputElement>, InputBaseProps> & {
+    multiline?: false | undefined;
+    inputRef: Ref<HTMLInputElement>;
+};
+type TextAreaSpecificProps = Override<TextareaHTMLAttributes<HTMLTextAreaElement>, InputBaseProps> & {
+    multiline: true;
+    inputRef: Ref<HTMLTextAreaElement>;
+};
+export type InputProps = InputSpecificProps | TextAreaSpecificProps;
+export declare class Input extends PureComponent<InputProps> {
+    static defaultProps: {
+        size: Size;
+        onChange: typeof noop;
+        inputRef: typeof noop;
+        enableShortcuts: string[];
+    };
+    state: {
+        empty: boolean;
+    };
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    componentWillUnmount(): void;
+    static contextType: React.Context<ControlsHeight>;
+    frame?: number;
+    input?: HTMLInputElement | HTMLTextAreaElement | null;
+    id: string;
+    getId(): string;
+    checkValue(): void;
+    stretch(el: HTMLElement | null | undefined): void;
+    adapt(): void;
+    inputRef: (el: HTMLInputElement | HTMLTextAreaElement | null) => void;
+    clear: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    handleTextareaChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    render(): React.JSX.Element;
+}
+export type ContainerProps<P extends InputProps> = JSX.LibraryManagedAttributes<typeof Input, P>;
+export type InputSpecificAttrs = ContainerProps<InputSpecificProps>;
+export type TextAreaSpecificAttrs = ContainerProps<TextAreaSpecificProps>;
+export type InputAttrs = InputSpecificAttrs | TextAreaSpecificAttrs;
+export default Input;
+export { Size };

package/components/input/input.js

@@ -0,0 +1,165 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import closeIcon from '@jetbrains/icons/close-12px';
+import { refObject } from '../global/prop-types';
+import Button from '../button/button';
+import getUID from '../global/get-uid';
+import Icon from '../icon/icon';
+import { I18nContext } from '../i18n/i18n-context';
+import composeRefs from '../global/composeRefs';
+import { ControlsHeightContext } from '../global/controls-height';
+import { ControlLabel } from '../control-label/control-label';
+import styles from './input.css';
+function noop() { }
+/**
+ * @name Input
+ */
+var Size;
+(function (Size) {
+    Size["AUTO"] = "Auto";
+    Size["S"] = "S";
+    Size["M"] = "M";
+    Size["L"] = "L";
+    Size["FULL"] = "FULL";
+})(Size || (Size = {}));
+export class Input extends PureComponent {
+    static defaultProps = {
+        size: Size.M,
+        onChange: noop,
+        inputRef: noop,
+        enableShortcuts: ['esc']
+    };
+    state = {
+        empty: true
+    };
+    componentDidMount() {
+        this.frame = requestAnimationFrame(() => this.adapt());
+    }
+    componentDidUpdate() {
+        this.adapt();
+    }
+    componentWillUnmount() {
+        if (this.frame != null) {
+            cancelAnimationFrame(this.frame);
+        }
+    }
+    static contextType = ControlsHeightContext;
+    frame;
+    input;
+    id = getUID('ring-input-');
+    getId() {
+        return this.props.id || this.id;
+    }
+    checkValue() {
+        this.setState({
+            empty: !this.input?.value
+        });
+        if (this.props.multiline &&
+            this.input != null && this.input.scrollHeight >= this.input.clientHeight) {
+            this.stretch(this.input);
+        }
+    }
+    stretch(el) {
+        if (!el || !el.style) {
+            return;
+        }
+        el.style.height = '0'; // To know the real scrollHeight
+        el.style.height = `${el.scrollHeight + 2}px`;
+    }
+    adapt() {
+        this.checkValue();
+    }
+    inputRef = (el) => {
+        this.input = el;
+    };
+    clear = (e) => {
+        this.props.onClear && this.props.onClear(e);
+    };
+    handleInputChange = (e) => {
+        if (!this.props.multiline) {
+            this.props.onChange?.(e);
+            this.checkValue();
+        }
+    };
+    handleTextareaChange = (e) => {
+        if (this.props.multiline) {
+            this.props.onChange?.(e);
+            this.checkValue();
+        }
+    };
+    render() {
+        const { 
+        // Modifiers
+        size, active, multiline, borderless, 
+        // Props
+        label, labelType, error, className, inputClassName, children, value, onClear, disabled, inputRef, onChange, enableShortcuts, id, placeholder, icon, translations, height = this.context, afterInput, ...restProps } = this.props;
+        const { empty } = this.state;
+        const clearable = !!onClear;
+        const classes = classNames(className, styles.outerContainer, [styles[`size${size}`]], [styles[`height${height}`]], {
+            'ring-js-shortcuts': enableShortcuts === true,
+            [styles.active]: active,
+            [styles.error]: error != null,
+            [styles.empty]: empty,
+            [styles.noLabel]: !this.props.label,
+            [styles.withIcon]: icon != null,
+            [styles.clearable]: clearable,
+            [styles.borderless]: borderless
+        });
+        const inputClasses = classNames(styles.input, inputClassName);
+        const text = value != null ? value : children;
+        const commonProps = {
+            ref: composeRefs(this.inputRef, inputRef),
+            className: inputClasses,
+            value: text,
+            disabled,
+            id: this.getId(),
+            placeholder,
+            'aria-label': typeof label === 'string' && label ? label : placeholder,
+            'data-enabled-shortcuts': Array.isArray(enableShortcuts) ? enableShortcuts.join(',') : null
+        };
+        return (<I18nContext.Consumer>
+        {({ translate }) => (<div className={classes} data-test="ring-input">
+            {label && (<ControlLabel htmlFor={this.getId()} disabled={disabled} type={labelType}>{label}</ControlLabel>)}
+            <div className={styles.container}>
+              {icon && <Icon glyph={icon} className={styles.icon}/>}
+              {multiline
+                    ? (<textarea onChange={this.handleTextareaChange} rows={1} {...commonProps} {...restProps}/>)
+                    : (<input onChange={this.handleInputChange} {...commonProps} {...restProps}/>)}
+              {clearable && !disabled && (<Button title={translations?.clear ?? translate('clear')} data-test="ring-input-clear" className={styles.clear} icon={closeIcon} onClick={this.clear}/>)}
+              {afterInput}
+            </div>
+            {error && <div className={styles.errorText}>{error}</div>}
+          </div>)}
+      </I18nContext.Consumer>);
+    }
+}
+Input.propTypes = {
+    value: PropTypes.string,
+    className: PropTypes.string,
+    inputClassName: PropTypes.string,
+    size: PropTypes.oneOf(Object.values(Size)).isRequired,
+    label: PropTypes.node,
+    active: PropTypes.bool,
+    error: PropTypes.string,
+    multiline: PropTypes.bool,
+    onChange: PropTypes.func,
+    onClear: PropTypes.func,
+    inputRef: PropTypes.oneOfType([
+        PropTypes.func,
+        refObject(PropTypes.instanceOf(HTMLInputElement)),
+        refObject(PropTypes.instanceOf(HTMLTextAreaElement))
+    ]),
+    children: PropTypes.string,
+    enableShortcuts: PropTypes.oneOfType([
+        PropTypes.bool,
+        PropTypes.arrayOf(PropTypes.string.isRequired)
+    ]),
+    disabled: PropTypes.bool,
+    id: PropTypes.string,
+    placeholder: PropTypes.string,
+    translations: PropTypes.object,
+    icon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType])
+};
+export default Input;
+export { Size };

package/components/input-ng/input-ng.css

@@ -0,0 +1,7 @@
+.errorText {
+  height: auto;
+}
+
+.clear.clear {
+  position: absolute;
+}