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

Comparing version 6.9.1 to 6.10.0

Component.js

@@ -9,3 +9,2 @@ 'use strict';
 var coreComponentsButton = require('@alfalab/core-components-button');
-var helpers_transformSize = require('./helpers/transformSize.js');
 
@@ -17,9 +16,9 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-var defaultColors = {"primary":"icon-button__primary_8xh9f","secondary":"icon-button__secondary_8xh9f","transparent":"icon-button__transparent_8xh9f","negative":"icon-button__negative_8xh9f","tertiary":"icon-button__tertiary_8xh9f","transparentBg":"icon-button__transparentBg_8xh9f","component":"icon-button__component_8xh9f","loader":"icon-button__loader_8xh9f"};
+var defaultColors = {"primary":"icon-button__primary_177c6","secondary":"icon-button__secondary_177c6","transparent":"icon-button__transparent_177c6","negative":"icon-button__negative_177c6","tertiary":"icon-button__tertiary_177c6","transparentBg":"icon-button__transparentBg_177c6","component":"icon-button__component_177c6","loader":"icon-button__loader_177c6"};
 require('./default.css')
 
-var styles = {"border-24":"icon-button__border-24_1sc3a","border-32":"icon-button__border-32_1sc3a","border-40":"icon-button__border-40_1sc3a","border-48":"icon-button__border-48_1sc3a","border-56":"icon-button__border-56_1sc3a","size-24":"icon-button__size-24_1sc3a","size-32":"icon-button__size-32_1sc3a","size-40":"icon-button__size-40_1sc3a","size-48":"icon-button__size-48_1sc3a","size-56":"icon-button__size-56_1sc3a","iconWrapper":"icon-button__iconWrapper_1sc3a","center":"icon-button__center_1sc3a","left":"icon-button__left_1sc3a","right":"icon-button__right_1sc3a","icon":"icon-button__icon_1sc3a"};
+var styles = {"size-24":"icon-button__size-24_1nceo","size-32":"icon-button__size-32_1nceo","size-40":"icon-button__size-40_1nceo","size-48":"icon-button__size-48_1nceo","size-56":"icon-button__size-56_1nceo","iconWrapper":"icon-button__iconWrapper_1nceo","center":"icon-button__center_1nceo","left":"icon-button__left_1nceo","right":"icon-button__right_1nceo","icon":"icon-button__icon_1nceo"};
 require('./index.css')
 
-var invertedColors = {"primary":"icon-button__primary_9hfnu","secondary":"icon-button__secondary_9hfnu","transparent":"icon-button__transparent_9hfnu","negative":"icon-button__negative_9hfnu","tertiary":"icon-button__tertiary_9hfnu","transparentBg":"icon-button__transparentBg_9hfnu","component":"icon-button__component_9hfnu","loader":"icon-button__loader_9hfnu"};
+var invertedColors = {"primary":"icon-button__primary_17ral","secondary":"icon-button__secondary_17ral","transparent":"icon-button__transparent_17ral","negative":"icon-button__negative_17ral","tertiary":"icon-button__tertiary_17ral","transparentBg":"icon-button__transparentBg_17ral","component":"icon-button__component_17ral","loader":"icon-button__loader_17ral"};
 require('./inverted.css')
@@ -44,6 +43,6 @@
     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, _g = _a.transparentBg, transparentBg = _g === void 0 ? false : _g, restProps = tslib.__rest(_a, ["className", "icon", "view", "size", "colors", "alignIcon", "transparentBg"]);
-    return (React__default.default.createElement(coreComponentsButton.Button, tslib.__assign({}, restProps, { ref: ref, view: 'text', className: cn__default.default('cc-icon-button', className, colorStyles[colors][view], colorStyles[colors].component, styles["border-".concat(helpers_transformSize.transformSize(size))], (_b = {},
+    return (React__default.default.createElement(coreComponentsButton.Button, tslib.__assign({}, restProps, { ref: ref, view: 'text', className: cn__default.default('cc-icon-button', className, colorStyles[colors][view], colorStyles[colors].component, (_b = {},
             _b[colorStyles[colors].loader] = restProps.loading,
             _b[colorStyles[colors].transparentBg] = transparentBg,
-            _b)), size: 's' /** todo рассмотреть возможность динамического изменения размера */ }),
+            _b)), size: 's' }),
         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 })))));
