@jetbrains/ring-ui 6.0.14 → 6.0.16

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.
Files changed (7) hide show
  1. package/components/dialog/dialog.css +1 -1
  2. package/components/global/variables.css +1 -0
  3. package/components/global/variables_dark.css +61 -60
  4. package/components/header/profile.d.ts +4 -0
  5. package/components/header/profile.js +5 -3
  6. package/package.json +17 -17
  7. package/webpack.config.js +2 -0
package/components/dialog/dialog.css CHANGED
@@ -17,7 +17,7 @@
17
17
 
18
18
  padding: calc(var(--ring-unit) * 4) var(--ring-unit);
19
19
 
20
- background-color: rgba(var(--ring-dialog-overlay-components), 0.4);
20
+ background-color: rgba(var(--ring-dialog-overlay-components), var(--ring-dialog-overlay-opacity));
21
21
  }
22
22
 
23
23
  .innerContainer {
package/components/global/variables.css CHANGED
@@ -50,6 +50,7 @@
50
50
  --ring-button-primary-border-components: 0, 98, 178;
51
51
  --ring-button-primary-border-color: rgb(var(--ring-button-primary-border-components)); /* #0062b2 */
52
52
  --ring-dialog-overlay-components: 0, 0, 0;
53
+ --ring-dialog-overlay-opacity: 0.4;
53
54
  --ring-popup-shadow: 0 2px 8px var(--ring-popup-shadow-color), 0 1px 2px var(--ring-popup-secondary-shadow-color);
54
55
  --ring-dialog-shadow: 0 4px 24px var(--ring-popup-shadow-color), 0 2px 6px var(--ring-popup-secondary-shadow-color);
55
56
 
package/components/global/variables_dark.css CHANGED
@@ -3,36 +3,36 @@
3
3
  :global(.ring-ui-theme-dark),
4
4
  .dark,
5
5
  :root.dark {
6
- --ring-line-components: 57, 59, 64;
7
- --ring-line-color: rgb(var(--ring-line-components)); /* #393B40 */
8
- --ring-borders-components: 90, 93, 99;
9
- --ring-borders-color: rgb(var(--ring-borders-components)); /* #5A5D63 */
10
- --ring-icon-components: 128, 146, 157;
11
- --ring-icon-color: rgb(var(--ring-icon-components)); /* #80929d */
6
+ --ring-line-components: 61, 63, 69;
7
+ --ring-line-color: rgb(var(--ring-line-components)); /* #3D3F45 */
8
+ --ring-borders-components: 97, 101, 107;
9
+ --ring-borders-color: rgb(var(--ring-borders-components)); /* #61656B */
10
+ --ring-icon-components: 138, 145, 163;
11
+ --ring-icon-color: rgb(var(--ring-icon-components)); /* #8A91A3 */
12
12
  --ring-icon-secondary-components: 121, 126, 139;
13
13
  --ring-icon-secondary-color: rgb(var(--ring-icon-secondary-components)); /* #797E8B */
14
- --ring-border-disabled-components: 73, 73, 73;
15
- --ring-border-disabled-color: rgb(var(--ring-border-disabled-components)); /* #494949 */
16
- --ring-border-selected-disabled-components: 97, 97, 97;
17
- --ring-border-selected-disabled-color: rgb(var(--ring-border-selected-disabled-components)); /* #616161 */
18
- --ring-icon-disabled-components: 64, 66, 71;
19
- --ring-icon-disabled-color: rgb(var(--ring-icon-disabled-components)); /* #404247 */
20
- --ring-border-hover-components: 77, 100, 148;
21
- --ring-border-hover-color: rgb(var(--ring-border-hover-components)); /* #4D6494 */
14
+ --ring-border-disabled-components: 79, 79, 79;
15
+ --ring-border-disabled-color: rgb(var(--ring-border-disabled-components)); /* #4F4F4F */
16
+ --ring-border-selected-disabled-components: 102, 102, 102;
17
+ --ring-border-selected-disabled-color: rgb(var(--ring-border-selected-disabled-components)); /* #666666 */
18
+ --ring-icon-disabled-components: 78, 80, 87;
19
+ --ring-icon-disabled-color: rgb(var(--ring-icon-disabled-components)); /* #4E5057 */
20
+ --ring-border-hover-components: 80, 103, 153;
21
+ --ring-border-hover-color: rgb(var(--ring-border-hover-components)); /* #506799 */
22
22
  --ring-main-components: 53, 116, 240;
23
23
  --ring-main-color: rgb(var(--ring-main-components)); /* #3574F0 */
24
- --ring-action-link-components: 135, 166, 227;
25
- --ring-action-link-color: rgb(var(--ring-action-link-components)); /* #87A6E3 */
24
+ --ring-action-link-components: 138, 170, 232;
25
+ --ring-action-link-color: rgb(var(--ring-action-link-components)); /* #8AAAE8 */
26
26
  --ring-main-hover-components: 45, 105, 224;
27
27
  --ring-main-hover-color: rgb(var(--ring-main-hover-components)); /* #2D69E0 */
28
- --ring-icon-error-components: 193, 88, 88;
29
- --ring-icon-error-color: rgb(var(--ring-icon-error-components)); /* #c15858 */
30
- --ring-icon-warning-components: 194, 161, 81;
31
- --ring-icon-warning-color: rgb(var(--ring-icon-warning-components)); /* #C2A151 */
32
- --ring-icon-success-components: 94, 156, 98;
33
- --ring-icon-success-color: rgb(var(--ring-icon-success-components)); /* #5E9C62 */
34
- --ring-popup-border-components: 57, 59, 64;
35
- --ring-popup-border-color: rgb(var(--ring-popup-border-components)); /* #393b40 */
28
+ --ring-icon-error-components: 196, 86, 86;
29
+ --ring-icon-error-color: rgb(var(--ring-icon-error-components)); /* #C45656 */
30
+ --ring-icon-warning-components: 199, 165, 83;
31
+ --ring-icon-warning-color: rgb(var(--ring-icon-warning-components)); /* #C7A553 */
32
+ --ring-icon-success-components: 97, 161, 101;
33
+ --ring-icon-success-color: rgb(var(--ring-icon-success-components)); /* #61A165 */
34
+ --ring-popup-border-components: 61, 63, 69;
35
+ --ring-popup-border-color: rgb(var(--ring-popup-border-components)); /* #3D3F45 */
36
36
  --ring-popup-shadow-color: rgba(0, 0, 0, 0.31);
37
37
  --ring-popup-secondary-shadow-color: rgba(0, 0, 0, 0.37);
38
38
  --ring-message-shadow-color: rgba(var(--ring-popup-border-components), 0.3);
@@ -42,57 +42,58 @@
42
42
  --ring-button-primary-border-components: 128, 198, 255;
43
43
  --ring-button-primary-border-color: rgb(var(--ring-button-primary-border-components)); /* #80c6ff */
44
44
  --ring-dialog-overlay-components: 0, 0, 0;
45
+ --ring-dialog-overlay-opacity: 0.7;
45
46
  --ring-popup-shadow: 0 2px 8px var(--ring-popup-shadow-color), 0 1px 2px var(--ring-popup-secondary-shadow-color);
46
47
  --ring-dialog-shadow: 0 4px 16px var(--ring-popup-shadow-color), 0 2px 6px var(--ring-popup-secondary-shadow-color);
47
48
 
48
49
  /* Text */
49
50
  --ring-hint-components: 128, 146, 157;
50
51
  --ring-hint-color: rgb(var(--ring-hint-components)); /* #80929d */
51
- --ring-link-components: 133, 166, 227;
52
- --ring-link-color: rgb(var(--ring-link-components)); /* #87A6E3 */
53
- --ring-link-hover-components: 224, 103, 178;
54
- --ring-link-hover-color: rgb(var(--ring-link-hover-components)); /* #E067B2 */
55
- --ring-error-components: 222, 99, 99;
56
- --ring-error-color: rgb(var(--ring-error-components)); /* #DE6363 */
57
- --ring-warning-components: 218, 179, 88;
58
- --ring-warning-color: rgb(var(--ring-warning-components)); /* #DAB358 */
59
- --ring-success-components: 109, 182, 115;
60
- --ring-success-color: rgb(var(--ring-success-components)); /* #6DB673 */
61
- --ring-text-components: 195, 198, 204;
62
- --ring-text-color: rgb(var(--ring-text-components)); /* #C3C6CC */
52
+ --ring-link-components: 138, 170, 232;
53
+ --ring-link-color: rgb(var(--ring-link-components)); /* #8AAAE8 */
54
+ --ring-link-hover-components: 229, 106, 182;
55
+ --ring-link-hover-color: rgb(var(--ring-link-hover-components)); /* #E56AB6 */
56
+ --ring-error-components: 227, 102, 102;
57
+ --ring-error-color: rgb(var(--ring-error-components)); /* #E36666 */
58
+ --ring-warning-components: 222, 182, 90;
59
+ --ring-warning-color: rgb(var(--ring-warning-components)); /* #DEB65A */
60
+ --ring-success-components: 112, 186, 118;
61
+ --ring-success-color: rgb(var(--ring-success-components)); /* #70BA76 */
62
+ --ring-text-components: 202, 205, 212;
63
+ --ring-text-color: rgb(var(--ring-text-components)); /* #CACDD4 */
63
64
  --ring-active-text-components: 255, 255, 255;
64
65
  --ring-active-text-color: rgb(var(--ring-active-text-components)); /* #fff */
65
66
  --ring-heading-color: var(--ring-text-color);
66
- --ring-secondary-components: 137, 141, 148;
67
- --ring-secondary-color: rgb(var(--ring-secondary-components)); /* #898D94 */
68
- --ring-disabled-components: 100, 103, 110;
69
- --ring-disabled-color: rgb(var(--ring-disabled-components)); /* #64676E */
67
+ --ring-secondary-components: 144, 148, 156;
68
+ --ring-secondary-color: rgb(var(--ring-secondary-components)); /* #90949C */
69
+ --ring-disabled-components: 107, 110, 117;
70
+ --ring-disabled-color: rgb(var(--ring-disabled-components)); /* #6B6E75 */
70
71
 
71
72
  /* Background */
72
- --ring-content-background-components: 37, 38, 41;
73
- --ring-content-background-color: rgb(var(--ring-content-background-components)); /* #252629 */
74
- --ring-popup-background-components: 41, 43, 46;
75
- --ring-popup-background-color: rgb(var(--ring-popup-background-components)); /* #292B2E */
73
+ --ring-content-background-components: 44, 45, 48;
74
+ --ring-content-background-color: rgb(var(--ring-content-background-components)); /* #2C2D30 */
75
+ --ring-popup-background-components: 50, 52, 56;
76
+ --ring-popup-background-color: rgb(var(--ring-popup-background-components)); /* #323438 */
76
77
  --ring-sidebar-background-components: 32, 33, 36;
77
78
  --ring-sidebar-background-color: rgb(var(--ring-sidebar-background-components)); /* #202124 */
78
- --ring-selected-background-components: 49, 67, 105;
79
- --ring-selected-background-color: rgb(var(--ring-selected-background-components)); /* #314369 */
80
- --ring-hover-background-components: 40, 51, 71;
81
- --ring-hover-background-color: rgb(var(--ring-hover-background-components)); /* #283347 */
79
+ --ring-selected-background-components: 51, 70, 110;
80
+ --ring-selected-background-color: rgb(var(--ring-selected-background-components)); /* #33466E */
81
+ --ring-hover-background-components: 50, 61, 84;
82
+ --ring-hover-background-color: rgb(var(--ring-hover-background-components)); /* #323D54 */
82
83
  --ring-navigation-background-components: 17, 19, 20;
83
84
  --ring-navigation-background-color: rgb(var(--ring-navigation-background-components)); /* #111314 */
84
- --ring-tag-background-components: 53, 55, 59;
85
- --ring-tag-background-color: rgb(var(--ring-tag-background-components)); /* #35373B */
86
- --ring-tag-hover-background-components: 50, 52, 57;
87
- --ring-tag-hover-background-color: rgb(var(--ring-tag-hover-background-components)); /* #323439 */
88
- --ring-removed-background-components: 95, 53, 53;
89
- --ring-removed-background-color: rgb(var(--ring-removed-background-components)); /* #5f3535 */
90
- --ring-warning-background-components: 94, 77, 51;
91
- --ring-warning-background-color: rgb(var(--ring-warning-background-components)); /* #5e4d33 */
92
- --ring-added-background-components: 51, 76, 53;
93
- --ring-added-background-color: rgb(var(--ring-added-background-components)); /* #334c35 */
94
- --ring-disabled-background-components: 45, 47, 50;
95
- --ring-disabled-background-color: rgb(var(--ring-disabled-background-components)); /* #2D2F32 */
85
+ --ring-tag-background-components: 56, 58, 64;
86
+ --ring-tag-background-color: rgb(var(--ring-tag-background-components)); /* #383A40 */
87
+ --ring-tag-hover-background-components: 54, 56, 61;
88
+ --ring-tag-hover-background-color: rgb(var(--ring-tag-hover-background-components)); /* #36383D */
89
+ --ring-removed-background-components: 94, 56, 53;
90
+ --ring-removed-background-color: rgb(var(--ring-removed-background-components)); /* #5E3835 */
91
+ --ring-warning-background-components: 87, 71, 47;
92
+ --ring-warning-background-color: rgb(var(--ring-warning-background-components)); /* #57472F */
93
+ --ring-added-background-components: 55, 82, 57;
94
+ --ring-added-background-color: rgb(var(--ring-added-background-components)); /* #375239 */
95
+ --ring-disabled-background-components: 50, 53, 56;
96
+ --ring-disabled-background-color: rgb(var(--ring-disabled-background-components)); /* #323538 */
96
97
  --ring-disabled-selected-background-components: 44, 47, 51;
97
98
  --ring-disabled-selected-background-color: rgb(var(--ring-disabled-selected-background-components)); /* #2C2F33 */
98
99
  --ring-button-danger-active-components: 38, 8, 10;
package/components/header/profile.d.ts CHANGED
@@ -36,6 +36,8 @@ export interface ProfileProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSe
36
36
  onRevertPostponement?: (() => void) | null | undefined;
37
37
  menuProps?: PopupMenuAttrs | null | undefined;
38
38
  activeClassName?: string | null | undefined;
39
+ onShow?: (() => void);
40
+ onHide?: (() => void);
39
41
  }
40
42
  export default class Profile extends PureComponent<ProfileProps> {
41
43
  static propTypes: {
@@ -72,6 +74,8 @@ export default class Profile extends PureComponent<ProfileProps> {
72
74
  onRevertPostponement: PropTypes.Requireable<(...args: any[]) => any>;
73
75
  renderGuest: PropTypes.Requireable<(...args: any[]) => any>;
74
76
  menuProps: PropTypes.Requireable<object>;
77
+ onShow: PropTypes.Requireable<(...args: any[]) => any>;
78
+ onHide: PropTypes.Requireable<(...args: any[]) => any>;
75
79
  };
76
80
  static defaultProps: ProfileProps;
77
81
  static contextType: React.Context<import("../i18n/i18n-context").I18nContextProps>;
package/components/header/profile.js CHANGED
@@ -47,7 +47,9 @@ export default class Profile extends PureComponent {
47
47
  showApplyChangedUser: PropTypes.bool,
48
48
  onRevertPostponement: PropTypes.func,
49
49
  renderGuest: PropTypes.func,
50
- menuProps: PropTypes.object
50
+ menuProps: PropTypes.object,
51
+ onShow: PropTypes.func,
52
+ onHide: PropTypes.func
51
53
  };
52
54
  static defaultProps = {
53
55
  closeOnSelect: true,
@@ -64,7 +66,7 @@ export default class Profile extends PureComponent {
64
66
  static contextType = I18nContext;
65
67
  static Size = Size;
66
68
  render() {
67
- const { className, activeClassName, closeOnSelect, hasUpdates, onLogout, user, profileUrl, LinkComponent, onSwitchUser, renderPopupItems, onRevertPostponement, showApplyChangedUser, showName, showLogIn, showLogOut, showSwitchUser, renderGuest, translations, size, round, loading, onLogin, menuProps, ...props } = this.props;
69
+ const { className, activeClassName, closeOnSelect, hasUpdates, onLogout, user, profileUrl, LinkComponent, onSwitchUser, renderPopupItems, onRevertPostponement, showApplyChangedUser, showName, showLogIn, showLogOut, showSwitchUser, renderGuest, translations, size, round, loading, onLogin, menuProps, onShow, onHide, ...props } = this.props;
68
70
  const { translate } = this.context;
69
71
  if (!user) {
70
72
  return (<div {...props} className={classNames(styles.profileEmpty, className)}>
@@ -115,7 +117,7 @@ export default class Profile extends PureComponent {
115
117
  onClick: onLogout
116
118
  }
117
119
  ].filter(isTruthy);
118
- return (<DropdownMenu {...props} title={user.name} anchor={anchor} data={renderPopupItems(items)} data-test="ring-profile" className={classNames(styles.profile, className)} activeClassName={activeClassName} menuProps={{
120
+ return (<DropdownMenu {...props} onShow={onShow} onHide={onHide} title={user.name} anchor={anchor} data={renderPopupItems(items)} data-test="ring-profile" className={classNames(styles.profile, className)} activeClassName={activeClassName} menuProps={{
119
121
  closeOnSelect,
120
122
  left: -2,
121
123
  top: -8,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jetbrains/ring-ui",
3
- "version": "6.0.14",
3
+ "version": "6.0.16",
4
4
  "description": "JetBrains UI library",
5
5
  "author": "JetBrains",
6
6
  "license": "Apache-2.0",
@@ -87,37 +87,37 @@
87
87
  "@rollup/plugin-json": "^6.1.0",
88
88
  "@rollup/plugin-node-resolve": "^15.2.3",
89
89
  "@rollup/plugin-replace": "^5.0.5",
90
- "@storybook/addon-a11y": "8.0.5",
91
- "@storybook/addon-docs": "8.0.5",
90
+ "@storybook/addon-a11y": "8.0.6",
91
+ "@storybook/addon-docs": "8.0.6",
92
92
  "@storybook/addon-essentials": "7.6.17",
93
93
  "@storybook/addon-storyshots": "7.6.17",
94
94
  "@storybook/addon-storyshots-puppeteer": "7.6.17",
95
95
  "@storybook/addon-storysource": "8.0.5",
96
96
  "@storybook/addons": "7.6.17",
97
- "@storybook/components": "8.0.5",
97
+ "@storybook/components": "8.0.6",
98
98
  "@storybook/preview-api": "7.6.17",
99
99
  "@storybook/react": "7.6.17",
100
100
  "@storybook/react-webpack5": "7.6.17",
101
- "@storybook/source-loader": "8.0.5",
102
- "@storybook/theming": "8.0.5",
103
- "@testing-library/react": "^14.2.2",
101
+ "@storybook/source-loader": "8.0.6",
102
+ "@storybook/theming": "8.0.6",
103
+ "@testing-library/react": "^14.3.0",
104
104
  "@testing-library/user-event": "^14.5.2",
105
105
  "@types/chai": "^4.3.14",
106
106
  "@types/chai-as-promised": "^7.1.8",
107
107
  "@types/chai-dom": "0.0.10",
108
108
  "@types/chai-enzyme": "^0.6.13",
109
109
  "@types/enzyme": "^3.10.18",
110
- "@types/markdown-it": "^13.0.7",
111
- "@types/react": "^18.2.74",
110
+ "@types/markdown-it": "^14.0.0",
111
+ "@types/react": "^18.2.75",
112
112
  "@types/react-dom": "^18.2.24",
113
113
  "@types/sinon": "^17.0.3",
114
114
  "@types/sinon-chai": "^3.2.12",
115
- "@typescript-eslint/eslint-plugin": "^7.5.0",
116
- "@typescript-eslint/parser": "^7.5.0",
115
+ "@typescript-eslint/eslint-plugin": "^7.6.0",
116
+ "@typescript-eslint/parser": "^7.6.0",
117
117
  "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
118
118
  "acorn": "^8.11.3",
119
119
  "babel-plugin-require-context-hook": "^1.0.0",
120
- "caniuse-lite": "^1.0.30001606",
120
+ "caniuse-lite": "^1.0.30001607",
121
121
  "chai": "^5.1.0",
122
122
  "chai-as-promised": "^7.1.1",
123
123
  "chai-dom": "^1.10.0",
@@ -154,20 +154,20 @@
154
154
  "mocha": "^10.4.0",
155
155
  "pinst": "^3.0.0",
156
156
  "prettier": "^3.2.5",
157
- "puppeteer": "^22.6.1",
157
+ "puppeteer": "^22.6.3",
158
158
  "raw-loader": "^4.0.2",
159
159
  "react": "^18.2.0",
160
160
  "react-dom": "^18.2.0",
161
161
  "react-test-renderer": "^18.2.0",
162
162
  "regenerator-runtime": "^0.14.1",
163
163
  "rimraf": "^5.0.5",
164
- "rollup": "^4.13.2",
164
+ "rollup": "^4.14.1",
165
165
  "rollup-plugin-clear": "^2.0.7",
166
166
  "rollup-plugin-styles": "^4.0.0",
167
167
  "sinon": "^17.0.1",
168
168
  "sinon-chai": "^3.7.0",
169
169
  "storage-mock": "^2.1.0",
170
- "storybook": "8.0.5",
170
+ "storybook": "8.0.6",
171
171
  "storybook-addon-themes": "^6.1.0",
172
172
  "stylelint": "^16.3.1",
173
173
  "svg-inline-loader": "^0.8.2",
@@ -209,7 +209,7 @@
209
209
  "@types/deep-equal": "^1.0.4",
210
210
  "@types/element-resize-detector": "^1.1.6",
211
211
  "@types/prop-types": "^15.7.12",
212
- "@types/react-virtualized": "9.21.29",
212
+ "@types/react-virtualized": "9.21.30",
213
213
  "@types/util-deprecate": "^1.0.3",
214
214
  "@ungap/url-search-params": "^0.2.2",
215
215
  "babel-loader": "9.1.3",
@@ -218,7 +218,7 @@
218
218
  "change-case": "^4.1.1",
219
219
  "classnames": "^2.5.1",
220
220
  "combokeys": "^3.0.1",
221
- "css-loader": "^6.11.0",
221
+ "css-loader": "^7.1.0",
222
222
  "csstype": "^3.1.3",
223
223
  "date-fns": "^3.6.0",
224
224
  "deep-equal": "^2.2.3",
package/webpack.config.js CHANGED
@@ -21,6 +21,8 @@ function createConfig() {
21
21
  loader: require.resolve('css-loader'),
22
22
  options: {
23
23
  modules: {
24
+ namedExport: false,
25
+ exportLocalsConvention: 'as-is',
24
26
  localIdentName: '[local]_[hash:4]'
25
27
  },
26
28
  importLoaders: 1