@jetbrains/ring-ui 7.0.8 → 7.0.10

package/README.md

@@ -8,6 +8,7 @@ This collection of UI components aims to provide all the necessary building bloc
 ## Try now
 * Try the [codesandbox](https://codesandbox.io/p/sandbox/ring-ui-7-0-demo-z6v6ym), based on `create-react-app` tooling, to see and try the UI components
 * Check out [list of examples](https://jetbrains.github.io/ring-ui/master/index.html) for each component
+* Check out [Ring UI Design Guidelines](http://www.jetbrains.com/help/ring-ui)
 
 ## Installation
 

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/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/list/list.css

@@ -48,20 +48,24 @@
 
   box-sizing: border-box;
 
-  width: 100%;
+  width: calc(100% - 2 * var(--ring-unit));
 
   text-align: left;
   vertical-align: bottom;
   white-space: nowrap;
   text-decoration: none;
 
+  border-radius: var(--ring-border-radius);
+
   outline: none;
 
   font-size: var(--ring-font-size);
+
+  margin-inline: var(--ring-unit);
 }
 
 .item.item {
-  padding: 3px calc(var(--ring-unit) * 2) 5px;
+  padding: 3px var(--ring-unit) 5px;
 
   line-height: calc(var(--ring-unit) * 3);
 }
@@ -160,12 +164,17 @@
 
 /* Override :last-child */
 .hint.hint {
+  width: 100%;
+
   margin-bottom: 0;
 
   border-top: 1px solid var(--ring-line-color);
+  border-radius: 0;
   background-color: var(--ring-sidebar-background-color);
 
   font-size: var(--ring-font-size-smaller);
+  margin-inline: 0;
+  padding-inline: calc(2 * var(--ring-unit));
 }
 
 .action {

package/components/list/list__item.js

@@ -12,7 +12,7 @@ import styles from './list.css';
  * @extends {ReactComponent}
  */
 const RING_UNIT = 8;
-const DEFAULT_PADDING = 16;
+const DEFAULT_PADDING = 8;
 const CHECKBOX_WIDTH = 28;
 export default class ListItem extends PureComponent {
     id = getUID('list-item-');

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/popup/popup.css

@@ -19,6 +19,10 @@
   box-shadow: var(--ring-popup-shadow);
 }
 
+.largeBorderRadius {
+  border-radius: var(--ring-border-radius-large);
+}
+
 .hidden {
   display: none;
 }

package/components/popup/popup.d.ts

@@ -31,6 +31,7 @@ export interface BasePopupProps {
     legacy: boolean;
     withTail?: boolean;
     tailOffset?: number;
+    largeBorderRadius?: boolean;
     anchorElement?: HTMLElement | null | undefined;
     target?: string | Element | null | undefined;
     className?: string | null | undefined;

package/components/popup/popup.js

@@ -256,12 +256,13 @@ export default class Popup extends PureComponent {
         esc: this._onEscPress,
     };
     render() {
-        const { className, style, hidden, attached, keepMounted, client, onMouseDown, onMouseUp, onMouseOver, onMouseOut, onContextMenu, 'data-test': dataTest, } = this.props;
+        const { className, style, hidden, attached, keepMounted, client, onMouseDown, onMouseUp, onMouseOver, onMouseOut, onContextMenu, 'data-test': dataTest, largeBorderRadius, } = this.props;
         const showing = this.state.display === Display.SHOWING;
         const classes = classNames(className, styles.popup, {
             [styles.attached]: attached,
             [styles.hidden]: hidden,
             [styles.showing]: showing,
+            [styles.largeBorderRadius]: largeBorderRadius,
         });
         const direction = (this.state.direction || '').toLowerCase().replace(/[_]/g, '-');
         return (<PopupTargetContext.Consumer>

package/components/popup-menu/popup-menu.d.ts

@@ -27,6 +27,7 @@ export default class PopupMenu<T = unknown> extends Popup<PopupMenuProps<T>> {
     static defaultProps: {
         renderOptimization: boolean;
         closeOnSelect: boolean;
+        largeBorderRadius: boolean;
         shortcuts: boolean;
         hidden: boolean;
         onOutsideClick(): void;

package/components/popup-menu/popup-menu.js

@@ -11,6 +11,7 @@ export default class PopupMenu extends Popup {
         ...Popup.defaultProps,
         renderOptimization: false,
         closeOnSelect: false,
+        largeBorderRadius: true,
     };
     onSelect = (item, event) => {
         if (this.props.closeOnSelect) {

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'}
@@ -328,7 +328,7 @@ export default class SelectPopup extends PureComponent {
                 const list = this.getList(this.props.ringPopupTarget || ringPopupTarget);
                 const bottomLine = this.getBottomLine();
                 const hasContent = filterWithTags || selectAll || list || bottomLine || toolbar || topbar;
-                return (<Popup trapFocus={false} ref={this.popupRef} hidden={hidden || !hasContent} attached={isInputMode} className={classes} dontCloseOnAnchorClick anchorElement={anchorElement} minWidth={minWidth} onCloseAttempt={onCloseAttempt} onOutsideClick={onOutsideClick} directions={directions} top={top} left={left} offset={offset} onMouseDown={this.mouseDownHandler} target={this.props.ringPopupTarget} autoCorrectTopOverflow={false} style={style}>
+                return (<Popup trapFocus={false} ref={this.popupRef} hidden={hidden || !hasContent} attached={isInputMode} className={classes} dontCloseOnAnchorClick anchorElement={anchorElement} minWidth={minWidth} onCloseAttempt={onCloseAttempt} onOutsideClick={onOutsideClick} directions={directions} top={top} left={left} offset={offset} onMouseDown={this.mouseDownHandler} target={this.props.ringPopupTarget} autoCorrectTopOverflow={false} style={style} largeBorderRadius>
               <div dir={dir}>
                 {!hidden && filter && <Shortcuts map={this.shortcutsMap} scope={this.shortcutsScope}/>}
                 {topbar}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "7.0.8",
+  "version": "7.0.10",
   "description": "JetBrains UI library",
   "author": "JetBrains",
   "license": "Apache-2.0",
@@ -104,7 +104,7 @@
     "@storybook/preview-api": "8.4.5",
     "@storybook/react": "8.4.5",
     "@storybook/react-webpack5": "8.4.5",
-    "@storybook/test-runner": "^0.19.1",
+    "@storybook/test-runner": "^0.20.0",
     "@storybook/theming": "8.4.5",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.0.1",
@@ -121,8 +121,8 @@
     "@types/sinon": "^17.0.3",
     "@types/sinon-chai": "^4.0.0",
     "@types/webpack-env": "^1.18.5",
-    "@vitejs/plugin-react": "^4.3.3",
-    "@vitest/eslint-plugin": "^1.1.10",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/eslint-plugin": "^1.1.12",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "acorn": "^8.14.0",
     "axe-playwright": "^2.0.3",
@@ -160,7 +160,7 @@
     "markdown-it": "^14.1.0",
     "merge-options": "^3.0.4",
     "pinst": "^3.0.0",
-    "prettier": "^3.3.3",
+    "prettier": "^3.4.1",
     "raw-loader": "^4.0.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -173,13 +173,13 @@
     "sinon-chai": "^4.0.0",
     "storage-mock": "^2.1.0",
     "storybook": "8.4.5",
-    "stylelint": "^16.10.0",
+    "stylelint": "^16.11.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.15.0",
-    "vitest": "^2.1.5",
+    "typescript-eslint": "^8.16.0",
+    "vitest": "^2.1.6",
     "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": "^5.2.0",
+    "@jetbrains/icons": "^5.3.0",
     "@jetbrains/postcss-require-hover": "^0.1.2",
     "@types/combokeys": "^2.4.9",
     "@types/element-resize-detector": "^1.1.6",