@jetbrains/ring-ui 6.0.5 → 6.0.6
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/README.md
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
This collection of UI components aims to provide all the necessary building blocks for web-based products built inside JetBrains, as well as third-party plugins developed for JetBrains' products.
|
|
7
7
|
|
|
8
8
|
## Try now
|
|
9
|
-
* Try the [codesandbox](https://codesandbox.io/p/
|
|
9
|
+
* Try the [codesandbox](https://codesandbox.io/p/sandbox/ring-ui-sandbox-6-0-demo-qk5vgv), based on `create-react-app` tooling, to see and try the UI components
|
|
10
10
|
* Check out [list of examples](https://jetbrains.github.io/ring-ui/master/index.html) for each component
|
|
11
11
|
|
|
12
12
|
## Installation
|
|
@@ -118,12 +118,13 @@
|
|
|
118
118
|
&[disabled]:checked + .cell,
|
|
119
119
|
&[disabled]:indeterminate + .cell {
|
|
120
120
|
border-color: var(--ring-border-selected-disabled-color);
|
|
121
|
+
background-color: var(--ring-border-selected-disabled-color);
|
|
121
122
|
}
|
|
122
123
|
|
|
123
124
|
/* stylelint-disable-next-line selector-max-specificity */
|
|
124
125
|
&[disabled]:checked + .cell .check,
|
|
125
126
|
&[disabled]:indeterminate + .cell .minus {
|
|
126
|
-
color: var(--ring-
|
|
127
|
+
color: var(--ring-disabled-background-color);
|
|
127
128
|
}
|
|
128
129
|
|
|
129
130
|
/* stylelint-disable-next-line selector-max-specificity */
|
|
@@ -15,8 +15,8 @@
|
|
|
15
15
|
--ring-icon-secondary-color: rgb(var(--ring-icon-secondary-components)); /* #999 */
|
|
16
16
|
--ring-border-disabled-components: 232, 232, 232;
|
|
17
17
|
--ring-border-disabled-color: rgb(var(--ring-border-disabled-components)); /* #e8e8e8 */
|
|
18
|
-
--ring-border-selected-disabled-components:
|
|
19
|
-
--ring-border-selected-disabled-color: rgb(var(--ring-border-selected-disabled-components)); /* #
|
|
18
|
+
--ring-border-selected-disabled-components: 199, 199, 199;
|
|
19
|
+
--ring-border-selected-disabled-color: rgb(var(--ring-border-selected-disabled-components)); /* #C7C7C7 */
|
|
20
20
|
--ring-icon-disabled-components: 212, 212, 212;
|
|
21
21
|
--ring-icon-disabled-color: rgb(var(--ring-icon-disabled-components)); /* #d4d4d4 */
|
|
22
22
|
--ring-border-hover-components: 128, 198, 255;
|
|
@@ -11,10 +11,10 @@
|
|
|
11
11
|
--ring-icon-color: rgb(var(--ring-icon-components)); /* #777C88 */
|
|
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:
|
|
15
|
-
--ring-border-disabled-color: rgb(var(--ring-border-disabled-components)); /* #
|
|
16
|
-
--ring-border-selected-disabled-components:
|
|
17
|
-
--ring-border-selected-disabled-color: rgb(var(--ring-border-selected-disabled-components)); /* #
|
|
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
18
|
--ring-icon-disabled-components: 64, 66, 71;
|
|
19
19
|
--ring-icon-disabled-color: rgb(var(--ring-icon-disabled-components)); /* #404247 */
|
|
20
20
|
--ring-border-hover-components: 77, 100, 148;
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
@import "../global/variables.css";
|
|
2
2
|
|
|
3
3
|
@value padding: 2px;
|
|
4
|
-
@value disabled-line-color: rgba(255, 255, 255, 0.9);
|
|
5
4
|
@value duration: 300ms;
|
|
6
5
|
@value timing-function: cubic-bezier(0.23, 1, 0.32, 1);
|
|
7
6
|
|
|
@@ -48,17 +47,24 @@
|
|
|
48
47
|
|
|
49
48
|
.switch {
|
|
50
49
|
--ring-toggle-item-color: var(--ring-white-text-color);
|
|
50
|
+
--ring-toggle-background-color: var(--ring-icon-color);
|
|
51
|
+
--ring-toggle-border-color: var(--ring-toggle-background-color);
|
|
52
|
+
--ring-switch-border-color: var(--ring-toggle-item-color);
|
|
51
53
|
|
|
52
54
|
position: relative;
|
|
53
55
|
|
|
54
56
|
display: block;
|
|
55
57
|
|
|
58
|
+
box-sizing: border-box;
|
|
59
|
+
|
|
56
60
|
width: 100%;
|
|
57
61
|
height: 100%;
|
|
58
62
|
|
|
59
63
|
transition: background-color timing-function duration;
|
|
60
64
|
|
|
61
|
-
|
|
65
|
+
border: solid 1px var(--ring-toggle-border-color);
|
|
66
|
+
|
|
67
|
+
background-color: var(--ring-toggle-background-color);
|
|
62
68
|
|
|
63
69
|
.input:focus + & {
|
|
64
70
|
box-shadow: inset 0 0 0 1px var(--ring-border-hover-color), 0 0 0 1px var(--ring-border-hover-color);
|
|
@@ -66,8 +72,10 @@
|
|
|
66
72
|
|
|
67
73
|
&::before {
|
|
68
74
|
position: absolute;
|
|
69
|
-
top: padding;
|
|
70
|
-
left:
|
|
75
|
+
top: calc(padding - 1px);
|
|
76
|
+
left: -1px;
|
|
77
|
+
|
|
78
|
+
box-sizing: border-box;
|
|
71
79
|
|
|
72
80
|
width: calc(var(--ring-unit) * 1.5);
|
|
73
81
|
height: calc(var(--ring-unit) * 1.5);
|
|
@@ -78,13 +86,15 @@
|
|
|
78
86
|
|
|
79
87
|
transform: translateX(padding);
|
|
80
88
|
|
|
89
|
+
border: solid 1px var(--ring-switch-border-color);
|
|
90
|
+
|
|
81
91
|
border-radius: calc(var(--ring-unit) * 0.75);
|
|
82
92
|
background-color: var(--ring-toggle-item-color);
|
|
83
93
|
}
|
|
84
94
|
}
|
|
85
95
|
|
|
86
96
|
.input:checked + .switch {
|
|
87
|
-
background-color: var(--ring-main-color);
|
|
97
|
+
--ring-toggle-background-color: var(--ring-main-color);
|
|
88
98
|
}
|
|
89
99
|
|
|
90
100
|
:checked:hover + .switch {
|
|
@@ -166,41 +176,23 @@
|
|
|
166
176
|
}
|
|
167
177
|
}
|
|
168
178
|
|
|
169
|
-
|
|
170
|
-
|
|
179
|
+
/* stylelint-disable-next-line selector-max-specificity */
|
|
180
|
+
.input:checked[disabled] + .switch {
|
|
181
|
+
--ring-toggle-background-color: var(--ring-border-selected-disabled-color);
|
|
171
182
|
}
|
|
172
183
|
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
height: 100%;
|
|
180
|
-
|
|
181
|
-
content: "";
|
|
182
|
-
|
|
183
|
-
border-radius: var(--ring-unit);
|
|
184
|
-
background-image:
|
|
185
|
-
linear-gradient(
|
|
186
|
-
45deg,
|
|
187
|
-
transparent,
|
|
188
|
-
transparent 37.5%,
|
|
189
|
-
disabled-line-color 37.5%,
|
|
190
|
-
disabled-line-color 50%,
|
|
191
|
-
transparent 50%,
|
|
192
|
-
transparent 87.5%,
|
|
193
|
-
disabled-line-color 87.5%,
|
|
194
|
-
disabled-line-color
|
|
195
|
-
);
|
|
196
|
-
background-repeat: repeat;
|
|
197
|
-
background-size: 4px 4px;
|
|
184
|
+
/* stylelint-disable-next-line selector-max-specificity */
|
|
185
|
+
.input[disabled]:not(:checked) + .switch {
|
|
186
|
+
--ring-toggle-item-color: var(--ring-content-background-color);
|
|
187
|
+
--ring-toggle-background-color: var(--ring-disabled-background-color);
|
|
188
|
+
--ring-toggle-border-color: var(--ring-border-disabled-color);
|
|
189
|
+
--ring-switch-border-color: var(--ring-border-disabled-color);
|
|
198
190
|
}
|
|
199
191
|
|
|
200
192
|
.paleSwitch.paleSwitch {
|
|
201
|
-
background-color: var(--ring-pale-control-color);
|
|
193
|
+
--ring-toggle-background-color: var(--ring-pale-control-color);
|
|
202
194
|
}
|
|
203
195
|
|
|
204
196
|
.input:checked + .paleSwitch {
|
|
205
|
-
background-color: var(--ring-border-
|
|
197
|
+
--ring-toggle-background-color: var(--ring-border-disabled-color);
|
|
206
198
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jetbrains/ring-ui",
|
|
3
|
-
"version": "6.0.
|
|
3
|
+
"version": "6.0.6",
|
|
4
4
|
"description": "JetBrains UI library",
|
|
5
5
|
"author": "JetBrains",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -87,18 +87,18 @@
|
|
|
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": "7.6.
|
|
91
|
-
"@storybook/addon-docs": "7.6.
|
|
92
|
-
"@storybook/addon-essentials": "7.6.
|
|
90
|
+
"@storybook/addon-a11y": "7.6.15",
|
|
91
|
+
"@storybook/addon-docs": "7.6.15",
|
|
92
|
+
"@storybook/addon-essentials": "7.6.15",
|
|
93
93
|
"@storybook/addon-storyshots": "7.6.10",
|
|
94
|
-
"@storybook/addon-storyshots-puppeteer": "7.6.
|
|
95
|
-
"@storybook/addon-storysource": "7.6.
|
|
96
|
-
"@storybook/addons": "7.6.
|
|
94
|
+
"@storybook/addon-storyshots-puppeteer": "7.6.15",
|
|
95
|
+
"@storybook/addon-storysource": "7.6.15",
|
|
96
|
+
"@storybook/addons": "7.6.15",
|
|
97
97
|
"@storybook/preview-api": "7.6.10",
|
|
98
98
|
"@storybook/react": "7.6.10",
|
|
99
|
-
"@storybook/react-webpack5": "7.6.
|
|
100
|
-
"@storybook/source-loader": "7.6.
|
|
101
|
-
"@storybook/theming": "7.6.
|
|
99
|
+
"@storybook/react-webpack5": "7.6.15",
|
|
100
|
+
"@storybook/source-loader": "7.6.15",
|
|
101
|
+
"@storybook/theming": "7.6.15",
|
|
102
102
|
"@testing-library/react": "^14.2.1",
|
|
103
103
|
"@testing-library/user-event": "^14.5.2",
|
|
104
104
|
"@types/chai": "^4.3.11",
|
|
@@ -111,18 +111,18 @@
|
|
|
111
111
|
"@types/react-dom": "^18.2.19",
|
|
112
112
|
"@types/sinon": "^17.0.3",
|
|
113
113
|
"@types/sinon-chai": "^3.2.12",
|
|
114
|
-
"@typescript-eslint/eslint-plugin": "^
|
|
115
|
-
"@typescript-eslint/parser": "^
|
|
114
|
+
"@typescript-eslint/eslint-plugin": "^7.0.1",
|
|
115
|
+
"@typescript-eslint/parser": "^7.0.1",
|
|
116
116
|
"@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
|
|
117
117
|
"acorn": "^8.11.3",
|
|
118
118
|
"babel-plugin-require-context-hook": "^1.0.0",
|
|
119
|
-
"caniuse-lite": "^1.0.
|
|
120
|
-
"chai": "^5.0
|
|
119
|
+
"caniuse-lite": "^1.0.30001587",
|
|
120
|
+
"chai": "^5.1.0",
|
|
121
121
|
"chai-as-promised": "^7.1.1",
|
|
122
122
|
"chai-dom": "^1.10.0",
|
|
123
123
|
"chai-enzyme": "1.0.0-beta.1",
|
|
124
124
|
"cheerio": "^1.0.0-rc.12",
|
|
125
|
-
"core-js": "^3.
|
|
125
|
+
"core-js": "^3.36.0",
|
|
126
126
|
"cpy-cli": "^3.1.1",
|
|
127
127
|
"enzyme": "^3.11.0",
|
|
128
128
|
"eslint": "^8.56.0",
|
|
@@ -135,7 +135,7 @@
|
|
|
135
135
|
"events": "^3.3.0",
|
|
136
136
|
"glob": "^10.3.10",
|
|
137
137
|
"html-webpack-plugin": "^5.6.0",
|
|
138
|
-
"husky": "^9.0.
|
|
138
|
+
"husky": "^9.0.11",
|
|
139
139
|
"identity-obj-proxy": "^3.0.0",
|
|
140
140
|
"imports-loader": "^5.0.0",
|
|
141
141
|
"jest": "~29.7.0",
|
|
@@ -160,13 +160,13 @@
|
|
|
160
160
|
"react-test-renderer": "^18.2.0",
|
|
161
161
|
"regenerator-runtime": "^0.14.1",
|
|
162
162
|
"rimraf": "^5.0.5",
|
|
163
|
-
"rollup": "^4.
|
|
163
|
+
"rollup": "^4.11.0",
|
|
164
164
|
"rollup-plugin-clear": "^2.0.7",
|
|
165
165
|
"rollup-plugin-styles": "^4.0.0",
|
|
166
166
|
"sinon": "^17.0.1",
|
|
167
167
|
"sinon-chai": "^3.7.0",
|
|
168
168
|
"storage-mock": "^2.1.0",
|
|
169
|
-
"storybook": "7.6.
|
|
169
|
+
"storybook": "7.6.15",
|
|
170
170
|
"storybook-addon-themes": "^6.1.0",
|
|
171
171
|
"stylelint": "^16.2.1",
|
|
172
172
|
"svg-inline-loader": "^0.8.2",
|
|
@@ -213,7 +213,7 @@
|
|
|
213
213
|
"@ungap/url-search-params": "^0.2.2",
|
|
214
214
|
"babel-loader": "9.1.3",
|
|
215
215
|
"babel-plugin-transform-define": "^2.1.4",
|
|
216
|
-
"browserslist": "^4.
|
|
216
|
+
"browserslist": "^4.23.0",
|
|
217
217
|
"change-case": "^4.1.1",
|
|
218
218
|
"classnames": "^2.5.1",
|
|
219
219
|
"combokeys": "^3.0.1",
|