@@ -50,0 +49,0 @@ });

cssm/Component.js

@@ -9,3 +9,2 @@ 'use strict';
 var coreComponentsButton = require('@alfalab/core-components-button/cssm');
-var helpers_transformSize = require('./helpers/transformSize.js');
 var defaultColors = require('./default.module.css');
@@ -40,6 +39,6 @@ var styles = require('./index.module.css');
     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, _g = _a.transparentBg, transparentBg = _g === void 0 ? false : _g, restProps = tslib.__rest(_a, ["className", "icon", "view", "size", "colors", "alignIcon", "transparentBg"]);
-    return (React__default.default.createElement(coreComponentsButton.Button, tslib.__assign({}, restProps, { ref: ref, view: 'text', className: cn__default.default('cc-icon-button', className, colorStyles[colors][view], colorStyles[colors].component, styles__default.default["border-".concat(helpers_transformSize.transformSize(size))], (_b = {},
+    return (React__default.default.createElement(coreComponentsButton.Button, tslib.__assign({}, restProps, { ref: ref, view: 'text', className: cn__default.default('cc-icon-button', className, colorStyles[colors][view], colorStyles[colors].component, (_b = {},
             _b[colorStyles[colors].loader] = restProps.loading,
             _b[colorStyles[colors].transparentBg] = transparentBg,
-            _b)), size: 's' /** todo рассмотреть возможность динамического изменения размера */ }),
+            _b)), size: 's' }),
         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 })))));
@@ -46,0 +45,0 @@ });

esm/Component.js

@@ -5,11 +5,10 @@ import { __rest, __assign } from 'tslib';
 import { Button } from '@alfalab/core-components-button/esm';
-import { transformSize } from './helpers/transformSize.js';
 
-var defaultColors = {"primary":"icon-button__primary_8xh9f","secondary":"icon-button__secondary_8xh9f","transparent":"icon-button__transparent_8xh9f","negative":"icon-button__negative_8xh9f","tertiary":"icon-button__tertiary_8xh9f","transparentBg":"icon-button__transparentBg_8xh9f","component":"icon-button__component_8xh9f","loader":"icon-button__loader_8xh9f"};
+var defaultColors = {"primary":"icon-button__primary_177c6","secondary":"icon-button__secondary_177c6","transparent":"icon-button__transparent_177c6","negative":"icon-button__negative_177c6","tertiary":"icon-button__tertiary_177c6","transparentBg":"icon-button__transparentBg_177c6","component":"icon-button__component_177c6","loader":"icon-button__loader_177c6"};
 require('./default.css')
 
-var styles = {"border-24":"icon-button__border-24_1sc3a","border-32":"icon-button__border-32_1sc3a","border-40":"icon-button__border-40_1sc3a","border-48":"icon-button__border-48_1sc3a","border-56":"icon-button__border-56_1sc3a","size-24":"icon-button__size-24_1sc3a","size-32":"icon-button__size-32_1sc3a","size-40":"icon-button__size-40_1sc3a","size-48":"icon-button__size-48_1sc3a","size-56":"icon-button__size-56_1sc3a","iconWrapper":"icon-button__iconWrapper_1sc3a","center":"icon-button__center_1sc3a","left":"icon-button__left_1sc3a","right":"icon-button__right_1sc3a","icon":"icon-button__icon_1sc3a"};
+var styles = {"size-24":"icon-button__size-24_1nceo","size-32":"icon-button__size-32_1nceo","size-40":"icon-button__size-40_1nceo","size-48":"icon-button__size-48_1nceo","size-56":"icon-button__size-56_1nceo","iconWrapper":"icon-button__iconWrapper_1nceo","center":"icon-button__center_1nceo","left":"icon-button__left_1nceo","right":"icon-button__right_1nceo","icon":"icon-button__icon_1nceo"};
 require('./index.css')
 
