@jetbrains/ring-ui 7.0.6-beta.0 → 7.0.7

package/components/button/button.css

@@ -1,5 +1,7 @@
 @import "../global/variables.css";
 
+@value glyph from "../icon/icon.css";
+
 :root {
   --ring-button-focus-border-color: var(--ring-border-hover-color);
   --ring-button-shadow: inset 0 0 0 1px;
@@ -341,17 +343,20 @@
 }
 
 .dropdownIcon {
-  margin-left: 2px;
-
-  transition: color var(--ring-ease);
-
   .block & {
     margin-top: -1px;
     margin-right: calc(var(--ring-unit) * -0.5);
+    margin-left: 2px;
+
+    transition: color var(--ring-ease);
 
     color: var(--ring-icon-secondary-color);
   }
 
+  .inline & .glyph {
+    vertical-align: -2px;
+  }
+
   .primary & {
     color: unset;
   }
@@ -359,7 +364,7 @@
   line-height: var(--ring-button-icon-line-height);
 }
 
-.button:hover .dropdownIcon {
+.block:hover .dropdownIcon {
   transition: none;
 
   color: var(--ring-main-color);

package/components/button/button.js

@@ -2,6 +2,7 @@ import { createRef, PureComponent } from 'react';
 import * as React from 'react';
 import classNames from 'classnames';
 import chevronDown from '@jetbrains/icons/chevron-down';
+import chevron12pxDown from '@jetbrains/icons/chevron-12px-down';
 import deprecate from 'util-deprecate';
 import Icon, { Size } from '../icon/icon';
 import ClickableLink from '../link/clickableLink';
@@ -37,7 +38,7 @@ export class Button extends PureComponent {
         const content = (<>
         {icon && (<Icon className={classNames(styles.icon, iconClassName)} glyph={icon} size={iconSize} loading={loader && isInline} suppressSizeWarning={iconSuppressSizeWarning}/>)}
         {children}
-        {dropdown && <Icon glyph={chevronDown} className={styles.dropdownIcon}/>}
+        {dropdown && <Icon glyph={isInline ? chevron12pxDown : chevronDown} className={styles.dropdownIcon}/>}
       </>);
         const commonProps = {
             tabIndex: loader ? -1 : 0,

package/components/dialog/dialog.css

@@ -24,6 +24,7 @@
   padding: 0;
 
   border: none;
+  background: transparent;
 }
 
 .container,
@@ -81,14 +82,26 @@
   cursor: pointer;
 }
 
-.clickableOverlay:hover + * .closeIcon {
+.closeIconOutside.closeIconOutside {
   color: var(--ring-icon-hover-color);
 }
 
-.closeButton:hover .closeIcon {
+.clickableOverlay:hover + * .closeIconInside {
   color: var(--ring-icon-hover-color);
 }
 
+.clickableOverlay:hover + * .closeIconOutside {
+  color: var(--ring-main-hover-color);
+}
+
+.closeButton:hover .closeIconInside {
+  color: var(--ring-icon-hover-color);
+}
+
+.closeButton:hover .closeIconOutside {
+  color: var(--ring-main-hover-color);
+}
+
 .clickableOverlay:active + * .closeIcon {
   color: var(--ring-main-color);
 }
@@ -99,16 +112,18 @@
 
 .closeButton.closeButton {
   position: absolute;
+
+  line-height: calc(var(--ring-unit) * 2);
 }
 
 .closeButtonOutside {
-  top: calc(var(--ring-unit) / 2);
+  top: var(--ring-unit);
   right: calc(var(--ring-unit) * -3);
 }
 
 .closeButtonInside {
-  top: calc(var(--ring-unit) * 1.5);
-  right: var(--ring-unit);
+  top: calc(var(--ring-unit) * 2);
+  right: calc(var(--ring-unit) * 2);
 }
 
 .documentWithoutScroll {

package/components/dialog/dialog.js

@@ -122,7 +122,10 @@ export default class Dialog extends PureComponent {
             {showCloseButton && (<Button icon={closeIcon} data-test="ring-dialog-close-button" className={classNames(styles.closeButton, {
                     [styles.closeButtonOutside]: !closeButtonInside,
                     [styles.closeButtonInside]: closeButtonInside,
-                })} iconClassName={styles.closeIcon} onClick={this.onCloseClick} title={closeButtonTitle} aria-label={closeButtonTitle || 'close dialog'}/>)}
+                })} iconClassName={classNames(styles.closeIcon, {
+                    [styles.closeIconOutside]: !closeButtonInside,
+                    [styles.closeIconInside]: closeButtonInside,
+                })} onClick={this.onCloseClick} title={closeButtonTitle} aria-label={closeButtonTitle || 'close dialog'}/>)}
           </AdaptiveIsland>
         </div>
       </>);

