@jetbrains/ring-ui 5.0.0-beta.3 → 5.0.0-beta.7

package/components/heading/heading.css

@@ -13,13 +13,16 @@
     margin-bottom: 8px;
 
     color: var(--ring-heading-color);
+  }
 
+  @nest h1& {
     font-size: 24px;
     line-height: 28px;
   }
 
   @nest h2& {
-    font-weight: 200;
+    font-size: 20px;
+    line-height: 24px;
   }
 
   @nest h3& {

package/components/icon/icon.css

@@ -76,7 +76,7 @@
 }
 
 .white {
-  color: var(--ring-dark-text-color);
+  color: var(--ring-white-text-color);
 }
 
 .loading {

package/components/input/input.css

@@ -2,62 +2,76 @@
 @import "../button/button.css";
 
 @value unit from "../global/global.css";
-@value iconOffset: calc(unit * 3 - 2px);
 
-.container {
-  composes: font-lower from  "../global/global.css";
+.outerContainer {
+  --ring-input-icon-offset: calc(unit * 2.5);
+  --ring-input-padding-inline: unit;
+}
 
+.borderless {
+  --ring-input-padding-inline: 0;
+}
+
+.container {
   position: relative;
 
   box-sizing: border-box;
-  min-height: calc(unit * 8);
-  padding-top: calc(unit * 2);
+
+  font-size: var(--ring-font-size);
+  line-height: var(--ring-line-height);
 
   & * {
     box-sizing: border-box;
   }
 }
 
-.compact {
-  min-height: calc(unit * 4);
-  padding: 0;
-}
-
 .input {
+  --ring-input-padding-start: var(--ring-input-padding-inline);
+  --ring-input-padding-end: var(--ring-input-padding-inline);
+
   width: 100%;
-  min-height: calc(unit * 4);
-  padding: 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);
 
-  border: none;
+  color: var(--ring-text-color);
+  border: 1px solid var(--ring-borders-color);
+  border-radius: var(--ring-border-radius);
   outline: none;
   background: transparent;
 
   font: inherit;
-  caret-color: var(--ring-main-color);
 
-  @nest .clearable & {
-    padding-right: calc(unit * 3);
+  caret-color: var(--ring-main-color);
 
-    @nest [dir=rtl] & {
-      padding-right: 0;
-      padding-left: calc(unit * 3);
-    }
+  @nest [dir=rtl] & {
+    padding-right: var(--ring-input-padding-start);
+    padding-left: var(--ring-input-padding-end);
   }
 
-  @nest .light & {
-    color: var(--ring-text-color);
+  &:hover {
+    transition: none;
+
+    border-color: var(--ring-border-hover-color);
   }
 
-  @nest .dark & {
-    color: var(--ring-dark-text-color);
+  @nest .error & {
+    border-color: var(--ring-icon-error-color);
   }
 
-  &::placeholder {
-    color: transparent;
+  &: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 */
   }
@@ -73,59 +87,51 @@
       transition: background-color 50000s ease-in-out 0s;
     }
   }
-
-  /* if you need a cross, pass onClear prop */
-  &::-ms-clear {
-    display: none;
-  }
 }
 
-.withIcon .input,
-.withIcon .label {
-  padding-left: iconOffset;
-
-  @nest [dir=rtl] & {
-    padding-right: iconOffset;
-    padding-left: 0;
-  }
+.borderless .input {
+  border-color: transparent;
 }
 
-.icon,
-/* override Button */
-.clear.clear {
-  position: absolute;
-  top: 17px;
-
-  line-height: calc(unit * 4);
+.withIcon .input {
+  --ring-input-padding-start: calc(var(--ring-input-padding-inline) + var(--ring-input-icon-offset));
+}
 
-  @nest .compact & {
-    top: 1px;
-  }
+.clearable .input {
+  --ring-input-padding-end: calc(var(--ring-input-padding-inline) + var(--ring-input-icon-offset));
 }
 
 .icon {
-  left: 0;
+  position: absolute;
+  top: calc(var(--ring-input-padding-block) + 1px);
+  left: var(--ring-input-padding-inline);
 
-  color: var(--ring-icon-color);
+  color: var(--ring-icon-secondary-color);
 
   @nest [dir=rtl] & {
-    right: 0;
+    right: unit;
     left: auto;
   }
 }
 
 .clear {
-  right: 0;
+  position: absolute;
+  top: calc(var(--ring-input-padding-block) + 1px);
+  right: var(--ring-input-padding-inline);
+
+  height: auto;
 
   padding-right: 0;
 
+  line-height: inherit;
+
   @nest .empty & {
     display: none;
   }
 
   @nest [dir=rtl] & {
     right: auto;
-    left: 0;
+    left: unit;
   }
 }
 
@@ -133,119 +139,31 @@ textarea.input {
   overflow: hidden;
 
   box-sizing: border-box;
-  padding-top: unit;
 
   resize: none;
 }
 
 .label {
-  position: absolute;
-  top: calc(unit * 3 - 1px);
-  left: 0;
-
-  transition: transform var(--ring-fast-ease), color var(--ring-fast-ease);
-  transform-origin: top left;
-  pointer-events: none;
-
-  @nest .light & {
-    color: var(--ring-secondary-color);
-  }
-
-  @nest .dark & {
-    color: var(--ring-dark-secondary-color);
-  }
-}
-
-.input:focus ~ .label,
-.container.active > .label,
-.container:not(.empty) > .label {
-  transform: translateY(calc(unit * -2.5)) scale(calc(12 / 13));
-}
-
-.noLabel ::placeholder,
-.input:focus::placeholder {
-  transition: color var(--ring-fast-ease);
-}
+  display: block;
 
-.light.noLabel ::placeholder,
-.light :focus::placeholder {
-  color: var(--ring-disabled-color);
-}
+  margin-bottom: calc(unit / 2);
 
-/* stylelint-disable-next-line selector-max-specificity */
-.dark.noLabel ::placeholder,
-/* stylelint-disable-next-line selector-max-specificity */
-.dark :focus::placeholder {
   color: var(--ring-secondary-color);
-}
-
-.input:focus ~ .label {
-  color: var(--ring-main-color);
-}
-
-.error > :focus ~ .label {
-  color: var(--ring-error-color);
-}
-
-.underline {
-  height: 1px;
-
-  border-bottom-width: 1px;
-  border-bottom-style: solid;
-
-  @nest .light & {
-    border-color: var(--ring-borders-color);
-  }
-
-  @nest .dark & {
-    border-color: var(--ring-dark-borders-color);
-  }
-}
-
-.input[disabled] ~ .underline {
-  border-bottom-style: dashed;
-}
-
-.focusUnderline,
-.errorUnderline {
-  width: 100%;
-  height: 2px;
 
-  transform: scaleX(0);
-  transform-origin: top left;
-}
-
-.focusUnderline {
-  margin-top: -1px;
-
-  background: var(--ring-main-color);
+  font-size: var(--ring-font-size-smaller);
+  line-height: var(--ring-line-height-lowest);
 }
 
-.errorUnderline {
-  margin-top: -2px;
-
-  background: var(--ring-icon-error-color);
-
-  @nest .dark & {
-    background: var(--ring-error-color);
-  }
+.disabledLabel {
+  color: var(--ring-disabled-color);
 }
 
-.input:focus ~ .focusUnderline,
-.container.active > .focusUnderline,
-.error > .errorUnderline {
-  transition: transform 0.15s ease-out;
-  transform: scaleX(1);
+.input::placeholder {
+  color: var(--ring-disabled-color);
 }
 
 .errorText {
-  overflow: hidden;
-
-  box-sizing: border-box;
-  height: 0;
-  padding: calc(unit / 2) 0 unit;
-
-  transition: height 0.3s ease-out;
+  margin-top: calc(unit / 2);
 
   color: var(--ring-error-color);
 
@@ -268,3 +186,15 @@ textarea.input {
 .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

@@ -1,5 +1,5 @@
-import React, { PureComponent, Ref, ComponentType, InputHTMLAttributes, TextareaHTMLAttributes, ReactNode, ExoticComponent, PropsWithoutRef, RefAttributes, ComponentProps } from 'react';
-import Theme, { ThemeOuterProps, ThemeProps } from '../global/theme';
+import React, { PureComponent, Ref, ComponentType, InputHTMLAttributes, TextareaHTMLAttributes, ReactNode } from 'react';
+import { ControlsHeight } from '../global/controls-height';
 declare function noop(): void;
 /**
  * @name Input
@@ -11,20 +11,20 @@ declare enum Size {
     L = "L",
     FULL = "FULL"
 }
-export interface InputBaseProps extends ThemeProps {
+export interface InputBaseProps {
     size: Size;
     enableShortcuts: boolean | string[];
-    renderUnderline: (underlineRef: Ref<HTMLDivElement>, errorText: ReactNode) => ReactNode;
     children?: string | undefined;
     inputClassName?: string | null | undefined;
     label?: ReactNode;
     active?: boolean | null | undefined;
-    compact?: boolean | null | undefined;
-    error?: string | 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;
 }
 declare type Override<D, S> = Omit<D, keyof S> & S;
 export declare type InputSpecificProps = Override<InputHTMLAttributes<HTMLInputElement>, InputBaseProps> & {
@@ -42,32 +42,28 @@ export declare class Input extends PureComponent<InputProps> {
         onChange: typeof noop;
         inputRef: typeof noop;
         enableShortcuts: string[];
-        renderUnderline: (underlineRef: Ref<HTMLDivElement>, errorText: ReactNode) => JSX.Element;
     };
     state: {
         empty: boolean;
     };
     componentDidMount(): void;
     componentDidUpdate(): void;
+    componentWillUnmount(): void;
+    static contextType: React.Context<ControlsHeight>;
+    frame?: number;
     input?: HTMLInputElement | HTMLTextAreaElement | null;
-    underlineNode?: HTMLElement | null;
     id: string;
     getId(): string;
     checkValue(): void;
     stretch(el: HTMLElement | null | undefined): void;
     adapt(): void;
-    underlineRef: (el: HTMLDivElement | null) => 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(): JSX.Element;
 }
-export declare type ContainerProps<P> = PropsWithoutRef<Omit<JSX.LibraryManagedAttributes<typeof Input, P>, keyof ThemeProps> & ThemeOuterProps> & RefAttributes<Input>;
-declare type Container = ExoticComponent<ContainerProps<InputSpecificProps> | ContainerProps<TextAreaSpecificProps>>;
-declare const ThemedInput: Container & {
-    type: Container;
-};
-export declare type InputAttrs = ComponentProps<typeof ThemedInput>;
-export default ThemedInput;
-export { Size, Theme };
+export declare type ContainerProps<P extends InputProps> = JSX.LibraryManagedAttributes<typeof Input, P>;
+export declare type InputAttrs = ContainerProps<InputProps>;
+export default Input;
+export { Size };

package/components/input/input.js

@@ -2,12 +2,12 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import closeIcon from '@jetbrains/icons/close';
-import Theme, { withTheme } from '../global/theme';
 import { refObject } from '../global/prop-types';
 import Button from '../button/button';
 import getUID from '../global/get-uid';
 import Icon from '../icon/icon';
 import composeRefs from '../global/composeRefs';
+import { ControlsHeightContext } from '../global/controls-height';
 import styles from './input.css';
 function noop() { }
 /**
@@ -26,20 +26,25 @@ export class Input extends PureComponent {
         size: Size.M,
         onChange: noop,
         inputRef: noop,
-        enableShortcuts: ['esc'],
-        renderUnderline: (underlineRef, errorText) => (<div className={styles.errorText} ref={underlineRef}>{errorText}</div>)
+        enableShortcuts: ['esc']
     };
     state = {
         empty: true
     };
     componentDidMount() {
-        this.adapt();
+        this.frame = requestAnimationFrame(() => this.adapt());
     }
     componentDidUpdate() {
         this.adapt();
     }
+    componentWillUnmount() {
+        if (this.frame != null) {
+            cancelAnimationFrame(this.frame);
+        }
+    }
+    static contextType = ControlsHeightContext;
+    frame;
     input;
-    underlineNode;
     id = getUID('ring-input-');
     getId() {
         return this.props.id || this.id;
@@ -57,15 +62,11 @@ export class Input extends PureComponent {
         if (!el || !el.style) {
             return;
         }
-        el.style.height = `${el.scrollHeight}px`;
+        el.style.height = `${el.scrollHeight + 2}px`;
     }
     adapt() {
         this.checkValue();
-        this.stretch(this.underlineNode);
     }
-    underlineRef = (el) => {
-        this.underlineNode = el;
-    };
     inputRef = (el) => {
         this.input = el;
     };
@@ -87,13 +88,12 @@ export class Input extends PureComponent {
     render() {
         const { 
         // Modifiers
-        theme, size, active, multiline, borderless, compact, 
+        size, active, multiline, borderless, 
         // Props
-        label, error, className, inputClassName, children, value, onClear, disabled, inputRef, onChange, enableShortcuts, id, placeholder, icon, renderUnderline, ...restProps } = this.props;
-        const minimizeMargins = compact || borderless;
+        label, error, className, inputClassName, children, value, onClear, disabled, inputRef, onChange, enableShortcuts, id, placeholder, icon, height = this.context, afterInput, ...restProps } = this.props;
         const { empty } = this.state;
         const clearable = !!onClear;
-        const classes = classNames(styles.container, className, theme && styles[theme], [styles[`size${size}`]], {
+        const classes = classNames(className, styles.outerContainer, [styles[`size${size}`]], [styles[`height${height}`]], {
             'ring-js-shortcuts': enableShortcuts === true,
             [styles.active]: active,
             [styles.error]: error != null,
@@ -101,7 +101,7 @@ export class Input extends PureComponent {
             [styles.noLabel]: !this.props.label,
             [styles.withIcon]: icon != null,
             [styles.clearable]: clearable,
-            [styles.compact]: minimizeMargins
+            [styles.borderless]: borderless
         });
         const inputClasses = classNames(styles.input, inputClassName);
         const text = value != null ? value : children;
@@ -116,23 +116,23 @@ export class Input extends PureComponent {
             'data-enabled-shortcuts': Array.isArray(enableShortcuts) ? enableShortcuts.join(',') : null
         };
         return (<div className={classes} data-test="ring-input">
-        {icon && <Icon glyph={icon} className={styles.icon}/>}
-        {multiline
+        {label && (<label htmlFor={this.getId()} className={classNames(styles.label, {
+                    [styles.disabledLabel]: disabled
+                })}>{label}</label>)}
+        <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="Clear input" data-test="ring-input-clear" className={styles.clear} icon={closeIcon} onClick={this.clear}/>)}
-
-        {!minimizeMargins && <label htmlFor={this.getId()} className={styles.label}>{label}</label>}
-        {!borderless && <div className={styles.underline}/>}
-        {!borderless && <div className={styles.focusUnderline}/>}
-        {!minimizeMargins && <div className={styles.errorUnderline}/>}
-        {!minimizeMargins && renderUnderline(this.underlineRef, error)}
+          {clearable && !disabled && (<Button title="Clear input" data-test="ring-input-clear" className={styles.clear} icon={closeIcon} onClick={this.clear}/>)}
+          {afterInput}
+        </div>
+        {error && <div className={styles.errorText}>{error}</div>}
       </div>);
     }
 }
 Input.propTypes = {
     value: PropTypes.string,
-    theme: PropTypes.oneOf(Object.values(Theme)),
     className: PropTypes.string,
     inputClassName: PropTypes.string,
     size: PropTypes.oneOf(Object.values(Size)).isRequired,
@@ -140,8 +140,6 @@ Input.propTypes = {
     active: PropTypes.bool,
     error: PropTypes.string,
     multiline: PropTypes.bool,
-    borderless: PropTypes.bool,
-    compact: PropTypes.bool,
     onChange: PropTypes.func,
     onClear: PropTypes.func,
     inputRef: PropTypes.oneOfType([
@@ -157,9 +155,7 @@ Input.propTypes = {
     disabled: PropTypes.bool,
     id: PropTypes.string,
     placeholder: PropTypes.string,
-    icon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
-    renderUnderline: PropTypes.func
+    icon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType])
 };
-const ThemedInput = withTheme()(Input);
-export default ThemedInput;
-export { Size, Theme };
+export default Input;
+export { Size };

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

@@ -113,7 +113,7 @@ basic.parameters = {
   }
 
   .inputs rg-input {
-    margin: 0 16px;
+    margin: 4px 16px;
   }
 
   .dark {