@jetbrains/ring-ui 5.0.80 → 5.0.82

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

@@ -9,8 +9,6 @@
   --ring-input-icon-offset: calc(unit * 2.5);
   --ring-input-padding-inline: unit;
   --ring-input-padding-block: 1px;
-  --ring-input-padding-start: var(--ring-input-padding-inline);
-  --ring-input-padding-end: var(--ring-input-padding-inline);
 
   position: relative;
 
@@ -18,8 +16,13 @@
   align-items: center;
 
   box-sizing: border-box;
+  min-height: calc(var(--ring-input-padding-inline) * 3);
+  padding: var(--ring-input-padding-block) var(--ring-input-padding-inline);
 
-  min-height: calc(var(--ring-line-height) + 2 * var(--ring-input-padding-block) + 2px); /* 2px - border */
+  transition: border-color var(--ring-ease);
+
+  border: 1px solid var(--ring-borders-color);
+  border-radius: var(--ring-border-radius);
 
   font-size: var(--ring-font-size);
   line-height: var(--ring-line-height);
@@ -27,32 +30,78 @@
   & * {
     box-sizing: border-box;
   }
+
+  &:hover {
+    transition: none;
+
+    border-color: var(--ring-border-hover-color);
+  }
+
+  &:focus-within {
+    transition: none;
+
+    border-color: var(--ring-main-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;
+    }
+  }
+
+  @nest .error & {
+    border-color: var(--ring-icon-error-color);
+  }
+}
+
+.queryAssistDisabled {
+  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 */
 }
 
 .huge {
   --ring-input-padding-block: 5px;
 
-  & .input {
-    border-right: 0;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
+  max-height: calc(var(--ring-input-padding-inline) * 4);
+
+  padding: 0 0 0 var(--ring-input-padding-inline);
+
+  border-right: 0;
 
   & .actions {
-    right: calc(var(--ring-input-padding-inline) + 34px);
+    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);
+    }
   }
 }
 
 .input {
-  overflow: auto;
+  overflow: hidden;
 
-  width: 100%;
+  flex-grow: 1;
 
   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);
 
   cursor: text;
 
@@ -60,8 +109,6 @@
   white-space: nowrap;
 
   color: var(--ring-text-color);
-  border: 1px solid var(--ring-borders-color);
-  border-radius: var(--ring-border-radius);
   outline: none;
   background: transparent;
 
@@ -69,51 +116,6 @@
   scrollbar-width: none;
 
   caret-color: var(--ring-main-color);
