@bundle-stats/ui 4.13.0-beta.10 → 4.13.0-beta.11

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 (17) hide show
  1. package/lib/css/variables.css +3 -3
  2. package/lib/ui/button/button.js +5 -4
  3. package/lib/ui/button/button.js.map +1 -1
  4. package/lib/ui/button/button.module.css +55 -53
  5. package/lib/ui/icon/icon.js +1 -1
  6. package/lib-esm/css/variables.css +3 -3
  7. package/lib-esm/ui/button/button.js +5 -4
  8. package/lib-esm/ui/button/button.js.map +1 -1
  9. package/lib-esm/ui/button/button.module.css +55 -53
  10. package/lib-esm/ui/icon/icon.js +1 -1
  11. package/package.json +4 -4
  12. package/src/css/variables.css +3 -3
  13. package/src/ui/button/button.module.css +55 -53
  14. package/src/ui/button/button.stories.tsx +16 -9
  15. package/src/ui/button/button.tsx +8 -7
  16. package/src/ui/icon/icon.tsx +1 -1
  17. package/types/ui/icon/icon.d.ts +2 -2
package/lib/css/variables.css CHANGED
@@ -192,9 +192,9 @@
192
192
  --shadow-layer: 0 0 var(--space-xxxsmall) var(--color-shadow);
193
193
  --shadow-layer-high: 0 0 var(--space-xxsmall) var(--color-shadow);
194
194
 
195
- --radius-small: 4px;
196
- --radius-medium: 5px;
197
- --radius-large: 6px;
195
+ --radius-small: 5px;
196
+ --radius-medium: 7px;
197
+ --radius-large: 9px;
198
198
 
199
199
  --outline-hover: 0 0 0 3px var(--color-highlight);
200
200
 
package/lib/ui/button/button.js CHANGED
@@ -23,14 +23,15 @@ exports.BUTTON_KIND = {
23
23
  SUCCES: 'success',
24
24
  };
25
25
  const ButtonComponent = (props) => {
26
- const { className = '', outline = false, solid = false, active = false, kind = 'default', size = 'medium', radius = '', padding = '', as: Component = button_1.Button, children, Icon = icon_1.Icon, glyph, rightGlyph, ...restProps } = props;
26
+ const { className = '', outline = false, solid = false, active = false, kind = 'default', size = 'medium', radius = '', padding = '', as: Component = button_1.Button, children = null, Icon = icon_1.Icon, glyph, rightGlyph, ...restProps } = props;
27
27
  const resolvedPadding = padding || ((outline || solid) && size);
28
28
  const resolvedRadius = radius || ((outline || solid) && size);
29
- const rootClassName = (0, classnames_1.default)(button_module_css_1.default.root, button_module_css_1.default[size], kind && button_module_css_1.default[kind], outline && button_module_css_1.default.outline, outline && button_module_css_1.default[`outline--${kind}`], solid && button_module_css_1.default.solid, solid && button_module_css_1.default[`solid--${kind}`], resolvedPadding && button_module_css_1.default[`padding--${resolvedPadding}`], resolvedPadding && outline && button_module_css_1.default[`outline--padding--${resolvedPadding}`], resolvedRadius && button_module_css_1.default[`radius--${resolvedRadius}`], active && button_module_css_1.default.active, active && outline && button_module_css_1.default[`active-outline-${kind}`], button_module_css_1.default[size], className);
29
+ const resolvedSize = Object.values(exports.BUTTON_SIZE).includes(size) ? size : exports.BUTTON_SIZE.MEDIUM;
30
+ const rootClassName = (0, classnames_1.default)(button_module_css_1.default.root, kind && button_module_css_1.default[kind], button_module_css_1.default[resolvedSize], outline && button_module_css_1.default.outline, outline && button_module_css_1.default[`outline--${kind}`], solid && button_module_css_1.default.solid, solid && button_module_css_1.default[`solid--${kind}`], resolvedPadding && button_module_css_1.default.padding, resolvedRadius && button_module_css_1.default[`radius--${resolvedRadius}`], active && button_module_css_1.default.active, active && outline && button_module_css_1.default[`active-outline-${kind}`], className);
30
31
  return (react_1.default.createElement(Component, { ...restProps, className: rootClassName },
31
- glyph && react_1.default.createElement(Icon, { glyph: glyph, size: size, className: button_module_css_1.default.glyph }),
32
+ glyph && react_1.default.createElement(Icon, { glyph: glyph, className: button_module_css_1.default.glyph }),
32
33
  children && react_1.default.createElement("span", { className: button_module_css_1.default.content }, children),
33
- rightGlyph && react_1.default.createElement(Icon, { glyph: glyph, size: size, className: button_module_css_1.default.glyph })));
34
+ rightGlyph && react_1.default.createElement(Icon, { glyph: rightGlyph, className: button_module_css_1.default.glyph })));
34
35
  };
35
36
  exports.Button = react_1.default.forwardRef(ButtonComponent);
36
37
  //# sourceMappingURL=button.js.map
