@jetbrains/ring-ui 5.0.11 → 5.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -69,7 +69,8 @@
69
69
  &.active {
70
70
  transition: none;
71
71
 
72
- box-shadow: inset 0 0 0 2px var(--ring-main-color);
72
+ background-color: var(--ring-hover-background-color);
73
+ box-shadow: button-shadow var(--ring-main-color);
73
74
  }
74
75
 
75
76
  &:global(.focus-visible).active {
@@ -83,6 +84,10 @@
83
84
  box-shadow: button-shadow var(--ring-border-disabled-color);
84
85
  }
85
86
 
87
+ &[disabled].active {
88
+ background-color: var(--ring-disabled-selected-background-color);
89
+ }
90
+
86
91
  &[disabled],
87
92
  &[disabled].withIcon {
88
93
  color: var(--ring-disabled-color);
@@ -105,13 +105,13 @@
105
105
  /* stylelint-disable-next-line selector-max-specificity */
106
106
  .buttonGroup .button.button.active {
107
107
  border-radius: var(--ring-border-radius);
108
- box-shadow: inset 0 0 0 2px var(--ring-main-color);
108
+ box-shadow: button-shadow var(--ring-main-color);
109
109
  }
110
110
 
111
111
  /* stylelint-disable-next-line selector-max-specificity */
112
112
  .buttonGroup .button:global(.focus-visible).active {
113
113
  border-radius: var(--ring-border-radius);
114
- box-shadow: inset 0 0 0 2px var(--ring-main-color), 0 0 0 1px var(--ring-border-hover-color);
114
+ box-shadow: button-shadow var(--ring-main-color), 0 0 0 1px var(--ring-border-hover-color);
115
115
  }
116
116
 
117
117
  /* stylelint-disable-next-line selector-max-specificity */
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
3
3
  import Caption from './caption';
4
4
  export interface ButtonGroupProps extends HTMLAttributes<HTMLElement> {
5
5
  split?: boolean | null | undefined;
6
+ 'data-test'?: string | null | undefined;
6
7
  }
7
8
  /**
8
9
  * @name Button Group
@@ -1,6 +1,7 @@
1
1
  import React, { PureComponent } from 'react';
2
2
  import PropTypes from 'prop-types';
3
3
  import classNames from 'classnames';
4
+ import dataTests from '../global/data-tests';
4
5
  import Caption from './caption';
5
6
  import styles from './button-group.css';
6
7
  /**
@@ -12,9 +13,9 @@ export default class ButtonGroup extends PureComponent {
12
13
  className: PropTypes.string
13
14
  };
14
15
  render() {
15
- const { className, split, ...restProps } = this.props;
16
+ const { className, split, 'data-test': dataTest, ...restProps } = this.props;
16
17
  const classes = classNames(split ? styles.split : styles.buttonGroup, className);
17
- return (<div {...restProps} className={classes}/>);
18
+ return (<div {...restProps} data-test={dataTests('ring-button-group', dataTest)} className={classes}/>);
18
19
  }
19
20
  }
20
21
  export { Caption };
@@ -1,12 +1,16 @@
1
1
  import { PureComponent, HTMLAttributes } from 'react';
2
2
  import PropTypes from 'prop-types';
3
+ export interface ButtonSetProps extends HTMLAttributes<HTMLElement> {
4
+ 'data-test'?: string | null | undefined;
5
+ }
3
6
  /**
4
7
  * @name Button Set
5
8
  */
6
- export default class ButtonSet extends PureComponent<HTMLAttributes<HTMLElement>> {
9
+ export default class ButtonSet extends PureComponent<ButtonSetProps> {
7
10
  static propTypes: {
8
11
  children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
9
12
  className: PropTypes.Requireable<string>;
13
+ 'data-test': PropTypes.Requireable<string>;
10
14
  };
11
15
  render(): JSX.Element;
12
16
  }
@@ -1,6 +1,7 @@
1
1
  import React, { PureComponent } from 'react';
2
2
  import classNames from 'classnames';
3
3
  import PropTypes from 'prop-types';
4
+ import dataTests from '../global/data-tests';
4
5
  import styles from './button-set.css';
5
6
  /**
6
7
  * @name Button Set
@@ -8,12 +9,14 @@ import styles from './button-set.css';
8
9
  export default class ButtonSet extends PureComponent {
9
10
  static propTypes = {
10
11
  children: PropTypes.node,
11
- className: PropTypes.string
12
+ className: PropTypes.string,
13
+ 'data-test': PropTypes.string
12
14
  };
13
15
  render() {
14
- const classes = classNames(styles.buttonSet, this.props.className);
15
- return (<div {...this.props} className={classes}>
16
- {this.props.children}
16
+ const { className, 'data-test': dataTest, children, ...restProps } = this.props;
17
+ const classes = classNames(styles.buttonSet, className);
18
+ return (<div {...restProps} data-test={dataTests('ring-button-set', dataTest)} className={classes}>
19
+ {children}
17
20
  </div>);
18
21
  }
19
22
  }
@@ -1,12 +1,16 @@
1
1
  import { PureComponent, HTMLAttributes } from 'react';
2
2
  import PropTypes from 'prop-types';
3
+ export interface ButtonToolbarProps extends HTMLAttributes<HTMLElement> {
4
+ 'data-test'?: string | null | undefined;
5
+ }
3
6
  /**
4
7
  * @name Button Toolbar
5
8
  */
6
- export default class ButtonToolbar extends PureComponent<HTMLAttributes<HTMLElement>> {
9
+ export default class ButtonToolbar extends PureComponent<ButtonToolbarProps> {
7
10
  static propTypes: {
8
11
  children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
9
12
  className: PropTypes.Requireable<string>;
13
+ 'data-test': PropTypes.Requireable<string>;
10
14
  };
11
15
  render(): JSX.Element;
12
16
  }
@@ -1,6 +1,7 @@
1
1
  import React, { PureComponent } from 'react';
2
2
  import PropTypes from 'prop-types';
3
3
  import classNames from 'classnames';
4
+ import dataTests from '../global/data-tests';
4
5
  import styles from './button-toolbar.css';
5
6
  /**
6
7
  * @name Button Toolbar
@@ -8,11 +9,12 @@ import styles from './button-toolbar.css';
8
9
  export default class ButtonToolbar extends PureComponent {
9
10
  static propTypes = {
10
11
  children: PropTypes.node,
11
- className: PropTypes.string
12
+ className: PropTypes.string,
13
+ 'data-test': PropTypes.string
12
14
  };
13
15
  render() {
14
- const { className } = this.props;
16
+ const { className, 'data-test': dataTest, ...restProps } = this.props;
15
17
  const classes = classNames(styles.buttonToolbar, className);
16
- return (<div {...this.props} className={classes}/>);
18
+ return (<div {...restProps} data-test={dataTests('ring-button-toolbar', dataTest)} className={classes}/>);
17
19
  }
18
20
  }
@@ -81,7 +81,7 @@ export default class Code extends PureComponent {
81
81
  [styles.inline]: inline,
82
82
  [styles.softWrap]: softWrap
83
83
  });
84
- return (<Tag className={classes}>
84
+ return (<Tag className={classes} data-test="ring-code">
85
85
  <code
86
86
  // should be focusable because it can be scrollable
87
87
  tabIndex={inline ? -1 : 0} ref={this.initCodeRef} className={highlightStyles.highlightContainer}>
@@ -58,6 +58,7 @@
58
58
  --ring-warning-background-color: #faeccd;
59
59
  --ring-added-background-color: #d8f0d8;
60
60
  --ring-disabled-background-color: #f5f5f5;
61
+ --ring-disabled-selected-background-color: #e8e8e8;
61
62
  --ring-button-danger-active-color: #ffe7e8;
62
63
  --ring-button-loader-background: #33a3ff;
63
64
  --ring-button-primary-background-color: #1a98ff;
@@ -48,6 +48,7 @@ export interface RingCSSProperties {
48
48
  '--ring-warning-background-color'?: Property.BackgroundColor;
49
49
  '--ring-added-background-color'?: Property.BackgroundColor;
50
50
  '--ring-disabled-background-color'?: Property.BackgroundColor;
51
+ '--ring-disabled-selected-background-color'?: Property.BackgroundColor;
51
52
  '--ring-button-danger-active-color'?: Property.BackgroundColor;
52
53
  '--ring-button-loader-background'?: Property.BackgroundColor;
53
54
  '--ring-button-primary-background-color'?: Property.BackgroundColor;
@@ -48,6 +48,7 @@
48
48
  --ring-warning-background-color: #593d01;
49
49
  --ring-added-background-color: #365947;
50
50
  --ring-disabled-background-color: #303030;
51
+ --ring-disabled-selected-background-color: #363636;
51
52
  --ring-button-danger-active-color: #26080a;
52
53
  --ring-button-primary-background-color: #007ee5;
53
54
 
@@ -2,6 +2,7 @@ import { PureComponent } from 'react';
2
2
  import { Options } from 'react-markdown';
3
3
  export interface BaseMarkdownProps {
4
4
  inline?: boolean | null | undefined;
5
+ plugins?: Options['remarkPlugins'];
5
6
  }
6
7
  export declare type MarkdownProps = Options & BaseMarkdownProps;
7
8
  /**
@@ -14,7 +14,7 @@ function _defineProperty(obj, key, value) {
14
14
  }
15
15
 
16
16
  function _extends() {
17
- _extends = Object.assign || function (target) {
17
+ _extends = Object.assign ? Object.assign.bind() : function (target) {
18
18
  for (var i = 1; i < arguments.length; i++) {
19
19
  var source = arguments[i];
20
20
 
@@ -27,7 +27,6 @@ function _extends() {
27
27
 
28
28
  return target;
29
29
  };
30
-
31
30
  return _extends.apply(this, arguments);
32
31
  }
33
32
 
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
3
3
  import Caption from './caption';
4
4
  export interface ButtonGroupProps extends HTMLAttributes<HTMLElement> {
5
5
  split?: boolean | null | undefined;
6
+ 'data-test'?: string | null | undefined;
6
7
  }
7
8
  /**
8
9
  * @name Button Group
@@ -2,8 +2,10 @@ import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBa
2
2
  import React, { PureComponent } from 'react';
3
3
  import PropTypes from 'prop-types';
4
4
  import classNames from 'classnames';
5
+ import joinDataTestAttributes from '../global/data-tests.js';
5
6
  export { default as Caption } from './caption.js';
6
7
  import { m as modules_1068e447 } from '../_helpers/button-group.js';
8
+ import 'core-js/modules/web.dom-collections.iterator.js';
7
9
 
8
10
  /**
9
11
  * @name Button Group
@@ -14,10 +16,12 @@ class ButtonGroup extends PureComponent {
14
16
  const {
15
17
  className,
16
18
  split,
19
+ 'data-test': dataTest,
17
20
  ...restProps
18
21
  } = this.props;
19
22
  const classes = classNames(split ? modules_1068e447.split : modules_1068e447.buttonGroup, className);
20
23
  return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
24
+ "data-test": joinDataTestAttributes('ring-button-group', dataTest),
21
25
  className: classes
22
26
  }));
23
27
  }
@@ -1,12 +1,16 @@
1
1
  import { PureComponent, HTMLAttributes } from 'react';
2
2
  import PropTypes from 'prop-types';
3
+ export interface ButtonSetProps extends HTMLAttributes<HTMLElement> {
4
+ 'data-test'?: string | null | undefined;
5
+ }
3
6
  /**
4
7
  * @name Button Set
5
8
  */
6
- export default class ButtonSet extends PureComponent<HTMLAttributes<HTMLElement>> {
9
+ export default class ButtonSet extends PureComponent<ButtonSetProps> {
7
10
  static propTypes: {
8
11
  children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
9
12
  className: PropTypes.Requireable<string>;
13
+ 'data-test': PropTypes.Requireable<string>;
10
14
  };
11
15
  render(): JSX.Element;
12
16
  }
@@ -2,7 +2,9 @@ import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBa
2
2
  import React, { PureComponent } from 'react';
3
3
  import classNames from 'classnames';
4
4
  import PropTypes from 'prop-types';
5
+ import joinDataTestAttributes from '../global/data-tests.js';
5
6
  import { m as modules_fd849143 } from '../_helpers/button-set.js';
7
+ import 'core-js/modules/web.dom-collections.iterator.js';
6
8
 
7
9
  /**
8
10
  * @name Button Set
@@ -10,17 +12,25 @@ import { m as modules_fd849143 } from '../_helpers/button-set.js';
10
12
 
11
13
  class ButtonSet extends PureComponent {
12
14
  render() {
13
- const classes = classNames(modules_fd849143.buttonSet, this.props.className);
14
- return /*#__PURE__*/React.createElement("div", _extends({}, this.props, {
15
+ const {
16
+ className,
17
+ 'data-test': dataTest,
18
+ children,
19
+ ...restProps
20
+ } = this.props;
21
+ const classes = classNames(modules_fd849143.buttonSet, className);
22
+ return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
23
+ "data-test": joinDataTestAttributes('ring-button-set', dataTest),
15
24
  className: classes
16
- }), this.props.children);
25
+ }), children);
17
26
  }
