terra-alert - npm Package Compare versions

Comparing version 4.76.0 to 4.77.0

CHANGELOG.md

@@ -5,2 +5,7 @@ # Changelog
 
+## 4.77.0 - (August 23, 2023)
+
+* Fixed
+  * Fixed `terra-alert` focus blocking content from being click-able.
+
 ## 4.76.0 - (August 18, 2023)
@@ -7,0 +12,0 @@

lib/Alert.js

@@ -183,2 +183,3 @@ "use strict";
   var focusContainerClassName = cx('focus-container');
+  var contentContainerClassName = cx('content-container');
   var alertId = (0, _uuid.v4)();
@@ -239,7 +240,9 @@ var alertTitleId = "alert-title-".concat(alertId);
     className: bodyClassNameForParent
-  }, getAlertIcon(type, customIcon), alertMessageContent, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: focusContainerClassName,
     ref: alertBodyRef,
     tabIndex: "-1"
-  })), actionsSection));
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: contentContainerClassName
+  }, getAlertIcon(type, customIcon), alertMessageContent)), actionsSection));
 };
@@ -246,0 +249,0 @@ Alert.propTypes = propTypes;

package.json

 {
   "name": "terra-alert",
   "main": "lib/Alert.js",
-  "version": "4.76.0",
+  "version": "4.77.0",
   "description": "The Terra Alert component is a notification banner that can be rendered in your application when there is information that you want to bring to the user's attention. The Alert component supports a number of built-in notification types that render with pre-defined colors and icons that help the user understand the severity and meaning of the notification. A custom notification type is also supported that allows your application to customize an alert that may not fit into the pre-defined types.",
@@ -33,3 +33,3 @@ "repository": {
     "terra-button": "^3.68.0",
-    "terra-icon": "^3.55.0",
+    "terra-icon": "^3.56.0",
     "terra-responsive-element": "^5.37.0",
@@ -52,3 +52,3 @@ "terra-theme-context": "^1.0.0",
   },
-  "gitHead": "f835d737f6862fcc7953ca61840c2959b21e675c"
+  "gitHead": "d63defc3a28797a5bb77c1006aa32edbffc92cd9"
 }

src/Alert.jsx

@@ -164,2 +164,3 @@ import React, { useEffect, useRef, useState } from 'react';
   const focusContainerClassName = cx('focus-container');
+  const contentContainerClassName = cx('content-container');
 
@@ -234,5 +235,7 @@ const alertId = uuidv4();
         <div className={bodyClassNameForParent}>
-          {getAlertIcon(type, customIcon)}
-          {alertMessageContent}
           <div className={focusContainerClassName} ref={alertBodyRef} tabIndex="-1" />
+          <div className={contentContainerClassName}>
+            {getAlertIcon(type, customIcon)}
+            {alertMessageContent}
+          </div>
         </div>
@@ -239,0 +242,0 @@ {actionsSection}

tests/wdio/alert-spec.js

@@ -75,2 +75,19 @@ Terra.describeViewports('Alert', ['tiny', 'large'], () => {
   describe('Alert Long Text', () => {
+    it('focuses on show more button', () => {
+      browser.url('/raw/tests/cerner-terra-core-docs/alert/long-text-alert');
+      browser.keys(['Tab']);
+      expect($('button.button').isFocused).toBeTruthy();
+      Terra.validates.element('show more button focused');
+    });
+
+    it('open show hide upon button click', () => {
+      $('button.button').click();
+      Terra.validates.element('disclosed show hide');
+    });
+
+    it('close show hide', () => {
+      $('button.button').click();
+      Terra.validates.element('closed show hide');
+    });
+
     it('wraps naturally at high magnification', () => {
@@ -77,0 +94,0 @@ browser.setWindowRect(0, 0, 100, 800);

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

100891

increased by1.36%

Lines of code

1061

increased by1.92%

Dependency changes

• Updatedterra-icon@^3.56.0