@jetbrains/ring-ui 5.0.91 → 5.0.92

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

@@ -69,8 +69,6 @@
 }
 
 .huge {
-  --ring-input-padding-block: 5px;
-
   max-height: calc(var(--ring-input-padding-inline) * 4);
 
   padding: 0 0 0 var(--ring-input-padding-inline);
@@ -79,15 +77,9 @@
     padding-right: var(--ring-input-padding-inline);
   }
 
-  & .placeholder {
-    padding-left: 0;
-  }
-
   @nest [dir=rtl] & {
     padding: 0 var(--ring-input-padding-inline) 0 0;
 
-    border: 1px solid var(--ring-borders-color);
-
     & .actions {
       padding: 0 var(--ring-input-padding-inline);
     }
@@ -167,7 +159,7 @@
   color: var(--ring-disabled-color);
 
   @nest [dir=rtl] & {
-    padding-right: calc(var(--ring-input-padding-inline) * 3 - var(--ring-input-padding-block));
+    padding-right: calc(var(--ring-input-padding-inline) * 3 + var(--ring-input-padding-block) * 2);
 
     text-align: right;
   }
@@ -229,6 +221,14 @@
 
     border-color: var(--ring-border-hover-color);
   }
+
+  @nest [dir=rtl] & {
+    border-right: 1px solid var(--ring-borders-color);
+    border-left: 0;
+    border-radius: var(--ring-border-radius);
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
 }
 
 .clear {
@@ -256,6 +256,10 @@
   padding-left: 0;
 
   @nest [dir=rtl] & {
-    padding-right: 0;
+    padding-right: calc(var(--ring-input-padding-block) * 3);
   }
 }
+
+.loaderActive {
+  padding-right: calc(var(--ring-input-padding-inline) - var(--ring-input-padding-block));
+}

package/components/query-assist/query-assist.js

