@jetbrains/ring-ui 5.1.23 → 5.1.24

package/components/input-ng/input-ng.js

@@ -0,0 +1,160 @@
+/**
+ * @name Input Ng
+ */
+import angular from 'angular';
+
+import classNames from 'classnames';
+import closeIcon from '@jetbrains/icons/close';
+
+import RingAngularComponent from '../global/ring-angular-component';
+import styles from '../input/input.css';
+import labelStyles from '../control-label/control-label.css';
+import ButtonNg from '../button-ng/button-ng';
+
+import styleOverrides from './input-ng.css';
+
+const angularModule = angular.module('Ring.input', [ButtonNg]);
+
+class RingInputComponent extends RingAngularComponent {
+
+  static require = {
+    ngModelCtrl: '?ngModel'
+  };
+
+  static bindings = {
+    name: '@',
+    required: '@',
+    ngMinlength: '@',
+    ngMaxlength: '@',
+    placeholder: '@',
+    ngModel: '<',
+    onChange: '&',
+    label: '@',
+    hint: '@',
+    size: '@',
+    disabled: '@',
+    active: '<',
+    error: '@',
+    empty: '<',
+    clearable: '<',
+    borderless: '<',
+    multiline: '<'
+  };
+
+  $onInit() {
+    this.closeIcon = closeIcon;
+    if (!this.ngModelCtrl) {
+      return;
+    }
+
+    this.ngModelCtrl.$render = () => {
+      this.value = this.ngModelCtrl.$viewValue;
+    };
+  }
+
+  onInputChange() {
+    if (!this.ngModelCtrl) {
+      return;
+    }
+    this.ngModelCtrl.$setViewValue(this.value);
+  }
+
+  stretch(el) {
+    if (!el) {
+      return;
+    }
+    el.style.height = `${el.scrollHeight}px`;
+  }
+
+  onKeyUp() {
+    if (!this.inputNode) {
+      this.inputNode = this.$inject.$element[0].querySelector('[data-test="ring-input"]');
+    }
+
+    if (this.multiline && this.inputNode.scrollHeight > this.inputNode.clientHeight) {
+      this.stretch(this.inputNode);
+    }
+  }
+
+  onClear() {
+    this.value = '';
+  }
+
+  getContainerClasses() {
+    return classNames(
+      styles.outerContainer,
+      this.size ? [styles[`size${this.size}`]] : null,
+      styles.heightS,
+      {
+        [styles.active]: this.active,
+        [styles.error]: this.error != null,
+        [styles.empty]: !this.value,
+        [styles.noLabel]: !this.label,
+        [styles.clearable]: this.clearable,
+        [styles.borderless]: this.borderless
+      }
+    );
+  }
+
+  static template = `
+<div
+  data-test="ring-input-container"
+  ng-class="$ctrl.getContainerClasses()"
+>
+  <label
+    ng-if="!$ctrl.borderless"
+    class="${labelStyles.label} ${labelStyles.secondaryLabel}"
+  >{{$ctrl.label}}</label>
+  <div class="${styles.container}">
+    <input
+      aria-label="{{$ctrl.label || $ctrl.placeholder}}"
+      type="text"
+      data-test="ring-input"
+      class="${styles.input}"
+      name="{{$ctrl.name}}"
+      ng-if="!$ctrl.multiline"
+      placeholder="{{$ctrl.placeholder}}"
+      ng-model="$ctrl.value"
+      ng-required="$ctrl.required"
+      ng-disabled="$ctrl.disabled"
+      ng-minlength="$ctrl.ngMinlength"
+      ng-maxlength="$ctrl.ngMaxlength"
+      ng-change="$ctrl.onInputChange()"
+      ng-keyup="$ctrl.onKeyUp()"
+    />
+
+    <textarea
+      aria-label="{{$ctrl.label || $ctrl.placeholder}}"
+      data-test="ring-input"
+      ng-if="$ctrl.multiline"
+      class="${styles.input}"
+      rows="1"
+      name="{{$ctrl.name}}"
+      placeholder="{{$ctrl.placeholder}}"
+      ng-model="$ctrl.value"
+      ng-required="$ctrl.required"
+      ng-disabled="$ctrl.disabled"
+      ng-minlength="$ctrl.ngMinlength"
+      ng-maxlength="$ctrl.ngMaxlength"
+      ng-change="$ctrl.onInputChange()"
+      ng-keyup="$ctrl.onKeyUp()"
+    ></textarea>
+
+    <rg-button
+      ng-if="$ctrl.clearable"
+      data-test="ring-input-clear"
+      class="${styles.clear} ${styleOverrides.clear}"
+      icon="{{:: $ctrl.closeIcon}}"
+      ng-click="$ctrl.onClear()"
+    ></rg-button>
+  </div>
+
+  <div ng-if="!$ctrl.borderless && $ctrl.error" class="${styles.errorText} ${styleOverrides.errorText}">{{$ctrl.error}}</div>
+</div>
+  `;
+}
+RingInputComponent.$inject = ['$element'];
+
+angularModule.component('rgInput', RingInputComponent);
+
+export default angularModule.name;

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

