@alfalab/core-components-icon-button - npm Package Compare versions

Comparing version 6.4.3 to 6.5.0

Component.d.ts

@@ -18,4 +18,5 @@ /// <reference types="react" />
      * Размер компонента
+     * @description xxs, xs, s deprecated, используйте вместо них 24, 32, 40 соответственно
      */
-    size?: 'xxs' | 'xs' | 's';
+    size?: 'xxs' | 'xs' | 's' | 24 | 32 | 40 | 48 | 56;
     /**
@@ -52,4 +53,5 @@ * Дополнительный класс
      * Размер компонента
+     * @description xxs, xs, s deprecated, используйте вместо них 24, 32, 40 соответственно
      */
-    size?: "s" | "xs" | "xxs" | undefined;
+    size?: "s" | "xs" | 24 | 48 | "xxs" | 32 | 40 | 56 | undefined;
     /**
@@ -56,0 +58,0 @@ * Дополнительный класс

Component.js

@@ -15,9 +15,9 @@ 'use strict';
 
-var defaultColors = {"primary":"icon-button__primary_1l70n","secondary":"icon-button__secondary_1l70n","transparent":"icon-button__transparent_1l70n","negative":"icon-button__negative_1l70n","tertiary":"icon-button__tertiary_1l70n","component":"icon-button__component_1l70n","loader":"icon-button__loader_1l70n"};
+var defaultColors = {"primary":"icon-button__primary_1wk12","secondary":"icon-button__secondary_1wk12","transparent":"icon-button__transparent_1wk12","negative":"icon-button__negative_1wk12","tertiary":"icon-button__tertiary_1wk12","component":"icon-button__component_1wk12","loader":"icon-button__loader_1wk12"};
 require('./default.css')
 
-var styles = {"xxs":"icon-button__xxs_1gdqp","xs":"icon-button__xs_1gdqp","s":"icon-button__s_1gdqp","iconWrapper":"icon-button__iconWrapper_1gdqp","center":"icon-button__center_1gdqp","left":"icon-button__left_1gdqp","right":"icon-button__right_1gdqp","icon":"icon-button__icon_1gdqp"};
+var styles = {"size-24":"icon-button__size-24_6x1m4","size-32":"icon-button__size-32_6x1m4","size-40":"icon-button__size-40_6x1m4","size-48":"icon-button__size-48_6x1m4","size-56":"icon-button__size-56_6x1m4","iconWrapper":"icon-button__iconWrapper_6x1m4","center":"icon-button__center_6x1m4","left":"icon-button__left_6x1m4","right":"icon-button__right_6x1m4","icon":"icon-button__icon_6x1m4"};
 require('./index.css')
 
-var invertedColors = {"primary":"icon-button__primary_1wy1x","secondary":"icon-button__secondary_1wy1x","transparent":"icon-button__transparent_1wy1x","negative":"icon-button__negative_1wy1x","tertiary":"icon-button__tertiary_1wy1x","component":"icon-button__component_1wy1x","loader":"icon-button__loader_1wy1x"};
+var invertedColors = {"primary":"icon-button__primary_99yal","secondary":"icon-button__secondary_99yal","transparent":"icon-button__transparent_99yal","negative":"icon-button__negative_99yal","tertiary":"icon-button__tertiary_99yal","component":"icon-button__component_99yal","loader":"icon-button__loader_99yal"};
 require('./inverted.css')
@@ -29,11 +29,21 @@
 };
+var SIZE_TO_CLASSNAME_MAP = {
+    xxs: 'size-24',
+    xs: 'size-32',
+    s: 'size-48',
+    24: 'size-24',
+    32: 'size-32',
+    40: 'size-40',
+    48: 'size-48',
+    56: 'size-56',
+};
 var IconButton = React.forwardRef(function (_a, ref) {
     var _b;
-    var className = _a.className, Icon = _a.icon, _c = _a.view, view = _c === void 0 ? 'primary' : _c, _d = _a.size, size = _d === void 0 ? 's' : _d, _e = _a.colors, colors = _e === void 0 ? 'default' : _e, _f = _a.alignIcon, alignIcon = _f === void 0 ? 'center' : _f, restProps = tslib.__rest(_a, ["className", "icon", "view", "size", "colors", "alignIcon"]);
+    var className = _a.className, Icon = _a.icon, _c = _a.view, view = _c === void 0 ? 'primary' : _c, _d = _a.size, size = _d === void 0 ? 48 : _d, _e = _a.colors, colors = _e === void 0 ? 'default' : _e, _f = _a.alignIcon, alignIcon = _f === void 0 ? 'center' : _f, restProps = tslib.__rest(_a, ["className", "icon", "view", "size", "colors", "alignIcon"]);
     return (React__default.default.createElement(coreComponentsButton.Button, tslib.__assign({}, restProps, { ref: ref, view: 'ghost', className: cn__default.default('cc-icon-button', className, colorStyles[colors][view], colorStyles[colors].component, (_b = {},
             _b[colorStyles[colors].loader] = restProps.loading,
             _b)), size: 's' }),
-        React__default.default.createElement("span", { className: cn__default.default(styles.iconWrapper, styles[size], styles[alignIcon]) }, React__default.default.isValidElement(Icon) ? (React__default.default.cloneElement(Icon, { className: cn__default.default(styles.icon, Icon.props.className) })) : (React__default.default.createElement(Icon, { className: styles.icon })))));
+        React__default.default.createElement("span", { className: cn__default.default(styles.iconWrapper, styles[SIZE_TO_CLASSNAME_MAP[size]], styles[alignIcon]) }, React__default.default.isValidElement(Icon) ? (React__default.default.cloneElement(Icon, { className: cn__default.default(styles.icon, Icon.props.className) })) : (React__default.default.createElement(Icon, { className: styles.icon })))));
 });
 
 exports.IconButton = IconButton;

cssm/Component.d.ts

@@ -18,4 +18,5 @@ /// <reference types="react" />
      * Размер компонента
+     * @description xxs, xs, s deprecated, используйте вместо них 24, 32, 40 соответственно
      */