-
-  @nest [dir=rtl] & {
-    padding-right: var(--ring-input-padding-start);
-    padding-left: var(--ring-input-padding-end);
-  }
-
-  &:hover {
-    transition: none;
-
-    border-color: var(--ring-border-hover-color);
-  }
-
-  @nest .error & {
-    border-color: var(--ring-icon-error-color);
-  }
-
-  &: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 */
-  }
-
-  /*
-    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;
-    }
-  }
-}
-
-.withIcon {
-  --ring-input-padding-start: calc(var(--ring-input-padding-inline) + var(--ring-input-icon-offset));
 }
 
 .letter-text {
@@ -151,13 +153,12 @@
   composes: resetButton from "../global/global.css";
 
   position: absolute;
-  left: 1px;
 
   display: block;
   overflow: hidden;
 
-  width: calc(100% - unit * 4);
-  padding-left: var(--ring-input-padding-start);
+  width: calc(100% - var(--ring-input-padding-inline) * 4);
+  padding-left: calc(var(--ring-input-padding-inline) * 3 - var(--ring-input-padding-block));
 
   white-space: nowrap;
 
@@ -166,6 +167,12 @@
   pointer-events: none;
 
   color: var(--ring-disabled-color);
+
+  @nest [dir=rtl] & {
+    padding-right: calc(var(--ring-input-padding-inline) * 3 - var(--ring-input-padding-block));
+
+    text-align: right;
+  }
 }
 
 .letter {
@@ -173,28 +180,28 @@
 }
 
 .actions {
-  position: absolute;
-  right: var(--ring-input-padding-inline);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 
-  height: auto;
+  height: 100%;
+  max-height: calc(var(--ring-input-padding-inline) * 2);
+  padding-left: var(--ring-input-padding-inline);
 
   line-height: inherit;
 
   @nest [dir=rtl] & {
-    right: auto;
-    left: unit;
+    padding: 0 var(--ring-input-padding-inline) 0 0;
   }
 }
 
 .icon {
-  position: absolute;
-  left: var(--ring-input-padding-inline);
+  padding-right: var(--ring-input-padding-inline);
 
   color: var(--ring-icon-secondary-color);
 
   @nest [dir=rtl] & {
-    right: unit;
-    left: auto;
+    padding: 0 0 0 var(--ring-input-padding-inline);
   }
 }
 
@@ -226,7 +233,14 @@
 }
 
 .clear {
+  top: 1px;
+
   padding-right: 0;
+
+  @nest [dir=rtl] & {
+    padding-right: var(--ring-input-padding-inline);
+    padding-left: 0;
+  }
 }
 
 .loaderOnTheRight {
@@ -238,3 +252,11 @@
 .input::-webkit-scrollbar {
   display: none;
 }
+
+.withoutGlass {
+  padding-left: 0;
+
+  @nest [dir=rtl] & {
+    padding-right: 0;
+  }
+}

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

@@ -771,14 +771,18 @@ export default class QueryAssist extends Component {
         const containerClasses = classNames(className, inputStyles[`size${huge ? Size.FULL : size}`], {
             [styles.queryAssist]: true,
             [styles.withIcon]: (renderGlass && !huge) || renderLoader,
-            [styles.huge]: huge
+            [styles.huge]: huge,
+            [styles.queryAssistDisabled]: this.props.disabled
         });
         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.inputDisabled]: this.props.disabled
+            [styles.inputLeftGap]: this.isRenderingGlassOrLoader() && glass
+        });
+        const placeholderStyles = classNames({
+            [styles.placeholder]: true,
+            [styles.withoutGlass]: !renderGlass
         });
         return (<ControlsHeightContext.Provider value={ControlsHeight.M}>
         <div data-test={dataTests('ring-query-assist', dataTest)} className={containerClasses} role="presentation" ref={this.nodeRef}>
@@ -796,7 +800,7 @@ export default class QueryAssist extends Component {
          onKeyUp={this.handleInput} // to handle input and key up
          onKeyDown={this.handleEnter} onPaste={this.handlePaste} spellCheck="false">{this.state.query && <span>{this.renderQuery()}</span>}</ContentEditable>
 
-          {renderPlaceholder && (<button type="button" className={styles.placeholder} ref={this.placeholderRef} onClick={this.handleCaretMove} data-test="query-assist-placeholder">
+          {renderPlaceholder && (<button type="button" className={placeholderStyles} ref={this.placeholderRef} onClick={this.handleCaretMove} data-test="query-assist-placeholder">
               {this.props.placeholder}
             </button>)}
 

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","huge":"huge_rui_d22e","input":"input_rui_d22e","actions":"actions_rui_d22e","error":"error_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"};
+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"};
 
 const ICON_ID_LENGTH = 44;
 class QueryAssistSuggestions {

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

@@ -782,14 +782,18 @@ class QueryAssist extends Component {
     const containerClasses = classNames(className, modules_88cfaf40[`size${huge ? Size.FULL : size}`], {
       [modules_da7ab055.queryAssist]: true,
       [modules_da7ab055.withIcon]: renderGlass && !huge || renderLoader,
-      [modules_da7ab055.huge]: huge
+      [modules_da7ab055.huge]: huge,
+      [modules_da7ab055.queryAssistDisabled]: this.props.disabled
     });
     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.inputDisabled]: this.props.disabled
+      [modules_da7ab055.inputLeftGap]: this.isRenderingGlassOrLoader() && glass
+    });
+    const placeholderStyles = classNames({
+      [modules_da7ab055.placeholder]: true,
+      [modules_da7ab055.withoutGlass]: !renderGlass
     });
     return /*#__PURE__*/React.createElement(ControlsHeightContext.Provider, {
       value: ControlsHeight.M
@@ -835,7 +839,7 @@ class QueryAssist extends Component {
       spellCheck: "false"
     }, this.state.query && /*#__PURE__*/React.createElement("span", null, this.renderQuery())), renderPlaceholder && /*#__PURE__*/React.createElement("button", {
       type: "button",
-      className: modules_da7ab055.placeholder,
+      className: placeholderStyles,
       ref: this.placeholderRef,
       onClick: this.handleCaretMove,
       "data-test": "query-assist-placeholder"