@jetbrains/ring-ui 4.1.12 → 5.0.0-beta.11

package/CHANGELOG.md

@@ -1,3 +1,57 @@
+## [5.0.0]
+
+### BREAKING CHANGES
+- Design of some components is changed, see [RG-2156](https://youtrack.jetbrains.com/issue/RG-2156). By default, controls (buttons, inputs etc.) have 28px height. To bring back the old compact 24px height, wrap your app into `ControlsHeightContext.Provider`:
+  ```js
+  import {ControlsHeight, ControlsHeightContext} from '@jetbrains/ring-ui/components/global/controls-height';
+
+  <ControlsHeightContext.Provider value={ControlsHeight.S}>
+    <App />
+  </ControlsHeightContext.Provider>
+  ```
+- Input: removed `compact` and `renderUnderline` props
+- Select: removed `Type.MATERIAL`
+- Toggle: added `Size.Size14` which is the new default
+- Button Group: caption should be pllaced outside of the group
+  ```
+  // Before
+  <ButtonGroup>
+    <Caption>Side:</Caption>
+    <Button>Left</Button>
+    <Button>Right</Button>
+  </ButtonGroup>
+  
+  // After
+  <>
+    <Caption>Side:</Caption>
+    <ButtonGroup>
+      <Button>Left</Button>
+      <Button>Right</Button>
+    </ButtonGroup>
+  </>
+  ```
+- Components no longer accept `theme` prop, themes are managed using CSS Custom Properties instead. To apply a theme to your app or some part of it, wrap it into `ThemeProvider`:
+  ```js
+  import Theme, {ThemeProvider} from '@jetbrains/ring-ui/components/global/theme';
+
+  <ThemeProvider theme={Theme.DARK}>{children}</ThemeProvider>
+  ```
+  You can also pass `Theme.AUTO` to use the user-defined system theme.
+  The only exceptions are the components that provide dark context by default: Alert, Header, Message. Those still accept a `theme` prop.
+- `--ring-dark-*` CSS custom properties are removed, `--ring-dark-text-color` is renamed to `--ring-white-text-color`
+- The codebase has migrated to TypeScript
+- `react-markdown` has been updated to v7, which affects the props of `Markdown` component. The most notable change is replacing `source` with `children`:
+  ```js
+  // before
+  <Markdown source="some markdown" />
+  
+  // after
+  <Markdown>some markdown</Markdown>
+  ```
+  See `react-markdown`'s [changelog](https://github.com/remarkjs/react-markdown/blob/main/changelog.md#600---2021-04-15) for other changes
+- Removed `core-js@2` support
+- Removed `webpack@4` support
+
 ## [4.1.0]
 
 ### Pre-built version

package/README.md

@@ -37,17 +37,6 @@ export const Demo = () => {
 
 The bundle size will depend on the amount of components you imported.
 
-### Generating app (deprecated)
-
-1. Install Yeoman and Ring UI generator: `npm install -g yo@next-4 @jetbrains/generator-ring-ui`
-2. Go to the root directory of your project (create one if necessary), run `yo @jetbrains/ring-ui` and enter the name of the project. Then run `npm install` to install all the necessary npm dependencies.
-3. Your project is ready to be developed. The following commands are available:
-  - `npm start` to run a local development server
-  - `npm test` to launch karma tests
-  - `npm run lint` to lint your code
-  - `npm run build` to build a production bundle
-  - `npm run create-component` to create a new component template with styles and tests
-
 ### Building Ring UI from source via Webpack
 
 In case you have complex build, and you want to compile RingUI sources together with your sources

package/babel.config.js

@@ -1,25 +1,15 @@
 const browserslist = require('browserslist');
-const deprecate = require('util-deprecate');
-
-const coreJsVersion = process.env.RING_UI_COREJS_VERSION ||
-  require('core-js/package.json').version;
-
-const isDeprecatedCoreJS = coreJsVersion.startsWith('2');
 
 module.exports = function config(api) {
   api.cache(true);
 
-  if (isDeprecatedCoreJS) {
-    // TODO remove in 5.0
-    deprecate(() => null, `Compiling Ring UI with deprecated Core JS version "${coreJsVersion}". Consider updating to 3rd.`)();
-  }
-
   return {
     presets: [
       ['@jetbrains/babel-preset-jetbrains', {
+        typeScript: true,
         angular: true,
         useBuiltIns: 'usage',
-        corejs: isDeprecatedCoreJS ? '2' : '3'
+        corejs: '3'
       }]
     ],
     plugins: [

package/components/alert/alert.css

@@ -1,5 +1,6 @@
 @import "../global/variables.css";
 
+@value link from "../link/link.css";
 @value unit from "../global/global.css";
 @value animation-duration: 300ms;
 @value animation-easing: ease-out;
@@ -24,7 +25,7 @@
 
   border-radius: var(--ring-border-radius);
   background-color: var(--ring-message-background-color);
-  box-shadow: 0 2px 16px var(--ring-popup-shadow-color);
+  box-shadow: var(--ring-popup-shadow);
 
   font-size: var(--ring-font-size);
   line-height: calc(unit * 5);
@@ -37,7 +38,7 @@
 .error {
   word-wrap: break-word;
 
-  color: var(--ring-error-color);
+  color: var(--ring-icon-error-color);
 }
 
 .icon {
@@ -53,7 +54,7 @@
 
   white-space: normal;
 
-  color: var(--ring-dark-text-color);
+  color: var(--ring-active-text-color);
 
   line-height: 20px;
 
@@ -88,19 +89,8 @@
   margin: calc(unit / 2);
   padding: unit;
 
-  cursor: pointer;
-
-  color: var(--ring-dark-secondary-color);
-  border: none;
-  background: transparent;
-
   font-size: 0;
   line-height: 0;
-
-  &:hover,
-  &:focus {
-    color: var(--ring-link-hover-color);
-  }
 }
 
 @keyframes show {

package/components/alert/alert.d.ts

@@ -0,0 +1,113 @@
+import React, { PureComponent, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import Theme from '../global/theme';
+export declare const ANIMATION_TIME = 500;
+/**
+ * @name Alert
+ */
+/**
+ * List of available alert types.
+ * @enum {string}
+ */
+export declare enum AlertType {
+    ERROR = "error",
+    MESSAGE = "message",
+    SUCCESS = "success",
+    WARNING = "warning",
+    LOADING = "loading"
+}
+export interface AlertProps {
+    theme: Theme;
+    timeout: number;
+    onCloseRequest: ((event?: React.MouseEvent<HTMLElement>) => void);
+    onClose: (() => void);
+    isShaking: boolean;
+    isClosing: boolean;
+    inline: boolean;
+    showWithAnimation: boolean;
+    closeable: boolean;
+    type: AlertType;
+    children?: ReactNode;
+    className?: string | null | undefined;
+    captionClassName?: string | null | undefined;
+    closeButtonClassName?: string | null | undefined;
+    'data-test'?: string | null | undefined;
+}
+interface State {
+    height: number | null;
+}
+/**
+ * @constructor
+ * @name Alert
+ * @extends {ReactComponent}
+ */
+/**
+ * **Alert** is a component for displaying contextual notifications. If you want to display a stack of notifications, use **Alerts** instead.
+ */
+export default class Alert extends PureComponent<AlertProps, State> {
+    static propTypes: {
+        timeout: PropTypes.Requireable<number>;
+        /**
+         * Fires when alert starts closing if timeout is out or user clicks "Close" button
+         */
+        onCloseRequest: PropTypes.Requireable<(...args: any[]) => any>;
+        onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        isShaking: PropTypes.Requireable<boolean>;
+        isClosing: PropTypes.Requireable<boolean>;
+        /**
+         * Whether an alert is rendered inside an **Alerts** container
+         * or standalone.
+         */
+        inline: PropTypes.Requireable<boolean>;
+        showWithAnimation: PropTypes.Requireable<boolean>;
+        closeable: PropTypes.Requireable<boolean>;
+        type: PropTypes.Requireable<AlertType>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+        captionClassName: PropTypes.Requireable<string>;
+        closeButtonClassName: PropTypes.Requireable<string>;
+        'data-test': PropTypes.Requireable<string>;
+    };
+    /** @override */
+    static defaultProps: {
+        theme: Theme;
+        closeable: boolean;
+        showWithAnimation: boolean;
+        type: AlertType;
+        inline: boolean;
+        isClosing: boolean;
+        isShaking: boolean;
+        timeout: number;
+        onClose: () => void;
+        onCloseRequest: () => void;
+    };
+    state: {
+        height: null;
+    };
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    componentWillUnmount(): void;
+    node?: HTMLDivElement | null;
+    hideTimeout?: number;
+    static Type: typeof AlertType;
+    closeRequest: (event: React.MouseEvent<HTMLElement>) => void;
+    startCloseAnimation: () => void;
+    private _close;
+    /**
+     * @param {SyntheticEvent} evt
+     * @private
+     */
+    private _handleCaptionsLinksClick;
+    /**
+     * @private
+     */
+    private _getCaption;
+    /**
+     * @private
+     * @return {XML|string}
+     */
+    private _getIcon;
+    storeAlertRef: (node: HTMLDivElement | null) => void;
+    render(): JSX.Element;
+}
+export { default as Container } from './container';

package/components/alert/alert.js

@@ -1,57 +1,51 @@
-import React, {PureComponent} from 'react';
+import React, { PureComponent } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-
 import exceptionIcon from '@jetbrains/icons/exception';
 import checkmarkIcon from '@jetbrains/icons/checkmark';
 import warningIcon from '@jetbrains/icons/warning';
 import closeIcon from '@jetbrains/icons/close';
-
-import Icon from '../icon/icon';
+import Icon, { Color } from '../icon/icon';
 import Loader from '../loader-inline/loader-inline';
-import {getRect} from '../global/dom';
+import { getRect } from '../global/dom';
 import dataTests from '../global/data-tests';
-
+import Button from '../button/button';
+import Theme, { ThemeProvider } from '../global/theme';
 import styles from './alert.css';
-
 export const ANIMATION_TIME = 500;
-
 /**
  * @name Alert
  */
-
 /**
  * List of available alert types.
  * @enum {string}
  */
-const Type = {
-  ERROR: 'error',
-  MESSAGE: 'message',
-  SUCCESS: 'success',
-  WARNING: 'warning',
-  LOADING: 'loading'
-};
-
+export var AlertType;
+(function (AlertType) {
+    AlertType["ERROR"] = "error";
+    AlertType["MESSAGE"] = "message";
+    AlertType["SUCCESS"] = "success";
+    AlertType["WARNING"] = "warning";
+    AlertType["LOADING"] = "loading";
+})(AlertType || (AlertType = {}));
 /**
  * Lookup table of alert type to icon modifier.
- * @type {Object.<Type, string>}
+ * @type {Object.<AlertType, string>}
  */
 const TypeToIcon = {
-  [Type.ERROR]: exceptionIcon,
-  [Type.SUCCESS]: checkmarkIcon,
-  [Type.WARNING]: warningIcon
+    [AlertType.ERROR]: exceptionIcon,
+    [AlertType.SUCCESS]: checkmarkIcon,
+    [AlertType.WARNING]: warningIcon
 };
-
 /**
  * Lookup table of alert type to icon color.
- * @type {Object.<Type, Icon.Color>}
+ * @type {Object.<AlertType, Icon.Color>}
  */
 const TypeToIconColor = {
-  [Type.ERROR]: Icon.Color.RED,
-  [Type.SUCCESS]: Icon.Color.GREEN,
-  [Type.WARNING]: Icon.Color.WHITE
+    [AlertType.ERROR]: Color.RED,
+    [AlertType.SUCCESS]: Color.GREEN,
+    [AlertType.WARNING]: Color.WHITE
 };
-
 /**
  * @constructor
  * @name Alert
@@ -61,182 +55,132 @@ const TypeToIconColor = {
  * **Alert** is a component for displaying contextual notifications. If you want to display a stack of notifications, use **Alerts** instead.
  */
 export default class Alert extends PureComponent {
-  static propTypes = {
-    timeout: PropTypes.number,
+    static propTypes = {
+        timeout: PropTypes.number,
+        /**
+         * Fires when alert starts closing if timeout is out or user clicks "Close" button
+         */
+        onCloseRequest: PropTypes.func,
+        onClose: PropTypes.func,
+        isShaking: PropTypes.bool,
+        isClosing: PropTypes.bool,
+        /**
+         * Whether an alert is rendered inside an **Alerts** container
+         * or standalone.
+         */
+        inline: PropTypes.bool,
+        showWithAnimation: PropTypes.bool,
+        closeable: PropTypes.bool,
+        type: PropTypes.oneOf(Object.values(AlertType)),
+        children: PropTypes.node,
+        className: PropTypes.string,
+        captionClassName: PropTypes.string,
+        closeButtonClassName: PropTypes.string,
+        'data-test': PropTypes.string
+    };
+    /** @override */
+    static defaultProps = {
+        theme: Theme.DARK,
+        closeable: true,
+        showWithAnimation: true,
+        type: AlertType.MESSAGE,
+        inline: true,
+        isClosing: false,
+        isShaking: false,
+        timeout: 0,
+        onClose: () => { },
+        onCloseRequest: () => { }
+    };
+    state = {
+        height: null
+    };
+    componentDidMount() {
+        if (this.props.timeout > 0) {
+            this.hideTimeout = window.setTimeout(this.closeRequest, this.props.timeout);
+        }
+    }
+    componentDidUpdate() {
+        if (this.props.isClosing) {
+            this._close();
+        }
+    }
+    componentWillUnmount() {
+        clearTimeout(this.hideTimeout);
+    }
+    node;
+    hideTimeout;
+    static Type = AlertType;
+    closeRequest = (event) => {
+        this.startCloseAnimation();
+        return this.props.onCloseRequest(event);
+    };
+    startCloseAnimation = () => {
+        const height = getRect(this.node).height;
+        this.setState({ height });
+    };
+    _close() {
+        this.startCloseAnimation();
+        setTimeout(() => {
+            this.props.onClose();
+        }, ANIMATION_TIME);
+    }
     /**
-     * Fires when alert starts closing if timeout is out or user clicks "Close" button
+     * @param {SyntheticEvent} evt
+     * @private
      */
-    onCloseRequest: PropTypes.func,
-    onClose: PropTypes.func,
-    isShaking: PropTypes.bool,
-    isClosing: PropTypes.bool,
+    _handleCaptionsLinksClick = (evt) => {
+        if (evt.target instanceof Element && evt.target.matches('a')) {
+            this.closeRequest(evt);
+        }
+    };
     /**
-     * Whether an alert is rendered inside an **Alerts** container
-     * or standalone.
+     * @private
      */
-    inline: PropTypes.bool,
-    showWithAnimation: PropTypes.bool,
-    closeable: PropTypes.bool,
-    type: PropTypes.oneOf(Object.values(Type)),
-
-    children: PropTypes.node,
-    className: PropTypes.string,
-    captionClassName: PropTypes.string,
-    closeButtonClassName: PropTypes.string,
-    'data-test': PropTypes.string
-  };
-
-  /** @override */
-  static defaultProps = {
-    closeable: true,
-    showWithAnimation: true,
-    type: Type.MESSAGE,
-    inline: true,
-    isClosing: false,
-    isShaking: false,
-    timeout: 0,
-    onClose: () => {},
-    onCloseRequest: () => {}
-  };
-
-  state = {
-    height: null
-  };
-
-  componentDidMount() {
-    if (this.props.timeout > 0) {
-      this.hideTimeout = setTimeout(this.closeRequest, this.props.timeout);
-    }
-  }
-
-  componentDidUpdate() {
-    if (this.props.isClosing) {
-      this._close();
-    }
-  }
-
-  componentWillUnmount() {
-    clearTimeout(this.hideTimeout);
-  }
-
-  static Type = Type;
-
-  closeRequest = (...args) => {
-    this.startCloseAnimation();
-    return this.props.onCloseRequest(...args);
-  };
-
-  startCloseAnimation = () => {
-    const height = getRect(this.node).height;
-    this.setState({height});
-  };
-
-  _close() {
-    this.startCloseAnimation();
-    setTimeout(() => {
-      this.props.onClose();
-    }, ANIMATION_TIME);
-  }
-
-  /**
-   * @param {SyntheticEvent} evt
-   * @private
-   */
-  _handleCaptionsLinksClick = evt => {
-    if (evt.target.matches('a')) {
-      this.closeRequest(evt);
-    }
-  };
-
-  /**
-   * @private
-   */
-  _getCaption() {
-    return (
-      <span
-        className={classNames(styles.caption, this.props.captionClassName, {
-          [styles.withCloseButton]: this.props.closeable
-        })}
-        onClick={this._handleCaptionsLinksClick}
+    _getCaption() {
+        return (<span className={classNames(styles.caption, this.props.captionClassName, {
+                [styles.withCloseButton]: this.props.closeable
+            })} onClick={this._handleCaptionsLinksClick} 
         // We only process clicks on `a` elements, see above
-        role="presentation"
-      >
+        role="presentation">
         {this.props.children}
-      </span>
-    );
-  }
-
-  /**
-   * @private
-   * @return {XML|string}
-   */
-  _getIcon() {
-    const glyph = TypeToIcon[this.props.type];
-
-    if (glyph) {
-      return (
-        <Icon
-          glyph={glyph}
-          className={styles.icon}
-          color={TypeToIconColor[this.props.type] || Icon.Color.DEFAULT}
-        />
-      );
-    } else if (this.props.type === Type.LOADING) {
-      return (
-        <Loader className={styles.loader} theme={Loader.Theme.DARK}/>
-      );
+      </span>);
     }
-
-    return '';
-  }
-
-  storeAlertRef = node => {
-    this.node = node;
-  };
-
-  render() {
-    const {type, inline, isClosing, isShaking, closeButtonClassName,
-      showWithAnimation, className, 'data-test': dataTest} = this.props;
-
-    const classes = classNames(className, {
-      [styles.alert]: true,
-      [styles.animationOpen]: showWithAnimation,
-      [styles.error]: type === 'error',
-      [styles.alertInline]: inline,
-      [styles.animationClosing]: isClosing,
-      [styles.animationShaking]: isShaking
-    });
-
-    const style = this.state.height ? {marginBottom: -this.state.height} : null;
-
-    return (
-      <div
-        className={classes}
-        data-test={dataTests('alert', dataTest)}
-        data-test-type={type}
-        style={style}
-        ref={this.storeAlertRef}
-      >
+    /**
+     * @private
+     * @return {XML|string}
+     */
+    _getIcon() {
+        const glyph = TypeToIcon[this.props.type];
+        if (glyph) {
+            return (<Icon glyph={glyph} className={styles.icon} color={TypeToIconColor[this.props.type] || Color.DEFAULT}/>);
+        }
+        else if (this.props.type === AlertType.LOADING) {
+            return (<Loader className={styles.loader}/>);
+        }
+        return '';
+    }
+    storeAlertRef = (node) => {
+        this.node = node;
+    };
+    render() {
+        const { type, inline, isClosing, isShaking, closeButtonClassName, showWithAnimation, className, 'data-test': dataTest, theme } = this.props;
+        const classes = classNames(className, {
+            [styles.alert]: true,
+            [styles.animationOpen]: showWithAnimation,
+            [styles.error]: type === 'error',
+            [styles.alertInline]: inline,
+            [styles.animationClosing]: isClosing,
+            [styles.animationShaking]: isShaking
+        });
+        const height = this.state.height;
+        const style = height ? { marginBottom: -height } : undefined;
+        return (<ThemeProvider theme={theme} className={classes} data-test={dataTests('alert', dataTest)} data-test-type={type} style={style} ref={this.storeAlertRef}>
         {this._getIcon()}
         {this._getCaption()}
-        {
-          this.props.closeable
-            ? (
-              <button
-                type="button"
-                className={classNames(styles.close, closeButtonClassName)}
-                data-test="alert-close"
-                aria-label="close alert"
-                onClick={this.closeRequest}
-              >
-                <Icon glyph={closeIcon}/>
-              </button>
-            )
-            : ''
-        }
-      </div>
-    );
-  }
+        {this.props.closeable
+                ? (<Button icon={closeIcon} className={classNames(styles.close, closeButtonClassName)} data-test="alert-close" aria-label="close alert" onClick={this.closeRequest}/>)
+                : ''}
+      </ThemeProvider>);
+    }
 }
-
-export {default as Container} from './container';
+export { default as Container } from './container';

package/components/alert/container.css

@@ -22,6 +22,4 @@
   min-width: calc(unit * 30);
   max-width: calc(unit * 50);
   margin-top: 0;
-
-  box-shadow: 0 2px 8px rgba(0, 42, 76, 0.3);
 }

package/components/alert/container.d.ts

@@ -0,0 +1,15 @@
+import React, { PureComponent, HTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+/**
+ * @name Alert Container
+ * @description Displays a stack of alerts on top of the page.
+ * @extends {PureComponent}
+ */
+export declare type AlertContainerProps = HTMLAttributes<HTMLDivElement>;
+export default class Alerts extends PureComponent<AlertContainerProps> {
+    static propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+    };
+    render(): React.ReactPortal | null;
+}