-var invertedColors = {"primary":"icon-button__primary_9hfnu","secondary":"icon-button__secondary_9hfnu","transparent":"icon-button__transparent_9hfnu","negative":"icon-button__negative_9hfnu","tertiary":"icon-button__tertiary_9hfnu","transparentBg":"icon-button__transparentBg_9hfnu","component":"icon-button__component_9hfnu","loader":"icon-button__loader_9hfnu"};
+var invertedColors = {"primary":"icon-button__primary_17ral","secondary":"icon-button__secondary_17ral","transparent":"icon-button__transparent_17ral","negative":"icon-button__negative_17ral","tertiary":"icon-button__tertiary_17ral","transparentBg":"icon-button__transparentBg_17ral","component":"icon-button__component_17ral","loader":"icon-button__loader_17ral"};
 require('./inverted.css')
@@ -34,6 +33,6 @@
     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, _g = _a.transparentBg, transparentBg = _g === void 0 ? false : _g, restProps = __rest(_a, ["className", "icon", "view", "size", "colors", "alignIcon", "transparentBg"]);
-    return (React.createElement(Button, __assign({}, restProps, { ref: ref, view: 'text', className: cn('cc-icon-button', className, colorStyles[colors][view], colorStyles[colors].component, styles["border-".concat(transformSize(size))], (_b = {},
+    return (React.createElement(Button, __assign({}, restProps, { ref: ref, view: 'text', className: cn('cc-icon-button', className, colorStyles[colors][view], colorStyles[colors].component, (_b = {},
             _b[colorStyles[colors].loader] = restProps.loading,
             _b[colorStyles[colors].transparentBg] = transparentBg,
-            _b)), size: 's' /** todo рассмотреть возможность динамического изменения размера */ }),
+            _b)), size: 's' }),
         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 })))));
@@ -40,0 +39,0 @@ });

modern/Component.js

 import React, { forwardRef } from 'react';
 import cn from 'classnames';
 import { Button } from '@alfalab/core-components-button/modern';
-import { transformSize } from './helpers/transformSize.js';
 
-const defaultColors = {"primary":"icon-button__primary_8xh9f","secondary":"icon-button__secondary_8xh9f","transparent":"icon-button__transparent_8xh9f","negative":"icon-button__negative_8xh9f","tertiary":"icon-button__tertiary_8xh9f","transparentBg":"icon-button__transparentBg_8xh9f","component":"icon-button__component_8xh9f","loader":"icon-button__loader_8xh9f"};
+const defaultColors = {"primary":"icon-button__primary_177c6","secondary":"icon-button__secondary_177c6","transparent":"icon-button__transparent_177c6","negative":"icon-button__negative_177c6","tertiary":"icon-button__tertiary_177c6","transparentBg":"icon-button__transparentBg_177c6","component":"icon-button__component_177c6","loader":"icon-button__loader_177c6"};
 require('./default.css')
 
-const styles = {"border-24":"icon-button__border-24_1sc3a","border-32":"icon-button__border-32_1sc3a","border-40":"icon-button__border-40_1sc3a","border-48":"icon-button__border-48_1sc3a","border-56":"icon-button__border-56_1sc3a","size-24":"icon-button__size-24_1sc3a","size-32":"icon-button__size-32_1sc3a","size-40":"icon-button__size-40_1sc3a","size-48":"icon-button__size-48_1sc3a","size-56":"icon-button__size-56_1sc3a","iconWrapper":"icon-button__iconWrapper_1sc3a","center":"icon-button__center_1sc3a","left":"icon-button__left_1sc3a","right":"icon-button__right_1sc3a","icon":"icon-button__icon_1sc3a"};
+const styles = {"size-24":"icon-button__size-24_1nceo","size-32":"icon-button__size-32_1nceo","size-40":"icon-button__size-40_1nceo","size-48":"icon-button__size-48_1nceo","size-56":"icon-button__size-56_1nceo","iconWrapper":"icon-button__iconWrapper_1nceo","center":"icon-button__center_1nceo","left":"icon-button__left_1nceo","right":"icon-button__right_1nceo","icon":"icon-button__icon_1nceo"};
 require('./index.css')
 
