@jetbrains/ring-ui 7.0.0-beta.15 → 7.0.0-beta.16

package/components/data-list/data-list.mock.js

@@ -1,5 +1,5 @@
 import Link from '../link/link';
-import Badge from '../badge/badge';
+import Tag from '../tag/tag';
 const items = [
     {
         id: 1,
@@ -58,7 +58,7 @@ const items = [
                 title: (<span>
             <Link href="#">JetProfile</Link>
             <span> </span>
-            <Badge gray>duplicate</Badge>
+            <Tag>duplicate</Tag>
           </span>),
             },
             {
@@ -160,7 +160,7 @@ const items = [
         title: (<span>
         <strong>Developer</strong>
         <span> in 57 projects </span>
-        <Badge>team role</Badge>
+        <Tag>team role</Tag>
       </span>),
         items: [
             {
@@ -198,7 +198,7 @@ export const moreItems = [
         title: (<span>
         <Link href="#">More item 1</Link>
         <span> </span>
-        <Badge gray>duplicate</Badge>
+        <Tag>duplicate</Tag>
       </span>),
     },
     {
@@ -208,7 +208,7 @@ export const moreItems = [
         title: (<span>
         <Link href="#">More item 2</Link>
         <span> </span>
-        <Badge gray>duplicate</Badge>
+        <Tag>duplicate</Tag>
       </span>),
     },
 ];

package/components/tag/tag.d.ts

@@ -7,7 +7,7 @@ export interface TagRenderProps extends HTMLAttributes<HTMLElement> {
     'data-test': string;
 }
 export interface TagProps {
-    onRemove: (event: React.MouseEvent<HTMLElement>) => void;
+    onRemove?: ((event: React.MouseEvent<HTMLElement>) => void) | null;
     onClick: (event: React.MouseEvent<HTMLElement>) => void;
     readOnly: boolean;
     disabled: boolean;

package/components/tag/tag.js

@@ -11,7 +11,6 @@ import styles from './tag.css';
  */
 export default class Tag extends PureComponent {
     static defaultProps = {
-        onRemove: () => { },
         onClick: () => { },
         readOnly: false,
         disabled: false,
@@ -77,7 +76,7 @@ export default class Tag extends PureComponent {
         return null;
     }
     renderRemoveIcon() {
-        if (!this.props.readOnly) {
+        if (!this.props.readOnly && this.props.onRemove) {
             return (<Button title="Remove" icon={closeIcon} data-test="ring-tag-remove" className={styles.remove} iconClassName={styles.removeIcon} onClick={this.props.onRemove} style={{ '--ring-icon-secondary-color': this.props.textColor }} height={ControlsHeight.M}/>);
         }
         return null;
@@ -86,7 +85,7 @@ export default class Tag extends PureComponent {
         const classes = classNames('ring-js-shortcuts', styles.tag, {
             [styles.focused]: this.state.focused,
             [styles.disabled]: this.props.disabled,
-            [styles.withRemove]: !this.props.readOnly,
+            [styles.withRemove]: !this.props.readOnly && this.props.onRemove,
         }, this.props.className);
         const { backgroundColor, textColor, render } = this.props;
         return (<span className={styles.container}>

package/components/tags-list/tags-list.d.ts

@@ -24,8 +24,8 @@ export default class TagsList<T extends TagType> extends Component<TagsListProps
         customTagComponent: null;
         canNotBeEmpty: boolean;
         disabled: boolean;
-        handleClick: typeof noop;
-        handleRemove: typeof noop;
+        handleClick: () => typeof noop;
+        handleRemove: () => typeof noop;
     };
     renderTag(tag: T, focusTag: boolean): React.JSX.Element;
     render(): React.JSX.Element;

package/components/tags-list/tags-list.js

@@ -11,8 +11,8 @@ export default class TagsList extends Component {
         customTagComponent: null,
         canNotBeEmpty: false,
         disabled: false,
-        handleClick: noop,
-        handleRemove: noop,
+        handleClick: () => noop,
+        handleRemove: () => noop,
     };
     renderTag(tag, focusTag) {
         const TagComponent = this.props.customTagComponent || Tag;

package/components/user-card/card.js

@@ -5,9 +5,10 @@ import copyIcon from '@jetbrains/icons/copy';
 import Avatar, { Size as AvatarSize } from '../avatar/avatar';
 import Link from '../link/link';
 import clipboard from '../clipboard/clipboard';
-import badgeStyles from '../badge/badge.css';
+import Tag from '../tag/tag';
 import Icon, { Size as IconSize } from '../icon/icon';
 import { I18nContext } from '../i18n/i18n-context';
+import Tooltip from '../tooltip/tooltip';
 import styles from './user-card.css';
 export default class UserCard extends PureComponent {
     static contextType = I18nContext;
@@ -39,9 +40,9 @@ export default class UserCard extends PureComponent {
                     ? (translations?.online ?? translate('online'))
                     : (translations?.offline ?? translate('offline'))}/>)}
                 {!!info && <span className={styles.userNameInfo}>{info}</span>}
-                {user.banned && (<span className={classNames(badgeStyles.badge, badgeStyles.invalid)} title={user.banReason}>
-                    {translations?.banned ?? translate('banned')}
-                  </span>)}
+                {user.banned && (<Tooltip title={user.banReason}>
+                    <Tag className={styles.banLabel}>{translations?.banned ?? translate('banned')}</Tag>
+                  </Tooltip>)}
               </div>
               <div className={styles.userLogin}>{user.login}</div>
               {user.email && (<span className={styles.userEmailWrapper}>

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

@@ -106,6 +106,10 @@
   margin-bottom: 3px;
 }
 
+.banLabel {
+  color: var(--ring-error-color);
+}
+
 .userActiveStatus {
   display: inline-block;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "7.0.0-beta.15",
+  "version": "7.0.0-beta.16",
   "description": "JetBrains UI library",
   "author": "JetBrains",
   "license": "Apache-2.0",
@@ -94,18 +94,18 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-replace": "^6.0.1",
-    "@storybook/addon-a11y": "8.4.1",
-    "@storybook/addon-docs": "8.4.1",
-    "@storybook/addon-essentials": "8.4.1",
-    "@storybook/addon-themes": "^8.4.1",
-    "@storybook/components": "8.4.1",
+    "@storybook/addon-a11y": "8.4.2",
+    "@storybook/addon-docs": "8.4.2",
+    "@storybook/addon-essentials": "8.4.2",
+    "@storybook/addon-themes": "^8.4.2",
+    "@storybook/components": "8.4.2",
     "@storybook/csf": "^0.1.11",
-    "@storybook/manager-api": "8.4.1",
-    "@storybook/preview-api": "8.4.1",
-    "@storybook/react": "8.4.1",
-    "@storybook/react-webpack5": "8.4.1",
+    "@storybook/manager-api": "8.4.2",
+    "@storybook/preview-api": "8.4.2",
+    "@storybook/react": "8.4.2",
+    "@storybook/react-webpack5": "8.4.2",
     "@storybook/test-runner": "^0.19.1",
-    "@storybook/theming": "8.4.1",
+    "@storybook/theming": "8.4.2",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -145,10 +145,10 @@
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-storybook": "^0.10.2",
+    "eslint-plugin-storybook": "^0.11.0",
     "events": "^3.3.0",
     "glob": "^11.0.0",
-    "globals": "^15.11.0",
+    "globals": "^15.12.0",
     "html-webpack-plugin": "^5.6.3",
     "http-server": "^14.1.1",
     "husky": "^9.1.6",
@@ -172,13 +172,13 @@
     "sinon": "^19.0.2",
     "sinon-chai": "^4.0.0",
     "storage-mock": "^2.1.0",
-    "storybook": "8.4.1",
+    "storybook": "8.4.2",
     "stylelint": "^16.10.0",
     "svg-inline-loader": "^0.8.2",
     "teamcity-service-messages": "^0.1.14",
     "terser-webpack-plugin": "^5.3.10",
     "typescript": "~5.6.3",
-    "typescript-eslint": "^8.12.2",
+    "typescript-eslint": "^8.13.0",
     "vitest": "^2.1.4",
     "vitest-teamcity-reporter": "^0.3.1",
     "wallaby-webpack": "^3.9.16",

package/components/badge/badge.css

@@ -1,42 +0,0 @@
-@import "../global/variables.css";
-
-.badge {
-  display: inline-block;
-
-  box-sizing: border-box;
-  height: 20px;
-  padding: 0 var(--ring-unit);
-
-  cursor: default;
-
-  vertical-align: baseline;
-
-  color: var(--ring-secondary-color);
-  border: 1px var(--ring-line-color) solid;
-  border-radius: var(--ring-border-radius);
-  background-color: var(--ring-content-background-color);
-
-  font-size: var(--ring-font-size-smaller);
-  font-weight: normal;
-  font-style: normal;
-  line-height: 17px;
-
-  &.gray {
-    color: var(--ring-text-color);
-    background-color: var(--ring-tag-background-color);
-  }
-
-  &.valid {
-    color: var(--ring-success-color);
-  }
-
-  &.invalid {
-    color: var(--ring-error-color);
-  }
-
-  &.disabled {
-    /* Deprecated: duplicates invalid */
-
-    color: var(--ring-error-color);
-  }
-}

package/components/badge/badge.d.ts

@@ -1,14 +0,0 @@
-import { PureComponent, HTMLAttributes } from 'react';
-export interface BadgeProps extends HTMLAttributes<HTMLElement> {
-    gray?: boolean | null | undefined;
-    valid?: boolean | null | undefined;
-    invalid?: boolean | null | undefined;
-    disabled?: boolean | null | undefined;
-    'data-test'?: string | null | undefined;
-}
-/**
- * @name Badge
- */
-export default class Badge extends PureComponent<BadgeProps> {
-    render(): import("react").JSX.Element;
-}

package/components/badge/badge.js

@@ -1,26 +0,0 @@
-import { PureComponent } from 'react';
-import classNames from 'classnames';
-import dataTests from '../global/data-tests';
-import style from './badge.css';
-/**
- * @name Badge
- */
-// TODO remove in 7.0
-export default class Badge extends PureComponent {
-    render() {
-        const { 
-        // Modifiers
-        gray, valid, invalid, disabled, 
-        // Props
-        className, children, 'data-test': dataTest, ...props } = this.props;
-        const classes = classNames(style.badge, className, {
-            [style.gray]: gray,
-            [style.valid]: valid,
-            [style.invalid]: invalid,
-            [style.disabled]: disabled,
-        });
-        return (<span {...props} data-test={dataTests('ring-badge', dataTest)} className={classes}>
-        {children}
-      </span>);
-    }
-}