@jetbrains/ring-ui 5.0.90 → 5.0.91

package/components/button/button.css

@@ -86,6 +86,7 @@
 
   &[disabled].active {
     background-color: var(--ring-disabled-selected-background-color);
+    box-shadow: button-shadow var(--ring-border-selected-disabled-color);
   }
 
   &[disabled],

package/components/button-group/button-group.css

@@ -39,7 +39,7 @@
 }
 
 .buttonGroup .button[disabled] {
-  --ring-button-group-button-border-color: var(--ring-border-unselected-disabled-color);
+  --ring-button-group-button-border-color: var(--ring-border-disabled-color);
 
   /* stylelint-disable-next-line selector-max-specificity */
   &::before,
@@ -55,7 +55,7 @@
 
     background-color: var(--ring-disabled-background-color);
 
-    box-shadow: 0 1px var(--ring-border-unselected-disabled-color) inset, 0 -1px var(--ring-border-unselected-disabled-color) inset;
+    box-shadow: 0 1px var(--ring-border-disabled-color) inset, 0 -1px var(--ring-border-disabled-color) inset;
   }
 
   /* stylelint-disable-next-line selector-max-specificity */
@@ -130,7 +130,7 @@
 
 /* stylelint-disable-next-line selector-max-specificity */
 .buttonGroup .button.active[disabled] {
-  box-shadow: button-shadow var(--ring-border-disabled-color);
+  box-shadow: button-shadow var(--ring-border-selected-disabled-color);
 }
 
 .split {

package/components/checkbox/checkbox.css

@@ -43,6 +43,9 @@
 .icon.icon {
   position: absolute;
 
+  top: -1px;
+  left: -1px;
+
   width: calc(unit * 2);
   height: calc(unit * 2);
 
@@ -58,18 +61,10 @@
 
 .check {
   composes: icon;
-
-  top: -1px;
-  left: -1px;
 }
 
 .minus {
   composes: icon;
-
-  top: 1px;
-  left: 2px;
-
-  opacity: 0;
 }
 
 .input {
@@ -116,20 +111,20 @@
 
   /* stylelint-disable-next-line selector-max-specificity */
   &[disabled][disabled] + .cell {
-    border-color: var(--ring-border-unselected-disabled-color);
+    border-color: var(--ring-border-disabled-color);
     background-color: var(--ring-disabled-background-color);
   }
 
   /* stylelint-disable-next-line selector-max-specificity */
   &[disabled]:checked + .cell,
   &[disabled]:indeterminate + .cell {
-    border-color: var(--ring-border-disabled-color);
+    border-color: var(--ring-border-selected-disabled-color);
   }
 
   /* stylelint-disable-next-line selector-max-specificity */
   &[disabled]:checked + .cell .check,
   &[disabled]:indeterminate + .cell .minus {
-    color: var(--ring-border-disabled-color);
+    color: var(--ring-border-selected-disabled-color);
   }
 
   /* stylelint-disable-next-line selector-max-specificity */

package/components/checkbox/checkbox.js

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import checkmarkIcon from '@jetbrains/icons/checkmark-14px';
-import minusIcon from '@jetbrains/icons/remove-10px';
+import minusIcon from '@jetbrains/icons/remove-14px';
 import Icon from '../icon/icon';
 import { refObject } from '../global/prop-types';
 import composeRefs from '../global/composeRefs';

package/components/global/variables.css

@@ -13,10 +13,12 @@
   --ring-icon-color: rgb(var(--ring-icon-components)); /* #b8d1e5 */
   --ring-icon-secondary-components: 153, 153, 153;
   --ring-icon-secondary-color: rgb(var(--ring-icon-secondary-components)); /* #999 */
-  --ring-border-disabled-components: 212, 212, 212;
-  --ring-border-disabled-color: rgb(var(--ring-border-disabled-components)); /* #d4d4d4 */
+  --ring-border-disabled-components: 232, 232, 232;
+  --ring-border-disabled-color: rgb(var(--ring-border-disabled-components)); /* #e8e8e8 */
+  --ring-border-selected-disabled-components: 212, 212, 212;
+  --ring-border-selected-disabled-color: rgb(var(--ring-border-selected-disabled-components)); /* #d4d4d4 */
   --ring-border-unselected-disabled-components: 232, 232, 232;
-  --ring-border-unselected-disabled-color: rgb(var(--ring-border-unselected-disabled-components)); /* #e8e8e8 */
+  --ring-border-unselected-disabled-color: rgb(var(--ring-border-unselected-disabled-components)); /* #e8e8e8 */ /* TODO remove in 6.0 */
   --ring-icon-disabled-components: 212, 212, 212;
   --ring-icon-disabled-color: rgb(var(--ring-icon-disabled-components)); /* #d4d4d4 */
   --ring-border-hover-components: 128, 198, 255;

package/components/global/variables_dark.css

@@ -13,8 +13,10 @@
   --ring-icon-secondary-color: rgb(var(--ring-icon-secondary-components)); /* #80929d */
   --ring-border-disabled-components: 54, 54, 54;
   --ring-border-disabled-color: rgb(var(--ring-border-disabled-components)); /* #363636 */
+  --ring-border-selected-disabled-components: 54, 54, 54;
+  --ring-border-selected-disabled-color: rgb(var(--ring-border-selected-disabled-components)); /* #363636 */
   --ring-border-unselected-disabled-components: 54, 54, 54;
-  --ring-border-unselected-disabled-color: rgb(var(--ring-border-unselected-disabled-components)); /* #363636 */
+  --ring-border-unselected-disabled-color: rgb(var(--ring-border-unselected-disabled-components)); /* #363636 */ /* TODO remove in 6.0 */
   --ring-icon-disabled-components: 80, 82, 83;
   --ring-icon-disabled-color: rgb(var(--ring-icon-disabled-components)); /* #505253 */
   --ring-border-hover-components: 112, 177, 230;

package/components/popup/position.js

@@ -46,7 +46,9 @@ function verticalOverflow(styles, scrollingCoordinates, attrs) {
     const viewportMinX = scrollingCoordinates.top + attrs.sidePadding;
     const viewportMaxX = scrollingCoordinates.top + containerHeight - attrs.sidePadding;
     const topOverflow = Math.max(viewportMinX - styles.top, 0);
-    const popupHeight = attrs.popup.clientHeight;
+    const popupHeight = attrs.maxHeight && typeof attrs.maxHeight === 'number'
+        ? Math.min(attrs.popup.scrollHeight, attrs.maxHeight)
+        : attrs.popup.scrollHeight;
     const verticalDiff = styles.top + popupHeight - viewportMaxX;
     const bottomOverflow = Math.max(verticalDiff, 0);
     return topOverflow + bottomOverflow;
@@ -128,7 +130,7 @@ export default function position(attrs) {
         const overflowAttrs = { ...attrs, popup };
         const directionsMatrix = getPositionStyles(popup, anchorRect, anchorLeft, anchorTop, offset);
         if (!autoPositioning || directions.length === 1) {
-            styles = directionsMatrix[directions[0]];
+            styles = { ...directionsMatrix[directions[0]] };
             chosenDirection = directions[0];
         }
         else {
@@ -143,7 +145,7 @@ export default function position(attrs) {
                     horizontalOverflow(stylesB, scroll, overflowAttrs);
                 return overflowA - overflowB;
             });
-            styles = sortedByIncreasingOverflow[0].styles;
+            styles = { ...sortedByIncreasingOverflow[0].styles };
             chosenDirection = sortedByIncreasingOverflow[0].direction;
         }
         // because of the anchor negative margin top and left also may become negative

package/components/radio/radio.css

@@ -76,7 +76,7 @@
   opacity: 0;
 
   &[disabled] + .circle {
-    border-color: var(--ring-border-unselected-disabled-color);
+    border-color: var(--ring-border-disabled-color);
     background-color: var(--ring-disabled-background-color);
   }
 
@@ -105,11 +105,11 @@
 
   /* stylelint-disable-next-line selector-max-specificity */
   &[disabled]:checked + .circle {
-    border-color: var(--ring-border-disabled-color);
+    border-color: var(--ring-border-selected-disabled-color);
 
     /* stylelint-disable-next-line selector-max-specificity */
     &::after {
-      background-color: var(--ring-border-disabled-color);
+      background-color: var(--ring-border-selected-disabled-color);
     }
   }
 

package/dist/checkbox/checkbox.js

@@ -3,7 +3,7 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import checkmarkIcon from '@jetbrains/icons/checkmark-14px';
-import minusIcon from '@jetbrains/icons/remove-10px';
+import minusIcon from '@jetbrains/icons/remove-14px';
 import Icon from '../icon/icon.js';
 import { refObject } from '../global/prop-types.js';
 import composeRefs from '../global/composeRefs.js';

package/dist/data-list/data-list.js

@@ -42,7 +42,7 @@ import '../global/controls-height.js';
 import '../_helpers/button__classes.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
-import '@jetbrains/icons/remove-10px';
+import '@jetbrains/icons/remove-14px';
 import '../_helpers/checkbox.js';
 
 class DataList extends PureComponent {

package/dist/data-list/item.js

@@ -29,7 +29,7 @@ import '../global/prop-types.js';
 import '../global/composeRefs.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
-import '@jetbrains/icons/remove-10px';
+import '@jetbrains/icons/remove-14px';
 import '../_helpers/checkbox.js';
 import '../global/get-uid.js';
 

package/dist/data-list/title.js

@@ -9,7 +9,7 @@ import '../global/prop-types.js';
 export { T as default } from '../_helpers/title.js';
 import '../global/composeRefs.js';
 import '@jetbrains/icons/checkmark-14px';
-import '@jetbrains/icons/remove-10px';
+import '@jetbrains/icons/remove-14px';
 import '../icon/icon.js';
 import 'util-deprecate';
 import '../icon/icon__constants.js';

package/dist/data-list-ng/data-list-ng.js

@@ -48,7 +48,7 @@ import '../_helpers/button__classes.js';
 import '../_helpers/title.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
-import '@jetbrains/icons/remove-10px';
+import '@jetbrains/icons/remove-14px';
 import '../_helpers/checkbox.js';
 import '../data-list/selection.js';
 

package/dist/dropdown-menu/dropdown-menu.js

@@ -36,7 +36,7 @@ import '../global/url.js';
 import '../avatar/fallback-avatar.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
-import '@jetbrains/icons/remove-10px';
+import '@jetbrains/icons/remove-14px';
 import '../icon/icon.js';
 import '../icon/icon__constants.js';
 import '../_helpers/icon.js';

package/dist/header/header.js

@@ -56,7 +56,7 @@ import '../_helpers/list.js';
 import '../list/list__item.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
-import '@jetbrains/icons/remove-10px';
+import '@jetbrains/icons/remove-14px';
 import '../global/prop-types.js';
 import '../global/composeRefs.js';
 import '../_helpers/checkbox.js';

package/dist/header/profile.js

@@ -44,7 +44,7 @@ import '../_helpers/list.js';
 import '../list/list__item.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
-import '@jetbrains/icons/remove-10px';
+import '@jetbrains/icons/remove-14px';
 import '../global/prop-types.js';
 import '../global/composeRefs.js';
 import '../_helpers/checkbox.js';

package/dist/header/smart-profile.js

@@ -79,7 +79,7 @@ import '../_helpers/list.js';
 import '../list/list__item.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
-import '@jetbrains/icons/remove-10px';
+import '@jetbrains/icons/remove-14px';
 import '../global/prop-types.js';
 import '../global/composeRefs.js';
 import '../_helpers/checkbox.js';

package/dist/list/list.js

@@ -36,7 +36,7 @@ import '../global/url.js';
 import '../avatar/fallback-avatar.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
-import '@jetbrains/icons/remove-10px';
+import '@jetbrains/icons/remove-14px';
 import '../icon/icon.js';
 import '../icon/icon__constants.js';
 import '../_helpers/icon.js';

package/dist/list/list__item.js

@@ -12,7 +12,7 @@ import '../global/url.js';
 import '../global/dom.js';
 import '../avatar/fallback-avatar.js';
 import '@jetbrains/icons/checkmark-14px';
-import '@jetbrains/icons/remove-10px';
+import '@jetbrains/icons/remove-14px';
 import '../global/prop-types.js';
 import '../global/composeRefs.js';
 import '../_helpers/checkbox.js';

package/dist/list/list__users-groups-source.js

@@ -35,7 +35,7 @@ import '../global/url.js';
 import '../avatar/fallback-avatar.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
-import '@jetbrains/icons/remove-10px';
+import '@jetbrains/icons/remove-14px';
 import '../icon/icon.js';
 import '../icon/icon__constants.js';
 import '../_helpers/icon.js';

package/dist/pager/pager.js

@@ -60,7 +60,7 @@ import '../_helpers/link.js';
 import '../list/list__item.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
-import '@jetbrains/icons/remove-10px';
+import '@jetbrains/icons/remove-14px';
 import '../global/prop-types.js';
 import '../global/composeRefs.js';
 import '../_helpers/checkbox.js';

package/dist/pager-ng/pager-ng.js

@@ -66,7 +66,7 @@ import '../_helpers/list.js';
 import '../list/list__item.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
-import '@jetbrains/icons/remove-10px';
+import '@jetbrains/icons/remove-14px';
 import '../global/prop-types.js';
 import '../global/composeRefs.js';
 import '../_helpers/checkbox.js';

package/dist/popup/position.js

@@ -81,7 +81,7 @@ function verticalOverflow(styles, scrollingCoordinates, attrs) {
   const viewportMinX = scrollingCoordinates.top + attrs.sidePadding;
   const viewportMaxX = scrollingCoordinates.top + containerHeight - attrs.sidePadding;
   const topOverflow = Math.max(viewportMinX - styles.top, 0);
-  const popupHeight = attrs.popup.clientHeight;
+  const popupHeight = attrs.maxHeight && typeof attrs.maxHeight === 'number' ? Math.min(attrs.popup.scrollHeight, attrs.maxHeight) : attrs.popup.scrollHeight;
   const verticalDiff = styles.top + popupHeight - viewportMaxX;
   const bottomOverflow = Math.max(verticalDiff, 0);
   return topOverflow + bottomOverflow;
@@ -169,7 +169,9 @@ function position(attrs) {
     };
     const directionsMatrix = getPositionStyles(popup, anchorRect, anchorLeft, anchorTop, offset);
     if (!autoPositioning || directions.length === 1) {
-      styles = directionsMatrix[directions[0]];
+      styles = {
+        ...directionsMatrix[directions[0]]
+      };
       chosenDirection = directions[0];
     } else {
       const sortedByIncreasingOverflow = directions.
@@ -188,7 +190,9 @@ function position(attrs) {
         const overflowB = verticalOverflow(stylesB, scroll, overflowAttrs) + horizontalOverflow(stylesB, scroll, overflowAttrs);
         return overflowA - overflowB;
       });
-      styles = sortedByIncreasingOverflow[0].styles;
+      styles = {
+        ...sortedByIncreasingOverflow[0].styles
+      };
       chosenDirection = sortedByIncreasingOverflow[0].direction;
     }
     // because of the anchor negative margin top and left also may become negative

package/dist/popup-menu/popup-menu.js

@@ -38,7 +38,7 @@ import '../global/url.js';
 import '../avatar/fallback-avatar.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
-import '@jetbrains/icons/remove-10px';
+import '@jetbrains/icons/remove-14px';
 import '../icon/icon.js';
 import '../icon/icon__constants.js';
 import '../_helpers/icon.js';

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

@@ -54,7 +54,7 @@ import '../global/url.js';
 import '../avatar/fallback-avatar.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
-import '@jetbrains/icons/remove-10px';
+import '@jetbrains/icons/remove-14px';
 import '../global/prop-types.js';
 import '../global/composeRefs.js';
 import '../_helpers/checkbox.js';

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

@@ -33,7 +33,7 @@ import '../global/url.js';
 import '../avatar/fallback-avatar.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
-import '@jetbrains/icons/remove-10px';
+import '@jetbrains/icons/remove-14px';
 import '../icon/icon.js';
 import '../icon/icon__constants.js';
 import '../_helpers/icon.js';

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

@@ -52,7 +52,7 @@ import '../global/url.js';
 import '../avatar/fallback-avatar.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
-import '@jetbrains/icons/remove-10px';
+import '@jetbrains/icons/remove-14px';
 import '../icon/icon.js';
 import '../icon/icon__constants.js';
 import '../_helpers/icon.js';

package/dist/select/select.js

@@ -58,7 +58,7 @@ import '../_helpers/list.js';
 import '../list/list__item.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
-import '@jetbrains/icons/remove-10px';
+import '@jetbrains/icons/remove-14px';
 import '../global/prop-types.js';
 import '../global/composeRefs.js';
 import '../_helpers/checkbox.js';

package/dist/select/select__filter.js

@@ -47,7 +47,7 @@ import '../global/url.js';
 import '../avatar/fallback-avatar.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
-import '@jetbrains/icons/remove-10px';
+import '@jetbrains/icons/remove-14px';
 import '../_helpers/checkbox.js';
 import '../list/list__custom.js';
 import '../global/get-event-key.js';

package/dist/select/select__popup.js

@@ -51,7 +51,7 @@ import '../global/url.js';
 import '../avatar/fallback-avatar.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
-import '@jetbrains/icons/remove-10px';
+import '@jetbrains/icons/remove-14px';
 import '../global/prop-types.js';
 import '../global/composeRefs.js';
 import '../_helpers/checkbox.js';

package/dist/select-ng/select-ng.js

@@ -59,7 +59,7 @@ import '../_helpers/list.js';
 import '../list/list__item.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
-import '@jetbrains/icons/remove-10px';
+import '@jetbrains/icons/remove-14px';
 import '../global/prop-types.js';
 import '../global/composeRefs.js';
 import '../_helpers/checkbox.js';

package/dist/select-ng/select-ng__lazy.js

@@ -55,7 +55,7 @@ import '../_helpers/list.js';
 import '../list/list__item.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
-import '@jetbrains/icons/remove-10px';
+import '@jetbrains/icons/remove-14px';
 import '../global/prop-types.js';
 import '../global/composeRefs.js';
 import '../_helpers/checkbox.js';