@jetbrains/ring-ui 5.0.16 → 5.0.19

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

@@ -108,7 +108,7 @@ class ButtonController extends RingAngularComponent {
     this.element.className = classNames(
       foreignClasses,
       getButtonClasses({
-        height: ControlsHeight.S,
+        height: $attrs.height || ControlsHeight.S,
         className: styles.button,
         active: this.getAttrValue($attrs.active),
         disabled: this.getAttrValue($attrs.disabled),

package/components/form/form.examples.js

@@ -36,7 +36,7 @@ export const basic = () => {
           <div class="ring-form__group">
             <label for="ring-form-2" class="ring-form__label">Medium Input</label>
             <div class="ring-form__control">
-              <input class="ring-input ring-input-size_md" id="ring-form-2"
+              <input class="ring-input ring-input-size_m" id="ring-form-2"
                 type="text">
             </div>
           </div>
@@ -44,7 +44,7 @@ export const basic = () => {
           <div class="ring-form__group">
             <label for="ring-form-3" class="ring-form__label">Medium Input & Error</label>
             <div class="ring-form__control">
-              <input class="ring-input ring-input_error ring-input-size_md"
+              <input class="ring-input ring-input_error ring-input-size_m"
                 id="ring-form-3" type="text">
               <div class="ring-error-bubble active">Error bubble</div>
             </div>
@@ -75,7 +75,7 @@ export const basic = () => {
           <div class="ring-form__group">
             <label for="ring-form-7" class="ring-form__label">Textarea</label>
             <div class="ring-form__control">
-              <textarea class="ring-input ring-input-size_md"
+              <textarea class="ring-input ring-input-size_m"
                 id="ring-form-7"></textarea>
             </div>
           </div>
@@ -101,7 +101,7 @@ export const basic = () => {
             <label for="ring-form-11" class="ring-form__label">Input in
               a small container</label>
             <div class="ring-form__control ring-form__control_small">
-              <input class="ring-input ring-input-size_md" id="ring-form-11"
+              <input class="ring-input ring-input-size_m" id="ring-form-11"
                 type="text">
             </div>
           </div>
@@ -110,7 +110,7 @@ export const basic = () => {
             <label for="ring-form-12" class="ring-form__label">Textarea in
               a small container</label>
             <div class="ring-form__control ring-form__control_small">
-              <textarea class="ring-input ring-input-size_md"
+              <textarea class="ring-input ring-input-size_m"
                 id="ring-form-12"></textarea>
             </div>
           </div>

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

@@ -39,6 +39,16 @@
 
 /* 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;
 

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

@@ -46,7 +46,7 @@ export const basic = () => {
           </div>
           <div class="ring-error-bubble-wrapper">
             <rg-query-assist
-              class="ring-input-size_md"
+              class="ring-input-size_m"
               x-data-source="exampleCtrl.dataSource"
               glass="true"
               placeholder="'Medium'">
@@ -89,7 +89,7 @@ export const basic = () => {
             <div class="ring-error-bubble active">Short Select</div>
           </div>
           <div class="ring-error-bubble-wrapper">
-            <rg-select class="ring-input-size_md"
+            <rg-select class="ring-input-size_m"
               ng-model="exampleCtrl.selected"
               options="item in exampleCtrl.options"
               label="Select item"></rg-select>
@@ -129,7 +129,7 @@ export const basic = () => {
             <div class="ring-error-bubble active">Short Select</div>
           </div>
           <div class="ring-error-bubble-wrapper">
-            <rg-select class="ring-input-size_md"
+            <rg-select class="ring-input-size_m"
               type="input"
               ng-model="exampleCtrl.selected"
               options="item in exampleCtrl.options"
@@ -164,7 +164,7 @@ export const basic = () => {
             <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_md">
+            <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">
@@ -188,7 +188,7 @@ export const basic = () => {
             <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_md"></textarea>
+            <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">

package/components/pager/pager.js

@@ -147,6 +147,9 @@ export default class Pager extends PureComponent {
     getPagerContent() {
         const { currentPage, visiblePagesLimit } = this.props;
         const totalPages = this.getTotal();
+        if (totalPages < this.props.currentPage) {
+            this.props.onPageChange?.(totalPages);
+        }
         if (totalPages < 2 && !this.props.openTotal) {
             return null;
         }

package/components/query-assist/query-assist.css

@@ -1,273 +1,164 @@
 @import "../global/variables.css";
+@import "../button/button.css";
 
-@value dark from "../global/variables_dark.css";
 @value unit from "../global/global.css";
 @value overInputZIndex: 2;
 @value inputGap: calc(unit * 3);
 
 .queryAssist {
-  height: calc(unit * 3);
+  --ring-input-icon-offset: calc(unit * 2.5);
+  --ring-input-padding-inline: unit;
+  --ring-input-padding-block: 3px;
+  --ring-input-padding-start: var(--ring-input-padding-inline);
+  --ring-input-padding-end: var(--ring-input-padding-inline);
 
-  background: var(--ring-content-background-color);
-}
-
-.input {
-  height: calc(unit * 3 - 2px);
-
-  box-shadow: 0 0 0 1px var(--ring-borders-color);
-
-  /* stylelint-disable-next-line selector-max-specificity */
-  &:not([disabled]):active,
-  &:not([disabled]):focus {
-    border-color: transparent;
-    box-shadow: 0 0 0 1px var(--ring-main-color);
-  }
-}
-
-.placeholder {
-  color: var(--ring-secondary-color);
-}
-
-.letter-text {
-  color: var(--ring-warning-color);
-}
-
-.letterDefault,
-.letter-field-name {
-  color: var(--ring-text-color);
-}
-
-.letter-field-value {
-  color: var(--ring-link-color);
-}
+  position: relative;
 
-.letter-operator {
-  color: var(--ring-secondary-color);
-}
+  display: flex;
 
-.letter-error {
-  padding-bottom: 1px;
+  box-sizing: border-box;
 
-  border-bottom: 1px solid var(--ring-icon-error-color);
-}
+  font-size: var(--ring-font-size);
+  line-height: var(--ring-line-height);
 
-.iconInner {
-  color: var(--ring-icon-secondary-color);
-}
-
-.highlight {
-  font-weight: 600;
-}
-
-.service {
-  color: var(--ring-secondary-color);
+  & * {
+    box-sizing: border-box;
+  }
 }
 
-.dark {
-  & .queryAssist {
-    height: calc(unit * 4);
+.huge {
+  --ring-input-padding-block: 5px;
 
-    font-size: 16px;
-  }
+  width: 100%;
 
   & .input {
-    top: 0;
-
-    height: calc(unit * 4 - 2px);
-
-    color: var(--ring-search-color);
-
-    border-top-width: 5px;
-    background: var(--ring-selected-background-color);
-
-    &:active,
-    &:focus {
-      border-color: var(--ring-navigation-background-color);
-
-      background-color: var(--ring-navigation-background-color);
-    }
+    border-right: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
   }
 
-  & .placeholder {
-    top: 6px;
+  & .actions {
+    right: calc(var(--ring-input-padding-inline) + 34px);
+  }
+}
 
-    color: var(--ring-icon-color);
+.input {
+  width: 100%;
 
-    @nest & :-ms-input-placeholder,
-    :root & {
-      top: 7px;
-    }
+  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);
 
-    @supports (-ms-ime-align:auto) {
-      & {
-        top: 7px;
-      }
-    }
-  }
+  transition: border-color var(--ring-ease);
 
-  & .letter-text {
-    color: var(--ring-warning-color);
-  }
+  color: var(--ring-text-color);
+  border: 1px solid var(--ring-borders-color);
+  border-radius: var(--ring-border-radius);
+  outline: none;
+  background: transparent;
 
-  & .letterDefault,
-  & .letter-field-name {
-    color: var(--ring-search-color);
-  }
+  font: inherit;
 
-  & .letter-field-value {
-    color: var(--ring-active-text-color);
-  }
+  caret-color: var(--ring-main-color);
 
-  & .letter-operator {
-    color: var(--ring-secondary-color);
+  @nest [dir=rtl] & {
+    padding-right: var(--ring-input-padding-start);
+    padding-left: var(--ring-input-padding-end);
   }
 
-  & .letter-error {
-    padding-bottom: 1px;
-
-    border-bottom: 1px solid var(--ring-icon-error-color);
-  }
+  &:hover {
+    transition: none;
 
-  & .icon {
-    top: 7px;
+    border-color: var(--ring-border-hover-color);
   }
 
-  & .iconInner {
-    color: var(--ring-icon-color);
+  @nest .error & {
+    border-color: var(--ring-icon-error-color);
   }
 
-  & .loader {
-    top: 6px;
-  }
+  &:focus {
+    transition: none;
 
-  & .highlight {
-    font-weight: 600;
+    border-color: var(--ring-main-color);
   }
 
-  & .service {
-    color: var(--ring-secondary-color);
-  }
+  &[disabled] {
+    color: var(--ring-disabled-color);
+    border-color: var(--ring-border-disabled-color);
+    background-color: var(--ring-disabled-background-color);
 
-  & .actions {
-    background-color: var(--ring-selected-background-color);
+    -webkit-text-fill-color: var(--ring-disabled-color); /* Required for Safari, see RG-2063 for details */
   }
 
-  /* stylelint-disable-next-line selector-max-specificity */
-  & .input:focus ~ .actions {
-    background-color: var(--ring-navigation-background-color);
+  /*
+    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;
+    }
   }
 }
 
-.queryAssist {
-  composes: font from "../global/global.css";
-
-  position: relative;
-
-  box-sizing: border-box;
-
-  line-height: normal;
+.withIcon {
+  --ring-input-padding-start: calc(var(--ring-input-padding-inline) + var(--ring-input-icon-offset));
 }
 
-.input {
-  position: relative;
-
-  top: 1px;
-  left: 1px;
-
-  overflow: auto;
-
-  box-sizing: border-box;
-
-  width: calc(100% - 2px);
-  margin: 0;
-
-  padding: 2px calc(unit / 2) 3px;
-
-  white-space: nowrap;
-
-  border-width: 0;
-  border-style: solid;
-  border-color: transparent;
-  background: transparent;
-
-  line-height: 16px;
-
-  scrollbar-width: none;
-
-  &:active,
-  &:focus {
-    outline: 0;
-  }
-
-  @nest & :-ms-input-placeholder,
-  :root & {
-    line-height: 17px;
-  }
+.letter-text {
+  color: var(--ring-warning-color);
+}
 
-  @supports (-ms-ime-align:auto) {
-    & {
-      line-height: 17px;
-    }
-  }
+.letterDefault,
+.letter-field-name {
+  color: var(--ring-text-color);
+}
 
-  & .iconInner {
-    color: var(--ring-icon-color);
-  }
+.letter-field-value {
+  color: var(--ring-link-color);
+}
 
-  &.inputGap {
-    border-right-width: inputGap;
-  }
+.letter-operator {
+  color: var(--ring-secondary-color);
+}
 
-  &.inputGap2 {
-    border-right-width: calc(2 * inputGap);
-  }
+.letter-error {
+  padding-bottom: 1px;
 
-  &.inputLeftGap {
-    border-left-width: inputGap;
-  }
+  border-bottom: 1px solid var(--ring-icon-error-color);
+}
 
-  &.inputDisabled {
-    border-color: var(--ring-line-color);
-    box-shadow: 0 0 0 1px var(--ring-line-color);
-  }
+.highlight {
+  font-weight: 600;
+}
 
-  &.inputDisabled span > span {
-    color: var(--ring-disabled-color);
-  }
+.service {
+  color: var(--ring-secondary-color);
 }
 
 .placeholder {
   composes: resetButton from "../global/global.css";
 
   position: absolute;
-  top: 3px;
-
-  left: 5px;
+  top: calc(var(--ring-input-padding-block) + 1px);
+  left: 1px;
 
   display: block;
 
   overflow: hidden;
 
   width: calc(100% - unit * 4);
+  padding-left: var(--ring-input-padding-start);
 
   text-overflow: ellipsis;
 
   pointer-events: none;
 
-  &.placeholderSpaced {
-    left: calc(unit * 3 + 5px);
-  }
-
-  @nest & :-ms-input-placeholder,
-  :root & {
-    top: 4px;
-  }
-
-  @supports (-ms-ime-align:auto) {
-    & {
-      top: 4px;
-    }
-  }
+  color: var(--ring-disabled-color);
 }
 
 .letter {
@@ -276,41 +167,63 @@
 
 .actions {
   position: absolute;
-  z-index: overInputZIndex;
-  top: 4px;
-  right: 1px;
+  top: calc(var(--ring-input-padding-block) - 2px);
+  right: var(--ring-input-padding-inline);
 
-  background-color: var(--ring-content-background-color);
+  height: auto;
+
+  line-height: inherit;
+
+  @nest [dir=rtl] & {
+    right: auto;
+    left: unit;
+  }
 }
 
 .icon {
   position: absolute;
-  z-index: overInputZIndex;
-  top: 3px;
+  top: calc(var(--ring-input-padding-block) + 1px);
+  left: var(--ring-input-padding-inline);
 
-  box-sizing: border-box;
+  color: var(--ring-icon-secondary-color);
 
-  width: calc(unit * 3);
-  height: calc(unit * 2);
+  @nest [dir=rtl] & {
+    right: unit;
+    left: auto;
+  }
+}
 
-  padding: 0 4px;
+.rightSearchButton {
+  padding: 5px 9px;
 
   cursor: pointer;
-  user-select: none;
 
-  line-height: normal;
+  transition: border-color var(--ring-ease);
+
+  color: var(--ring-icon-secondary-color);
+
+  border: 1px solid var(--ring-borders-color);
+  border-radius: var(--ring-border-radius);
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
 
-  & svg {
-    vertical-align: baseline;
+  @nest .queryAssist.queryAssist:focus-within & {
+    transition: none;
+
+    border-color: var(--ring-main-color);
   }
 
-  @nest .actions & {
-    position: relative;
-    top: 0;
-    left: -1px;
+  @nest .queryAssist:hover & {
+    transition: none;
+
+    border-color: var(--ring-border-hover-color);
   }
 }
 
+.clear {
+  padding-right: 0;
+}
+
 .loaderOnTheRight {
   right: 1px;
 

package/components/query-assist/query-assist.d.ts

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import Caret, { Position } from '../caret/caret';
 import PopupMenu from '../popup-menu/popup-menu';
 import Button from '../button/button';
+import Icon from '../icon/icon';
 import { ShortcutsMap } from '../shortcuts/core';
 import { QueryAssistSuggestion, SuggestionItem } from './query-assist__suggestions';
 declare function noop(): void;
@@ -57,6 +58,7 @@ export interface QueryAssistProps {
     useCustomItemRender?: boolean | null | undefined;
     actions?: ReactNode[] | null | undefined;
     'data-test'?: string | null | undefined;
+    huge?: boolean | null | undefined;
 }
 export interface StyleRange {
     style: string;
@@ -207,6 +209,7 @@ export default class QueryAssist extends Component<QueryAssistProps> {
         translations: PropTypes.Requireable<object>;
         actions: PropTypes.Requireable<any[]>;
         'data-test': PropTypes.Requireable<string>;
+        huge: PropTypes.Requireable<boolean>;
     };
     static defaultProps: {
         onApply: typeof noop;
@@ -280,8 +283,8 @@ export default class QueryAssist extends Component<QueryAssistProps> {
     popupRef: (node: PopupMenu<SuggestionItem> | null) => void;
     placeholder?: HTMLElement | null;
     placeholderRef: (node: HTMLElement | null) => void;
-    glass?: ComponentRef<typeof Button> | null;
-    glassRef: (node: ComponentRef<typeof Button> | null) => void;
+    glass?: ComponentRef<typeof Icon> | null;
+    glassRef: (node: ComponentRef<typeof Icon> | null) => void;
     loader?: HTMLElement | null;
     loaderRef: (node: HTMLElement | null) => void;
     clear?: ComponentRef<typeof Button> | null;