@rescui/button 0.17.1 → 0.18.1

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 (9) hide show
  1. package/lib/_virtual/index.css.js +7 -7
  2. package/lib/_virtual/loading.js +8 -9
  3. package/lib/button.js +103 -103
  4. package/lib/button.p.module.css.js +29 -29
  5. package/lib/index.css +205 -250
  6. package/lib/index.js +1 -1
  7. package/lib/public-api.p.css +54 -54
  8. package/lib/public-api.pcss +54 -54
  9. package/package.json +9 -10
package/lib/index.js CHANGED
@@ -5,5 +5,5 @@ export { Button } from './button.js';
5
5
  * @deprecated use named import instead
6
6
  */
7
7
 
8
- var DefaultButton = Button;
8
+ const DefaultButton = Button;
9
9
  export { DefaultButton as default };
package/lib/public-api.p.css CHANGED
@@ -1,5 +1,20 @@
1
1
  @define-mixin rs-button-size-xs{
2
2
  &:not(html){
3
+ --_rs-button-border-radius-base:var(
4
+ --rs-button-xs-border-radius,
5
+ var(--rs-button-border-radius, 4px)
6
+ );
7
+ --_rs-button-multiline-border-radius-base:var(
8
+ --rs-button-xs-multiline-border-radius,
9
+ var(--rs-button-multiline-border-radius, 4px)
10
+ );
11
+ --_rs-button-vertical-padding:2px;
12
+ --_rs-button-horizontal-padding:8px;
13
+ --_rs-button-icon-only-padding:4px;
14
+ --_rs-button-icon-size:16px;
15
+ --_rs-button-icon-offset:4px;
16
+ }
17
+ &:not(html) [data-rs-internal="button__content"]{
3
18
  --_rs-typography-letter-spacing:0.0045em;
4
19
  --_rs-typography-text-transform:initial;
5
20
  --_rs-typography-font-variant-numeric:initial;
@@ -32,23 +47,25 @@
32
47
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
33
48
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
34
49
  --_rs-typography-link-border-bottom-width-from-text:1px;
50
+ }
51
+ }
52
+ @define-mixin rs-button-size-s{
53
+ &:not(html){
35
54
  --_rs-button-border-radius-base:var(
36
- --rs-button-xs-border-radius,
37
- var(--rs-button-border-radius, 4px)
55
+ --rs-button-s-border-radius,
56
+ var(--rs-button-border-radius, 16px)
38
57
  );
39
58
  --_rs-button-multiline-border-radius-base:var(
40
- --rs-button-xs-multiline-border-radius,
59
+ --rs-button-s-multiline-border-radius,
41
60
  var(--rs-button-multiline-border-radius, 4px)
42
61
  );
43
- --_rs-button-vertical-padding:2px;
62
+ --_rs-button-vertical-padding:6px;
44
63
  --_rs-button-horizontal-padding:16px;
45
- --_rs-button-icon-size:16px;
64
+ --_rs-button-icon-only-padding:6px;
65
+ --_rs-button-icon-size:20px;
46
66
  --_rs-button-icon-offset:8px;
47
- --_rs-button-icon-margin-top:2px;
48
67
  }
49
- }
50
- @define-mixin rs-button-size-s{
51
- &:not(html){
68
+ &:not(html) [data-rs-internal="button__content"]{
52
69
  --_rs-typography-letter-spacing:0.0045em;
53
70
  --_rs-typography-text-transform:initial;
54
71
  --_rs-typography-font-variant-numeric:initial;
@@ -81,23 +98,25 @@
81
98
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
82
99
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
83
100
  --_rs-typography-link-border-bottom-width-from-text:1px;
101
+ }
102
+ }
103
+ @define-mixin rs-button-size-m{
104
+ &:not(html){
84
105
  --_rs-button-border-radius-base:var(
85
- --rs-button-s-border-radius,
86
- var(--rs-button-border-radius, 16px)
106
+ --rs-button-m-border-radius,
107
+ var(--rs-button-border-radius, 20px)
87
108
  );
88
109
  --_rs-button-multiline-border-radius-base:var(
89
- --rs-button-s-multiline-border-radius,
90
- var(--rs-button-multiline-border-radius, 4px)
110
+ --rs-button-m-multiline-border-radius,
111
+ var(--rs-button-multiline-border-radius, 8px)
91
112
  );
92
- --_rs-button-vertical-padding:6px;
93
- --_rs-button-horizontal-padding:16px;
94
- --_rs-button-icon-size:20px;
113
+ --_rs-button-vertical-padding:8px;
114
+ --_rs-button-horizontal-padding:24px;
115
+ --_rs-button-icon-only-padding:8px;
116
+ --_rs-button-icon-size:24px;
95
117
  --_rs-button-icon-offset:8px;
96
- --_rs-button-icon-margin-top:0px;
97
118
  }
98
- }
99
- @define-mixin rs-button-size-m{
100
- &:not(html){
119
+ &:not(html) [data-rs-internal="button__content"]{
101
120
  --_rs-typography-letter-spacing:0.0015em;
102
121
  --_rs-typography-text-transform:initial;
103
122
  --_rs-typography-font-variant-numeric:initial;
@@ -132,28 +151,28 @@
132
151
  --_rs-typography-link-border-bottom-width-from-text:1px;
133
152
  }
134
153
  @media screen and (max-width: 640px){
135
- &:not(html){
154
+ &:not(html) [data-rs-internal="button__content"]{
136
155
  --_rs-typography-list-li-margin-top-from-text:12px;
137
156
  }
138
157
  }
139
- &:not(html){
158
+ }
159
+ @define-mixin rs-button-size-l{
160
+ &:not(html){
140
161
  --_rs-button-border-radius-base:var(
141
- --rs-button-m-border-radius,
142
- var(--rs-button-border-radius, 20px)
162
+ --rs-button-l-border-radius,
163
+ var(--rs-button-border-radius, 26px)
143
164
  );
144
165
  --_rs-button-multiline-border-radius-base:var(
145
- --rs-button-m-multiline-border-radius,
146
- var(--rs-button-multiline-border-radius, 8px)
166
+ --rs-button-l-multiline-border-radius,
167
+ var(--rs-button-multiline-border-radius, 12px)
147
168
  );
148
- --_rs-button-vertical-padding:8px;
149
- --_rs-button-horizontal-padding:24px;
150
- --_rs-button-icon-size:24px;
151
- --_rs-button-icon-offset:8px;
152
- --_rs-button-icon-margin-top:0px;
169
+ --_rs-button-vertical-padding:12px;
170
+ --_rs-button-horizontal-padding:32px;
171
+ --_rs-button-icon-only-padding:12px;
172
+ --_rs-button-icon-size:28px;
173
+ --_rs-button-icon-offset:16px;
153
174
  }
154
- }
155
- @define-mixin rs-button-size-l{
156
- &:not(html){
175
+ &:not(html) [data-rs-internal="button__content"]{
157
176
  --_rs-typography-letter-spacing:normal;
158
177
  --_rs-typography-text-transform:initial;
159
178
  --_rs-typography-font-variant-numeric:initial;
@@ -188,25 +207,10 @@
188
207
  --_rs-typography-link-border-bottom-width-from-text:1px;
189
208
  }
190
209
  @media screen and (max-width: 640px){
191
- &:not(html){
210
+ &:not(html) [data-rs-internal="button__content"]{
192
211
  --_rs-typography-list-li-margin-top-from-text:16px;
193
212
  }
194
213
  }
195
- &:not(html){
196
- --_rs-button-border-radius-base:var(
197
- --rs-button-l-border-radius,
198
- var(--rs-button-border-radius, 26px)
199
- );
200
- --_rs-button-multiline-border-radius-base:var(
201
- --rs-button-l-multiline-border-radius,
202
- var(--rs-button-multiline-border-radius, 12px)
203
- );
204
- --_rs-button-vertical-padding:12px;
205
- --_rs-button-horizontal-padding:32px;
206
- --_rs-button-icon-size:28px;
207
- --_rs-button-icon-offset:16px;
208
- --_rs-button-icon-margin-top:0px;
209
- }
210
214
  }
211
215
  @define-mixin rs-button-mode-classic{
212
216
  &:not(html){
@@ -282,15 +286,11 @@
282
286
  @define-mixin rs-button-icon-left{
283
287
  &:not(html){
284
288
  --_rs-button-icon-flex-direction:row;
285
- --_rs-button-icon-position-multiplier-left:1;
286
- --_rs-button-icon-position-multiplier-right:0;
287
289
  }
288
290
  }
289
291
  @define-mixin rs-button-icon-right{
290
292
  &:not(html){
291
293
  --_rs-button-icon-flex-direction:row-reverse;
292
- --_rs-button-icon-position-multiplier-left:0;
293
- --_rs-button-icon-position-multiplier-right:1;
294
294
  }
295
295
  }
296
296
  @define-mixin rs-button-flat-right{
package/lib/public-api.pcss CHANGED
@@ -1,5 +1,20 @@
1
1
  @define-mixin rs-button-size-xs{
2
2
  &:not(html){
3
+ --_rs-button-border-radius-base:var(
4
+ --rs-button-xs-border-radius,
5
+ var(--rs-button-border-radius, 4px)
6
+ );
7
+ --_rs-button-multiline-border-radius-base:var(
8
+ --rs-button-xs-multiline-border-radius,
9
+ var(--rs-button-multiline-border-radius, 4px)
10
+ );
11
+ --_rs-button-vertical-padding:2px;
12
+ --_rs-button-horizontal-padding:8px;
13
+ --_rs-button-icon-only-padding:4px;
14
+ --_rs-button-icon-size:16px;
15
+ --_rs-button-icon-offset:4px;
16
+ }
17
+ &:not(html) [data-rs-internal="button__content"]{
3
18
  --_rs-typography-letter-spacing:0.0045em;
4
19
  --_rs-typography-text-transform:initial;
5
20
  --_rs-typography-font-variant-numeric:initial;
@@ -32,23 +47,25 @@
32
47
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
33
48
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
34
49
  --_rs-typography-link-border-bottom-width-from-text:1px;
50
+ }
51
+ }
52
+ @define-mixin rs-button-size-s{
53
+ &:not(html){
35
54
  --_rs-button-border-radius-base:var(
36
- --rs-button-xs-border-radius,
37
- var(--rs-button-border-radius, 4px)
55
+ --rs-button-s-border-radius,
56
+ var(--rs-button-border-radius, 16px)
38
57
  );
39
58
  --_rs-button-multiline-border-radius-base:var(
40
- --rs-button-xs-multiline-border-radius,
59
+ --rs-button-s-multiline-border-radius,
41
60
  var(--rs-button-multiline-border-radius, 4px)
42
61
  );
43
- --_rs-button-vertical-padding:2px;
62
+ --_rs-button-vertical-padding:6px;
44
63
  --_rs-button-horizontal-padding:16px;
45
- --_rs-button-icon-size:16px;
64
+ --_rs-button-icon-only-padding:6px;
65
+ --_rs-button-icon-size:20px;
46
66
  --_rs-button-icon-offset:8px;
47
- --_rs-button-icon-margin-top:2px;
48
67
  }
49
- }
50
- @define-mixin rs-button-size-s{
51
- &:not(html){
68
+ &:not(html) [data-rs-internal="button__content"]{
52
69
  --_rs-typography-letter-spacing:0.0045em;
53
70
  --_rs-typography-text-transform:initial;
54
71
  --_rs-typography-font-variant-numeric:initial;
@@ -81,23 +98,25 @@
81
98
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
82
99
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
83
100
  --_rs-typography-link-border-bottom-width-from-text:1px;
101
+ }
102
+ }
103
+ @define-mixin rs-button-size-m{
104
+ &:not(html){
84
105
  --_rs-button-border-radius-base:var(
85
- --rs-button-s-border-radius,
86
- var(--rs-button-border-radius, 16px)
106
+ --rs-button-m-border-radius,
107
+ var(--rs-button-border-radius, 20px)
87
108
  );
88
109
  --_rs-button-multiline-border-radius-base:var(
89
- --rs-button-s-multiline-border-radius,
90
- var(--rs-button-multiline-border-radius, 4px)
110
+ --rs-button-m-multiline-border-radius,
111
+ var(--rs-button-multiline-border-radius, 8px)
91
112
  );
92
- --_rs-button-vertical-padding:6px;
93
- --_rs-button-horizontal-padding:16px;
94
- --_rs-button-icon-size:20px;
113
+ --_rs-button-vertical-padding:8px;
114
+ --_rs-button-horizontal-padding:24px;
115
+ --_rs-button-icon-only-padding:8px;
116
+ --_rs-button-icon-size:24px;
95
117
  --_rs-button-icon-offset:8px;
96
- --_rs-button-icon-margin-top:0px;
97
118
  }
98
- }
99
- @define-mixin rs-button-size-m{
100
- &:not(html){
119
+ &:not(html) [data-rs-internal="button__content"]{
101
120
  --_rs-typography-letter-spacing:0.0015em;
102
121
  --_rs-typography-text-transform:initial;
103
122
  --_rs-typography-font-variant-numeric:initial;
@@ -132,28 +151,28 @@
132
151
  --_rs-typography-link-border-bottom-width-from-text:1px;
133
152
  }
134
153
  @media screen and (max-width: 640px){
135
- &:not(html){
154
+ &:not(html) [data-rs-internal="button__content"]{
136
155
  --_rs-typography-list-li-margin-top-from-text:12px;
137
156
  }
138
157
  }
139
- &:not(html){
158
+ }
159
+ @define-mixin rs-button-size-l{
160
+ &:not(html){
140
161
  --_rs-button-border-radius-base:var(
141
- --rs-button-m-border-radius,
142
- var(--rs-button-border-radius, 20px)
162
+ --rs-button-l-border-radius,
163
+ var(--rs-button-border-radius, 26px)
143
164
  );
144
165
  --_rs-button-multiline-border-radius-base:var(
145
- --rs-button-m-multiline-border-radius,
146
- var(--rs-button-multiline-border-radius, 8px)
166
+ --rs-button-l-multiline-border-radius,
167
+ var(--rs-button-multiline-border-radius, 12px)
147
168
  );
148
- --_rs-button-vertical-padding:8px;
149
- --_rs-button-horizontal-padding:24px;
150
- --_rs-button-icon-size:24px;
151
- --_rs-button-icon-offset:8px;
152
- --_rs-button-icon-margin-top:0px;
169
+ --_rs-button-vertical-padding:12px;
170
+ --_rs-button-horizontal-padding:32px;
171
+ --_rs-button-icon-only-padding:12px;
172
+ --_rs-button-icon-size:28px;
173
+ --_rs-button-icon-offset:16px;
153
174
  }
154
- }
155
- @define-mixin rs-button-size-l{
156
- &:not(html){
175
+ &:not(html) [data-rs-internal="button__content"]{
157
176
  --_rs-typography-letter-spacing:normal;
158
177
  --_rs-typography-text-transform:initial;
159
178
  --_rs-typography-font-variant-numeric:initial;
@@ -188,25 +207,10 @@
188
207
  --_rs-typography-link-border-bottom-width-from-text:1px;
189
208
  }
190
209
  @media screen and (max-width: 640px){
191
- &:not(html){
210
+ &:not(html) [data-rs-internal="button__content"]{
192
211
  --_rs-typography-list-li-margin-top-from-text:16px;
193
212
  }
194
213
  }
195
- &:not(html){
196
- --_rs-button-border-radius-base:var(
197
- --rs-button-l-border-radius,
198
- var(--rs-button-border-radius, 26px)
199
- );
200
- --_rs-button-multiline-border-radius-base:var(
201
- --rs-button-l-multiline-border-radius,
202
- var(--rs-button-multiline-border-radius, 12px)
203
- );
204
- --_rs-button-vertical-padding:12px;
205
- --_rs-button-horizontal-padding:32px;
206
- --_rs-button-icon-size:28px;
207
- --_rs-button-icon-offset:16px;
208
- --_rs-button-icon-margin-top:0px;
209
- }
210
214
  }
211
215
  @define-mixin rs-button-mode-classic{
212
216
  &:not(html){
@@ -282,15 +286,11 @@
282
286
  @define-mixin rs-button-icon-left{
283
287
  &:not(html){
284
288
  --_rs-button-icon-flex-direction:row;
285
- --_rs-button-icon-position-multiplier-left:1;
286
- --_rs-button-icon-position-multiplier-right:0;
287
289
  }
288
290
  }
289
291
  @define-mixin rs-button-icon-right{
290
292
  &:not(html){
291
293
  --_rs-button-icon-flex-direction:row-reverse;
292
- --_rs-button-icon-position-multiplier-left:0;
293
- --_rs-button-icon-position-multiplier-right:1;
294
294
  }
295
295
  }
296
296
  @define-mixin rs-button-flat-right{
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/button",
3
- "version": "0.17.1",
3
+ "version": "0.18.1",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
@@ -14,10 +14,9 @@
14
14
  "access": "public"
15
15
  },
16
16
  "dependencies": {
17
- "@babel/runtime-corejs3": "^7.14.0",
18
- "@rescui/use-resize-observer": "^0.2.4",
19
- "classnames": "^2.2.6",
20
- "core-js": "^3.9.1"
17
+ "@babel/runtime-corejs3": "^7.26.0",
18
+ "@rescui/use-resize-observer": "^0.2.5",
19
+ "classnames": "^2.2.6"
21
20
  },
22
21
  "peerDependencies": {
23
22
  "@rescui/ui-contexts": "^0.5.0",
@@ -25,10 +24,10 @@
25
24
  "react": ">=16.8.0 <19"
26
25
  },
27
26
  "devDependencies": {
28
- "@rescui/colors": "^0.2.5",
29
- "@rescui/icons": "^0.16.11",
30
- "@rescui/scripts": "^0.3.4",
31
- "@rescui/typography": "^0.19.0",
27
+ "@rescui/colors": "^0.2.6",
28
+ "@rescui/icons": "^0.16.12",
29
+ "@rescui/scripts": "^0.3.5",
30
+ "@rescui/typography": "^0.19.1",
32
31
  "@rescui/visual-regression": "^0.1.2",
33
32
  "@types/classnames": "^2.2.11"
34
33
  },
@@ -37,5 +36,5 @@
37
36
  "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
38
37
  },
39
38
  "nx": {},
40
- "gitHead": "3ef429c66a082b71861a814ba508693c68a94842"
39
+ "gitHead": "67627f69be3de4b4c6a21244fd7de36e841f01f0"
41
40
  }