package/components/dropdown/anchor.js

@@ -1,11 +1,8 @@
 import { memo } from 'react';
-import chevronDown from '@jetbrains/icons/chevron-10px';
 import classNames from 'classnames';
-import Icon from '../icon/icon';
 import Button from '../button/button';
 import styles from './dropdown.css';
-const Anchor = ({ children, className, ...restProps }) => (<Button data-test-ring-dropdown-anchor text className={classNames(styles.anchor, className)} {...restProps}>
+const Anchor = ({ children, className, ...restProps }) => (<Button data-test-ring-dropdown-anchor inline dropdown className={classNames(styles.anchor, className)} {...restProps}>
     {children}
-    <Icon glyph={chevronDown} className={styles.chevron}/>
   </Button>);
 export default memo(Anchor);

package/components/dropdown/dropdown.css

@@ -8,9 +8,3 @@
   margin-inline: -3px;
   padding-inline: 3px;
 }
-
-.chevron {
-  margin-left: 2px;
-
-  line-height: normal;
-}

package/components/global/variables.css

@@ -152,6 +152,7 @@
   --ring-code-deletion-color: rgb(var(--ring-code-deletion-components)); /* #DFE1E5 */
 
   /* Metrics */
+  --ring-border-radius-large: var(--ring-unit);
   --ring-border-radius: 4px;
   --ring-border-radius-small: 2px;
   --ring-font-size-larger: 16px;
@@ -167,6 +168,7 @@
   --ring-font-family-monospace: Menlo, "Bitstream Vera Sans Mono", "Ubuntu Mono", Consolas, "Courier New", Courier,
     monospace;
   --ring-font-weight-bold: 600;
+  --ring-font-variant-numeric: lining-nums tabular-nums slashed-zero;
 
   /* Common z-index-values */
 

package/components/icon/icon.css

@@ -11,6 +11,7 @@
 
   pointer-events: none;
 
+  /* TODO remove in 8.0 */
   &[width="10"] {
     vertical-align: -1px;
   }

package/components/island/island.css

@@ -8,7 +8,7 @@
   flex-direction: column;
 
   border: 1px solid var(--ring-line-color);
-  border-radius: var(--ring-border-radius);
+  border-radius: var(--ring-border-radius-large);
 
   background-color: var(--ring-content-background-color);
   box-shadow: 0 1px 4px var(--ring-popup-shadow-color);

package/components/markdown/markdown.css

@@ -66,7 +66,7 @@
     padding: 0;
 
     list-style-position: inside;