package/lib/ui/button/button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/ui/button/button.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAA4B;AAC5B,2CAA+D;AAE/D,kCAA2C;AAC3C,4EAAsC;AAEzB,QAAA,WAAW,GAAG;IACzB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC;AAEE,QAAA,WAAW,GAAG;IACzB,OAAO,EAAE,SAAS;IAClB,SAAS,EAAE,WAAW;IACtB,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,MAAM;IACZ,MAAM,EAAE,SAAS;CACT,CAAC;AAmBX,MAAM,eAAe,GAAG,CACtB,KAAqF,EACrF,EAAE;IACF,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,OAAO,GAAG,KAAK,EACf,KAAK,GAAG,KAAK,EACb,MAAM,GAAG,KAAK,EACd,IAAI,GAAG,SAAS,EAChB,IAAI,GAAG,QAAQ,EACf,MAAM,GAAG,EAAE,EACX,OAAO,GAAG,EAAE,EACZ,EAAE,EAAE,SAAS,GAAG,eAAmB,EACnC,QAAQ,EACR,IAAI,GAAG,WAAQ,EACf,KAAK,EACL,UAAU,EACV,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAGV,MAAM,eAAe,GAAG,OAAO,IAAI,CAAC,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC;IAChE,MAAM,cAAc,GAAG,MAAM,IAAI,CAAC,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC;IAE9D,MAAM,aAAa,GAAG,IAAA,oBAAE,EACtB,2BAAG,CAAC,IAAI,EACR,2BAAG,CAAC,IAAI,CAAC,EACT,IAAI,IAAI,2BAAG,CAAC,IAAI,CAAC,EAEjB,OAAO,IAAI,2BAAG,CAAC,OAAO,EACtB,OAAO,IAAI,2BAAG,CAAC,YAAY,IAAI,EAAE,CAAC,EAElC,KAAK,IAAI,2BAAG,CAAC,KAAK,EAClB,KAAK,IAAI,2BAAG,CAAC,UAAU,IAAI,EAAE,CAAC,EAE9B,eAAe,IAAI,2BAAG,CAAC,YAAY,eAAe,EAAE,CAAC,EACrD,eAAe,IAAI,OAAO,IAAI,2BAAG,CAAC,qBAAqB,eAAe,EAAE,CAAC,EACzE,cAAc,IAAI,2BAAG,CAAC,WAAW,cAAc,EAAE,CAAC,EAElD,MAAM,IAAI,2BAAG,CAAC,MAAM,EACpB,MAAM,IAAI,OAAO,IAAI,2BAAG,CAAC,kBAAkB,IAAI,EAAE,CAAC,EAElD,2BAAG,CAAC,IAAI,CAAC,EACT,SAAS,CACV,CAAC;IAEF,OAAO,CACL,8BAAC,SAAS,OAAK,SAAS,EAAE,SAAS,EAAE,aAAa;QAC/C,KAAK,IAAI,8BAAC,IAAI,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,2BAAG,CAAC,KAAK,GAAI;QACjE,QAAQ,IAAI,wCAAM,SAAS,EAAE,2BAAG,CAAC,OAAO,IAAG,QAAQ,CAAQ;QAC3D,UAAU,IAAI,8BAAC,IAAI,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,2BAAG,CAAC,KAAK,GAAI,CAC7D,CACb,CAAC;AACJ,CAAC,CAAC;AAEW,QAAA,MAAM,GAAG,eAAK,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC"}
1
+ {"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/ui/button/button.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,4DAA4B;AAC5B,2CAA+D;AAE/D,kCAA2C;AAC3C,4EAAsC;AAEzB,QAAA,WAAW,GAAG;IACzB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC;AAEE,QAAA,WAAW,GAAG;IACzB,OAAO,EAAE,SAAS;IAClB,SAAS,EAAE,WAAW;IACtB,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,MAAM;IACZ,MAAM,EAAE,SAAS;CACT,CAAC;AAmBX,MAAM,eAAe,GAAG,CACtB,KAAqF,EACrF,EAAE;IACF,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,OAAO,GAAG,KAAK,EACf,KAAK,GAAG,KAAK,EACb,MAAM,GAAG,KAAK,EACd,IAAI,GAAG,SAAS,EAChB,IAAI,GAAG,QAAQ,EACf,MAAM,GAAG,EAAE,EACX,OAAO,GAAG,EAAE,EACZ,EAAE,EAAE,SAAS,GAAG,eAAmB,EACnC,QAAQ,GAAG,IAAI,EACf,IAAI,GAAG,WAAQ,EACf,KAAK,EACL,UAAU,EACV,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAGV,MAAM,eAAe,GAAG,OAAO,IAAI,CAAC,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC;IAChE,MAAM,cAAc,GAAG,MAAM,IAAI,CAAC,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC;IAE9D,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,mBAAW,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,mBAAW,CAAC,MAAM,CAAC;IAE3F,MAAM,aAAa,GAAG,IAAA,oBAAE,EACtB,2BAAG,CAAC,IAAI,EACR,IAAI,IAAI,2BAAG,CAAC,IAAI,CAAC,EACjB,2BAAG,CAAC,YAAY,CAAC,EAEjB,OAAO,IAAI,2BAAG,CAAC,OAAO,EACtB,OAAO,IAAI,2BAAG,CAAC,YAAY,IAAI,EAAE,CAAC,EAElC,KAAK,IAAI,2BAAG,CAAC,KAAK,EAClB,KAAK,IAAI,2BAAG,CAAC,UAAU,IAAI,EAAE,CAAC,EAE9B,eAAe,IAAI,2BAAG,CAAC,OAAO,EAC9B,cAAc,IAAI,2BAAG,CAAC,WAAW,cAAc,EAAE,CAAC,EAElD,MAAM,IAAI,2BAAG,CAAC,MAAM,EACpB,MAAM,IAAI,OAAO,IAAI,2BAAG,CAAC,kBAAkB,IAAI,EAAE,CAAC,EAElD,SAAS,CACV,CAAC;IAEF,OAAO,CACL,8BAAC,SAAS,OAAK,SAAS,EAAE,SAAS,EAAE,aAAa;QAC/C,KAAK,IAAI,8BAAC,IAAI,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,2BAAG,CAAC,KAAK,GAAI;QACrD,QAAQ,IAAI,wCAAM,SAAS,EAAE,2BAAG,CAAC,OAAO,IAAG,QAAQ,CAAQ;QAC3D,UAAU,IAAI,8BAAC,IAAI,IAAC,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,2BAAG,CAAC,KAAK,GAAI,CACtD,CACb,CAAC;AACJ,CAAC,CAAC;AAEW,QAAA,MAAM,GAAG,eAAK,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC"}
package/lib/ui/button/button.module.css CHANGED
@@ -1,14 +1,21 @@
1
1
  .root {
2
+ /* use for vertical padding and to compute gap and horizontal spacing */
3
+ --button-space: 0px;
4
+ /* button border width */
5
+ --border-width: 0px;
6
+
2
7
  display: inline-flex;
3
8
  align-items: center;
4
- gap: var(--space-xxsmall);
9
+ justify-content: center;
10
+ gap: calc(max(var(--button-space), var(--space-xxsmall)) * 0.66);
5
11
  appearance: none;
6
12
  padding: 0;
7
- border: 0;
13
+ border: var(--border-width) solid transparent;
8
14
  background: none;
9
15
  transition: var(--transition-out);
10
16
  color: var(--color-text-ultra-light);
11
17
  font-family: var(--font-family);
18
+ white-space: nowrap;
12
19
  }
