npm - @canonical/react-components - Versions diffs - 2.3.0 → 2.3.1 - Mend

@canonical/react-components 2.3.0 → 2.3.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 (13) hide show

package/dist/components/Notifications/ToastNotification/Animate.js CHANGED Viewed

@@ -46,6 +46,7 @@ const Animate = _ref => {
         element.style.display = "none";
       };
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [show, removeState]);
   if (removeState) {
     return null;

package/dist/components/Notifications/ToastNotification/Toast.scss CHANGED Viewed

@@ -1,6 +1,3 @@
-@import "vanilla-framework/scss/settings";
-@import "vanilla-framework/scss/build";
 .toast-animate {
   position: relative;
   z-index: 101;
@@ -13,21 +10,21 @@
   position: absolute;
   right: 0;
-  @media screen and (min-width: $breakpoint-small) and (max-width: $breakpoint-large) {
+  @media screen and (min-width: 620px) and (max-width: 1036px) {
     width: 500px;
   }
-  @media screen and (min-width: $breakpoint-large) {
+  @media screen and (min-width: 1036px) {
     width: 600px;
   }
 }
 .toast-notification {
-  box-shadow: 0 0 calc($sp-unit * 4) $sp-unit rgb(0 0 0 / 15%);
+  box-shadow: 0 0 2rem 0.5rem rgb(0 0 0 / 15%);
   overflow: hidden;
   z-index: 101;
-  @media screen and (max-width: $breakpoint-small) {
+  @media screen and (max-width: 620px) {
     left: 0;
     margin: 1.5rem auto;
     max-width: 400px;
@@ -37,7 +34,7 @@
 .toast-notification-list {
   background-color: white;
-  box-shadow: 0 0 calc($sp-unit * 4) $sp-unit rgb(0 0 0 / 22%);
+  box-shadow: 0 0 2rem 0.5rem rgb(0 0 0 / 22%);
   max-height: calc(100vh - 4.5rem);
   overflow: auto;
   padding: 0 0.5rem;
@@ -66,7 +63,7 @@
       .dismiss-text {
         align-items: center;
         display: flex;
-        gap: $sph--x-small;
+        gap: 0.25rem;
       }
     }
@@ -77,9 +74,9 @@
         align-items: center;
         border: none;
         display: flex;
-        gap: $sph--x-small;
+        gap: 0.25rem;
         justify-content: center;
-        margin-right: $sph--small !important;
+        margin-right: 0.5rem !important;
         padding: calc(0.4rem - 1px);
         /* stylelint-disable max-nesting-depth */
@@ -88,17 +85,11 @@
           padding: 0;
           text-align: center;
         }
-        /* stylelint-disable-next-line selector-class-pattern */
-        .p-icon--info--notification {
-          @extend %icon;
-          @include vf-icon-info-coloured-themed;
-        }
         /* stylelint-enable max-nesting-depth */
       }
     }
-    @media screen and (max-width: $breakpoint-small) {
+    @media screen and (max-width: 620px) {
       align-items: flex-start;
       flex-direction: column;
       gap: 0.5rem;
@@ -106,7 +97,7 @@
     }
   }
-  @media screen and (max-width: $breakpoint-small) {
+  @media screen and (max-width: 620px) {
     bottom: 2rem;
     left: 0;
     margin: 1.5rem auto;

package/dist/components/Notifications/ToastNotification/ToastNotification.stories.js CHANGED Viewed

@@ -35,6 +35,7 @@ const PreloadedList = () => {
     toastNotify.info("Your changes are syncing in the background");
     toastNotify.failure("Save failed", new Error("500 Internal Server Error"), "Please try again.");
     toastNotify.toggleListView();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {

package/dist/components/Notifications/ToastNotification/ToastNotificationList.d.ts CHANGED Viewed

@@ -7,7 +7,7 @@ export type FilterTypes = ValueOf<typeof NotificationSeverity>;
 export declare const severityOrder: readonly ["positive", "caution", "negative", "information"];
 export declare const iconLookup: {
     readonly positive: "success";
-    readonly information: "info--notification";
+    readonly information: "information";
     readonly caution: "warning";
     readonly negative: "error";
 };

package/dist/components/Notifications/ToastNotification/ToastNotificationList.js CHANGED Viewed

@@ -20,8 +20,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const severityOrder = exports.severityOrder = ["positive", "caution", "negative", "information"];
 const iconLookup = exports.iconLookup = {
   positive: _Icon.ICONS.success,
-  // custom name for info icon to override default color from vanilla
-  information: "info--notification",
+  information: _Icon.ICONS.information,
   caution: _Icon.ICONS.warning,
   negative: _Icon.ICONS.error
 };
@@ -39,6 +38,7 @@ const ToastNotificationList = _ref => {
   const preferReducedMotion = (0, _hooks.usePrefersReducedMotion)();
   (0, _react.useLayoutEffect)(() => {
     adjustScrollPosition();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [notifications]);
   // this layout effect is used to maintain scroll position of the

package/dist/components/Notifications/ToastNotification/ToastNotificationProvider.js CHANGED Viewed

@@ -103,6 +103,7 @@ const ToastNotificationProvider = _ref => {
         clearTimeout(notificationTimer);
       }
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   const showNotificationWithDelay = () => {
     setNotificationTimer(prevTimer => {

package/dist/esm/components/Notifications/ToastNotification/Animate.js CHANGED Viewed

@@ -39,6 +39,7 @@ var Animate = _ref => {
         element.style.display = "none";
       };
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [show, removeState]);
   if (removeState) {
     return null;

package/dist/esm/components/Notifications/ToastNotification/Toast.scss CHANGED Viewed

@@ -1,6 +1,3 @@
-@import "vanilla-framework/scss/settings";
-@import "vanilla-framework/scss/build";
 .toast-animate {
   position: relative;
   z-index: 101;
@@ -13,21 +10,21 @@
   position: absolute;
   right: 0;
-  @media screen and (min-width: $breakpoint-small) and (max-width: $breakpoint-large) {
+  @media screen and (min-width: 620px) and (max-width: 1036px) {
     width: 500px;
   }
-  @media screen and (min-width: $breakpoint-large) {
+  @media screen and (min-width: 1036px) {
     width: 600px;
   }
 }
 .toast-notification {
-  box-shadow: 0 0 calc($sp-unit * 4) $sp-unit rgb(0 0 0 / 15%);
+  box-shadow: 0 0 2rem 0.5rem rgb(0 0 0 / 15%);
   overflow: hidden;
   z-index: 101;
-  @media screen and (max-width: $breakpoint-small) {
+  @media screen and (max-width: 620px) {
     left: 0;
     margin: 1.5rem auto;
     max-width: 400px;
@@ -37,7 +34,7 @@
 .toast-notification-list {
   background-color: white;
-  box-shadow: 0 0 calc($sp-unit * 4) $sp-unit rgb(0 0 0 / 22%);
+  box-shadow: 0 0 2rem 0.5rem rgb(0 0 0 / 22%);
   max-height: calc(100vh - 4.5rem);
   overflow: auto;
   padding: 0 0.5rem;
@@ -66,7 +63,7 @@
       .dismiss-text {
         align-items: center;
         display: flex;
-        gap: $sph--x-small;
+        gap: 0.25rem;
       }
     }
@@ -77,9 +74,9 @@
         align-items: center;
         border: none;
         display: flex;
-        gap: $sph--x-small;
+        gap: 0.25rem;
         justify-content: center;
-        margin-right: $sph--small !important;
+        margin-right: 0.5rem !important;
         padding: calc(0.4rem - 1px);
         /* stylelint-disable max-nesting-depth */
@@ -88,17 +85,11 @@
           padding: 0;
           text-align: center;
         }
-        /* stylelint-disable-next-line selector-class-pattern */
-        .p-icon--info--notification {
-          @extend %icon;
-          @include vf-icon-info-coloured-themed;
-        }
         /* stylelint-enable max-nesting-depth */
       }
     }
-    @media screen and (max-width: $breakpoint-small) {
+    @media screen and (max-width: 620px) {
       align-items: flex-start;
       flex-direction: column;
       gap: 0.5rem;
@@ -106,7 +97,7 @@
     }
   }
-  @media screen and (max-width: $breakpoint-small) {
+  @media screen and (max-width: 620px) {
     bottom: 2rem;
     left: 0;
     margin: 1.5rem auto;

package/dist/esm/components/Notifications/ToastNotification/ToastNotification.stories.js CHANGED Viewed

@@ -26,6 +26,7 @@ var PreloadedList = () => {
     toastNotify.info("Your changes are syncing in the background");
     toastNotify.failure("Save failed", new Error("500 Internal Server Error"), "Please try again.");
     toastNotify.toggleListView();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return /*#__PURE__*/React.createElement("div", {
     style: {

package/dist/esm/components/Notifications/ToastNotification/ToastNotificationList.d.ts CHANGED Viewed

@@ -7,7 +7,7 @@ export type FilterTypes = ValueOf<typeof NotificationSeverity>;
 export declare const severityOrder: readonly ["positive", "caution", "negative", "information"];
 export declare const iconLookup: {
     readonly positive: "success";
-    readonly information: "info--notification";
+    readonly information: "information";
     readonly caution: "warning";
     readonly negative: "error";
 };

package/dist/esm/components/Notifications/ToastNotification/ToastNotificationList.js CHANGED Viewed

@@ -13,8 +13,7 @@ import "./Toast.scss";
 export var severityOrder = ["positive", "caution", "negative", "information"];
 export var iconLookup = {
   positive: ICONS.success,
-  // custom name for info icon to override default color from vanilla
-  information: "info--notification",
+  information: ICONS.information,
   caution: ICONS.warning,
   negative: ICONS.error
 };
@@ -32,6 +31,7 @@ var ToastNotificationList = _ref => {
   var preferReducedMotion = usePrefersReducedMotion();
   useLayoutEffect(() => {
     adjustScrollPosition();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [notifications]);
   // this layout effect is used to maintain scroll position of the

package/dist/esm/components/Notifications/ToastNotification/ToastNotificationProvider.js CHANGED Viewed

@@ -100,6 +100,7 @@ var ToastNotificationProvider = _ref => {
         clearTimeout(notificationTimer);
       }
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   var showNotificationWithDelay = () => {
     setNotificationTimer(prevTimer => {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {