@semcore/spin-container - npm Package Compare versions

Comparing version 5.1.0 to 6.0.0

CHANGELOG.md

@@ -5,2 +5,8 @@ # Changelog
 
+## [6.0.0] - 2022-05-17
+
+### BREAK
+
+- Updated styles according to the library redesign policy.
+
 ## [5.1.0] - 2022-04-25
@@ -7,0 +13,0 @@

lib/cjs/SpinContainer.js

@@ -55,12 +55,14 @@ "use strict";
 /*__inner_css_start__*/
-".___SSpinContainer_umh1i_gg_{z-index:0;position:relative;display:block;overflow:hidden}.___SContent_umh1i_gg_{z-index:0;position:relative}.___SOverlay_umh1i_gg_{z-index:1;display:flex;width:100%;height:100%;justify-content:center;align-items:center;position:absolute;top:0;left:0;background-color:hsla(0,0%,100%,.85)}.___SOverlay_umh1i_gg_.__background_umh1i_gg_{background:var(--background_cfhiws)}"
+".___SSpinContainer_1vd8z_gg_{z-index:0;position:relative;display:block;overflow:hidden}.___SContent_1vd8z_gg_{z-index:0;position:relative}.___SOverlay_1vd8z_gg_{z-index:1;display:flex;width:100%;height:100%;justify-content:center;align-items:center;position:absolute;top:0;left:0}.___SOverlay_1vd8z_gg_._theme_invert_1vd8z_gg_{background-color:rgba(25,27,35,.4)}.___SOverlay_1vd8z_gg_._theme_dark_1vd8z_gg_{background-color:hsla(0,0%,100%,.85)}.___SOverlay_1vd8z_gg_._theme_custom_1vd8z_gg_{background-color:var(--background_1505dra)}"
 /*__inner_css_end__*/
-, "cfhiws_gg_")
+, "1505dra_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SSpinContainer": "___SSpinContainer_umh1i_gg_",
-  "__SContent": "___SContent_umh1i_gg_",
-  "__SOverlay": "___SOverlay_umh1i_gg_",
-  "_background": "__background_umh1i_gg_",
-  "--background": "--background_cfhiws"
+  "__SSpinContainer": "___SSpinContainer_1vd8z_gg_",
+  "__SContent": "___SContent_1vd8z_gg_",
+  "__SOverlay": "___SOverlay_1vd8z_gg_",
+  "_theme_invert": "_theme_invert_1vd8z_gg_",
+  "_theme_dark": "_theme_dark_1vd8z_gg_",
+  "_theme_custom": "_theme_custom_1vd8z_gg_",
+  "--background": "--background_1505dra"
 });
@@ -141,5 +143,7 @@
           styles = _this$asProps3.styles,
+          theme = _this$asProps3.theme,
           background = _this$asProps3.background,
           loading = _this$asProps3.loading,
           duration = _this$asProps3.duration;
+      var useTheme = background ? 'custom' : theme;
       return _ref5 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(_animation.FadeInOut, _ref5.cn("FadeInOut", {
@@ -149,2 +153,3 @@ "visible": loading,
       }), /*#__PURE__*/_react["default"].createElement(SOverlay, _ref5.cn("SOverlay", _objectSpread({}, (0, _core.assignProps)({
+        "use:theme": useTheme,
         "use:background": (0, _color["default"])(background)
@@ -151,0 +156,0 @@ }, _ref2)))));

lib/es6/SpinContainer.js