13
20
 
14
21
  a.root {
@@ -18,6 +25,7 @@ a.root {
18
25
  .root:hover,
19
26
  .root:active,
20
27
  .root:focus {
28
+ outline: none;
21
29
  color: var(--color-text-light);
22
30
  transition: var(--transition-in);
23
31
  }
@@ -98,7 +106,7 @@ a.root {
98
106
  * Solid Kind variation
99
107
  */
100
108
  .solid {
101
- background: var(--color-text-light);
109
+ background: var(--color-text-ultra-light);
102
110
  color: var(--color-background);
103
111
  }
104
112
 
@@ -106,7 +114,7 @@ a.root {
106
114
  .solid:active,
107
115
  .solid:focus {
108
116
  box-shadow: var(--outline-hover);
109
- background: var(--color-text);
117
+ background: var(--color-text-light);
110
118
  color: var(--color-background);
111
119
  }
112
120
 
@@ -170,11 +178,51 @@ a.root {
170
178
  background: var(--color-success-dark);
171
179
  }
172
180
 
181
+ /**
182
+ * Size variation
183
+ */
184
+ .small {
185
+ --button-space: var(--space-xxsmall);
186
+
187
+ font-size: var(--size-small);
188
+ line-height: var(--space-small);
189
+ }
190
+
191
+ .small .glyph {
192
+ width: var(--space-small);
193
+ height: var(--space-small);
194
+ }
195
+
196
+ .medium {
197
+ --button-space: var(--space-xsmall);
198
+
199
+ font-size: var(--size-medium);
200
+ line-height: calc(var(--space-small) + var(--space-xxxsmall));
201
+ }
202
+
203
+ .medium .glyph {
204
+ width: calc(var(--space-small) + var(--space-xxxsmall));
205
+ height: calc(var(--space-small) + var(--space-xxxsmall));
206
+ }
207
+
208
+ .large {
209
+ --button-space: var(--space-small);
210
+
211
+ font-size: var(--size-large);
212
+ line-height: var(--space-medium);
213
+ }
214
+
215
+ .large .glyph {
216
+ width: var(--space-medium);
217
+ height: var(--space-medium);
218
+ }
219
+
173
220
  /**
174
221
  * Outline variation
175
222
  */
176
223
  .outline {
177
- border: 1px solid var(--color-outline);
224
+ --border-width: 1px;
225
+ border-color: var(--color-outline);
178
226
  }
179
227
 
180
228
  .outline:hover,
@@ -244,58 +292,12 @@ a.root {
244
292
  border-color: var(--color-outline-success-dark);
245
293
  }
246
294
 
247
- /**
248
- * Size variation
249
- */
250
- .small {
251
- font-size: var(--size-small);
252
- gap: var(--space-xxxsmall);
253
- line-height: var(--space-small);
254
- }
255
-
256
- .small .glyph {
257
- width: calc(var(--space-xsmall) + 2px);
258
- height: calc(var(--space-xsmall) + 2px);
259
- margin: 1px; /* compensate to keep the same height when the text is not provided */
260
- }
261
-
262
- .medium {
263
- font-size: var(--size-medium);
264
- gap: var(--space-xxsmall);
265
- line-height: var(--space-small);
266
- }
267
-
268
- .large {
269
- font-size: var(--size-large);
270
- gap: var(--space-xxsmall);
271
- line-height: var(--space-small);
272
- }
273
295
 
274
296
  /**
275
297
  * Padding variation
276
298
  */
277
- .padding--small {
278
- padding: var(--space-xxsmall);
279
- }
280
-
281
- .outline--padding--small {
282
- padding: calc(var(--space-xxsmall) - 1px);
283
- }
284
-
285
- .padding--medium {
286
- padding: var(--space-xsmall);
287
- }
288
-
289
- .outline--padding--medium {
290
- padding: calc(var(--space-xsmall) - 1px);
291
- }
292
-
293
- .padding--large {
294
- padding: var(--space-small);
295
- }
296
-
297
- .outline--padding--large {
298
- padding: calc(var(--space-small) - 1px);
299
+ .padding {
300
+ padding: calc(var(--button-space) - var(--border-width));
299
301
  }
300
302
 
301
303
  /**
package/lib/ui/icon/icon.js CHANGED
@@ -9,7 +9,7 @@ const classnames_1 = __importDefault(require("classnames"));
9
9
  const icon_module_css_1 = __importDefault(require("./icon.module.css"));
10
10
  const ICONS = {
11
11
  ARROW: 'arrow',
12
- ARROW_RIGHT_CIRLCE: 'arrow-right-circle',
12
+ ARROW_RIGHT_CIRCLE: 'arrow-right-circle',
13
13
  CANCEL: 'close',
14
14
  CHEVRON_DOWN: 'chevron-down',
15
15
  CHEVRON_UP: 'chevron-up',
package/lib-esm/css/variables.css CHANGED
@@ -192,9 +192,9 @@
192
192
  --shadow-layer: 0 0 var(--space-xxxsmall) var(--color-shadow);
193
193
  --shadow-layer-high: 0 0 var(--space-xxsmall) var(--color-shadow);
194
194
 
195
- --radius-small: 4px;
196
- --radius-medium: 5px;
197
- --radius-large: 6px;
195
+ --radius-small: 5px;
196
+ --radius-medium: 7px;
197
+ --radius-large: 9px;
198
198
 
199
199
  --outline-hover: 0 0 0 3px var(--color-highlight);
200
200
 
package/lib-esm/ui/button/button.js CHANGED
@@ -17,14 +17,15 @@ export const BUTTON_KIND = {
17
17
  SUCCES: 'success',
18
18
  };
19
19
  const ButtonComponent = (props) => {
20
- const { className = '', outline = false, solid = false, active = false, kind = 'default', size = 'medium', radius = '', padding = '', as: Component = ButtonBaseComponent, children, Icon = BaseIcon, glyph, rightGlyph, ...restProps } = props;
20
+ const { className = '', outline = false, solid = false, active = false, kind = 'default', size = 'medium', radius = '', padding = '', as: Component = ButtonBaseComponent, children = null, Icon = BaseIcon, glyph, rightGlyph, ...restProps } = props;
21
21
  const resolvedPadding = padding || ((outline || solid) && size);
22
22
  const resolvedRadius = radius || ((outline || solid) && size);
23
- const rootClassName = cx(css.root, css[size], kind && css[kind], outline && css.outline, outline && css[`outline--${kind}`], solid && css.solid, solid && css[`solid--${kind}`], resolvedPadding && css[`padding--${resolvedPadding}`], resolvedPadding && outline && css[`outline--padding--${resolvedPadding}`], resolvedRadius && css[`radius--${resolvedRadius}`], active && css.active, active && outline && css[`active-outline-${kind}`], css[size], className);
23
+ const resolvedSize = Object.values(BUTTON_SIZE).includes(size) ? size : BUTTON_SIZE.MEDIUM;
24
+ const rootClassName = cx(css.root, kind && css[kind], css[resolvedSize], outline && css.outline, outline && css[`outline--${kind}`], solid && css.solid, solid && css[`solid--${kind}`], resolvedPadding && css.padding, resolvedRadius && css[`radius--${resolvedRadius}`], active && css.active, active && outline && css[`active-outline-${kind}`], className);
24
25
  return (React.createElement(Component, { ...restProps, className: rootClassName },
25
- glyph && React.createElement(Icon, { glyph: glyph, size: size, className: css.glyph }),
26
+ glyph && React.createElement(Icon, { glyph: glyph, className: css.glyph }),
26
27
  children && React.createElement("span", { className: css.content }, children),
27
- rightGlyph && React.createElement(Icon, { glyph: glyph, size: size, className: css.glyph })));
28
+ rightGlyph && React.createElement(Icon, { glyph: rightGlyph, className: css.glyph })));
28
29
  };
29
30
  export const Button = React.forwardRef(ButtonComponent);
30
31
  //# sourceMappingURL=button.js.map
package/lib-esm/ui/button/button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/ui/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,MAAM,IAAI,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAE/D,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,GAAG,MAAM,qBAAqB,CAAC;AAEtC,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC;AAEX,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,OAAO,EAAE,SAAS;IAClB,SAAS,EAAE,WAAW;IACtB,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,MAAM;IACZ,MAAM,EAAE,SAAS;CACT,CAAC;AAmBX,MAAM,eAAe,GAAG,CACtB,KAAqF,EACrF,EAAE;IACF,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,OAAO,GAAG,KAAK,EACf,KAAK,GAAG,KAAK,EACb,MAAM,GAAG,KAAK,EACd,IAAI,GAAG,SAAS,EAChB,IAAI,GAAG,QAAQ,EACf,MAAM,GAAG,EAAE,EACX,OAAO,GAAG,EAAE,EACZ,EAAE,EAAE,SAAS,GAAG,mBAAmB,EACnC,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,KAAK,EACL,UAAU,EACV,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAGV,MAAM,eAAe,GAAG,OAAO,IAAI,CAAC,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC;IAChE,MAAM,cAAc,GAAG,MAAM,IAAI,CAAC,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC;IAE9D,MAAM,aAAa,GAAG,EAAE,CACtB,GAAG,CAAC,IAAI,EACR,GAAG,CAAC,IAAI,CAAC,EACT,IAAI,IAAI,GAAG,CAAC,IAAI,CAAC,EAEjB,OAAO,IAAI,GAAG,CAAC,OAAO,EACtB,OAAO,IAAI,GAAG,CAAC,YAAY,IAAI,EAAE,CAAC,EAElC,KAAK,IAAI,GAAG,CAAC,KAAK,EAClB,KAAK,IAAI,GAAG,CAAC,UAAU,IAAI,EAAE,CAAC,EAE9B,eAAe,IAAI,GAAG,CAAC,YAAY,eAAe,EAAE,CAAC,EACrD,eAAe,IAAI,OAAO,IAAI,GAAG,CAAC,qBAAqB,eAAe,EAAE,CAAC,EACzE,cAAc,IAAI,GAAG,CAAC,WAAW,cAAc,EAAE,CAAC,EAElD,MAAM,IAAI,GAAG,CAAC,MAAM,EACpB,MAAM,IAAI,OAAO,IAAI,GAAG,CAAC,kBAAkB,IAAI,EAAE,CAAC,EAElD,GAAG,CAAC,IAAI,CAAC,EACT,SAAS,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,SAAS,OAAK,SAAS,EAAE,SAAS,EAAE,aAAa;QAC/C,KAAK,IAAI,oBAAC,IAAI,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,CAAC,KAAK,GAAI;QACjE,QAAQ,IAAI,8BAAM,SAAS,EAAE,GAAG,CAAC,OAAO,IAAG,QAAQ,CAAQ;QAC3D,UAAU,IAAI,oBAAC,IAAI,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,CAAC,KAAK,GAAI,CAC7D,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC"}
1
+ {"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/ui/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,MAAM,IAAI,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAE/D,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,GAAG,MAAM,qBAAqB,CAAC;AAEtC,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC;AAEX,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,OAAO,EAAE,SAAS;IAClB,SAAS,EAAE,WAAW;IACtB,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,MAAM;IACZ,MAAM,EAAE,SAAS;CACT,CAAC;AAmBX,MAAM,eAAe,GAAG,CACtB,KAAqF,EACrF,EAAE;IACF,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,OAAO,GAAG,KAAK,EACf,KAAK,GAAG,KAAK,EACb,MAAM,GAAG,KAAK,EACd,IAAI,GAAG,SAAS,EAChB,IAAI,GAAG,QAAQ,EACf,MAAM,GAAG,EAAE,EACX,OAAO,GAAG,EAAE,EACZ,EAAE,EAAE,SAAS,GAAG,mBAAmB,EACnC,QAAQ,GAAG,IAAI,EACf,IAAI,GAAG,QAAQ,EACf,KAAK,EACL,UAAU,EACV,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAGV,MAAM,eAAe,GAAG,OAAO,IAAI,CAAC,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC;IAChE,MAAM,cAAc,GAAG,MAAM,IAAI,CAAC,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC;IAE9D,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC;IAE3F,MAAM,aAAa,GAAG,EAAE,CACtB,GAAG,CAAC,IAAI,EACR,IAAI,IAAI,GAAG,CAAC,IAAI,CAAC,EACjB,GAAG,CAAC,YAAY,CAAC,EAEjB,OAAO,IAAI,GAAG,CAAC,OAAO,EACtB,OAAO,IAAI,GAAG,CAAC,YAAY,IAAI,EAAE,CAAC,EAElC,KAAK,IAAI,GAAG,CAAC,KAAK,EAClB,KAAK,IAAI,GAAG,CAAC,UAAU,IAAI,EAAE,CAAC,EAE9B,eAAe,IAAI,GAAG,CAAC,OAAO,EAC9B,cAAc,IAAI,GAAG,CAAC,WAAW,cAAc,EAAE,CAAC,EAElD,MAAM,IAAI,GAAG,CAAC,MAAM,EACpB,MAAM,IAAI,OAAO,IAAI,GAAG,CAAC,kBAAkB,IAAI,EAAE,CAAC,EAElD,SAAS,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,SAAS,OAAK,SAAS,EAAE,SAAS,EAAE,aAAa;QAC/C,KAAK,IAAI,oBAAC,IAAI,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,CAAC,KAAK,GAAI;QACrD,QAAQ,IAAI,8BAAM,SAAS,EAAE,GAAG,CAAC,OAAO,IAAG,QAAQ,CAAQ;QAC3D,UAAU,IAAI,oBAAC,IAAI,IAAC,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,CAAC,KAAK,GAAI,CACtD,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC"}
package/lib-esm/ui/button/button.module.css CHANGED
@@ -1,14 +1,21 @@
1
1
  .root {
2
+ /* use for vertical padding and to compute gap and horizontal spacing */
3
+ --button-space: 0px;
4
+ /* button border width */
5
+ --border-width: 0px;
6
+
2
7
  display: inline-flex;
3
8
  align-items: center;
4
- gap: var(--space-xxsmall);
9
+ justify-content: center;
10
+ gap: calc(max(var(--button-space), var(--space-xxsmall)) * 0.66);
5
11
  appearance: none;
6
12
  padding: 0;
7
- border: 0;
13
+ border: var(--border-width) solid transparent;
8
14
  background: none;
9
15
  transition: var(--transition-out);
10
16
  color: var(--color-text-ultra-light);
11
17
  font-family: var(--font-family);
18
+ white-space: nowrap;
12
19
  }
13
20
 
14
21
  a.root {
@@ -18,6 +25,7 @@ a.root {
18
25
  .root:hover,
19
26
  .root:active,
20
27
  .root:focus {
28
+ outline: none;
21
29
  color: var(--color-text-light);
22
30
  transition: var(--transition-in);
23
31
  }
@@ -98,7 +106,7 @@ a.root {
98
106
  * Solid Kind variation
99
107
  */
100
108
  .solid {
101
- background: var(--color-text-light);
109
+ background: var(--color-text-ultra-light);
102
110
  color: var(--color-background);
103
111
  }
104
112
 
@@ -106,7 +114,7 @@ a.root {
106
114
  .solid:active,
107
115
  .solid:focus {
108
116
  box-shadow: var(--outline-hover);
109
- background: var(--color-text);
117
+ background: var(--color-text-light);
110
118
  color: var(--color-background);
111
119
  }
112
120
 
@@ -170,11 +178,51 @@ a.root {
170
178
  background: var(--color-success-dark);
171
179
  }
172
180
 
181
+ /**
182
+ * Size variation
183
+ */
184
+ .small {
185
+ --button-space: var(--space-xxsmall);
186
+
187
+ font-size: var(--size-small);
188
+ line-height: var(--space-small);
189
+ }
190
+
191
+ .small .glyph {
192
+ width: var(--space-small);
193
+ height: var(--space-small);
194
+ }
195
+
196
+ .medium {
197
+ --button-space: var(--space-xsmall);
198
+
199
+ font-size: var(--size-medium);
200
+ line-height: calc(var(--space-small) + var(--space-xxxsmall));
201
+ }
202
+
203
+ .medium .glyph {
204
+ width: calc(var(--space-small) + var(--space-xxxsmall));
205
+ height: calc(var(--space-small) + var(--space-xxxsmall));
206
+ }
207
+
208
+ .large {
209
+ --button-space: var(--space-small);
210
+
211
+ font-size: var(--size-large);
212
+ line-height: var(--space-medium);
213
+ }
214
+
215
+ .large .glyph {
216
+ width: var(--space-medium);
217
+ height: var(--space-medium);
218
+ }
219
+
173
220
  /**
174
221
  * Outline variation
175
222
  */
176
223
  .outline {
177
- border: 1px solid var(--color-outline);
224
+ --border-width: 1px;
225
+ border-color: var(--color-outline);
178
226
  }
179
227
 
180
228
  .outline:hover,
@@ -244,58 +292,12 @@ a.root {
244
292
  border-color: var(--color-outline-success-dark);
245
293
  }
246
294
 
247
- /**
248
- * Size variation
249
- */
250
- .small {
251
- font-size: var(--size-small);
252
- gap: var(--space-xxxsmall);
253
- line-height: var(--space-small);
254
- }
255
-
256
- .small .glyph {
257
- width: calc(var(--space-xsmall) + 2px);
258
- height: calc(var(--space-xsmall) + 2px);
259
- margin: 1px; /* compensate to keep the same height when the text is not provided */
260
- }
261
-
262
- .medium {
263
- font-size: var(--size-medium);
264
- gap: var(--space-xxsmall);
265
- line-height: var(--space-small);
266
- }
267
-
268
- .large {
269
- font-size: var(--size-large);
270
- gap: var(--space-xxsmall);
271
- line-height: var(--space-small);
272
- }
273
295
 
274
296
  /**
275
297
  * Padding variation
276
298
  */
277
- .padding--small {
278
- padding: var(--space-xxsmall);
279
- }
280
-
281
- .outline--padding--small {
282
- padding: calc(var(--space-xxsmall) - 1px);
283
- }
284
-
285
- .padding--medium {
286
- padding: var(--space-xsmall);
287
- }
288
-
289
- .outline--padding--medium {
290
- padding: calc(var(--space-xsmall) - 1px);
291
- }
292
-
293
- .padding--large {
294
- padding: var(--space-small);
295
- }
296
-
297
- .outline--padding--large {
298
- padding: calc(var(--space-small) - 1px);
299
+ .padding {
300
+ padding: calc(var(--button-space) - var(--border-width));
299
301
  }
300
302
 
301
303
  /**
package/lib-esm/ui/icon/icon.js CHANGED
@@ -3,7 +3,7 @@ import cx from 'classnames';
3
3
  import css from './icon.module.css';
4
4
  const ICONS = {
5
5
  ARROW: 'arrow',
6
- ARROW_RIGHT_CIRLCE: 'arrow-right-circle',
6
+ ARROW_RIGHT_CIRCLE: 'arrow-right-circle',
7
7
  CANCEL: 'close',
8
8
  CHEVRON_DOWN: 'chevron-down',
9
9
  CHEVRON_UP: 'chevron-up',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bundle-stats/ui",
3
- "version": "4.13.0-beta.10",
3
+ "version": "4.13.0-beta.11",
4
4
  "description": "UI components for BundleStats projects.",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib-esm/index.js",
@@ -43,7 +43,7 @@
43
43
  "@storybook/react": "7.6.17",
44
44
  "@storybook/react-webpack5": "7.6.17",
45
45
  "@types/d3": "7.4.3",
46
- "@types/react": "18.2.75",
46
+ "@types/react": "18.2.77",
47
47
  "@types/react-router-dom": "5.3.3",
48
48
  "babel-plugin-require-context-hook": "1.0.0",
49
49
  "classnames": "2.5.1",
@@ -73,12 +73,12 @@
73
73
  "react-router-dom": "^5.0.0"
74
74
  },
75
75
  "dependencies": {
76
- "@bundle-stats/utils": "4.13.0-beta.10",
76
+ "@bundle-stats/utils": "4.13.0-beta.11",
77
77
  "ariakit": "2.0.0-next.44",
78
78
  "d3": "^7.8.5",
79
79
  "modern-css-reset": "1.4.0",
80
80
  "react-use": "^17.5.0",
81
81
  "use-query-params": "2.2.1"
82
82
  },
83
- "gitHead": "448a7ea669d52d990e6ef2a64bbed63a9b1b3301"
83
+ "gitHead": "e128789009e036ad306e3fb6095137b91b56111f"
84
84
  }
package/src/css/variables.css CHANGED
@@ -192,9 +192,9 @@
192
192
  --shadow-layer: 0 0 var(--space-xxxsmall) var(--color-shadow);
193
193
  --shadow-layer-high: 0 0 var(--space-xxsmall) var(--color-shadow);
194
194
 
195
- --radius-small: 4px;
196
- --radius-medium: 5px;
197
- --radius-large: 6px;
195
+ --radius-small: 5px;
196
+ --radius-medium: 7px;
197
+ --radius-large: 9px;
198
198
 
199
199
  --outline-hover: 0 0 0 3px var(--color-highlight);
200
200
 
package/src/ui/button/button.module.css CHANGED
@@ -1,14 +1,21 @@
1
1
  .root {
2
+ /* use for vertical padding and to compute gap and horizontal spacing */
3
+ --button-space: 0px;
4
+ /* button border width */
5
+ --border-width: 0px;
6
+
2
7
  display: inline-flex;
3
8
  align-items: center;
4
- gap: var(--space-xxsmall);
9
+ justify-content: center;
10
+ gap: calc(max(var(--button-space), var(--space-xxsmall)) * 0.66);
5
11
  appearance: none;
6
12
  padding: 0;
7
- border: 0;
13
+ border: var(--border-width) solid transparent;
8
14
  background: none;
9
15
  transition: var(--transition-out);
10
16
  color: var(--color-text-ultra-light);
11
17
  font-family: var(--font-family);
18
+ white-space: nowrap;
12
19
  }
13
20
 
14
21
  a.root {
@@ -18,6 +25,7 @@ a.root {
18
25
  .root:hover,
19
26
  .root:active,
20
27
  .root:focus {
28
+ outline: none;
21
29
  color: var(--color-text-light);
22
30
  transition: var(--transition-in);
23
31
  }
@@ -98,7 +106,7 @@ a.root {
98
106
  * Solid Kind variation
99
107
  */
100
108
  .solid {
101
- background: var(--color-text-light);
109
+ background: var(--color-text-ultra-light);
102
110
  color: var(--color-background);
103
111
  }
104
112
 
@@ -106,7 +114,7 @@ a.root {
106
114
  .solid:active,
107
115
  .solid:focus {
108
116
  box-shadow: var(--outline-hover);
109
- background: var(--color-text);
117
+ background: var(--color-text-light);
110
118
  color: var(--color-background);
111
119
  }
112
120
 
@@ -170,11 +178,51 @@ a.root {
170
178
  background: var(--color-success-dark);
171
179
  }
172
180
 
181
+ /**
182
+ * Size variation
183
+ */
184
+ .small {
185
+ --button-space: var(--space-xxsmall);
186
+
187
+ font-size: var(--size-small);
188
+ line-height: var(--space-small);
189
+ }
190
+
191
+ .small .glyph {
192
+ width: var(--space-small);
193
+ height: var(--space-small);
194
+ }
195
+
196
+ .medium {
197
+ --button-space: var(--space-xsmall);
198
+
199
+ font-size: var(--size-medium);
200
+ line-height: calc(var(--space-small) + var(--space-xxxsmall));
201
+ }
202
+
203
+ .medium .glyph {
204
+ width: calc(var(--space-small) + var(--space-xxxsmall));
205
+ height: calc(var(--space-small) + var(--space-xxxsmall));
206
+ }
207
+
208
+ .large {
209
+ --button-space: var(--space-small);
210
+
211
+ font-size: var(--size-large);
212
+ line-height: var(--space-medium);
213
+ }
214
+
215
+ .large .glyph {
216
+ width: var(--space-medium);
217
+ height: var(--space-medium);
218
+ }
219
+
173
220
  /**
174
221
  * Outline variation
175
222
  */
176
223
  .outline {
177
- border: 1px solid var(--color-outline);
224
+ --border-width: 1px;
225
+ border-color: var(--color-outline);
178
226
  }
179
227
 
180
228
  .outline:hover,
@@ -244,58 +292,12 @@ a.root {
244
292
  border-color: var(--color-outline-success-dark);
245
293
  }
246
294
 
247
- /**
248
- * Size variation
249
- */
250
- .small {
251
- font-size: var(--size-small);
252
- gap: var(--space-xxxsmall);
253
- line-height: var(--space-small);
254
- }
255
-
256
- .small .glyph {
257
- width: calc(var(--space-xsmall) + 2px);
258
- height: calc(var(--space-xsmall) + 2px);
259
- margin: 1px; /* compensate to keep the same height when the text is not provided */
260
- }
261
-
262
- .medium {
263
- font-size: var(--size-medium);
264
- gap: var(--space-xxsmall);
265
- line-height: var(--space-small);
266
- }
267
-
268
- .large {
269
- font-size: var(--size-large);
270
- gap: var(--space-xxsmall);
271
- line-height: var(--space-small);
272
- }
273
295
 
274
296
  /**
275
297
  * Padding variation
276
298
  */
277
- .padding--small {
278
- padding: var(--space-xxsmall);
279
- }
280
-
281
- .outline--padding--small {
282
- padding: calc(var(--space-xxsmall) - 1px);
283
- }
284
-
285
- .padding--medium {
286
- padding: var(--space-xsmall);
287
- }
288
-
289
- .outline--padding--medium {
290
- padding: calc(var(--space-xsmall) - 1px);
291
- }
292
-
293
- .padding--large {
294
- padding: var(--space-small);
295
- }
296
-
297
- .outline--padding--large {
298
- padding: calc(var(--space-small) - 1px);
299
+ .padding {
300
+ padding: calc(var(--button-space) - var(--border-width));
299
301
  }
300
302
 
301
303
  /**
package/src/ui/button/button.stories.tsx CHANGED
@@ -62,7 +62,14 @@ export const All = () => (
62
62
  <h3>With icon</h3>
63
63
  <Items>
64
64
  {Object.values(BUTTON_KIND).map((kind) => (
65
- <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE} kind={kind} key={kind}>
65
+ <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE} kind={kind} key={kind}>
66
+ Action {kind}
67
+ </Button>
68
+ ))}
69
+ </Items>
70
+ <Items>
71
+ {Object.values(BUTTON_KIND).map((kind) => (
72
+ <Button rightGlyph={Icon.ICONS.ARROW_RIGHT_CIRCLE} kind={kind} key={kind}>
66
73
  Action {kind}
67
74
  </Button>
68
75
  ))}
@@ -106,12 +113,12 @@ export const All = () => (
106
113
  <h3>With icon</h3>
107
114
  {Object.values(BUTTON_SIZE).map((size) => (
108
115
  <Items key={size}>
109
- <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE} outline size={size}>
116
+ <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE} outline size={size}>
110
117
  Action default
111
118
  </Button>
112
119
  {Object.values(BUTTON_KIND).map((kind) => (
113
120
  <Button
114
- glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE}
121
+ glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE}
115
122
  outline
116
123
  kind={kind}
117
124
  size={size}
@@ -125,10 +132,10 @@ export const All = () => (
125
132
  <h3>Only icon</h3>
126
133
  {Object.values(BUTTON_SIZE).map((size) => (
127
134
  <Items key={size}>
128
- <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE} outline size={size} />
135
+ <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE} outline size={size} />
129
136
  {Object.values(BUTTON_KIND).map((kind) => (
130
137
  <Button
131
- glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE}
138
+ glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE}
132
139
  outline
133
140
  kind={kind}
134
141
  size={size}
@@ -179,12 +186,12 @@ export const All = () => (
179
186
  <h3>With icon</h3>
180
187
  {Object.values(BUTTON_SIZE).map((size) => (
181
188
  <Items key={size}>
182
- <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE} solid size={size}>
189
+ <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE} solid size={size}>
183
190
  Action default
184
191
  </Button>
185
192
  {Object.values(BUTTON_KIND).map((kind) => (
186
193
  <Button
187
- glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE}
194
+ glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE}
188
195
  solid
189
196
  kind={kind}
190
197
  size={size}
@@ -198,10 +205,10 @@ export const All = () => (
198
205
  <h3>Only icon</h3>
199
206
  {Object.values(BUTTON_SIZE).map((size) => (
200
207
  <Items key={size}>
201
- <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE} solid size={size} />
208
+ <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE} solid size={size} />
202
209
  {Object.values(BUTTON_KIND).map((kind) => (
203
210
  <Button
204
- glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE}
211
+ glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE}
205
212
  solid
206
213
  kind={kind}
207
214
  size={size}
package/src/ui/button/button.tsx CHANGED
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
+
2
3
  import cx from 'classnames';
3
4
  import { Button as ButtonBaseComponent } from 'ariakit/button';
4
5
 
@@ -50,7 +51,7 @@ const ButtonComponent = <T extends React.ElementType = 'button'>(
50
51
  radius = '',
51
52
  padding = '',
52
53
  as: Component = ButtonBaseComponent,
53
- children,
54
+ children = null,
54
55
  Icon = BaseIcon,
55
56
  glyph,
56
57
  rightGlyph,
@@ -61,10 +62,12 @@ const ButtonComponent = <T extends React.ElementType = 'button'>(
61
62
  const resolvedPadding = padding || ((outline || solid) && size);
62
63
  const resolvedRadius = radius || ((outline || solid) && size);
63
64
 
65
+ const resolvedSize = Object.values(BUTTON_SIZE).includes(size) ? size : BUTTON_SIZE.MEDIUM;
66
+
64
67
  const rootClassName = cx(
65
68
  css.root,
66
- css[size],
67
69
  kind && css[kind],
70
+ css[resolvedSize],
68
71
 
69
72
  outline && css.outline,
70
73
  outline && css[`outline--${kind}`],
@@ -72,22 +75,20 @@ const ButtonComponent = <T extends React.ElementType = 'button'>(
72
75
  solid && css.solid,
73
76
  solid && css[`solid--${kind}`],
74
77
 
75
- resolvedPadding && css[`padding--${resolvedPadding}`],
76
- resolvedPadding && outline && css[`outline--padding--${resolvedPadding}`],
78
+ resolvedPadding && css.padding,
77
79
  resolvedRadius && css[`radius--${resolvedRadius}`],
78
80
 
79
81
  active && css.active,
80
82
  active && outline && css[`active-outline-${kind}`],
81
83
 
82
- css[size],
83
84
  className,
84
85
  );
85
86
 
86
87
  return (
87
88
  <Component {...restProps} className={rootClassName}>
88
- {glyph && <Icon glyph={glyph} size={size} className={css.glyph} />}
89
+ {glyph && <Icon glyph={glyph} className={css.glyph} />}
89
90
  {children && <span className={css.content}>{children}</span>}
90
- {rightGlyph && <Icon glyph={glyph} size={size} className={css.glyph} />}
91
+ {rightGlyph && <Icon glyph={rightGlyph} className={css.glyph} />}
91
92
  </Component>
92
93
  );
93
94
  };
package/src/ui/icon/icon.tsx CHANGED
@@ -5,7 +5,7 @@ import css from './icon.module.css';
5
5
 
6
6
  const ICONS = {
7
7
  ARROW: 'arrow',
8
- ARROW_RIGHT_CIRLCE: 'arrow-right-circle',
8
+ ARROW_RIGHT_CIRCLE: 'arrow-right-circle',
9
9
  CANCEL: 'close',
10
10
  CHEVRON_DOWN: 'chevron-down',
11
11
  CHEVRON_UP: 'chevron-up',
package/types/ui/icon/icon.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  declare const ICONS: {
3
3
  readonly ARROW: "arrow";
4
- readonly ARROW_RIGHT_CIRLCE: "arrow-right-circle";
4
+ readonly ARROW_RIGHT_CIRCLE: "arrow-right-circle";
5
5
  readonly CANCEL: "close";
6
6
  readonly CHEVRON_DOWN: "chevron-down";
7
7
  readonly CHEVRON_UP: "chevron-up";
@@ -36,7 +36,7 @@ export declare const Icon: {
36
36
  (props: IconProps & React.ComponentProps<'span'>): React.JSX.Element;
37
37
  ICONS: {
38
38
  readonly ARROW: "arrow";
39
- readonly ARROW_RIGHT_CIRLCE: "arrow-right-circle";
39
+ readonly ARROW_RIGHT_CIRCLE: "arrow-right-circle";
40
40
  readonly CANCEL: "close";
41
41
  readonly CHEVRON_DOWN: "chevron-down";
42
42
  readonly CHEVRON_UP: "chevron-up";