@jetbrains/ring-ui 6.0.19 → 6.0.20
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.
- package/components/collapse/collapse-control.d.ts +2 -2
- package/components/collapse/collapse-control.js +8 -8
- package/components/global/variables_dark.css +4 -4
- package/components/list/consts.d.ts +1 -0
- package/components/list/list__item.js +2 -2
- package/components/slider/slider.css +2 -0
- package/components/slider/slider.js +4 -3
- package/package.json +30 -28
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
type ChildrenFunction = (collapsed: boolean) => React.
|
|
2
|
+
type ChildrenFunction = (collapsed: boolean) => React.ReactElement;
|
|
3
3
|
type Props = {
|
|
4
|
-
children: ChildrenFunction | React.
|
|
4
|
+
children: ChildrenFunction | React.ReactElement;
|
|
5
5
|
'data-test'?: string | null | undefined;
|
|
6
6
|
};
|
|
7
7
|
/**
|
|
@@ -9,14 +9,14 @@ export const CollapseControl = ({ children, 'data-test': dataTest }) => {
|
|
|
9
9
|
const { setCollapsed, collapsed, id } = useContext(CollapseContext);
|
|
10
10
|
const child = useMemo(() => {
|
|
11
11
|
if (typeof children === 'function') {
|
|
12
|
-
return
|
|
12
|
+
return children(collapsed);
|
|
13
13
|
}
|
|
14
|
-
return
|
|
15
|
-
}, [children, collapsed
|
|
16
|
-
return cloneElement(child, {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
14
|
+
return children;
|
|
15
|
+
}, [children, collapsed]);
|
|
16
|
+
return (<p data-test={dataTests(COLLAPSE_CONTROL_TEST_ID, dataTest)}>{cloneElement(child, {
|
|
17
|
+
onClick: setCollapsed,
|
|
18
|
+
'aria-controls': `collapse-content-${id}`,
|
|
19
|
+
'aria-expanded': String(!collapsed)
|
|
20
|
+
})}</p>);
|
|
21
21
|
};
|
|
22
22
|
export default CollapseControl;
|
|
@@ -82,10 +82,10 @@
|
|
|
82
82
|
--ring-hover-background-color: rgb(var(--ring-hover-background-components)); /* #323D54 */
|
|
83
83
|
--ring-navigation-background-components: 17, 19, 20;
|
|
84
84
|
--ring-navigation-background-color: rgb(var(--ring-navigation-background-components)); /* #111314 */
|
|
85
|
-
--ring-tag-background-components:
|
|
86
|
-
--ring-tag-background-color: rgb(var(--ring-tag-background-components)); /* #
|
|
87
|
-
--ring-tag-hover-background-components:
|
|
88
|
-
--ring-tag-hover-background-color: rgb(var(--ring-tag-hover-background-components)); /* #
|
|
85
|
+
--ring-tag-background-components: 74, 77, 84;
|
|
86
|
+
--ring-tag-background-color: rgb(var(--ring-tag-background-components)); /* #4A4D54 */
|
|
87
|
+
--ring-tag-hover-background-components: 67, 69, 76;
|
|
88
|
+
--ring-tag-hover-background-color: rgb(var(--ring-tag-hover-background-components)); /* #43454C */
|
|
89
89
|
--ring-removed-background-components: 94, 56, 53;
|
|
90
90
|
--ring-removed-background-color: rgb(var(--ring-removed-background-components)); /* #5E3835 */
|
|
91
91
|
--ring-warning-background-components: 87, 71, 47;
|
|
@@ -42,6 +42,7 @@ export type ListDataItem<T = unknown> = T & Partial<Omit<LinkProps, 'onClick' |
|
|
|
42
42
|
glyph?: IconType | string | null | undefined;
|
|
43
43
|
icon?: string | undefined;
|
|
44
44
|
iconSize?: Size | null | undefined;
|
|
45
|
+
suppressSizeWarning?: boolean | null | undefined;
|
|
45
46
|
rightGlyph?: IconType | string | null | undefined;
|
|
46
47
|
title?: string | null | undefined;
|
|
47
48
|
level?: number | null | undefined;
|
|
@@ -65,7 +65,7 @@ export default class ListItem extends PureComponent {
|
|
|
65
65
|
<div className={styles.top} onMouseOut={this.stopBubbling} onBlur={this.stopBubbling}>
|
|
66
66
|
{!showCheckbox && (<div className={styles.left}>
|
|
67
67
|
{leftNodes}
|
|
68
|
-
{glyph && (<Icon className={styles.glyph} glyph={glyph} size={this.props.iconSize}/>)}
|
|
68
|
+
{glyph && (<Icon className={styles.glyph} glyph={glyph} size={this.props.iconSize} suppressSizeWarning={this.props.suppressSizeWarning}/>)}
|
|
69
69
|
{(avatar || shouldShowGeneratedAvatar) && (<Avatar className={styles.avatar} url={avatar} size={AvatarSize.Size20} subavatar={subavatar} username={username}/>)}
|
|
70
70
|
</div>)}
|
|
71
71
|
|
|
@@ -74,7 +74,7 @@ export default class ListItem extends PureComponent {
|
|
|
74
74
|
{description && (<span className={styles.description} data-test="ring-list-item-description">{description}</span>)}
|
|
75
75
|
|
|
76
76
|
<div className={styles.right}>
|
|
77
|
-
{rightGlyph && (<Icon className={styles.rightGlyph} glyph={rightGlyph} size={this.props.iconSize}/>)}
|
|
77
|
+
{rightGlyph && (<Icon className={styles.rightGlyph} glyph={rightGlyph} suppressSizeWarning={this.props.suppressSizeWarning} size={this.props.iconSize}/>)}
|
|
78
78
|
{icon && (<div className={styles.icon} style={{ backgroundImage: `url("${icon}")` }}/>)}
|
|
79
79
|
{rightNodes}
|
|
80
80
|
</div>
|
|
@@ -122,7 +122,8 @@ export const Slider = ({ defaultValue, value, min = 0, max = HUNDRED, step = 1,
|
|
|
122
122
|
window.removeEventListener('mouseup', handleMouseUp);
|
|
123
123
|
};
|
|
124
124
|
}, [isDragging, handleMouseMove, handleMouseUp, disabled]);
|
|
125
|
-
return (<div ref={ref} role="
|
|
125
|
+
return (<div ref={ref} role="presentation" // contains interactive elements
|
|
126
|
+
className={classNames(styles.slider, className, {
|
|
126
127
|
[styles.disabled]: disabled,
|
|
127
128
|
[styles.marked]: !!marks || showTag
|
|
128
129
|
})} tabIndex={-1} onMouseDown={handleMouseDown}>
|
|
@@ -143,10 +144,10 @@ export const Slider = ({ defaultValue, value, min = 0, max = HUNDRED, step = 1,
|
|
|
143
144
|
return (
|
|
144
145
|
// eslint-disable-next-line react/no-array-index-key
|
|
145
146
|
<Fragment key={index}>
|
|
146
|
-
<
|
|
147
|
+
<div tabIndex={0} aria-label="Pick value" role="slider" aria-valuemin={min} aria-valuemax={max} aria-valuenow={numValue} data-index={index} style={{ left: `${percent}%` }} className={classNames(styles.thumb, {
|
|
147
148
|
[styles.disabled]: disabled,
|
|
148
149
|
[styles.dragged]: isDragging && draggedIndex === index
|
|
149
|
-
})}
|
|
150
|
+
})} onMouseDown={handleMouseDown}/>
|
|
150
151
|
{showTag && (<div style={{ left: `${percent}%` }} className={classNames(styles.tag, { [styles.disabled]: disabled })} role="tooltip">
|
|
151
152
|
{renderTag ? renderTag(numValue) : numValue}
|
|
152
153
|
</div>)}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jetbrains/ring-ui",
|
|
3
|
-
"version": "6.0.
|
|
3
|
+
"version": "6.0.20",
|
|
4
4
|
"description": "JetBrains UI library",
|
|
5
5
|
"author": "JetBrains",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -34,8 +34,9 @@
|
|
|
34
34
|
"apply-resolutions": "npx npm-force-resolutions@0.0.10",
|
|
35
35
|
"_postinstall": "husky install",
|
|
36
36
|
"prepare": "webpack -c .storybook/custom-header/webpack.config.js",
|
|
37
|
-
"
|
|
38
|
-
"a11y-audit
|
|
37
|
+
"prea11y-audit": "playwright install",
|
|
38
|
+
"a11y-audit": "test-storybook --url http://localhost:9999",
|
|
39
|
+
"a11y-audit-ci": "node a11y-audit-ci.mjs",
|
|
39
40
|
"console-errors": "jest console-errors.test.js --watchAll",
|
|
40
41
|
"console-errors-ci": "jest console-errors.test.js --reporters=jest-teamcity",
|
|
41
42
|
"test": "karma start",
|
|
@@ -47,7 +48,7 @@
|
|
|
47
48
|
"prebuild": "rimraf components && tsc --project tsconfig-build.json && cpy '**/*' '!**/*.ts' '!**/*.tsx' '!**/__mocks__/**' ../components --parents --cwd=src/",
|
|
48
49
|
"build": "./node_modules/.bin/rollup -c --bundleConfigAsCjs",
|
|
49
50
|
"postbuild": "cpy '**/*.d.ts' ../dist --parents --cwd=components/",
|
|
50
|
-
"serve": "
|
|
51
|
+
"serve": "http-server storybook-dist/ -p 9999",
|
|
51
52
|
"start": "storybook dev -p 9999",
|
|
52
53
|
"storybook-debug": "node --inspect-brk node_modules/@storybook/react/bin -p 9999",
|
|
53
54
|
"lint:js": "eslint",
|
|
@@ -87,20 +88,19 @@
|
|
|
87
88
|
"@rollup/plugin-json": "^6.1.0",
|
|
88
89
|
"@rollup/plugin-node-resolve": "^15.2.3",
|
|
89
90
|
"@rollup/plugin-replace": "^5.0.5",
|
|
90
|
-
"@storybook/addon-a11y": "8.0.
|
|
91
|
-
"@storybook/addon-docs": "8.0.
|
|
92
|
-
"@storybook/addon-essentials": "
|
|
93
|
-
"@storybook/addon-
|
|
94
|
-
"@storybook/
|
|
95
|
-
"@storybook/
|
|
96
|
-
"@storybook/
|
|
97
|
-
"@storybook/
|
|
98
|
-
"@storybook/
|
|
99
|
-
"@storybook/
|
|
100
|
-
"@storybook/
|
|
101
|
-
"@storybook/
|
|
102
|
-
"@
|
|
103
|
-
"@testing-library/react": "^15.0.2",
|
|
91
|
+
"@storybook/addon-a11y": "8.0.9",
|
|
92
|
+
"@storybook/addon-docs": "8.0.9",
|
|
93
|
+
"@storybook/addon-essentials": "8.0.9",
|
|
94
|
+
"@storybook/addon-storysource": "8.0.9",
|
|
95
|
+
"@storybook/components": "8.0.9",
|
|
96
|
+
"@storybook/manager-api": "8.0.9",
|
|
97
|
+
"@storybook/preview-api": "8.0.9",
|
|
98
|
+
"@storybook/react": "8.0.9",
|
|
99
|
+
"@storybook/react-webpack5": "8.0.9",
|
|
100
|
+
"@storybook/source-loader": "8.0.9",
|
|
101
|
+
"@storybook/test-runner": "^0.17.0",
|
|
102
|
+
"@storybook/theming": "8.0.9",
|
|
103
|
+
"@testing-library/react": "^15.0.4",
|
|
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",
|
|
@@ -112,12 +112,13 @@
|
|
|
112
112
|
"@types/react-dom": "^18.2.25",
|
|
113
113
|
"@types/sinon": "^17.0.3",
|
|
114
114
|
"@types/sinon-chai": "^3.2.12",
|
|
115
|
-
"@typescript-eslint/eslint-plugin": "^7.7.
|
|
116
|
-
"@typescript-eslint/parser": "^7.7.
|
|
115
|
+
"@typescript-eslint/eslint-plugin": "^7.7.1",
|
|
116
|
+
"@typescript-eslint/parser": "^7.7.1",
|
|
117
117
|
"@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
|
|
118
118
|
"acorn": "^8.11.3",
|
|
119
|
+
"axe-playwright": "^2.0.1",
|
|
119
120
|
"babel-plugin-require-context-hook": "^1.0.0",
|
|
120
|
-
"caniuse-lite": "^1.0.
|
|
121
|
+
"caniuse-lite": "^1.0.30001612",
|
|
121
122
|
"chai": "^5.1.0",
|
|
122
123
|
"chai-as-promised": "^7.1.1",
|
|
123
124
|
"chai-dom": "^1.10.0",
|
|
@@ -136,6 +137,7 @@
|
|
|
136
137
|
"events": "^3.3.0",
|
|
137
138
|
"glob": "^10.3.12",
|
|
138
139
|
"html-webpack-plugin": "^5.6.0",
|
|
140
|
+
"http-server": "^14.1.1",
|
|
139
141
|
"husky": "^9.0.11",
|
|
140
142
|
"identity-obj-proxy": "^3.0.0",
|
|
141
143
|
"imports-loader": "^5.0.0",
|
|
@@ -154,22 +156,22 @@
|
|
|
154
156
|
"mocha": "^10.4.0",
|
|
155
157
|
"pinst": "^3.0.0",
|
|
156
158
|
"prettier": "^3.2.5",
|
|
157
|
-
"puppeteer": "^22.
|
|
159
|
+
"puppeteer": "^22.7.0",
|
|
158
160
|
"raw-loader": "^4.0.2",
|
|
159
161
|
"react": "^18.2.0",
|
|
160
162
|
"react-dom": "^18.2.0",
|
|
161
163
|
"react-test-renderer": "^18.2.0",
|
|
162
164
|
"regenerator-runtime": "^0.14.1",
|
|
163
165
|
"rimraf": "^5.0.5",
|
|
164
|
-
"rollup": "^4.
|
|
166
|
+
"rollup": "^4.16.4",
|
|
165
167
|
"rollup-plugin-clear": "^2.0.7",
|
|
166
168
|
"rollup-plugin-styles": "^4.0.0",
|
|
167
169
|
"sinon": "^17.0.1",
|
|
168
170
|
"sinon-chai": "^3.7.0",
|
|
169
171
|
"storage-mock": "^2.1.0",
|
|
170
|
-
"storybook": "8.0.
|
|
172
|
+
"storybook": "8.0.9",
|
|
171
173
|
"storybook-addon-themes": "^6.1.0",
|
|
172
|
-
"stylelint": "^16.
|
|
174
|
+
"stylelint": "^16.4.0",
|
|
173
175
|
"svg-inline-loader": "^0.8.2",
|
|
174
176
|
"teamcity-service-messages": "^0.1.14",
|
|
175
177
|
"terser-webpack-plugin": "^5.3.10",
|
|
@@ -202,8 +204,8 @@
|
|
|
202
204
|
"@babel/core": "^7.24.4",
|
|
203
205
|
"@babel/preset-typescript": "^7.24.1",
|
|
204
206
|
"@jetbrains/babel-preset-jetbrains": "^2.3.2",
|
|
205
|
-
"@jetbrains/icons": "^4.
|
|
206
|
-
"@jetbrains/logos": "^
|
|
207
|
+
"@jetbrains/icons": "^4.2.0",
|
|
208
|
+
"@jetbrains/logos": "^3.0.0-canary.734b213.0",
|
|
207
209
|
"@jetbrains/postcss-require-hover": "^0.1.2",
|
|
208
210
|
"@types/combokeys": "^2.4.9",
|
|
209
211
|
"@types/deep-equal": "^1.0.4",
|
|
@@ -237,7 +239,7 @@
|
|
|
237
239
|
"postcss-font-family-system-ui": "^5.0.0",
|
|
238
240
|
"postcss-loader": "^8.1.1",
|
|
239
241
|
"postcss-modules-values-replace": "^4.2.0",
|
|
240
|
-
"postcss-preset-env": "^9.5.
|
|
242
|
+
"postcss-preset-env": "^9.5.9",
|
|
241
243
|
"prop-types": "^15.8.1",
|
|
242
244
|
"react-movable": "^3.2.0",
|
|
243
245
|
"react-virtualized": "^9.22.5",
|