@rescui/button 0.20.3 → 0.21.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 (8) hide show
  1. package/lib/_virtual/index.css.js +7 -7
  2. package/lib/button.d.ts +7 -2
  3. package/lib/button.js +8 -2
  4. package/lib/button.p.module.css.js +31 -29
  5. package/lib/index.css +90 -69
  6. package/lib/public-api.p.css +24 -4
  7. package/lib/public-api.pcss +24 -4
  8. package/package.json +4 -4
package/lib/_virtual/index.css.js CHANGED
@@ -1,10 +1,10 @@
1
1
  var styles = {
2
- "icon": "_icon_1p2plc6_4",
3
- "sizeXS": "_sizeXS_1p2plc6_14",
4
- "sizeS": "_sizeS_1p2plc6_18",
5
- "sizeM": "_sizeM_1p2plc6_22",
6
- "sizeL": "_sizeL_1p2plc6_26",
7
- "light": "_light_1p2plc6_30",
8
- "dark": "_dark_1p2plc6_34"
2
+ "icon": "_icon_gxmcf_4",
3
+ "sizeXS": "_sizeXS_gxmcf_14",
4
+ "sizeS": "_sizeS_gxmcf_18",
5
+ "sizeM": "_sizeM_gxmcf_22",
6
+ "sizeL": "_sizeL_gxmcf_26",
7
+ "light": "_light_gxmcf_30",
8
+ "dark": "_dark_gxmcf_34"
9
9
  };
10
10
  export { styles as default };
package/lib/button.d.ts CHANGED
@@ -5,7 +5,7 @@ export declare type ButtonSize = 'l' | 'm' | 's' | 'xs';
5
5
  export declare type ButtonModeGeneric = 'classic' | 'rock' | 'transparent' | 'outline';
6
6
  export declare type ButtonModeClear = 'clear';
7
7
  export declare type ButtonType = 'button' | 'submit' | 'reset';
8
- export declare type ButtonIconPosition = 'left' | 'right';
8
+ export declare type ButtonIconPosition = 'left' | 'left-edge' | 'right' | 'right-edge';
9
9
  export declare type ButtonFlat = 'left' | 'right';
10
10
  export declare type ButtonShifted = 'all' | ButtonShiftedSide | ButtonShiftedSide[];