@@ -33,12 +33,14 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 /*__inner_css_start__*/
-".___SSpinContainer_umh1i_gg_{z-index:0;position:relative;display:block;overflow:hidden}.___SContent_umh1i_gg_{z-index:0;position:relative}.___SOverlay_umh1i_gg_{z-index:1;display:flex;width:100%;height:100%;justify-content:center;align-items:center;position:absolute;top:0;left:0;background-color:hsla(0,0%,100%,.85)}.___SOverlay_umh1i_gg_.__background_umh1i_gg_{background:var(--background_cfhiws)}"
+".___SSpinContainer_1vd8z_gg_{z-index:0;position:relative;display:block;overflow:hidden}.___SContent_1vd8z_gg_{z-index:0;position:relative}.___SOverlay_1vd8z_gg_{z-index:1;display:flex;width:100%;height:100%;justify-content:center;align-items:center;position:absolute;top:0;left:0}.___SOverlay_1vd8z_gg_._theme_invert_1vd8z_gg_{background-color:rgba(25,27,35,.4)}.___SOverlay_1vd8z_gg_._theme_dark_1vd8z_gg_{background-color:hsla(0,0%,100%,.85)}.___SOverlay_1vd8z_gg_._theme_custom_1vd8z_gg_{background-color:var(--background_1505dra)}"
 /*__inner_css_end__*/
-, "cfhiws_gg_")
+, "1505dra_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SSpinContainer": "___SSpinContainer_umh1i_gg_",
-  "__SContent": "___SContent_umh1i_gg_",
-  "__SOverlay": "___SOverlay_umh1i_gg_",
-  "_background": "__background_umh1i_gg_",
-  "--background": "--background_cfhiws"
+  "__SSpinContainer": "___SSpinContainer_1vd8z_gg_",
+  "__SContent": "___SContent_1vd8z_gg_",
+  "__SOverlay": "___SOverlay_1vd8z_gg_",
+  "_theme_invert": "_theme_invert_1vd8z_gg_",
+  "_theme_dark": "_theme_dark_1vd8z_gg_",
+  "_theme_custom": "_theme_custom_1vd8z_gg_",
+  "--background": "--background_1505dra"
 });
@@ -124,5 +126,7 @@
           styles = _this$asProps3.styles,
+          theme = _this$asProps3.theme,
           background = _this$asProps3.background,
           loading = _this$asProps3.loading,
           duration = _this$asProps3.duration;
+      var useTheme = background ? 'custom' : theme;
       return _ref5 = sstyled(styles), /*#__PURE__*/React.createElement(FadeInOut, _ref5.cn("FadeInOut", {
@@ -132,2 +136,3 @@ "visible": loading,
       }), /*#__PURE__*/React.createElement(SOverlay, _ref5.cn("SOverlay", _objectSpread({}, _assignProps2({
+        "use:theme": useTheme,
         "use:background": resolveColor(background)
@@ -134,0 +139,0 @@ }, _ref2)))));

package.json

 {
   "name": "@semcore/spin-container",
   "description": "SEMRush SpinContainer Component",
-  "version": "5.1.0",
+  "version": "6.0.0",
   "main": "lib/cjs/index.js",
@@ -17,3 +17,3 @@ "module": "lib/es6/index.js",
     "@semcore/utils": "^3.31",
-    "@semcore/spin": "^3",
+    "@semcore/spin": "^4",
     "@semcore/flex-box": "^4",
@@ -20,0 +20,0 @@ "@semcore/animation": "^1"

src/SpinContainer.jsx

@@ -66,7 +66,8 @@ import React from 'react';
     const SOverlay = Root;
-    const { styles, background, loading, duration } = this.asProps;
+    const { styles, theme, background, loading, duration } = this.asProps;
+    const useTheme = background ? 'custom' : theme;
 
     return sstyled(styles)(
       <FadeInOut visible={loading} duration={duration}>
-        <SOverlay render={Box} use:background={resolveColor(background)} />
+        <SOverlay render={Box} use:theme={useTheme} use:background={resolveColor(background)} />
       </FadeInOut>,
@@ -73,0 +74,0 @@ );

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

40684

increased by4.19%

Lines of code

619

increased by4.74%

Dependency changes

• + Added@semcore/spin@4.2.33(transitive)

• - Removed@semcore/spin@3.4.1(transitive)

• Updated@semcore/spin@^4