@@ -0,0 +1,127 @@
+import angular from 'angular';
+
+import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
+
+import darkStyles from '../global/variables_dark.css';
+
+import InputNG from './input-ng';
+
+export default {
+  title: 'Legacy Angular/Input Ng',
+  decorators: [angularDecorator()],
+
+  parameters: {
+    notes: 'Text input fields of varying size.'
+  }
+};
+
+export const basic = () => {
+  angular.module(APP_NAME, [InputNG]).controller('InputTestCtrl', function controller() {
+    this.inputModel = 'Default value';
+  });
+
+  return `
+      <div class="inputs" data-test="inputs">
+        <rg-input
+          size="M"
+          label="Type something"
+        ></rg-input>
+
+        <rg-input
+          name="login"
+          size="M"
+          label="Label and hint"
+          placeholder="Hint"
+        ></rg-input>
+
+        <rg-input
+          label="Label and value"
+          size="M"
+          ng-model="ctrl.inputModel"
+        ></rg-input>
+
+        <rg-input
+          label="Clearable input"
+          size="M"
+          ng-model="ctrl.inputModel"
+          clearable="true"
+        ></rg-input>
+
+        <rg-input
+          placeholder="Hint"
+          size="M"
+          ng-model="ctrl.inputModel"
+          borderless="true"
+        ></rg-input>
+
+        <rg-input
+          label="Active input"
+          active="true"
+          size="M"
+          ng-model="ctrl.inputModel"
+        ></rg-input>
+
+        <rg-input
+          label="Disabled input"
+          data-disabled="true"
+          size="M"
+          ng-model="ctrl.inputModel"
+        ></rg-input>
+
+        <rg-input
+          label="Invalid input"
+          size="M"
+          error="Error description that wraps over lines because of being really long"
+          ng-model="ctrl.inputModel"
+        ></rg-input>
+
+        <rg-input
+          label="Short input"
+          size="S"
+        ></rg-input>
+
+        <rg-input
+          label="Long input"
+          size="L"
+        ></rg-input>
+
+        <rg-input
+          label="Autogrowing textarea"
+          size="M"
+          multiline="true"
+        ></rg-input>
+
+        <div class="dark ${darkStyles.dark}">
+          <rg-input
+            label="Input on dark background"
+            placeholder="Hint on dark background"
+            theme="dark"
+          ></rg-input>
+        </div>
+      </div>
+    `;
+};
+
+basic.storyName = 'Input Ng';
+
+basic.parameters = {
+  storyStyles: `
+<style>
+  .inputs {
+    display: flex;
+    flex-flow: column wrap;
+    max-height: 100vh;
+    margin-top: 8px;
+  }
+
+  .inputs rg-input {
+    margin: 4px 16px;
+  }
+
+  .dark {
+    background: #000;
+    margin-left: 0;
+    padding-left: 16px;
+  }
+</style>`
+};

package/components/input-ng/input-ng.test.js

@@ -0,0 +1,32 @@
+/*global inject*/
+import 'angular';
+import 'angular-mocks';
+
+import styles from '../input/input.css';
+
+import InputNG from './input-ng';
+
+describe('InputNg', () => {
+  let element;
+  let scope;
+  let $compile;
+
+  beforeEach(window.module(InputNG));
+
+  beforeEach(inject(($rootScope, _$compile_) => {
+    scope = $rootScope.$new();
+    $compile = _$compile_;
+    scope.testValue = 'foo';
+    element = $compile('<rg-input ng-model="testValue"></rg-input>')(scope)[0];
+    $rootScope.$digest();
+  }));
+
+  it('should render template', () => {
+    element.querySelector('[data-test="ring-input-container"]').dataset.test.should.equal('ring-input-container');
+    element.querySelector('[data-test="ring-input"]').should.have.class(styles.input);
+  });
+
+  it('should pass value', () => {
+    element.querySelector('[data-test="ring-input"]').should.have.value(scope.testValue);
+  });
+});

