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

package/components/input/input.css

@@ -1,62 +1,80 @@
 @import "../global/variables.css";
+@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 {
+  /* stylelint-disable-next-line length-zero-no-unit */
+  --ring-input-padding-inline: 0px;
+}
+
+.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;
 
-  border: none;
+  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: 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 */
   }
@@ -72,59 +90,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;
   }
 }
 
@@ -132,119 +142,35 @@ 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);
-  }
+  display: block;
 
-  @nest .dark & {
-    color: var(--ring-dark-secondary-color);
-  }
-}
+  margin-bottom: calc(unit / 2);
 
-.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);
-}
-
-.light.noLabel ::placeholder,
-.light :focus::placeholder {
-  color: var(--ring-disabled-color);
-}
-
-/* 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;
+  font-size: var(--ring-font-size-smaller);
+  line-height: var(--ring-line-height-lowest);
 }
 
-.focusUnderline {
-  margin-top: -1px;
-
-  background: var(--ring-main-color);
+.disabledLabel {
+  color: var(--ring-disabled-color);
 }
 
-.errorUnderline {
-  margin-top: -2px;
-
-  background: var(--ring-icon-error-color);
-
-  @nest .dark & {
-    background: var(--ring-error-color);
-  }
+.input::placeholder {
+  color: var(--ring-disabled-color);
 }
 
-.input:focus ~ .focusUnderline,
-.container.active > .focusUnderline,
-.error > .errorUnderline {
-  transition: transform 0.15s ease-out;
-  transform: scaleX(1);
+.input::-webkit-search-cancel-button {
+  -webkit-appearance: none;
 }
 
 .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);
 
@@ -267,3 +193,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

@@ -0,0 +1,69 @@
+import React, { PureComponent, Ref, ComponentType, InputHTMLAttributes, TextareaHTMLAttributes, ReactNode } from 'react';
+import { ControlsHeight } from '../global/controls-height';
+declare function noop(): void;
+/**
+ * @name Input
+ */
+declare enum Size {
+    AUTO = "Auto",
+    S = "S",
+    M = "M",
+    L = "L",
+    FULL = "FULL"
+}
+export interface InputBaseProps {
+    size: Size;
+    enableShortcuts: boolean | string[];
+    children?: string | undefined;
+    inputClassName?: string | null | undefined;
+    label?: ReactNode;
+    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;
+}
+declare type Override<D, S> = Omit<D, keyof S> & S;
+export declare type InputSpecificProps = Override<InputHTMLAttributes<HTMLInputElement>, InputBaseProps> & {
+    multiline?: false | undefined;
+    inputRef: Ref<HTMLInputElement>;
+};
+declare type TextAreaSpecificProps = Override<TextareaHTMLAttributes<HTMLTextAreaElement>, InputBaseProps> & {
+    multiline: true;
+    inputRef: Ref<HTMLTextAreaElement>;
+};
+export declare 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(): JSX.Element;
+}
+export declare type ContainerProps<P extends InputProps> = JSX.LibraryManagedAttributes<typeof Input, P>;
+export declare type InputAttrs = ContainerProps<InputProps>;
+export default Input;
+export { Size };