-const invertedColors = {"primary":"icon-button__primary_9hfnu","secondary":"icon-button__secondary_9hfnu","transparent":"icon-button__transparent_9hfnu","negative":"icon-button__negative_9hfnu","tertiary":"icon-button__tertiary_9hfnu","transparentBg":"icon-button__transparentBg_9hfnu","component":"icon-button__component_9hfnu","loader":"icon-button__loader_9hfnu"};
+const invertedColors = {"primary":"icon-button__primary_17ral","secondary":"icon-button__secondary_17ral","transparent":"icon-button__transparent_17ral","negative":"icon-button__negative_17ral","tertiary":"icon-button__tertiary_17ral","transparentBg":"icon-button__transparentBg_17ral","component":"icon-button__component_17ral","loader":"icon-button__loader_17ral"};
 require('./inverted.css')
@@ -29,6 +28,6 @@
 };
-const IconButton = forwardRef(({ className, icon: Icon, view = 'primary', size = 48, colors = 'default', alignIcon = 'center', transparentBg = false, ...restProps }, ref) => (React.createElement(Button, { ...restProps, ref: ref, view: 'text', className: cn('cc-icon-button', className, colorStyles[colors][view], colorStyles[colors].component, styles[`border-${transformSize(size)}`], {
+const IconButton = forwardRef(({ className, icon: Icon, view = 'primary', size = 48, colors = 'default', alignIcon = 'center', transparentBg = false, ...restProps }, ref) => (React.createElement(Button, { ...restProps, ref: ref, view: 'text', className: cn('cc-icon-button', className, colorStyles[colors][view], colorStyles[colors].component, {
         [colorStyles[colors].loader]: restProps.loading,
         [colorStyles[colors].transparentBg]: transparentBg,
-    }), size: 's' /** todo рассмотреть возможность динамического изменения размера */ },
+    }), size: 's' },
     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 }))))));
@@ -35,0 +34,0 @@ IconButton.displayName = 'IconButton';

moderncssm/Component.js

 import React, { forwardRef } from 'react';
 import cn from 'classnames';
 import { Button } from '@alfalab/core-components-button/moderncssm';
-import { transformSize } from './helpers/transformSize.js';
 import defaultColors from './default.module.css';
@@ -23,6 +22,6 @@ import styles from './index.module.css';
 };
-const IconButton = forwardRef(({ className, icon: Icon, view = 'primary', size = 48, colors = 'default', alignIcon = 'center', transparentBg = false, ...restProps }, ref) => (React.createElement(Button, { ...restProps, ref: ref, view: 'text', className: cn('cc-icon-button', className, colorStyles[colors][view], colorStyles[colors].component, styles[`border-${transformSize(size)}`], {
+const IconButton = forwardRef(({ className, icon: Icon, view = 'primary', size = 48, colors = 'default', alignIcon = 'center', transparentBg = false, ...restProps }, ref) => (React.createElement(Button, { ...restProps, ref: ref, view: 'text', className: cn('cc-icon-button', className, colorStyles[colors][view], colorStyles[colors].component, {
         [colorStyles[colors].loader]: restProps.loading,
         [colorStyles[colors].transparentBg]: transparentBg,
-    }), size: 's' /** todo рассмотреть возможность динамического изменения размера */ },
+    }), size: 's' },
     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 }))))));
@@ -29,0 +28,0 @@ IconButton.displayName = 'IconButton';

package.json

 {
     "name": "@alfalab/core-components-icon-button",
-    "version": "6.9.1",
+    "version": "6.10.0",
     "description": "",
@@ -17,8 +17,8 @@ "keywords": [],
     "dependencies": {
-        "@alfalab/core-components-button": "^11.7.1",
+        "@alfalab/core-components-button": "^11.8.0",
         "classnames": "^2.3.1",
         "tslib": "^2.4.0"
     },
-    "themesVersion": "13.2.0",
+    "themesVersion": "13.3.0",
     "varsVersion": "9.13.1"
 }

No alert changes

Worsened metrics

Total package byte prevSize

288160

-10.7%

Number of package files

41

-25.45%

Lines of code

3248

-15.94%

Dependency changes

• Updated

  @alfalab/core-components-button@^11.8.0