package/components/input-size/input-size.css

@@ -0,0 +1,84 @@
+@import "../global/variables.css";
+
+@value unit from "../global/global.css";
+
+:root {
+  --ring-input-xs: calc(unit * 12);
+  --ring-input-s: calc(unit * 12);
+  --ring-input-m: calc(unit * 30);
+  --ring-input-l: calc(unit * 50);
+}
+
+/**
+ * @name Input Sizes
+ */
+
+/* XS */
+
+:global(.ring-input-size_xs.ring-input-size_xs) {
+  display: inline-block;
+
+  width: var(--ring-input-xs);
+}
+
+:global(.ring-input-size_xs.ring-input-size_xs ~ .ring-error-bubble) {
+  left: calc(var(--ring-input-xs) + 2px);
+}
+
+/* S */
+
+:global(.ring-input-size_s.ring-input-size_s) {
+  display: inline-block;
+
+  width: var(--ring-input-s);
+}
+
+:global(.ring-input-size_s.ring-input-size_s ~ .ring-error-bubble) {
+  left: calc(var(--ring-input-s) + 2px);
+}
+
+/* M */
+
+:global(.ring-input-size_m.ring-input-size_m) {
+  display: inline-block;
+
+  width: var(--ring-input-m);
+}
+
+:global(.ring-input-size_m.ring-input-size_m ~ .ring-error-bubble) {
+  left: calc(var(--ring-input-m) + 2px);
+}
+
+:global(.ring-input-size_md.ring-input-size_md) {
+  display: inline-block;
+
+  width: var(--ring-input-m);
+}
+
+:global(.ring-input-size_md.ring-input-size_md ~ .ring-error-bubble) {
+  left: calc(var(--ring-input-m) + 2px);
+}
+
+/* L */
+
+:global(.ring-input-size_l.ring-input-size_l) {
+  display: inline-block;
+
+  width: var(--ring-input-l);
+}
+
+:global(.ring-input-size_l.ring-input-size_l ~ .ring-error-bubble) {
+  left: calc(var(--ring-input-l) + 2px);
+}
+
+:global(.ring-input-height_s.ring-input-height_s) {
+  --ring-input-padding-block: 1px;
+}
+
+:global(.ring-input-height_m.ring-input-height_m) {
+  --ring-input-padding-block: 3px;
+}
+
+:global(.ring-input-height_l.ring-input-height_l) {
+  --ring-input-padding-block: 5px;
+}

package/components/input-size/input-size.stories.js