-    size?: 'xxs' | 'xs' | 's';
+    size?: 'xxs' | 'xs' | 's' | 24 | 32 | 40 | 48 | 56;
     /**
@@ -52,4 +53,5 @@ * Дополнительный класс
      * Размер компонента
+     * @description xxs, xs, s deprecated, используйте вместо них 24, 32, 40 соответственно
      */
-    size?: "s" | "xs" | "xxs" | undefined;
+    size?: "s" | "xs" | 24 | 48 | "xxs" | 32 | 40 | 56 | undefined;
     /**
@@ -56,0 +58,0 @@ * Дополнительный класс

cssm/Component.js

@@ -25,11 +25,21 @@ 'use strict';
 };
+var SIZE_TO_CLASSNAME_MAP = {
+    xxs: 'size-24',
+    xs: 'size-32',
+    s: 'size-48',
+    24: 'size-24',
+    32: 'size-32',
+    40: 'size-40',
+    48: 'size-48',
+    56: 'size-56',
+};
 var IconButton = React.forwardRef(function (_a, ref) {
     var _b;
-    var className = _a.className, Icon = _a.icon, _c = _a.view, view = _c === void 0 ? 'primary' : _c, _d = _a.size, size = _d === void 0 ? 's' : _d, _e = _a.colors, colors = _e === void 0 ? 'default' : _e, _f = _a.alignIcon, alignIcon = _f === void 0 ? 'center' : _f, restProps = tslib.__rest(_a, ["className", "icon", "view", "size", "colors", "alignIcon"]);
+    var className = _a.className, Icon = _a.icon, _c = _a.view, view = _c === void 0 ? 'primary' : _c, _d = _a.size, size = _d === void 0 ? 48 : _d, _e = _a.colors, colors = _e === void 0 ? 'default' : _e, _f = _a.alignIcon, alignIcon = _f === void 0 ? 'center' : _f, restProps = tslib.__rest(_a, ["className", "icon", "view", "size", "colors", "alignIcon"]);
     return (React__default.default.createElement(coreComponentsButton.Button, tslib.__assign({}, restProps, { ref: ref, view: 'ghost', className: cn__default.default('cc-icon-button', className, colorStyles[colors][view], colorStyles[colors].component, (_b = {},
             _b[colorStyles[colors].loader] = restProps.loading,
             _b)), size: 's' }),
-        React__default.default.createElement("span", { className: cn__default.default(styles__default.default.iconWrapper, styles__default.default[size], styles__default.default[alignIcon]) }, React__default.default.isValidElement(Icon) ? (React__default.default.cloneElement(Icon, { className: cn__default.default(styles__default.default.icon, Icon.props.className) })) : (React__default.default.createElement(Icon, { className: styles__default.default.icon })))));
+        React__default.default.createElement("span", { className: cn__default.default(styles__default.default.iconWrapper, styles__default.default[SIZE_TO_CLASSNAME_MAP[size]], styles__default.default[alignIcon]) }, React__default.default.isValidElement(Icon) ? (React__default.default.cloneElement(Icon, { className: cn__default.default(styles__default.default.icon, Icon.props.className) })) : (React__default.default.createElement(Icon, { className: styles__default.default.icon })))));
 });
 
 exports.IconButton = IconButton;

esm/Component.d.ts

@@ -18,4 +18,5 @@ /// <reference types="react" />
      * Размер компонента
+     * @description xxs, xs, s deprecated, используйте вместо них 24, 32, 40 соответственно
      */