11
11
  declare type ButtonIntrinsicProps = {
@@ -43,7 +43,12 @@ declare type ButtonIntrinsicProps = {
43
43
  shifted?: ButtonShifted;
44
44
  /** Additional icon */
45
45
  icon?: React.ReactNode;
46
- /** **Works only if the `icon` is present.** Additional icon position. */
46
+ /**
47
+ * **Works only if the `icon` is present.**
48
+ * Additional icon position.
49
+ * `-edge` variants are useful for aligning icons between multiple buttons in a column (some of which may be multiline).
50
+ * @see [RUI-228](https://youtrack.jetbrains.com/issue/RUI-228/Fix-button-icon-size-and-position)
51
+ * */
47
52
  iconPosition?: ButtonIconPosition;
48
53
  /** Url path for using component as a link. **Transform a Button into a link (`a` element).** */
49
54
  href?: string;
package/lib/button.js CHANGED
@@ -22,6 +22,12 @@ const SIZE_STYLES = {
22
22
  m: styles.sizeM,
23
23
  l: styles.sizeL
24
24
  };
25
+ const ICON_POSITION_STYLES = {
26
+ left: styles.alignIconLeft,
27
+ 'left-edge': styles.alignIconLeftEdge,
28
+ right: styles.alignIconRight,
29
+ 'right-edge': styles.alignIconRightEdge
30
+ };
25
31
  const Button = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line complexity
26
32
  (_ref, forwardedRef) => {
27
33
  let {
@@ -96,7 +102,7 @@ const Button = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line comple
96
102
  const buttonSharedProps = {
97
103
  href,
98
104
  disabled,
99
- className: cn(styles.main, MODE_STYLES[mode], SIZE_STYLES[size], iconPosition === 'right' ? styles.alignIconRight : styles.alignIconLeft, styles[theme], {
105
+ className: cn(styles.main, MODE_STYLES[mode], SIZE_STYLES[size], ICON_POSITION_STYLES[iconPosition] ?? ICON_POSITION_STYLES.left, styles[theme], {
100
106
  [styles.disabled]: disabled,
101
107
  [styles.flatLeft]: flat === 'left',
102
108
  [styles.flatRight]: flat === 'right',
@@ -192,7 +198,7 @@ Button.propTypes = {
192
198
  return null;
193
199
  }),
194
200
  icon: PropTypes.node,
195
- iconPosition: PropTypes.oneOf(['left', 'right']),
201
+ iconPosition: PropTypes.oneOf(['left', 'left-edge', 'right', 'right-edge']),
196
202
  size: PropTypes.oneOf(['l', 'm', 's', 'xs']),
197
203
  mode: validateAdditional(PropTypes.oneOf(['classic', 'rock', 'transparent', 'outline', 'clear']), props => {
198
204
  if (typeof props.shifted !== 'undefined' && props.mode !== 'clear') {
package/lib/button.p.module.css.js CHANGED
@@ -1,32 +1,34 @@
1
1
  var styles = {
2
- "light": "_light_uqeg85_6",
3
- "dark": "_dark_uqeg85_9",
4
- "flatRight": "_flatRight_uqeg85_13",
5
- "flatLeft": "_flatLeft_uqeg85_16",
6
- "sizeXs": "_sizeXs_uqeg85_20",
7
- "sizeS": "_sizeS_uqeg85_23",
8
- "sizeM": "_sizeM_uqeg85_26",
9
- "sizeL": "_sizeL_uqeg85_29",
10
- "modeClassic": "_modeClassic_uqeg85_33",
11
- "modeRock": "_modeRock_uqeg85_36",
12
- "modeTransparent": "_modeTransparent_uqeg85_39",
13
- "modeOutline": "_modeOutline_uqeg85_42",
14
- "modeClear": "_modeClear_uqeg85_45",
15
- "alignIconLeft": "_alignIconLeft_uqeg85_49",
16
- "alignIconRight": "_alignIconRight_uqeg85_52",
17
- "main": "_main_uqeg85_56",
18
- "disabled": "_disabled_uqeg85_133",
19
- "busy": "_busy_uqeg85_143",
20
- "busyOverlay": "_busyOverlay_uqeg85_147",
21
- "icon": "_icon_uqeg85_182",
22
- "allowMultiline": "_allowMultiline_uqeg85_195",
23
- "multiline": "_multiline_uqeg85_199",
24
- "withoutText": "_withoutText_uqeg85_203",
25
- "busyIcon": "_busyIcon_uqeg85_208",
26
- "content": "_content_uqeg85_224",
27
- "shiftedLeft": "_shiftedLeft_uqeg85_229",
28
- "shiftedRight": "_shiftedRight_uqeg85_232",
29
- "shiftedTop": "_shiftedTop_uqeg85_235",
30
- "shiftedBottom": "_shiftedBottom_uqeg85_238"
2
+ "light": "_light_xd7td5_6",
3
+ "dark": "_dark_xd7td5_9",
4
+ "flatRight": "_flatRight_xd7td5_13",
5
+ "flatLeft": "_flatLeft_xd7td5_16",
6
+ "sizeXs": "_sizeXs_xd7td5_20",
7
+ "sizeS": "_sizeS_xd7td5_23",
8
+ "sizeM": "_sizeM_xd7td5_26",
9
+ "sizeL": "_sizeL_xd7td5_29",
10
+ "modeClassic": "_modeClassic_xd7td5_33",
11
+ "modeRock": "_modeRock_xd7td5_36",
12
+ "modeTransparent": "_modeTransparent_xd7td5_39",
13
+ "modeOutline": "_modeOutline_xd7td5_42",
14
+ "modeClear": "_modeClear_xd7td5_45",
15
+ "alignIconLeft": "_alignIconLeft_xd7td5_49",
16
+ "alignIconLeftEdge": "_alignIconLeftEdge_xd7td5_52",
17
+ "alignIconRight": "_alignIconRight_xd7td5_55",
18
+ "alignIconRightEdge": "_alignIconRightEdge_xd7td5_58",
19
+ "main": "_main_xd7td5_62",
20
+ "disabled": "_disabled_xd7td5_139",
21
+ "busy": "_busy_xd7td5_149",
22
+ "busyOverlay": "_busyOverlay_xd7td5_153",
23
+ "icon": "_icon_xd7td5_188",
24
+ "allowMultiline": "_allowMultiline_xd7td5_203",
25
+ "content": "_content_xd7td5_207",
26
+ "multiline": "_multiline_xd7td5_211",
27
+ "withoutText": "_withoutText_xd7td5_215",
28
+ "busyIcon": "_busyIcon_xd7td5_220",
29
+ "shiftedLeft": "_shiftedLeft_xd7td5_241",
30
+ "shiftedRight": "_shiftedRight_xd7td5_244",
31
+ "shiftedTop": "_shiftedTop_xd7td5_247",
32
+ "shiftedBottom": "_shiftedBottom_xd7td5_250"
31
33
  };
32
34
  export { styles as default };
package/lib/index.css CHANGED
@@ -1,4 +1,4 @@
1
- ._icon_1p2plc6_4{
1
+ ._icon_gxmcf_4{
2
2
  --_rs-theme-dark:var(
3
3
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
4
4
  var(--rs-theme-dark, 0)
@@ -8,7 +8,7 @@
8
8
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
9
9
  }
10
10
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
11
- ._icon_1p2plc6_4{
11
+ ._icon_gxmcf_4{
12
12
  --_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
13
13
  --_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
14
14
  --_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
@@ -17,7 +17,7 @@
17
17
  }
18
18
  }
19
19
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
20
- ._icon_1p2plc6_4{
20
+ ._icon_gxmcf_4{
21
21
  --_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
22
22
  --_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
23
23
  --_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
@@ -25,30 +25,30 @@
25
25
  --_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
26
26
  }
27
27
  }
28
- ._icon_1p2plc6_4{
28
+ ._icon_gxmcf_4{
29
29
 
30
30
  fill:var(--_rs-icons-themed-fill-or-initial, currentcolor);
31
31
 
32
32
  width:auto;
33
33
  height:var(--_rs-icons-height);
34
34
  }
35
- ._sizeXS_1p2plc6_14{
35
+ ._sizeXS_gxmcf_14{
36
36
  --_rs-icons-height:16px;
37
37
  }
38
- ._sizeS_1p2plc6_18{
38
+ ._sizeS_gxmcf_18{
39
39
  --_rs-icons-height:20px;
40
40
  }
41
- ._sizeM_1p2plc6_22{
41
+ ._sizeM_gxmcf_22{
42
42
  --_rs-icons-height:24px;
43
43
  }
44
- ._sizeL_1p2plc6_26{
44
+ ._sizeL_gxmcf_26{
45
45
  --_rs-icons-height:28px;
46
46
  }
47
- ._light_1p2plc6_30{
47
+ ._light_gxmcf_30{
48
48
  --rs-theme-dark:0;
49
49
  --_rs-icons-themed-fill-or-initial:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
50
50
  }
51
- ._dark_1p2plc6_34{
51
+ ._dark_gxmcf_34{
52
52
  --rs-theme-dark:1;
53
53
  --_rs-icons-themed-fill-or-initial:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
54
54
  }
@@ -60,25 +60,25 @@
60
60
  transform:rotate(360deg);
61
61
  }
62
62
  }
63
- ._light_uqeg85_6{
63
+ ._light_xd7td5_6{
64
64
  --rs-theme-dark:0;
65
65
  }
66
- ._dark_uqeg85_9{
66
+ ._dark_xd7td5_9{
67
67
  --rs-theme-dark:1;
68
68
  }
69
- ._flatRight_uqeg85_13{
69
+ ._flatRight_xd7td5_13{
70
70
  --_rs-button-top-right-border-radius-or-initial:0px;
71
71
  --_rs-button-bottom-right-border-radius-or-initial:0px;
72
72
  --_rs-button-top-right-multiline-border-radius-or-initial:0px;
73
73
  --_rs-button-bottom-right-multiline-border-radius-or-initial:0px;
74
74
  }
75
- ._flatLeft_uqeg85_16{
75
+ ._flatLeft_xd7td5_16{
76
76
  --_rs-button-top-left-border-radius-or-initial:0px;
77
77
  --_rs-button-bottom-left-border-radius-or-initial:0px;
78
78
  --_rs-button-top-left-multiline-border-radius-or-initial:0px;
79
79
  --_rs-button-bottom-left-multiline-border-radius-or-initial:0px;
80
80
  }
81
- ._sizeXs_uqeg85_20{
81
+ ._sizeXs_xd7td5_20{
82
82
  --_rs-button-border-radius-base:var(
83
83
  --rs-button-xs-border-radius,
84
84
  var(--rs-button-border-radius, 4px)
@@ -93,7 +93,7 @@
93
93
  --_rs-button-icon-size:16px;
94
94
  --_rs-button-icon-offset:4px;
95
95
  }
96
- ._sizeXs_uqeg85_20 [data-rs-internal='button__content']{
96
+ ._sizeXs_xd7td5_20 [data-rs-internal='button__content']{
97
97
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
98
98
  --_rs-typography-text-transform:initial;
99
99
  --_rs-typography-font-variant-numeric:initial;
@@ -127,7 +127,7 @@
127
127
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
128
128
  --_rs-typography-link-border-bottom-width-from-text:1px;
129
129
  }
130
- ._sizeS_uqeg85_23{
130
+ ._sizeS_xd7td5_23{
131
131
  --_rs-button-border-radius-base:var(
132
132
  --rs-button-s-border-radius,
133
133
  var(--rs-button-border-radius, 16px)
@@ -142,7 +142,7 @@
142
142
  --_rs-button-icon-size:20px;
143
143
  --_rs-button-icon-offset:8px;
144
144
  }
145
- ._sizeS_uqeg85_23 [data-rs-internal='button__content']{
145
+ ._sizeS_xd7td5_23 [data-rs-internal='button__content']{
146
146
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
147
147
  --_rs-typography-text-transform:initial;
148
148
  --_rs-typography-font-variant-numeric:initial;
@@ -176,7 +176,7 @@
176
176
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
177
177
  --_rs-typography-link-border-bottom-width-from-text:1px;
178
178
  }
179
- ._sizeM_uqeg85_26{
179
+ ._sizeM_xd7td5_26{
180
180
  --_rs-button-border-radius-base:var(
181
181
  --rs-button-m-border-radius,
182
182
  var(--rs-button-border-radius, 20px)
@@ -191,7 +191,7 @@
191
191
  --_rs-button-icon-size:24px;
192
192
  --_rs-button-icon-offset:8px;
193
193
  }
194
- ._sizeM_uqeg85_26 [data-rs-internal='button__content']{
194
+ ._sizeM_xd7td5_26 [data-rs-internal='button__content']{
195
195
  --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
196
196
  --_rs-typography-text-transform:initial;
197
197
  --_rs-typography-font-variant-numeric:initial;
@@ -220,17 +220,20 @@
220
220
  --_rs-typography-text-auto-offset:16px;
221
221
  --_rs-typography-ul-list-li-padding-left:22px;
222
222
  --_rs-typography-ol-list-li-padding-left:26px;
223
- --_rs-typography-list-li-margin-top-from-text:16px;
223
+ --_rs-typography-list-li-margin-top-from-text:var(
224
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text,
225
+ 16px
226
+ );
224
227
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
225
228
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
226
229
  --_rs-typography-link-border-bottom-width-from-text:1px;
227
230
  }
228
231
  @media screen and (max-width: 640px){
229
- ._sizeM_uqeg85_26 [data-rs-internal='button__content']{
230
- --_rs-typography-list-li-margin-top-from-text:12px;
232
+ ._sizeM_xd7td5_26 [data-rs-internal='button__content']{
233
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
231
234
  }
232
235
  }
233
- ._sizeL_uqeg85_29{
236
+ ._sizeL_xd7td5_29{
234
237
  --_rs-button-border-radius-base:var(
235
238
  --rs-button-l-border-radius,
236
239
  var(--rs-button-border-radius, 26px)
@@ -245,7 +248,7 @@
245
248
  --_rs-button-icon-size:28px;
246
249
  --_rs-button-icon-offset:16px;
247
250
  }
248
- ._sizeL_uqeg85_29 [data-rs-internal='button__content']{
251
+ ._sizeL_xd7td5_29 [data-rs-internal='button__content']{
249
252
  --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
250
253
  --_rs-typography-text-transform:initial;
251
254
  --_rs-typography-font-variant-numeric:initial;
@@ -274,17 +277,20 @@
274
277
  --_rs-typography-text-auto-offset:32px;
275
278
  --_rs-typography-ul-list-li-padding-left:26px;
276
279
  --_rs-typography-ol-list-li-padding-left:32px;
277
- --_rs-typography-list-li-margin-top-from-text:24px;
280
+ --_rs-typography-list-li-margin-top-from-text:var(
281
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text,
282
+ 24px
283
+ );
278
284
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
279
285
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
280
286
  --_rs-typography-link-border-bottom-width-from-text:1px;
281
287
  }
282
288
  @media screen and (max-width: 640px){
283
- ._sizeL_uqeg85_29 [data-rs-internal='button__content']{
284
- --_rs-typography-list-li-margin-top-from-text:16px;
289
+ ._sizeL_xd7td5_29 [data-rs-internal='button__content']{
290
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
285
291
  }
286
292
  }
287
- ._modeClassic_uqeg85_33{
293
+ ._modeClassic_xd7td5_33{
288
294
  --_rs-button-inner-border-display:none;
289
295
  --_rs-button-color:rgb(
290
296
  calc(255 - var(--rs-button-flip-text-color, 0)*230),
@@ -300,7 +306,7 @@
300
306
  --_rs-button-disabled-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.5);
301
307
  --_rs-button-disabled-background:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.2);
302
308
  }
303
- ._modeRock_uqeg85_36{
309
+ ._modeRock_xd7td5_36{
304
310
  --_rs-button-inner-border-display:none;
305
311
  --_rs-button-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
306
312
  --_rs-button-background:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
@@ -313,7 +319,7 @@
313
319
  --_rs-button-disabled-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.5);
314
320
  --_rs-button-disabled-background:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.2);
315
321
  }
316
- ._modeTransparent_uqeg85_39{
322
+ ._modeTransparent_xd7td5_39{
317
323
  --_rs-button-inner-border-display:none;
318
324
  --_rs-button-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
319
325
  --_rs-button-background:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.5);
@@ -325,7 +331,7 @@
325
331
  --_rs-button-disabled-color:rgba(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227), 0.5);
326
332
  --_rs-button-disabled-background:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.4);
327
333
  }
328
- ._modeOutline_uqeg85_42{
334
+ ._modeOutline_xd7td5_42{
329
335
  --_rs-button-inner-border-display:block;
330
336
  --_rs-button-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
331
337
  --_rs-button-background:transparent;
@@ -337,7 +343,7 @@
337
343
  --_rs-button-disabled-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.5);
338
344
  --_rs-button-disabled-background:transparent;
339
345
  }
340
- ._modeClear_uqeg85_45{
346
+ ._modeClear_xd7td5_45{
341
347
  --_rs-button-inner-border-display:none;
342
348
  --_rs-button-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
343
349
  --_rs-button-background:transparent;
@@ -349,13 +355,23 @@
349
355
  --_rs-button-disabled-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.5);
350
356
  --_rs-button-disabled-background:transparent;
351
357
  }
352
- ._alignIconLeft_uqeg85_49{
358
+ ._alignIconLeft_xd7td5_49{
359
+ --_rs-button-icon-flex-direction:row;
360
+ --_rs-button-content-grow:0;
361
+ }
362
+ ._alignIconLeftEdge_xd7td5_52{
353
363
  --_rs-button-icon-flex-direction:row;
364
+ --_rs-button-content-grow:1;
354
365
  }
355
- ._alignIconRight_uqeg85_52{
366
+ ._alignIconRight_xd7td5_55{
356
367
  --_rs-button-icon-flex-direction:row-reverse;
368
+ --_rs-button-content-grow:0;
357
369
  }
358
- ._main_uqeg85_56{
370
+ ._alignIconRightEdge_xd7td5_58{
371
+ --_rs-button-icon-flex-direction:row-reverse;
372
+ --_rs-button-content-grow:1;
373
+ }
374
+ ._main_xd7td5_62{
359
375
  --_rs-theme-dark:var(
360
376
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
361
377
  var(--rs-theme-dark, 0)
@@ -365,7 +381,7 @@
365
381
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
366
382
  }
367
383
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
368
- ._main_uqeg85_56{
384
+ ._main_xd7td5_62{
369
385
  --_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
370
386
  --_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
371
387
  --_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
@@ -374,7 +390,7 @@
374
390
  }
375
391
  }
376
392
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
377
- ._main_uqeg85_56{
393
+ ._main_xd7td5_62{
378
394
  --_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
379
395
  --_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
380
396
  --_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
@@ -382,7 +398,7 @@
382
398
  --_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
383
399
  }
384
400
  }
385
- ._main_uqeg85_56 {
401
+ ._main_xd7td5_62 {
386
402
  --_rs-button-background-final:var(
387
403
  --_rs-button-background-from-state-active-focus-visible-no-hover,
388
404
  var(
@@ -463,19 +479,19 @@
463
479
  -moz-column-gap:var(--_rs-button-icon-offset);
464
480
  column-gap:var(--_rs-button-icon-offset);
465
481
  }
466
- ._main_uqeg85_56:hover,
467
- ._main_uqeg85_56:focus,
468
- ._main_uqeg85_56:active{
482
+ ._main_xd7td5_62:hover,
483
+ ._main_xd7td5_62:focus,
484
+ ._main_xd7td5_62:active{
469
485
  outline:none;
470
486
 
471
487
  text-decoration:none;
472
488
  }
473
- ._main_uqeg85_56:focus{
489
+ ._main_xd7td5_62:focus{
474
490
  color:var(--_rs-button-color);
475
491
  background:var(--_rs-button-background-final);
476
492
  }
477
493
  @media (hover: hover){
478
- ._main_uqeg85_56:hover{
494
+ ._main_xd7td5_62:hover{
479
495
  --_rs-button-border-inner-color:rgba(
480
496
  calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
481
497
  calc(0.3 + var(--_rs-theme-dark-coefficient, 0)*0.1)
@@ -483,24 +499,24 @@
483
499
  --_rs-button-background-from-state-hover:var(--_rs-button-hover-background);
484
500
  }
485
501
  }
486
- ._main_uqeg85_56:active{
502
+ ._main_xd7td5_62:active{
487
503
  --_rs-button-border-inner-width:2px;
488
504
  --_rs-button-border-inner-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
489
505
  --_rs-button-background-from-state-active:var(
490
506
  --_rs-button-active-background
491
507
  );
492
508
  }
493
- ._main_uqeg85_56:focus[data-focus-method='key']{
509
+ ._main_xd7td5_62:focus[data-focus-method='key']{
494
510
  --_rs-button-box-shadow-from-state-focus-visible:var(
495
511
  --_rs-color-primary-t-dim
496
512
  ) 0 0 0 4px;
497
513
  }
498
- ._main_uqeg85_56:active:not(:hover):focus[data-focus-method='key']{
514
+ ._main_xd7td5_62:active:not(:hover):focus[data-focus-method='key']{
499
515
  --_rs-button-background-from-state-active-focus-visible-no-hover:var(
500
516
  --_rs-button-active-focus-visible-no-hover-background
501
517
  );
502
518
  }
503
- ._main_uqeg85_56._disabled_uqeg85_133{
519
+ ._main_xd7td5_62._disabled_xd7td5_139{
504
520
  --_rs-button-border-inner-color:rgba(
505
521
  calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
506
522
  0.2
@@ -509,26 +525,26 @@
509
525
  color:var(--_rs-button-disabled-color);
510
526
  background:var(--_rs-button-disabled-background);
511
527
  }
512
- ._main_uqeg85_56._busy_uqeg85_143{
528
+ ._main_xd7td5_62._busy_xd7td5_149{
513
529
  pointer-events:none;
514
530
  }
515
- ._main_uqeg85_56._busyOverlay_uqeg85_147{
531
+ ._main_xd7td5_62._busyOverlay_xd7td5_153{
516
532
  display:inline-flex;
517
533
  justify-content:center;
518
534
  align-items:center;
519
535
  }
520
- ._main_uqeg85_56._busyOverlay_uqeg85_147,
521
- ._main_uqeg85_56._busyOverlay_uqeg85_147:hover,
522
- ._main_uqeg85_56._busyOverlay_uqeg85_147:active,
523
- ._main_uqeg85_56._busyOverlay_uqeg85_147._disabled_uqeg85_133,
524
- ._main_uqeg85_56._busyOverlay_uqeg85_147:focus{
536
+ ._main_xd7td5_62._busyOverlay_xd7td5_153,
537
+ ._main_xd7td5_62._busyOverlay_xd7td5_153:hover,
538
+ ._main_xd7td5_62._busyOverlay_xd7td5_153:active,
539
+ ._main_xd7td5_62._busyOverlay_xd7td5_153._disabled_xd7td5_139,
540
+ ._main_xd7td5_62._busyOverlay_xd7td5_153:focus{
525
541
  -webkit-user-select:none;
526
542
  -moz-user-select:none;
527
543
  user-select:none;
528
544
 
529
545
  color:transparent;
530
546
  }
531
- ._main_uqeg85_56::before{
547
+ ._main_xd7td5_62::before{
532
548
  position:absolute;
533
549
  top:0;
534
550
  right:0;
@@ -545,40 +561,45 @@
545
561
 
546
562
  transition:border-color 100ms;
547
563
  }
548
- ._main_uqeg85_56 ._icon_uqeg85_182{
564
+ ._main_xd7td5_62 ._icon_xd7td5_188{
565
+ flex:0 0 auto;
566
+
549
567
  width:auto;
550
568
  height:var(--_rs-button-icon-size);
551
569
 
552
570
  margin:0;
553
571
  fill:currentColor;
554
572
  }
555
- ._disabled_uqeg85_133{
573
+ ._disabled_xd7td5_139{
556
574
  pointer-events:none;
557
575
  }
558
- ._allowMultiline_uqeg85_195{
576
+ ._allowMultiline_xd7td5_203{
559
577
  white-space:normal;
560
578
  }
561
- ._multiline_uqeg85_199{
579
+ ._content_xd7td5_207{
580
+ flex:var(--_rs-button-content-grow) 1 auto;
581
+ }
582
+ ._multiline_xd7td5_211{
562
583
  border-radius:var(--_rs-button-multiline-border-radius);
563
584
  }
564
- ._withoutText_uqeg85_203{
585
+ ._withoutText_xd7td5_215{
565
586
  --_rs-button-horizontal-real-padding:var(--_rs-button-icon-only-padding);
566
587
  --_rs-button-vertical-real-padding:var(--_rs-button-icon-only-padding);
567
588
  }
568
- ._busyIcon_uqeg85_208{
589
+ ._busyIcon_xd7td5_220{
569
590
  position:absolute;
570
591
  top:50%;
571
592
  left:50%;
572
593
 
573
594
  transform:translate(-50%, -50%);
574
595
  }
575
- ._main_uqeg85_56 ._busyIcon_uqeg85_208{
596
+ ._main_xd7td5_62 ._busyIcon_xd7td5_220{
576
597
  color:var(--_rs-button-color);
577
598
  }
578
- ._main_uqeg85_56._disabled_uqeg85_133 ._busyIcon_uqeg85_208{
599
+ ._main_xd7td5_62._disabled_xd7td5_139 ._busyIcon_xd7td5_220{
579
600
  color:var(--_rs-button-disabled-color);
580
601
  }
581
- ._content_uqeg85_224{
602
+ ._content_xd7td5_207{
582
603
  letter-spacing:var(
583
604
  --rs-text-base-letter-spacing,
584
605
  var(--_rs-typography-letter-spacing)
@@ -591,15 +612,15 @@
591
612
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
592
613
  font-feature-settings:'kern', 'liga', 'calt';
593
614
  }
594
- ._shiftedLeft_uqeg85_229{
615
+ ._shiftedLeft_xd7td5_241{
595
616
  margin-left:calc(var(--_rs-button-horizontal-real-padding)*-1);
596
617
  }
597
- ._shiftedRight_uqeg85_232{
618
+ ._shiftedRight_xd7td5_244{
598
619
  margin-right:calc(var(--_rs-button-horizontal-real-padding)*-1);
599
620
  }
600
- ._shiftedTop_uqeg85_235{
621
+ ._shiftedTop_xd7td5_247{
601
622
  margin-top:calc(var(--_rs-button-vertical-real-padding)*-1);
602
623
  }
603
- ._shiftedBottom_uqeg85_238{
624
+ ._shiftedBottom_xd7td5_250{
604
625
  margin-bottom:calc(var(--_rs-button-vertical-real-padding)*-1);
605
626
  }
package/lib/public-api.p.css CHANGED
@@ -145,14 +145,17 @@
145
145
  --_rs-typography-text-auto-offset:16px;
146
146
  --_rs-typography-ul-list-li-padding-left:22px;
147
147
  --_rs-typography-ol-list-li-padding-left:26px;
148
- --_rs-typography-list-li-margin-top-from-text:16px;
148
+ --_rs-typography-list-li-margin-top-from-text:var(
149
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text,
150
+ 16px
151
+ );
149
152
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
150
153
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
151
154
  --_rs-typography-link-border-bottom-width-from-text:1px;
152
155
  }
153
156
  @media screen and (max-width: 640px){
154
157
  &:not(html) [data-rs-internal='button__content']{
155
- --_rs-typography-list-li-margin-top-from-text:12px;
158
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
156
159
  }
157
160
  }
158
161
  }
@@ -201,14 +204,17 @@
201
204
  --_rs-typography-text-auto-offset:32px;
202
205
  --_rs-typography-ul-list-li-padding-left:26px;
203
206
  --_rs-typography-ol-list-li-padding-left:32px;
204
- --_rs-typography-list-li-margin-top-from-text:24px;
207
+ --_rs-typography-list-li-margin-top-from-text:var(
208
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text,
209
+ 24px
210
+ );
205
211
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
206
212
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
207
213
  --_rs-typography-link-border-bottom-width-from-text:1px;
208
214
  }
209
215
  @media screen and (max-width: 640px){
210
216
  &:not(html) [data-rs-internal='button__content']{
211
- --_rs-typography-list-li-margin-top-from-text:16px;
217
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
212
218
  }
213
219
  }
214
220
  }
@@ -290,11 +296,25 @@
290
296
  @define-mixin rs-button-icon-left{
291
297
  &:not(html){
292
298
  --_rs-button-icon-flex-direction:row;
299
+ --_rs-button-content-grow:0;
300
+ }
301
+ }
302
+ @define-mixin rs-button-icon-left-edge{
303
+ &:not(html){
304
+ --_rs-button-icon-flex-direction:row;
305
+ --_rs-button-content-grow:1;
293
306
  }
294
307
  }
295
308
  @define-mixin rs-button-icon-right{
296
309
  &:not(html){
297
310
  --_rs-button-icon-flex-direction:row-reverse;
311
+ --_rs-button-content-grow:0;
312
+ }
313
+ }
314
+ @define-mixin rs-button-icon-right-edge{
315
+ &:not(html){
316
+ --_rs-button-icon-flex-direction:row-reverse;
317
+ --_rs-button-content-grow:1;
298
318
  }
299
319
  }
300
320
  @define-mixin rs-button-flat-right{
package/lib/public-api.pcss CHANGED
@@ -145,14 +145,17 @@
145
145
  --_rs-typography-text-auto-offset:16px;
146
146
  --_rs-typography-ul-list-li-padding-left:22px;
147
147
  --_rs-typography-ol-list-li-padding-left:26px;
148
- --_rs-typography-list-li-margin-top-from-text:16px;
148
+ --_rs-typography-list-li-margin-top-from-text:var(
149
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text,
150
+ 16px
151
+ );
149
152
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
150
153
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
151
154
  --_rs-typography-link-border-bottom-width-from-text:1px;
152
155
  }
153
156
  @media screen and (max-width: 640px){
154
157
  &:not(html) [data-rs-internal='button__content']{
155
- --_rs-typography-list-li-margin-top-from-text:12px;
158
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
156
159
  }
157
160
  }
158
161
  }
@@ -201,14 +204,17 @@
201
204
  --_rs-typography-text-auto-offset:32px;
202
205
  --_rs-typography-ul-list-li-padding-left:26px;
203
206
  --_rs-typography-ol-list-li-padding-left:32px;
204
- --_rs-typography-list-li-margin-top-from-text:24px;
207
+ --_rs-typography-list-li-margin-top-from-text:var(
208
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text,
209
+ 24px
210
+ );
205
211
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
206
212
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
207
213
  --_rs-typography-link-border-bottom-width-from-text:1px;
208
214
  }
209
215
  @media screen and (max-width: 640px){
210
216
  &:not(html) [data-rs-internal='button__content']{
211
- --_rs-typography-list-li-margin-top-from-text:16px;
217
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
212
218
  }
213
219
  }
214
220
  }
@@ -290,11 +296,25 @@
290
296
  @define-mixin rs-button-icon-left{
291
297
  &:not(html){
292
298
  --_rs-button-icon-flex-direction:row;
299
+ --_rs-button-content-grow:0;
300
+ }
301
+ }
302
+ @define-mixin rs-button-icon-left-edge{
303
+ &:not(html){
304
+ --_rs-button-icon-flex-direction:row;
305
+ --_rs-button-content-grow:1;
293
306
  }
294
307
  }
295
308
  @define-mixin rs-button-icon-right{
296
309
  &:not(html){
297
310
  --_rs-button-icon-flex-direction:row-reverse;
311
+ --_rs-button-content-grow:0;
312
+ }
313
+ }
314
+ @define-mixin rs-button-icon-right-edge{
315
+ &:not(html){
316
+ --_rs-button-icon-flex-direction:row-reverse;
317
+ --_rs-button-content-grow:1;
298
318
  }
299
319
  }
300
320
  @define-mixin rs-button-flat-right{
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/button",
3
- "version": "0.20.3",
3
+ "version": "0.21.1",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
@@ -26,9 +26,9 @@
26
26
  },
27
27
  "devDependencies": {
28
28
  "@rescui/colors": "^0.2.7",
29
- "@rescui/icons": "^0.16.15",
29
+ "@rescui/icons": "^0.16.16",
30
30
  "@rescui/scripts": "^0.3.5",
31
- "@rescui/typography": "^0.21.1",
31
+ "@rescui/typography": "^0.22.0",
32
32
  "@rescui/visual-regression": "^0.1.2",
33
33
  "@types/classnames": "^2.2.11"
34
34
  },
@@ -37,5 +37,5 @@
37
37
  "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
38
38
  },
39
39
  "nx": {},
40
- "gitHead": "94b4b5531e261cde472a2218ace4a21d7b0f990f"
40
+ "gitHead": "71902b643c074d76514a26a5ee2feecc75d41347"
41
41
  }