@jetbrains/ring-ui 6.0.40 → 6.0.41

package/components/auth/down-notification.css

@@ -1,7 +1,7 @@
 @import "../global/variables.css";
 
 .title {
-  font-weight: 600;
+  font-weight: var(--ring-font-weight-bold);
 }
 
 .error {

package/components/badge/badge.js

@@ -1,11 +1,14 @@
 import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import deprecate from 'util-deprecate';
 import dataTests from '../global/data-tests';
 import style from './badge.css';
+const warn = deprecate(() => { }, 'Badge is deprecated and will be removed in RingUI 7.0. Use Tag instead.');
 /**
  * @name Badge
  */
+// TODO remove in 7.0
 export default class Badge extends PureComponent {
     static propTypes = {
         gray: PropTypes.bool,
@@ -17,6 +20,7 @@ export default class Badge extends PureComponent {
         'data-test': PropTypes.string
     };
     render() {
+        warn();
         const { 
         // Modifiers
         gray, valid, invalid, disabled, 

package/components/button/button.css

@@ -365,9 +365,9 @@
 }
 
 .dropdownIcon {
-  margin-right: -2px;
+  margin-right: -3px;
 
-  margin-left: 2px;
+  margin-left: 3px;
 
   transition: color var(--ring-ease);
 

package/components/button/button.js

@@ -2,7 +2,7 @@ import { createRef, PureComponent } from 'react';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import chevronDown from '@jetbrains/icons/chevron-10px';
+import chevronDown from '@jetbrains/icons/chevron-down';
 import Icon, { Size } from '../icon/icon';
 import ClickableLink from '../link/clickableLink';
 import { ControlsHeightContext } from '../global/controls-height';

package/components/code/highlight.css

@@ -40,7 +40,7 @@
   & :global(.hljs-type) {
     color: var(--ring-code-keyword-color);
 
-    font-weight: bold;
+    font-weight: var(--ring-font-weight-bold);
   }
 
   & :global(.hljs-name),
@@ -61,7 +61,7 @@
   & :global(.hljs-attr) {
     color: var(--ring-code-field-color);
 
-    font-weight: bold;
+    font-weight: var(--ring-font-weight-bold);
   }
 
   & :global(.hljs-tag) > :global(.hljs-attr),
@@ -82,7 +82,7 @@
   & :global(.hljs-string) {
     color: var(--ring-code-string-color);
 
-    font-weight: bold;
+    font-weight: var(--ring-font-weight-bold);
   }
 
   & :global(.hljs-doctag) {
@@ -107,6 +107,6 @@
   }
 
   & :global(.hljs-strong) {
-    font-weight: bold;
+    font-weight: var(--ring-font-weight-bold);
   }
 }

package/components/date-picker/date-picker.css

@@ -259,7 +259,7 @@
 
   text-transform: capitalize;
 
-  font-weight: bold;
+  font-weight: var(--ring-font-weight-bold);
 
   @supports (flex-basis: 1px) {
     flex-basis: calc(var(--ring-unit) * 12);
@@ -462,7 +462,7 @@
 .today.today {
   position: relative;
 
-  font-weight: bold;
+  font-weight: var(--ring-font-weight-bold);
 }
 
 .today::before {

package/components/editable-heading/editable-heading.css

@@ -101,7 +101,7 @@
   background-color: transparent;
 
   font-family: var(--ring-font-family);
-  font-weight: bold;
+  font-weight: var(--ring-font-weight-bold);
   line-height: 28px;
 
   &::placeholder {

package/components/error-bubble/error-bubble.css

@@ -16,9 +16,8 @@
 
 .errorBubble {
   box-sizing: border-box;
-  min-height: calc(var(--ring-unit) * 3);
-  padding-right: calc(var(--ring-unit) * 2);
-  padding-left: calc(var(--ring-unit) * 2);
+  min-height: calc(var(--ring-unit) * 4);
+  padding: calc(var(--ring-unit) - 1px) calc(var(--ring-unit) * 1.5 - 1px);
 
   white-space: nowrap;
 
@@ -30,13 +29,13 @@
   background: var(--ring-popup-background-color);
   box-shadow: var(--ring-popup-shadow);
 
-  font-size: 12px;
-  line-height: 22px;
+  font-size: var(--ring-font-size-smaller);
+  line-height: var(--ring-line-height-lowest);
 }
 
 .errorBubble::before {
   position: absolute;
-  top: var(--ring-unit);
+  top: calc(var(--ring-unit) * 1.5);
   left: -4px;
 
   display: block;

package/components/form/form.css

@@ -66,7 +66,7 @@
 
   margin-bottom: calc(var(--ring-unit));
 
-  font-weight: bold;
+  font-weight: var(--ring-font-weight-bold);
 }
 
 :global(.ring-form__main-title) {
@@ -145,7 +145,7 @@
 /* End of special fix */
 
 :global(.ring-form__label_title) {
-  font-weight: bold;
+  font-weight: var(--ring-font-weight-bold);
 }
 
 :global(.ring-form__control) {

package/components/global/variables.css

@@ -128,7 +128,7 @@
   --ring-code-tag-background-components: 239, 239, 239;
   --ring-code-tag-background-color: rgb(var(--ring-code-tag-background-components)); /* #efefef */
   --ring-code-tag-color: var(--ring-code-keyword-color);
-  --ring-code-tag-font-weight: bold;
+  --ring-code-tag-font-weight: var(--ring-font-weight-bold);
   --ring-code-field-components: 102, 14, 122;
   --ring-code-field-color: rgb(var(--ring-code-field-components)); /* #660e7a */
   --ring-code-attribute-components: 0, 0, 255;
@@ -144,10 +144,10 @@
   /* Metrics */
   --ring-border-radius: 4px;
   --ring-border-radius-small: 2px;
-  --ring-font-size-larger: 15px;
+  --ring-font-size-larger: 16px;
   --ring-font-size: 14px;
   --ring-font-size-smaller: 12px;
-  --ring-line-height-taller: 21px;
+  --ring-line-height-taller: 24px;
   --ring-line-height: 20px;
   --ring-line-height-lower: 18px;
   --ring-line-height-lowest: 16px;
@@ -162,6 +162,7 @@
     "Courier New",
     Courier,
     monospace;
+  --ring-font-weight-bold: 600;
 
   /* Common z-index-values */
 

package/components/header/services.css

@@ -10,7 +10,7 @@
 }
 
 .active {
-  font-weight: bold;
+  font-weight: var(--ring-font-weight-bold);
 }
 
 .item {

package/components/heading/heading.css

@@ -11,6 +11,8 @@
   &:is(h4) {
     margin-top: var(--ring-line-height);
 
+    font-weight: var(--ring-font-weight-bold);
+
     &:first-child {
       margin-top: 0;
     }
@@ -66,3 +68,7 @@
   letter-spacing: 2px;
   text-transform: uppercase;
 }
+
+.heading.bold {
+  font-weight: var(--ring-font-weight-bold);
+}

package/components/heading/heading.d.ts

@@ -18,8 +18,11 @@ export default Heading;
 export interface H1Props extends HTMLAttributes<HTMLHeadingElement> {
     caps?: boolean | null | undefined;
 }
-declare const H1: ComponentType<H1Props>;
-declare const H2: ComponentType<HTMLAttributes<HTMLHeadingElement>>;
-declare const H3: ComponentType<HTMLAttributes<HTMLHeadingElement>>;
-declare const H4: ComponentType<HTMLAttributes<HTMLHeadingElement>>;
+declare const H1: import("react").NamedExoticComponent<H1Props>;
+declare const H2: import("react").NamedExoticComponent<HTMLAttributes<HTMLHeadingElement>>;
+declare const H3: import("react").NamedExoticComponent<HTMLAttributes<HTMLHeadingElement>>;
+export interface H4Props extends HTMLAttributes<HTMLHeadingElement> {
+    bold?: boolean | null | undefined;
+}
+declare const H4: import("react").NamedExoticComponent<H4Props>;
 export { H1, H2, H3, H4 };

package/components/heading/heading.js

@@ -29,24 +29,22 @@ Heading.propTypes = {
 };
 Heading.Levels = Levels;
 export default Heading;
-function makeHeading(level, useCaps) {
-    const H = memo(({ className, caps, ...restProps }) => {
-        const classes = classNames(className, {
-            [styles.caps]: useCaps && caps
-        });
-        return (<Heading {...restProps} level={level} className={classes}/>);
-    });
-    H.displayName = `H${level}`;
-    H.propTypes = {
-        children: PropTypes.node,
-        className: PropTypes.string,
-        // use only for short h1 headers, no longer than three words
-        caps: PropTypes.bool
-    };
-    return H;
-}
-const H1 = makeHeading(Levels.H1, true);
-const H2 = makeHeading(Levels.H2);
-const H3 = makeHeading(Levels.H3);
-const H4 = makeHeading(Levels.H4);
+const warnCaps = deprecate(() => { }, 'H1 caps prop is deprecated and will be removed in Ring UI 7.0');
+const H1 = memo(function H1({ className, caps, ...restProps }) {
+    if (caps) {
+        warnCaps();
+    }
+    const classes = classNames(className, { [styles.caps]: caps });
+    return <Heading {...restProps} level={Levels.H1} className={classes}/>;
+});
+const H2 = memo(function H2(props) {
+    return <Heading {...props} level={Levels.H2}/>;
+});
+const H3 = memo(function H3(props) {
+    return <Heading {...props} level={Levels.H3}/>;
+});
+const H4 = memo(function H4({ className, bold, ...restProps }) {
+    const classes = classNames(className, { [styles.bold]: bold });
+    return <Heading {...restProps} className={classes} level={Levels.H4}/>;
+});
 export { H1, H2, H3, H4 };

package/components/island/island.css

@@ -51,7 +51,7 @@
 
   font-size: inherit;
 
-  font-weight: bold;
+  font-weight: var(--ring-font-weight-bold);
 }
 
 .narrowIsland .header {

package/components/island-legacy/island-legacy.css

@@ -90,7 +90,7 @@
 
   padding: 0 calc(var(--ring-unit) * 4);
 
-  font-weight: bold;
+  font-weight: var(--ring-font-weight-bold);
 }
 
 :global(.ring-island__content) {

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

@@ -131,7 +131,7 @@
 }
 
 .highlight {
-  font-weight: 600;
+  font-weight: var(--ring-font-weight-bold);
 }
 
 .service {

package/components/sidebar/sidebar.css

@@ -98,7 +98,7 @@
   color: var(--ring-text-color);
 
   font-size: var(--ring-font-size);
-  font-weight: bold;
+  font-weight: var(--ring-font-weight-bold);
 }
 
 :global(.ring-sidebar__section-text) {

package/components/table/table.css

@@ -47,7 +47,7 @@
 }
 
 .headerCell.headerCellSorted {
-  font-weight: bold;
+  font-weight: var(--ring-font-weight-bold);
 }
 
 .headerCell.headerCellSortable {
@@ -81,7 +81,7 @@
   border-bottom: none;
 
   font-size: var(--ring-font-size);
-  font-weight: bold;
+  font-weight: var(--ring-font-weight-bold);
   line-height: var(--ring-line-height-lower);
 }
 

package/components/table-legacy/table-legacy.css

@@ -45,7 +45,7 @@
 }
 
 :global(.ring-table__title.ring-table__title_active) {
-  font-weight: bold;
+  font-weight: var(--ring-font-weight-bold);
 }
 
 :global(.ring-table__title:first-child) {
@@ -203,7 +203,7 @@
 }
 
 :global(.ring-table__column-title) {
-  font-weight: bold;
+  font-weight: var(--ring-font-weight-bold);
 }
 
 :global(.ring-table__column_wide) {

package/components/tabs/tabs.css

@@ -51,18 +51,15 @@
 
   &:hover,
   &:active {
+    color: var(--ring-link-hover-color);
+    outline-style: none;
+    box-shadow: inset 0 -1px 0 0 var(--ring-link-hover-color);
+
     &.selected,
     &.collapsed {
       color: inherit;
       box-shadow: selected-line-shadow var(--ring-text-color);
     }
-
-    &:not(.selected),
-    &:not(.collapsed) {
-      color: var(--ring-link-hover-color);
-      outline-style: none;
-      box-shadow: inset 0 -1px 0 0 var(--ring-link-hover-color);
-    }
   }
 
   &:focus-visible {
@@ -96,7 +93,7 @@
   outline: none;
   box-shadow: selected-line-shadow var(--ring-selected-tab-color);
 
-  font-weight: bold;
+  font-weight: var(--ring-font-weight-bold);
 }
 
 .visible {
@@ -125,7 +122,7 @@
 
   height: 0;
 
-  font-weight: bold;
+  font-weight: var(--ring-font-weight-bold);
 }
 
 .hiddenRegular {

package/components/tag/tag.css

@@ -37,7 +37,7 @@
 }
 
 .withRemove {
-  padding-right: 22px;
+  padding-right: 20px;
 }
 
 .container {
@@ -127,7 +127,7 @@
   position: absolute;
   z-index: 1;
   top: 2px;
-  right: 0;
+  right: 1px;
 
   height: auto;
   padding: 0 calc(var(--ring-unit) / 2);
@@ -140,12 +140,13 @@
 }
 
 .icon {
-  margin-right: 6px;
+  margin-right: 5px;
+  margin-left: -3px;
 
   color: var(--ring-icon-secondary-color);
 
-  & svg {
-    vertical-align: -3px;
+  && svg {
+    vertical-align: -3.5px;
   }
 }
 

package/components/tag/tag.js

@@ -3,10 +3,12 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import closeIcon from '@jetbrains/icons/close-12px';
+import deprecate from 'util-deprecate';
 import Icon from '../icon/icon';
 import Button from '../button/button';
 import { ControlsHeight } from '../global/controls-height';
 import styles from './tag.css';
+const warnAngled = deprecate(() => { }, 'Tag angled prop is deprecated and will be removed in Ring UI 7.0');
 /**
  * @name Tag
  */
@@ -103,6 +105,9 @@ export default class Tag extends PureComponent {
         return null;
     }
     render() {
+        if (this.props.angled) {
+            warnAngled();
+        }
         const classes = classNames('ring-js-shortcuts', styles.tag, {
             [styles.focused]: this.state.focused,
             [styles.disabled]: this.props.disabled,

package/components/text/text.css

@@ -6,16 +6,23 @@
 
 .sizeS {
   font-size: var(--ring-font-size-smaller);
+  line-height: var(--ring-line-height-lowest);
 }
 
 .sizeM {
   font-size: var(--ring-font-size);
+  line-height: var(--ring-line-height);
 }
 
 .sizeL {
   font-size: var(--ring-font-size-larger);
+  line-height: var(--ring-line-height-taller);
 }
 
 .info {
   color: var(--ring-secondary-color);
 }
+
+.bold {
+  font-weight: var(--ring-font-weight-bold);
+}

package/components/text/text.d.ts

@@ -5,6 +5,7 @@ export interface TextProps extends HTMLAttributes<HTMLElement> {
     info?: boolean | null | undefined;
     size?: TextSize;
     'data-test'?: string | null | undefined;
+    bold?: boolean | null | undefined;
 }
 declare const TextSize: Record<string, TextSize>;
 /**

package/components/text/text.js

@@ -19,9 +19,10 @@ export default class Text extends Component {
     };
     static Size = TextSize;
     render() {
-        const { children, className, info, size, ...restProps } = this.props;
+        const { children, className, info, size, bold, ...restProps } = this.props;
         const classes = classNames(styles.text, className, {
             [styles.info]: info,
+            [styles.bold]: bold,
             [styles.sizeS]: size === Text.Size.S,
             [styles.sizeM]: size === Text.Size.M,
             [styles.sizeL]: size === Text.Size.L

package/components/toggle/toggle.css

@@ -5,12 +5,15 @@
 @value timing-function: cubic-bezier(0.23, 1, 0.32, 1);
 
 .toggle {
+  display: flex;
+  align-items: baseline;
+
   cursor: pointer;
 
   &:hover .switch {
-    transition: none;
+    --ring-toggle-background-color: var(--ring-border-hover-color);
 
-    background-color: var(--ring-border-hover-color);
+    transition: none;
   }
 
   &.disabled {
@@ -22,14 +25,16 @@
   margin-left: var(--ring-unit);
 }
 
+.disabled .label {
+  color: var(--ring-disabled-color);
+}
+
 .leftLabel {
   margin-right: var(--ring-unit);
 }
 
 .switchWrapper {
   position: relative;
-
-  display: inline-block;
 }
 
 .input {
@@ -47,13 +52,13 @@
 
 .switch {
   --ring-toggle-item-color: var(--ring-white-text-color);
-  --ring-toggle-background-color: var(--ring-icon-color);
+  --ring-toggle-background-color: var(--ring-borders-color);
   --ring-toggle-border-color: var(--ring-toggle-background-color);
   --ring-switch-border-color: var(--ring-toggle-item-color);
 
   position: relative;
 
-  display: block;
+  display: inline-block;
 
   box-sizing: border-box;
 
@@ -98,18 +103,18 @@
 }
 
 :checked:hover + .switch {
-  background-color: var(--ring-main-hover-color);
+  --ring-toggle-background-color: var(--ring-main-hover-color);
 }
 
 .size16 {
   & .switchWrapper {
     width: calc(var(--ring-unit) * 3);
     height: calc(var(--ring-unit) * 2);
-
-    vertical-align: -3px;
   }
 
   & .switch {
+    vertical-align: -3px;
+
     border-radius: var(--ring-unit);
 
     &::before {
@@ -130,11 +135,11 @@
   & .switchWrapper {
     width: calc(var(--ring-unit) * 3);
     height: 14px;
-
-    vertical-align: -2px;
   }
 
   & .switch {
+    vertical-align: -2px;
+
     border-radius: 7px;
 
     &::before {
@@ -155,11 +160,11 @@
   & .switchWrapper {
     width: calc(var(--ring-unit) * 4);
     height: calc(var(--ring-unit) * 2.5);
-
-    vertical-align: -5px;
   }
 
   & .switch {
+    vertical-align: -5px;
+
     border-radius: calc(var(--ring-unit) * 1.25);
 
     &::before {
@@ -188,11 +193,3 @@
   --ring-toggle-border-color: var(--ring-border-disabled-color);
   --ring-switch-border-color: var(--ring-border-disabled-color);
 }
-
-.paleSwitch.paleSwitch {
-  --ring-toggle-background-color: var(--ring-pale-control-color);
-}
-
-.input:checked + .paleSwitch {
-  --ring-toggle-background-color: var(--ring-border-disabled-color);
-}

package/components/toggle/toggle.d.ts

@@ -10,9 +10,9 @@ export declare const Size: {
   */
 export interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
     size: string;
-    pale?: boolean | null | undefined;
     leftLabel?: ReactNode;
     'data-test'?: string | null | undefined;
+    help?: ReactNode;
 }
 declare class Toggle extends PureComponent<ToggleProps> {
     static propTypes: {
@@ -24,7 +24,6 @@ declare class Toggle extends PureComponent<ToggleProps> {
         defaultChecked: PropTypes.Requireable<boolean>;
         checked: PropTypes.Requireable<boolean>;
         disabled: PropTypes.Requireable<boolean>;
-        pale: PropTypes.Requireable<boolean>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         onTransitionEnd: PropTypes.Requireable<(...args: any[]) => any>;
         size: PropTypes.Requireable<string>;

package/components/toggle/toggle.js

@@ -2,6 +2,7 @@ import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import dataTests from '../global/data-tests';
+import ControlHelp from '../control-help/control-help';
 import styles from './toggle.css';
 export const Size = {
     Size14: styles.size14,
@@ -18,7 +19,6 @@ class Toggle extends PureComponent {
         defaultChecked: PropTypes.bool,
         checked: PropTypes.bool,
         disabled: PropTypes.bool,
-        pale: PropTypes.bool,
         onChange: PropTypes.func,
         onTransitionEnd: PropTypes.func,
         size: PropTypes.oneOf(Object.values(Size)),
@@ -28,18 +28,23 @@ class Toggle extends PureComponent {
         size: Size.Size14
     };
     render() {
-        const { className, children, disabled, pale, title, leftLabel, size = Size.Size16, 'data-test': dataTest, onTransitionEnd, ...restProps } = this.props;
+        const { className, children, disabled, title, leftLabel, size = Size.Size16, 'data-test': dataTest, help, onTransitionEnd, ...restProps } = this.props;
         const classes = classNames(className, size, styles.toggle, disabled && styles.disabled);
         return (<label className={classes} title={title} data-test={dataTests('ring-toggle', dataTest)}>
-        {leftLabel && <span className={styles.leftLabel}>{leftLabel}</span>}
+        {leftLabel && (<span className={styles.leftLabel}>{leftLabel}
+            {help && <ControlHelp className={styles.help}>{help}</ControlHelp>}
+          </span>)}
 
         <span className={styles.switchWrapper}>
           <input data-test="ring-toggle-input" {...restProps} type="checkbox" disabled={disabled} className={styles.input}/>
 
-          <span className={classNames(styles.switch, pale && styles.paleSwitch)} onTransitionEnd={onTransitionEnd}/>
+          <span className={styles.switch} onTransitionEnd={onTransitionEnd}/>
         </span>
 
-        {children && <span className={styles.label}>{children}</span>}
+        {children && (<div className={styles.label}>
+            {children}
+            {help && <ControlHelp className={styles.help}>{help}</ControlHelp>}
+          </div>)}
       </label>);
     }
 }

package/components/user-card/user-card.css

@@ -49,7 +49,7 @@
   margin-right: 4px;
 
   font-size: 16px;
-  font-weight: 600;
+  font-weight: var(--ring-font-weight-bold);
 }
 
 .userLogin {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "6.0.40",
+  "version": "6.0.41",
   "description": "JetBrains UI library",
   "author": "JetBrains",
   "license": "Apache-2.0",
@@ -32,7 +32,7 @@
   },
   "scripts": {
     "apply-resolutions": "npx npm-force-resolutions@0.0.10",
-    "_postinstall": "husky install",
+    "_postinstall": "husky",
     "prepare": "webpack -c .storybook/custom-header/webpack.config.js",
     "prea11y-audit": "playwright install",
     "a11y-audit": "test-storybook --url http://localhost:9999",
@@ -98,7 +98,7 @@
     "@storybook/react-webpack5": "8.1.10",
     "@storybook/test-runner": "^0.18.2",
     "@storybook/theming": "8.1.10",
-    "@testing-library/dom": "^10.2.0",
+    "@testing-library/dom": "^10.3.1",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/chai": "^4.3.16",
@@ -116,10 +116,10 @@
     "@typescript-eslint/parser": "^7.15.0",
     "@vitejs/plugin-react": "^4.3.1",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
-    "acorn": "^8.12.0",
+    "acorn": "^8.12.1",
     "axe-playwright": "^2.0.1",
     "babel-plugin-require-context-hook": "^1.0.0",
-    "caniuse-lite": "^1.0.30001639",
+    "caniuse-lite": "^1.0.30001640",
     "chai": "^5.1.1",
     "chai-as-promised": "^8.0.0",
     "chai-dom": "^1.10.0",