-    font-variant-numeric: tabular-nums;
+    font-variant-numeric: var(--ring-font-variant-numeric);
   }
 
   & ul {

package/components/panel/panel.js

@@ -8,7 +8,7 @@ export default class Panel extends PureComponent {
     render() {
         const { className, children, ...props } = this.props;
         const classes = classNames(styles.panel, className);
-        return (<div {...props} className={classes}>
+        return (<div data-test="ring-panel" {...props} className={classes}>
         {children}
       </div>);
     }

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

@@ -723,7 +723,7 @@ export default class QueryAssist extends Component {
                 {this.state.query && <span>{this.renderQuery()}</span>}
               </ContentEditable>
 
-              {renderPlaceholder && (<button type="button" className={placeholderStyles} ref={this.placeholderRef} onClick={this.handleCaretMove} data-test="query-assist-placeholder" disabled={this.props.disabled}>
+              {renderPlaceholder && (<button type="button" className={placeholderStyles} ref={this.placeholderRef} onClick={this.handleCaretMove} data-test="query-assist-placeholder" disabled={this.props.disabled} tabIndex={-1}>
                   {this.props.placeholder}
                 </button>)}
 

package/components/table/header-cell.js

@@ -1,7 +1,7 @@
 import { PureComponent } from 'react';
 import classNames from 'classnames';
-import sortableIcon from '@jetbrains/icons/unsorted-10px';
-import sortedIcon from '@jetbrains/icons/chevron-10px';
+import sortableIcon from '@jetbrains/icons/unsorted-12px';
+import sortedIcon from '@jetbrains/icons/chevron-12px-down';
 import Icon from '../icon/icon';
 import dataTests from '../global/data-tests';
 import style from './table.css';

package/components/table/table.css

@@ -6,6 +6,7 @@
   --ring-table-top: -3px;
 
   position: relative;
+  font-variant-numeric: var(--ring-font-variant-numeric);
 }
 
 .table {
@@ -57,10 +58,11 @@
 
 .headerCell .sorter {
   position: absolute;
+  top: 5px;
 
   display: none;
 
-  margin-left: 6px;
+  margin-left: 5px;
 
   user-select: none;
 }
@@ -71,7 +73,7 @@
 
 .sortedUp .icon {
   transform: rotate(180deg);
-  transform-origin: center 53%;
+  transform-origin: center 44%;
 }
 
 .caption {

package/components/tabs/collapsible-more.d.ts

@@ -1,12 +1,12 @@
 import { ReactElement, ReactNode } from 'react';
-import { LinkProps } from '../link/link';
+import { ButtonButtonProps, ContainerProps } from '../button/button';
 import { TabProps } from './tab';
 export interface FakeMoreButtonProps {
     hasActiveChildren: boolean;
     moreClassName?: string | null | undefined;
     moreActiveClassName?: string | null | undefined;
 }
-export declare const AnchorLink: ({ hasActiveChildren, moreClassName, moreActiveClassName, ...restProps }: Omit<LinkProps, "children"> & FakeMoreButtonProps) => import("react").JSX.Element;
+export declare const AnchorLink: ({ hasActiveChildren, moreClassName, moreActiveClassName, ...restProps }: Omit<ContainerProps<ButtonButtonProps>, "children"> & FakeMoreButtonProps) => import("react").JSX.Element;
 export interface MoreButtonProps {
     items: ReactElement<TabProps>[];
     selected?: string | undefined;

package/components/tabs/collapsible-more.js

@@ -1,20 +1,17 @@
 import { memo, useCallback, useMemo } from 'react';
 import classNames from 'classnames';
-import chevronDownIcon from '@jetbrains/icons/chevron-10px';
 import { Directions } from '../popup/popup.consts';
 import PopupMenu, { ListProps } from '../popup-menu/popup-menu';
 import Dropdown from '../dropdown/dropdown';
-import Link from '../link/link';
-import Icon from '../icon/icon';
+import Anchor from '../dropdown/anchor';
 import styles from './tabs.css';
 import getTabTitles from './collapsible-tab';
 import { CustomItem } from './custom-item';
 export const AnchorLink = ({ hasActiveChildren, moreClassName, moreActiveClassName, ...restProps }) => {
     const classnames = classNames(styles.title, hasActiveChildren && styles.selected, hasActiveChildren && moreActiveClassName, moreClassName);
-    return (<Link title={'More'} className={classnames} {...restProps}>
+    return (<Anchor title={'More'} className={classnames} {...restProps}>
       {'More'}
-      <Icon glyph={chevronDownIcon} className={styles.chevron}/>
-    </Link>);
+    </Anchor>);
 };
 const morePopupDirections = [Directions.BOTTOM_CENTER, Directions.BOTTOM_LEFT, Directions.BOTTOM_RIGHT];
 export const MoreButton = memo(({ items, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupItemClassName, morePopupBeforeEnd, }) => {

package/components/tabs/tabs.css

@@ -205,10 +205,6 @@
   text-align: left;
 }
 
-.chevron {
-  padding-left: 4px;
-}
-
 .morePopupBeforeEnd.morePopupBeforeEnd.morePopupBeforeEnd {
   padding: 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "7.0.6-beta.0",
+  "version": "7.0.7",
   "description": "JetBrains UI library",
   "author": "JetBrains",
   "license": "Apache-2.0",
@@ -82,9 +82,9 @@
     "@babel/plugin-syntax-import-assertions": "^7.26.0",
     "@csstools/css-parser-algorithms": "^3.0.4",
     "@csstools/stylelint-no-at-nest-rule": "^4.0.0",
-    "@eslint/compat": "^1.2.2",
-    "@eslint/eslintrc": "^3.1.0",
-    "@eslint/js": "^9.14.0",
+    "@eslint/compat": "^1.2.3",
+    "@eslint/eslintrc": "^3.2.0",
+    "@eslint/js": "^9.15.0",
     "@jetbrains/eslint-config": "^6.0.4",
     "@jetbrains/logos": "3.0.0-canary.734b213.0",
     "@jetbrains/stylelint-config": "^4.0.2",
@@ -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.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/addon-a11y": "8.4.4",
+    "@storybook/addon-docs": "8.4.4",
+    "@storybook/addon-essentials": "8.4.4",
+    "@storybook/addon-themes": "^8.4.4",
+    "@storybook/components": "8.4.4",
     "@storybook/csf": "^0.1.11",
-    "@storybook/manager-api": "8.4.2",
-    "@storybook/preview-api": "8.4.2",
-    "@storybook/react": "8.4.2",
-    "@storybook/react-webpack5": "8.4.2",
+    "@storybook/manager-api": "8.4.4",
+    "@storybook/preview-api": "8.4.4",
+    "@storybook/react": "8.4.4",
+    "@storybook/react-webpack5": "8.4.4",
     "@storybook/test-runner": "^0.19.1",
-    "@storybook/theming": "8.4.2",
+    "@storybook/theming": "8.4.4",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -122,12 +122,12 @@
     "@types/sinon-chai": "^4.0.0",
     "@types/webpack-env": "^1.18.5",
     "@vitejs/plugin-react": "^4.3.3",
-    "@vitest/eslint-plugin": "^1.1.6",
+    "@vitest/eslint-plugin": "^1.1.10",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "acorn": "^8.14.0",
     "axe-playwright": "^2.0.3",
     "babel-plugin-require-context-hook": "^1.0.0",
-    "caniuse-lite": "^1.0.30001679",
+    "caniuse-lite": "^1.0.30001680",
     "chai": "^5.1.2",
     "chai-as-promised": "^8.0.0",
     "chai-dom": "^1.10.0",
@@ -167,19 +167,19 @@
     "react-test-renderer": "^18.3.1",
     "regenerator-runtime": "^0.14.1",
     "rimraf": "^6.0.1",
-    "rollup": "^4.24.4",
+    "rollup": "^4.27.2",
     "rollup-plugin-clear": "^2.0.7",
     "sinon": "^19.0.2",
     "sinon-chai": "^4.0.0",
     "storage-mock": "^2.1.0",
-    "storybook": "8.4.2",
+    "storybook": "8.4.4",
     "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.13.0",
-    "vitest": "^2.1.4",
+    "typescript-eslint": "^8.14.0",
+    "vitest": "^2.1.5",
     "vitest-teamcity-reporter": "^0.3.1",
     "wallaby-webpack": "^3.9.16",
     "webpack": "^5.96.1",
@@ -209,7 +209,7 @@
     "@babel/core": "^7.26.0",
     "@babel/preset-typescript": "^7.26.0",
     "@jetbrains/babel-preset-jetbrains": "^2.4.0",
-    "@jetbrains/icons": "^4.11.0",
+    "@jetbrains/icons": "^5.2.0",
     "@jetbrains/postcss-require-hover": "^0.1.2",
     "@types/combokeys": "^2.4.9",
     "@types/element-resize-detector": "^1.1.6",
@@ -229,17 +229,17 @@
     "es6-error": "^4.1.1",
     "fastdom": "^1.0.12",
     "file-loader": "^6.2.0",
-    "focus-trap": "^7.6.0",
+    "focus-trap": "^7.6.2",
     "highlight.js": "^10.7.2",
     "just-debounce-it": "^3.2.0",
     "memoize-one": "^6.0.0",
-    "postcss": "^8.4.47",
+    "postcss": "^8.4.49",
     "postcss-calc": "^10.0.2",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-font-family-system-ui": "^5.0.0",
     "postcss-loader": "^8.1.1",
     "postcss-modules-values-replace": "^4.2.0",
-    "postcss-preset-env": "^10.0.9",
+    "postcss-preset-env": "^10.1.1",
     "react-movable": "^3.3.1",
     "react-virtualized": "^9.22.5",
     "react-waypoint": "^10.3.0",