@@ -777,12 +777,11 @@ export default class QueryAssist extends Component {
         const inputClasses = classNames(this.props.inputClassName, {
             [`${styles.input} ring-js-shortcuts`]: true,
             [styles.inputGap]: actions.length || this.isRenderingGlassOrLoader() && !glass,
-            [styles.inputGap2]: actions.length === 2,
-            [styles.inputLeftGap]: this.isRenderingGlassOrLoader() && glass
+            [styles.inputGap2]: actions.length === 2 // TODO: replace with flex-box layout
         });
         const placeholderStyles = classNames({
             [styles.placeholder]: true,
-            [styles.withoutGlass]: !renderGlass
+            [styles.withoutGlass]: !this.isRenderingGlassOrLoader() || (!renderLoader && huge)
         });
         return (<ControlsHeightContext.Provider value={ControlsHeight.M}>
         <div data-test={dataTests('ring-query-assist', dataTest)} className={containerClasses} role="presentation" ref={this.nodeRef}>
@@ -791,7 +790,8 @@ export default class QueryAssist extends Component {
           {renderGlass && !huge && (<Icon glyph={searchIcon} className={styles.icon} title={this.props.translations.searchTitle} ref={this.glassRef} data-test="query-assist-search-icon"/>)}
 
           {renderLoader && (<div className={classNames(styles.icon, styles.loader, {
-                    [styles.loaderOnTheRight]: !glass
+                    [styles.loaderOnTheRight]: !glass,
+                    [styles.loaderActive]: renderLoader
                 })} ref={this.loaderRef}>
               <LoaderInline />
             </div>)}

package/dist/_helpers/query-assist__suggestions.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import List from '../list/list.js';
 
-var modules_da7ab055 = {"unit":"8px","button-shadow":"inset 0 0 0 1px","height":"var(--ring-button-height)","loaderWidth":"64px","overInputZIndex":"2","inputGap":"24px","light":"light_rui_d22e","heightS":"heightS_rui_d22e","heightM":"heightM_rui_d22e","heightL":"heightL_rui_d22e","button":"button_rui_d22e","active":"active_rui_d22e","withIcon":"withIcon_rui_d22e","icon":"icon_rui_d22e","primary":"primary_rui_d22e","loader":"loader_rui_d22e","loaderBackground":"loaderBackground_rui_d22e","danger":"danger_rui_d22e","text":"text_rui_d22e","content":"content_rui_d22e","text-loading":"text-loading_rui_d22e","inline":"inline_rui_d22e","withNormalIcon":"withNormalIcon_rui_d22e","withDangerIcon":"withDangerIcon_rui_d22e","progress":"progress_rui_d22e","delayed":"delayed_rui_d22e","short":"short_rui_d22e","dropdownIcon":"dropdownIcon_rui_d22e","queryAssist":"queryAssist_rui_d22e","error":"error_rui_d22e","queryAssistDisabled":"queryAssistDisabled_rui_d22e","huge":"huge_rui_d22e","actions":"actions_rui_d22e","placeholder":"placeholder_rui_d22e resetButton_rui_8bff","input":"input_rui_d22e","letter-text":"letter-text_rui_d22e","letterDefault":"letterDefault_rui_d22e","letter-field-name":"letter-field-name_rui_d22e","letter-field-value":"letter-field-value_rui_d22e","letter-operator":"letter-operator_rui_d22e","letter-error":"letter-error_rui_d22e","highlight":"highlight_rui_d22e","service":"service_rui_d22e","letter":"letter_rui_d22e","rightSearchButton":"rightSearchButton_rui_d22e","clear":"clear_rui_d22e","loaderOnTheRight":"loaderOnTheRight_rui_d22e","withoutGlass":"withoutGlass_rui_d22e"};
+var modules_da7ab055 = {"unit":"8px","button-shadow":"inset 0 0 0 1px","height":"var(--ring-button-height)","loaderWidth":"64px","overInputZIndex":"2","inputGap":"24px","light":"light_rui_d22e","heightS":"heightS_rui_d22e","heightM":"heightM_rui_d22e","heightL":"heightL_rui_d22e","button":"button_rui_d22e","active":"active_rui_d22e","withIcon":"withIcon_rui_d22e","icon":"icon_rui_d22e","primary":"primary_rui_d22e","loader":"loader_rui_d22e","loaderBackground":"loaderBackground_rui_d22e","danger":"danger_rui_d22e","text":"text_rui_d22e","content":"content_rui_d22e","text-loading":"text-loading_rui_d22e","inline":"inline_rui_d22e","withNormalIcon":"withNormalIcon_rui_d22e","withDangerIcon":"withDangerIcon_rui_d22e","progress":"progress_rui_d22e","delayed":"delayed_rui_d22e","short":"short_rui_d22e","dropdownIcon":"dropdownIcon_rui_d22e","queryAssist":"queryAssist_rui_d22e","error":"error_rui_d22e","queryAssistDisabled":"queryAssistDisabled_rui_d22e","huge":"huge_rui_d22e","actions":"actions_rui_d22e","input":"input_rui_d22e","letter-text":"letter-text_rui_d22e","letterDefault":"letterDefault_rui_d22e","letter-field-name":"letter-field-name_rui_d22e","letter-field-value":"letter-field-value_rui_d22e","letter-operator":"letter-operator_rui_d22e","letter-error":"letter-error_rui_d22e","highlight":"highlight_rui_d22e","service":"service_rui_d22e","placeholder":"placeholder_rui_d22e resetButton_rui_8bff","letter":"letter_rui_d22e","rightSearchButton":"rightSearchButton_rui_d22e","clear":"clear_rui_d22e","loaderOnTheRight":"loaderOnTheRight_rui_d22e","withoutGlass":"withoutGlass_rui_d22e","loaderActive":"loaderActive_rui_d22e"};
 
 const ICON_ID_LENGTH = 44;
 class QueryAssistSuggestions {

package/dist/query-assist/query-assist.js

@@ -776,12 +776,12 @@ class QueryAssist extends Component {
     const inputClasses = classNames(this.props.inputClassName, {
       [`${modules_da7ab055.input} ring-js-shortcuts`]: true,
       [modules_da7ab055.inputGap]: actions.length || this.isRenderingGlassOrLoader() && !glass,
-      [modules_da7ab055.inputGap2]: actions.length === 2,
-      [modules_da7ab055.inputLeftGap]: this.isRenderingGlassOrLoader() && glass
+      [modules_da7ab055.inputGap2]: actions.length === 2 // TODO: replace with flex-box layout
     });
+
     const placeholderStyles = classNames({
       [modules_da7ab055.placeholder]: true,
-      [modules_da7ab055.withoutGlass]: !renderGlass
+      [modules_da7ab055.withoutGlass]: !this.isRenderingGlassOrLoader() || !renderLoader && huge
     });
     return /*#__PURE__*/React.createElement(ControlsHeightContext.Provider, {
       value: ControlsHeight.M
@@ -801,7 +801,8 @@ class QueryAssist extends Component {
       "data-test": "query-assist-search-icon"
     }), renderLoader && /*#__PURE__*/React.createElement("div", {
       className: classNames(modules_da7ab055.icon, modules_da7ab055.loader, {
-        [modules_da7ab055.loaderOnTheRight]: !glass
+        [modules_da7ab055.loaderOnTheRight]: !glass,
+        [modules_da7ab055.loaderActive]: renderLoader
       }),
       ref: this.loaderRef
     }, /*#__PURE__*/React.createElement(LoaderInline, null)), /*#__PURE__*/React.createElement(ContentEditable, {