-    size?: 'xxs' | 'xs' | 's';
+    size?: 'xxs' | 'xs' | 's' | 24 | 32 | 40 | 48 | 56;
     /**
@@ -52,4 +53,5 @@ * Дополнительный класс
      * Размер компонента
+     * @description xxs, xs, s deprecated, используйте вместо них 24, 32, 40 соответственно
      */
-    size?: "s" | "xs" | "xxs" | undefined;
+    size?: "s" | "xs" | 24 | 48 | "xxs" | 32 | 40 | 56 | undefined;
     /**
@@ -56,0 +58,0 @@ * Дополнительный класс

esm/Component.js

@@ -6,9 +6,9 @@ import { __rest, __assign } from 'tslib';
 
-var defaultColors = {"primary":"icon-button__primary_1l70n","secondary":"icon-button__secondary_1l70n","transparent":"icon-button__transparent_1l70n","negative":"icon-button__negative_1l70n","tertiary":"icon-button__tertiary_1l70n","component":"icon-button__component_1l70n","loader":"icon-button__loader_1l70n"};
+var defaultColors = {"primary":"icon-button__primary_1wk12","secondary":"icon-button__secondary_1wk12","transparent":"icon-button__transparent_1wk12","negative":"icon-button__negative_1wk12","tertiary":"icon-button__tertiary_1wk12","component":"icon-button__component_1wk12","loader":"icon-button__loader_1wk12"};
 require('./default.css')
 
-var styles = {"xxs":"icon-button__xxs_1gdqp","xs":"icon-button__xs_1gdqp","s":"icon-button__s_1gdqp","iconWrapper":"icon-button__iconWrapper_1gdqp","center":"icon-button__center_1gdqp","left":"icon-button__left_1gdqp","right":"icon-button__right_1gdqp","icon":"icon-button__icon_1gdqp"};
+var styles = {"size-24":"icon-button__size-24_6x1m4","size-32":"icon-button__size-32_6x1m4","size-40":"icon-button__size-40_6x1m4","size-48":"icon-button__size-48_6x1m4","size-56":"icon-button__size-56_6x1m4","iconWrapper":"icon-button__iconWrapper_6x1m4","center":"icon-button__center_6x1m4","left":"icon-button__left_6x1m4","right":"icon-button__right_6x1m4","icon":"icon-button__icon_6x1m4"};
 require('./index.css')
 
-var invertedColors = {"primary":"icon-button__primary_1wy1x","secondary":"icon-button__secondary_1wy1x","transparent":"icon-button__transparent_1wy1x","negative":"icon-button__negative_1wy1x","tertiary":"icon-button__tertiary_1wy1x","component":"icon-button__component_1wy1x","loader":"icon-button__loader_1wy1x"};
+var invertedColors = {"primary":"icon-button__primary_99yal","secondary":"icon-button__secondary_99yal","transparent":"icon-button__transparent_99yal","negative":"icon-button__negative_99yal","tertiary":"icon-button__tertiary_99yal","component":"icon-button__component_99yal","loader":"icon-button__loader_99yal"};
 require('./inverted.css')
@@ -20,11 +20,21 @@
 };
+var SIZE_TO_CLASSNAME_MAP = {
+    xxs: 'size-24',
+    xs: 'size-32',
+    s: 'size-48',
+    24: 'size-24',
+    32: 'size-32',
+    40: 'size-40',
+    48: 'size-48',
+    56: 'size-56',
+};
 var IconButton = forwardRef(function (_a, ref) {
     var _b;
-    var className = _a.className, Icon = _a.icon, _c = _a.view, view = _c === void 0 ? 'primary' : _c, _d = _a.size, size = _d === void 0 ? 's' : _d, _e = _a.colors, colors = _e === void 0 ? 'default' : _e, _f = _a.alignIcon, alignIcon = _f === void 0 ? 'center' : _f, restProps = __rest(_a, ["className", "icon", "view", "size", "colors", "alignIcon"]);
+    var className = _a.className, Icon = _a.icon, _c = _a.view, view = _c === void 0 ? 'primary' : _c, _d = _a.size, size = _d === void 0 ? 48 : _d, _e = _a.colors, colors = _e === void 0 ? 'default' : _e, _f = _a.alignIcon, alignIcon = _f === void 0 ? 'center' : _f, restProps = __rest(_a, ["className", "icon", "view", "size", "colors", "alignIcon"]);
     return (React.createElement(Button, __assign({}, restProps, { ref: ref, view: 'ghost', className: cn('cc-icon-button', className, colorStyles[colors][view], colorStyles[colors].component, (_b = {},
             _b[colorStyles[colors].loader] = restProps.loading,
             _b)), size: 's' }),
-        React.createElement("span", { className: cn(styles.iconWrapper, styles[size], styles[alignIcon]) }, React.isValidElement(Icon) ? (React.cloneElement(Icon, { className: cn(styles.icon, Icon.props.className) })) : (React.createElement(Icon, { className: styles.icon })))));
+        React.createElement("span", { className: cn(styles.iconWrapper, styles[SIZE_TO_CLASSNAME_MAP[size]], styles[alignIcon]) }, React.isValidElement(Icon) ? (React.cloneElement(Icon, { className: cn(styles.icon, Icon.props.className) })) : (React.createElement(Icon, { className: styles.icon })))));
 });
 
 export { IconButton };

modern/Component.d.ts

@@ -18,4 +18,5 @@ /// <reference types="react" />
      * Размер компонента
+     * @description xxs, xs, s deprecated, используйте вместо них 24, 32, 40 соответственно
      */