18
27
 
19
28
  }
20
29
 
21
30
  _defineProperty(ButtonSet, "propTypes", {
22
31
  children: PropTypes.node,
23
- className: PropTypes.string
32
+ className: PropTypes.string,
33
+ 'data-test': PropTypes.string
24
34
  });
25
35
 
26
36
  export { ButtonSet as default };
@@ -1,12 +1,16 @@
1
1
  import { PureComponent, HTMLAttributes } from 'react';
2
2
  import PropTypes from 'prop-types';
3
+ export interface ButtonToolbarProps extends HTMLAttributes<HTMLElement> {
4
+ 'data-test'?: string | null | undefined;
5
+ }
3
6
  /**
4
7
  * @name Button Toolbar
5
8
  */
6
- export default class ButtonToolbar extends PureComponent<HTMLAttributes<HTMLElement>> {
9
+ export default class ButtonToolbar extends PureComponent<ButtonToolbarProps> {
7
10
  static propTypes: {
8
11
  children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
9
12
  className: PropTypes.Requireable<string>;
13
+ 'data-test': PropTypes.Requireable<string>;
10
14
  };
11
15
  render(): JSX.Element;
12
16
  }
@@ -2,7 +2,9 @@ import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBa
2
2
  import React, { PureComponent } from 'react';
3
3
  import PropTypes from 'prop-types';
4
4
  import classNames from 'classnames';
5
+ import joinDataTestAttributes from '../global/data-tests.js';
5
6
  import { m as modules_34154ec0 } from '../_helpers/button-toolbar.js';
7
+ import 'core-js/modules/web.dom-collections.iterator.js';
6
8
 
7
9
  /**
8
10
  * @name Button Toolbar
@@ -11,10 +13,13 @@ import { m as modules_34154ec0 } from '../_helpers/button-toolbar.js';
11
13
  class ButtonToolbar extends PureComponent {
12
14
  render() {
13
15
  const {
14
- className
16
+ className,
17
+ 'data-test': dataTest,
18
+ ...restProps
15
19
  } = this.props;
16
20
  const classes = classNames(modules_34154ec0.buttonToolbar, className);
17
- return /*#__PURE__*/React.createElement("div", _extends({}, this.props, {
21
+ return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
22
+ "data-test": joinDataTestAttributes('ring-button-toolbar', dataTest),
18
23
  className: classes
19
24
  }));
20
25
  }
