@jetbrains/ring-ui 7.0.9 → 7.0.11

package/components/button/button.d.ts

@@ -11,6 +11,9 @@ export interface ButtonBaseProps {
     loader?: boolean | null | undefined;
     primary?: boolean | null | undefined;
     short?: boolean | null | undefined;
+    /**
+     * @deprecated Use inline instead
+     */
     text?: boolean | null | undefined;
     inline?: boolean | null | undefined;
     dropdown?: boolean | null | undefined;

package/components/checkbox/checkbox.css

@@ -1,5 +1,13 @@
 @import "../global/variables.css";
 
+:root {
+  --ring-checkbox-disabled-check-color: var(--ring-white-text-color);
+}
+
+:global(.ring-ui-theme-dark) {
+  --ring-checkbox-disabled-check-color: var(--ring-icon-color);
+}
+
 .checkbox {
   --ring-checkbox-size: 14px;
 
@@ -114,13 +122,13 @@
 
   &[disabled]:checked + .cellWrapper .cell,
   &[disabled]:indeterminate + .cellWrapper .cell {
-    border-color: var(--ring-border-selected-disabled-color);
-    background-color: var(--ring-border-selected-disabled-color);
+    border-color: var(--ring-border-disabled-active-color);
+    background-color: var(--ring-border-disabled-active-color);
   }
 
   &[disabled]:checked + .cellWrapper .check,
   &[disabled]:indeterminate + .cellWrapper .minus {
-    color: var(--ring-disabled-background-color);
+    color: var(--ring-checkbox-disabled-check-color);
   }
 
   &:indeterminate:indeterminate + .cellWrapper .check {

package/components/date-picker/date-picker.js

@@ -160,7 +160,7 @@ export default class DatePicker extends PureComponent {
         });
         return (<Dropdown className={classes} disabled={this.props.disabled} data-test="ring-date-picker" anchor={inline ? (<Link data-test-ring-dropdown-anchor className={styles.anchor} disabled={this.props.disabled ?? false} pseudo>
               {this.getAnchorText()}
-            </Link>) : (<Button data-test-ring-dropdown-anchor className={styles.anchor} text={false} disabled={this.props.disabled ?? false} {...this.props.buttonAttributes}>
+            </Link>) : (<Button data-test-ring-dropdown-anchor className={styles.anchor} inline={false} disabled={this.props.disabled ?? false} {...this.props.buttonAttributes}>
               {anchorContent}
             </Button>)} {...dropdownProps}>
         <PopupComponent className={popupClassName} popupRef={this.popupRef} onClear={clear ? this.clear : null} datePopupProps={{

package/components/global/variables.css

@@ -19,6 +19,8 @@
   --ring-border-disabled-color: rgb(var(--ring-border-disabled-components)); /* #ebecf0 */
   --ring-border-selected-disabled-components: 201, 204, 214;
   --ring-border-selected-disabled-color: rgb(var(--ring-border-selected-disabled-components)); /* #c9ccd6 */
+  --ring-border-disabled-active-components: 171, 213, 246;
+  --ring-border-disabled-active-color: rgb(var(--ring-border-disabled-active-components)); /* #abd5f6 */
   --ring-icon-disabled-components: 211, 213, 219;
   --ring-icon-disabled-color: rgb(var(--ring-icon-disabled-components)); /* #d3d5db */
   --ring-border-hover-components: 160, 189, 248;

package/components/global/variables_dark.css

@@ -15,6 +15,8 @@
   --ring-border-disabled-color: rgb(var(--ring-border-disabled-components)); /* #4E5157 */
   --ring-border-selected-disabled-components: 90, 93, 99;
   --ring-border-selected-disabled-color: rgb(var(--ring-border-selected-disabled-components)); /* #5A5D63 */
+  --ring-border-disabled-active-components: 23, 73, 113;
+  --ring-border-disabled-active-color: rgb(var(--ring-border-disabled-active-components)); /* #174971 */
   --ring-icon-disabled-components: 78, 81, 87;
   --ring-icon-disabled-color: rgb(var(--ring-icon-disabled-components)); /* #4E5157 */
   --ring-border-hover-components: 55, 95, 173;

package/components/message/message.js

@@ -111,7 +111,7 @@ export default class Message extends Component {
                   {(onClose || buttonProps) && (<Button className={styles.gotIt} onClick={onClose} primary {...buttonProps}>
                       {translations?.gotIt ?? translate('gotIt')}
                     </Button>)}
-                  {onDismiss && (<Button onClick={onDismiss} text>
+                  {onDismiss && (<Button onClick={onDismiss} inline>
                       {translations?.dismiss ?? translate('dismiss')}
                     </Button>)}
                 </ThemeProvider>

package/components/radio/radio.css

@@ -106,11 +106,12 @@
 
   /* stylelint-disable-next-line selector-max-specificity */
   &[disabled]:checked + .circle {
-    border-color: var(--ring-border-selected-disabled-color);
+    border-color: var(--ring-border-disabled-active-color);
+    background-color: var(--ring-content-background-color);
 
     /* stylelint-disable-next-line selector-max-specificity */
     &::after {
-      background-color: var(--ring-border-selected-disabled-color);
+      background-color: var(--ring-border-disabled-active-color);
     }
   }
 

package/components/select/select.js

@@ -411,7 +411,7 @@ export default class Select extends Component {
             separator: reset.separator,
             key: reset.label,
             rgItemType: List.ListProps.Type.CUSTOM,
-            template: (<Button text className={styles.button} data-test="ring-select-reset-tags-button" height={ControlsHeight.S}>
+            template: (<Button inline className={styles.button} data-test="ring-select-reset-tags-button" height={ControlsHeight.S}>
           {reset.label}
         </Button>),
             glyph: reset.glyph,
@@ -486,7 +486,7 @@ export default class Select extends Component {
                 [styles.toolbar]: Boolean(this.state.addButton || renderBottomToolbar),
             })} data-test="ring-select-toolbar">
         {renderBottomToolbar && renderBottomToolbar()}
-        {this.state.addButton && (<Button text delayed={delayed} className={classNames(styles.button, styles.buttonSpaced)} onClick={this.addHandler} data-test="ring-select-toolbar-button">
+        {this.state.addButton && (<Button inline delayed={delayed} className={classNames(styles.button, styles.buttonSpaced)} onClick={this.addHandler} data-test="ring-select-toolbar-button">
             {prefix ? `${prefix} ${label}` : label}
           </Button>)}
         {hint && <List.ListHint label={hint} data-test="ring-select-toolbar-hint"/>}

package/components/select/select__popup.js

@@ -259,7 +259,7 @@ export default class SelectPopup extends PureComponent {
         const multiple = this.props.multiple;
         const activeFilters = this.props.data.filter(item => !item.disabled);
         return (Array.isArray(this.props.selected) && (<div className={styles.selectAll}>
-          {activeFilters.length === 0 ? (<span />) : (<Button text inline onClick={this.handleSelectAll}>
+          {activeFilters.length === 0 ? (<span />) : (<Button inline onClick={this.handleSelectAll}>
               {activeFilters.length !== this.props.selected.length
                     ? multiple.selectAllLabel || 'Select all'
                     : multiple.deselectAllLabel || 'Deselect all'}

package/components/slider/slider.css

@@ -117,7 +117,7 @@
   }
 
   &.disabled {
-    background-color: var(--ring-border-selected-disabled-color);
+    background-color: var(--ring-border-disabled-active-color);
   }
 }
 
@@ -171,10 +171,10 @@
 
   &.disabled {
     color: var(--ring-slider-tag-disabled-text-color);
-    background-color: var(--ring-border-selected-disabled-color);
+    background-color: var(--ring-border-disabled-active-color);
 
     &::after {
-      border-top: 3px solid var(--ring-border-selected-disabled-color);
+      border-top: 3px solid var(--ring-border-disabled-active-color);
     }
   }
 }

package/components/toggle/toggle.css

@@ -190,7 +190,7 @@
 
 /* stylelint-disable-next-line selector-max-specificity */
 .input:checked[disabled] + .switch {
-  --ring-toggle-background-color: var(--ring-border-selected-disabled-color);
+  --ring-toggle-background-color: var(--ring-border-disabled-active-color);
 }
 
 /* stylelint-disable-next-line selector-max-specificity */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "7.0.9",
+  "version": "7.0.11",
   "description": "JetBrains UI library",
   "author": "JetBrains",
   "license": "Apache-2.0",