-    size?: 'xxs' | 'xs' | 's';
+    size?: 'xxs' | 'xs' | 's' | 24 | 32 | 40 | 48 | 56;
     /**
@@ -52,4 +53,5 @@ * Дополнительный класс
      * Размер компонента
+     * @description xxs, xs, s deprecated, используйте вместо них 24, 32, 40 соответственно
      */
-    size?: "s" | "xs" | "xxs" | undefined;
+    size?: "s" | "xs" | 24 | 48 | "xxs" | 32 | 40 | 56 | undefined;
     /**
@@ -56,0 +58,0 @@ * Дополнительный класс

modern/Component.js

@@ -5,9 +5,9 @@ import React, { forwardRef } from 'react';
 
-const defaultColors = {"primary":"icon-button__primary_1l70n","secondary":"icon-button__secondary_1l70n","transparent":"icon-button__transparent_1l70n","negative":"icon-button__negative_1l70n","tertiary":"icon-button__tertiary_1l70n","component":"icon-button__component_1l70n","loader":"icon-button__loader_1l70n"};
+const defaultColors = {"primary":"icon-button__primary_1wk12","secondary":"icon-button__secondary_1wk12","transparent":"icon-button__transparent_1wk12","negative":"icon-button__negative_1wk12","tertiary":"icon-button__tertiary_1wk12","component":"icon-button__component_1wk12","loader":"icon-button__loader_1wk12"};
 require('./default.css')
 
-const styles = {"xxs":"icon-button__xxs_1gdqp","xs":"icon-button__xs_1gdqp","s":"icon-button__s_1gdqp","iconWrapper":"icon-button__iconWrapper_1gdqp","center":"icon-button__center_1gdqp","left":"icon-button__left_1gdqp","right":"icon-button__right_1gdqp","icon":"icon-button__icon_1gdqp"};
+const styles = {"size-24":"icon-button__size-24_6x1m4","size-32":"icon-button__size-32_6x1m4","size-40":"icon-button__size-40_6x1m4","size-48":"icon-button__size-48_6x1m4","size-56":"icon-button__size-56_6x1m4","iconWrapper":"icon-button__iconWrapper_6x1m4","center":"icon-button__center_6x1m4","left":"icon-button__left_6x1m4","right":"icon-button__right_6x1m4","icon":"icon-button__icon_6x1m4"};
 require('./index.css')
 
-const invertedColors = {"primary":"icon-button__primary_1wy1x","secondary":"icon-button__secondary_1wy1x","transparent":"icon-button__transparent_1wy1x","negative":"icon-button__negative_1wy1x","tertiary":"icon-button__tertiary_1wy1x","component":"icon-button__component_1wy1x","loader":"icon-button__loader_1wy1x"};
+const invertedColors = {"primary":"icon-button__primary_99yal","secondary":"icon-button__secondary_99yal","transparent":"icon-button__transparent_99yal","negative":"icon-button__negative_99yal","tertiary":"icon-button__tertiary_99yal","component":"icon-button__component_99yal","loader":"icon-button__loader_99yal"};
 require('./inverted.css')
@@ -19,7 +19,17 @@
 };
-const IconButton = forwardRef(({ className, icon: Icon, view = 'primary', size = 's', colors = 'default', alignIcon = 'center', ...restProps }, ref) => (React.createElement(Button, { ...restProps, ref: ref, view: 'ghost', className: cn('cc-icon-button', className, colorStyles[colors][view], colorStyles[colors].component, {
+const SIZE_TO_CLASSNAME_MAP = {
+    xxs: 'size-24',
+    xs: 'size-32',
+    s: 'size-48',
+    24: 'size-24',
+    32: 'size-32',
+    40: 'size-40',
+    48: 'size-48',
+    56: 'size-56',
+};
+const IconButton = forwardRef(({ className, icon: Icon, view = 'primary', size = 48, colors = 'default', alignIcon = 'center', ...restProps }, ref) => (React.createElement(Button, { ...restProps, ref: ref, view: 'ghost', className: cn('cc-icon-button', className, colorStyles[colors][view], colorStyles[colors].component, {
         [colorStyles[colors].loader]: restProps.loading,
     }), size: 's' },
-    React.createElement("span", { className: cn(styles.iconWrapper, styles[size], styles[alignIcon]) }, React.isValidElement(Icon) ? (React.cloneElement(Icon, { className: cn(styles.icon, Icon.props.className) })) : (React.createElement(Icon, { className: styles.icon }))))));
+    React.createElement("span", { className: cn(styles.iconWrapper, styles[SIZE_TO_CLASSNAME_MAP[size]], styles[alignIcon]) }, React.isValidElement(Icon) ? (React.cloneElement(Icon, { className: cn(styles.icon, Icon.props.className) })) : (React.createElement(Icon, { className: styles.icon }))))));
 
 export { IconButton };

package.json

 {
     "name": "@alfalab/core-components-icon-button",
-    "version": "6.4.3",
+    "version": "6.5.0",
     "description": "",
@@ -17,3 +17,3 @@ "keywords": [],
     "dependencies": {
-        "@alfalab/core-components-button": "^11.0.0",
+        "@alfalab/core-components-button": "^11.1.0",
         "classnames": "^2.3.1",
@@ -20,0 +20,0 @@ "tslib": "^2.4.0"

No alert changes

Improved metrics

Total package byte prevSize

103305

4.31%

Lines of code

1957

5.9%

Dependency changes

• Updated

  @alfalab/core-components-button@^11.1.0