@@ -23,7 +28,8 @@ class ButtonToolbar extends PureComponent {
23
28
 
24
29
  _defineProperty(ButtonToolbar, "propTypes", {
25
30
  children: PropTypes.node,
26
- className: PropTypes.string
31
+ className: PropTypes.string,
32
+ 'data-test': PropTypes.string
27
33
  });
28
34
 
29
35
  export { ButtonToolbar as default };
package/dist/code/code.js CHANGED
@@ -105,7 +105,8 @@ class Code extends PureComponent {
105
105
  [modules_66c414ea.softWrap]: softWrap
106
106
  });
107
107
  return /*#__PURE__*/React.createElement(Tag, {
108
- className: classes
108
+ className: classes,
109
+ "data-test": "ring-code"
109
110
  }, /*#__PURE__*/React.createElement("code", {
110
111
  // should be focusable because it can be scrollable
111
112
  tabIndex: inline ? -1 : 0,
@@ -48,6 +48,7 @@ export interface RingCSSProperties {
48
48
  '--ring-warning-background-color'?: Property.BackgroundColor;
49
49
  '--ring-added-background-color'?: Property.BackgroundColor;
50
50
  '--ring-disabled-background-color'?: Property.BackgroundColor;
51
+ '--ring-disabled-selected-background-color'?: Property.BackgroundColor;
51
52
  '--ring-button-danger-active-color'?: Property.BackgroundColor;
52
53
  '--ring-button-loader-background'?: Property.BackgroundColor;
53
54
  '--ring-button-primary-background-color'?: Property.BackgroundColor;
@@ -2,6 +2,7 @@ import { PureComponent } from 'react';
2
2
  import { Options } from 'react-markdown';
3
3
  export interface BaseMarkdownProps {
4
4
  inline?: boolean | null | undefined;
5
+ plugins?: Options['remarkPlugins'];
5
6
  }
6
7
  export declare type MarkdownProps = Options & BaseMarkdownProps;
7
8
  /**
@@ -22,6 +22,7 @@ import 'util-deprecate';
22
22
  import '../_helpers/icon.js';
23
23
  import '../icon/icon__svg.js';
24
24
  import 'core-js/modules/es.string.replace.js';
25
+ import '../global/data-tests.js';
25
26
  import '../button-group/caption.js';
26
27
  import '../_helpers/button-group.js';
27
28
  import '../_helpers/button-toolbar.js';
@@ -29,7 +30,6 @@ import '@jetbrains/icons/chevron-down';
29
30
  import '@jetbrains/icons/close-12px';
30
31
  import 'deep-equal';
31
32
  import '../dropdown/dropdown.js';
32
- import '../global/data-tests.js';
33
33
  import '../global/typescript-utils.js';
34
34
  import '../_helpers/anchor.js';
35
35
  import '../avatar/avatar.js';
@@ -26,6 +26,7 @@ import '../link/clickableLink.js';
26
26
  import '../global/controls-height.js';
27
27
  import '../_helpers/button__classes.js';
28
28
  import '../button-group/button-group.js';
29
+ import '../global/data-tests.js';
29
30
  import '../button-group/caption.js';
30
31
  import '../_helpers/button-group.js';
31
32
  import '../button-toolbar/button-toolbar.js';
@@ -35,7 +36,6 @@ import '@jetbrains/icons/chevron-down';
35
36
  import '@jetbrains/icons/close-12px';
36
37
  import 'deep-equal';
37
38
  import '../dropdown/dropdown.js';
38
- import '../global/data-tests.js';
39
39
  import '../global/typescript-utils.js';
40
40
  import '../_helpers/anchor.js';
41
41
  import '../avatar/avatar.js';