@@ -0,0 +1,219 @@
+import angular from 'angular';
+
+import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
+
+import '../input/input-legacy.css';
+import '../form/form.css';
+import './input-size.css';
+import '../error-bubble/error-bubble-legacy.css';
+
+import SelectNG from '../select-ng/select-ng';
+import QueryAssistNG from '../query-assist-ng/query-assist-ng';
+
+export default {
+  title: 'Style-only/Input Sizes',
+  decorators: [angularDecorator()]
+};
+
+export const basic = () => {
+  angular.module(APP_NAME, [QueryAssistNG, SelectNG]).controller('ExampleCtrl', function ctrl() {
+    this.dataSource = () => [];
+
+    this.options = ['one', 'two', 'three'];
+    this.selected = null;
+  });
+
+  return `
+      <div ng-controller="ExampleCtrl as exampleCtrl">
+        <h3 class="example-block">Query Assists</h3>
+        <div class="example-block">
+          <div class="ring-error-bubble-wrapper">
+            <rg-query-assist
+              size="'S'"
+              x-data-source="exampleCtrl.dataSource"
+              glass="true"
+              placeholder="'Extra-short'">
+            </rg-query-assist>
+            <div class="ring-error-bubble active">Extra-short Query Assist</div>
+          </div>
+          <div class="ring-error-bubble-wrapper">
+            <rg-query-assist
+              size="'S'"
+              x-data-source="exampleCtrl.dataSource"
+              glass="true"
+              placeholder="'Short'">
+            </rg-query-assist>
+            <div class="ring-error-bubble active">Short Query Assist</div>
+          </div>
+          <div class="ring-error-bubble-wrapper">
+            <rg-query-assist
+              size="'M'"
+              x-data-source="exampleCtrl.dataSource"
+              glass="true"
+              placeholder="'Medium'">
+            </rg-query-assist>
+            <div class="ring-error-bubble active">Medium Query Assist</div>
+          </div>
+          <div class="ring-error-bubble-wrapper">
+            <rg-query-assist
+              size="'L'"
+              x-data-source="exampleCtrl.dataSource"
+              glass="true"
+              placeholder="'Long'">
+            </rg-query-assist>
+            <div class="ring-error-bubble active">Long Query Assist</div>
+          </div>
+          <div class="ring-error-bubble-wrapper">
+            <rg-query-assist
+              size="'FULL'"
+              x-data-source="exampleCtrl.dataSource"
+              glass="true"
+              placeholder="'Full-width'">
+            </rg-query-assist>
+            <div class="ring-error-bubble active">Full-width Query Assist</div>
+          </div>
+        </div>
+
+        <h3 class="example-block">Rg Selects: Buttons</h3>
+        <div class="example-block">
+          <div class="ring-error-bubble-wrapper">
+            <rg-select class="ring-input-size_xs"
+              ng-model="exampleCtrl.selected"
+              options="item in exampleCtrl.options"
+              label="Select item"></rg-select>
+            <div class="ring-error-bubble active">Extra-short Select</div>
+          </div>
+          <div class="ring-error-bubble-wrapper">
+            <rg-select class="ring-input-size_s"
+              ng-model="exampleCtrl.selected"
+              options="item in exampleCtrl.options"
+              label="Select item"></rg-select>
+            <div class="ring-error-bubble active">Short Select</div>
+          </div>
+          <div class="ring-error-bubble-wrapper">
+            <rg-select class="ring-input-size_m"
+              ng-model="exampleCtrl.selected"
+              options="item in exampleCtrl.options"
+              label="Select item"></rg-select>
+            <div class="ring-error-bubble active">Medium Select</div>
+          </div>
+          <div class="ring-error-bubble-wrapper">
+            <rg-select class="ring-input-size_l"
+              ng-model="exampleCtrl.selected"
+              options="item in exampleCtrl.options"
+              label="Select item"></rg-select>
+            <div class="ring-error-bubble active">Long Select</div>
+          </div>
+          <div class="ring-error-bubble-wrapper">
+            <rg-select ng-model="exampleCtrl.selected"
+              options="item in exampleCtrl.options"
+              label="Select item"></rg-select>
+            <div class="ring-error-bubble active">Full-width Select</div>
+          </div>
+        </div>
+
+        <h3 class="example-block">Rg Selects: Inputs</h3>
+        <div class="example-block">
+          <div class="ring-error-bubble-wrapper">
+            <rg-select class="ring-input-size_xs"
+              type="input"
+              ng-model="exampleCtrl.selected"
+              options="item in exampleCtrl.options"
+              label="Select item"></rg-select>
+            <div class="ring-error-bubble active">Extra-short Select</div>
+          </div>
+          <div class="ring-error-bubble-wrapper">
+            <rg-select class="ring-input-size_s"
+              type="input"
+              ng-model="exampleCtrl.selected"
+              options="item in exampleCtrl.options"
+              label="Select item"></rg-select>
+            <div class="ring-error-bubble active">Short Select</div>
+          </div>
+          <div class="ring-error-bubble-wrapper">
+            <rg-select class="ring-input-size_m"
+              type="input"
+              ng-model="exampleCtrl.selected"
+              options="item in exampleCtrl.options"
+              label="Select item"></rg-select>
+            <div class="ring-error-bubble active">Medium Select</div>
+          </div>
+          <div class="ring-error-bubble-wrapper">
+            <rg-select class="ring-input-size_l"
+              type="input"
+              ng-model="exampleCtrl.selected"
+              options="item in exampleCtrl.options"
+              label="Select item"></rg-select>
+            <div class="ring-error-bubble active">Long Select</div>
+          </div>
+          <div class="ring-error-bubble-wrapper">
+            <rg-select ng-model="exampleCtrl.selected"
+              type="input"
+              options="item in exampleCtrl.options"
+              label="Select item"></rg-select>
+            <div class="ring-error-bubble active">Full-width Select</div>
+          </div>
+        </div>
+
+        <h3 class="example-block">Inputs</h3>
+        <div class="example-block">
+          <div class="ring-error-bubble-wrapper">
+            <input id="extra-short-input" type="number" class="ring-input ring-input-size_xs">
+            <label for="extra-short-input" class="ring-error-bubble active">Extra-short Input</label>
+          </div>
+          <div class="ring-error-bubble-wrapper">
+            <input id="short-input" type="number" class="ring-input ring-input-size_s">
+            <label for="short-input" class="ring-error-bubble active">Short Input</label>
+          </div>
+          <div class="ring-error-bubble-wrapper">
+            <input id="medium-input" type="number" class="ring-input ring-input-size_m">
+            <label for="medium-input" class="ring-error-bubble active">Medium Input</label>
+          </div>
+          <div class="ring-error-bubble-wrapper">
+            <input id="long-input" type="number" class="ring-input ring-input-size_l">
+            <label for="long-input" class="ring-error-bubble active">Long Input</label>
+          </div>
+          <div class="ring-error-bubble-wrapper">
+            <input id="full-width-input" type="number" class="ring-input">
+            <label for="full-width-input" class="ring-error-bubble active">Full-width Input</label>
+          </div>
+        </div>
+
+        <h3 class="example-block">Textareas</h3>
+        <div class="example-block">
+          <div class="ring-error-bubble-wrapper">
+            <textarea id="extra-short-textarea" class="ring-input ring-input-size_xs"></textarea>
+            <label for="extra-short-textarea" class="ring-error-bubble active">Extra-short Textarea</label>
+          </div>
+          <div class="ring-error-bubble-wrapper">
+            <textarea id="short-textarea" class="ring-input ring-input-size_s"></textarea>
+            <label for="short-textarea" class="ring-error-bubble active">Short Textarea</label>
+          </div>
+          <div class="ring-error-bubble-wrapper">
+            <textarea id="medium-textarea" class="ring-input ring-input-size_m"></textarea>
+            <label for="medium-textarea" class="ring-error-bubble active">Medium Textarea</label>
+          </div>
+          <div class="ring-error-bubble-wrapper">
+            <textarea id="long-textarea" class="ring-input ring-input-size_l"></textarea>
+            <label for="long-textarea" class="ring-error-bubble active">Long Textarea</label>
+          </div>
+          <div class="ring-error-bubble-wrapper">
+            <textarea id="full-width-textarea" class="ring-input"></textarea>
+            <label for="full-width-textarea" class="ring-error-bubble active">Full-width Textarea</label>
+          </div>
+        </div>
+      </div>
+    `;
+};
+
+basic.storyName = 'Input Sizes';
+
+basic.parameters = {
+  storyStyles: `
+<style>
+  .example-block {
+    margin: 16px;
+    max-width: 600px;
+  }
+</style>`
+};

package/components/island/adaptive-island-hoc.d.ts

@@ -0,0 +1,61 @@
+import React, { ComponentType } from 'react';
+export declare const PhaseContext: React.Context<number | null>;
+type ScrollHandler = (element: Element) => void;
+export declare const ScrollHandlerContext: React.Context<ScrollHandler | null>;
+export default function adaptiveIslandHOC<P>(ComposedComponent: ComponentType<P>): {
+    new (props: P | Readonly<P>): {
+        state: {
+            phase: null;
+        };
+        onContentScroll: ({ scrollTop, scrollHeight, clientHeight }: Element) => void;
+        render(): React.JSX.Element;
+        context: unknown;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<P>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<P>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<P>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<P>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    new (props: P, context: any): {
+        state: {
+            phase: null;
+        };
+        onContentScroll: ({ scrollTop, scrollHeight, clientHeight }: Element) => void;
+        render(): React.JSX.Element;
+        context: unknown;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<P>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<P>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<P>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<P>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    propTypes: React.WeakValidationMap<P> | undefined;
+    contextType?: React.Context<any> | undefined;
+};
+export {};