fix: Added custom properties for the Alert focus ring (#3749)

Author: teodoranemes

build-tools/utils/custom-css-properties.js

@@ -89,5 +89,10 @@ const customCssPropertiesList = [
   'styleFocusRingBorderRadius',
   'styleFocusRingBorderWidth',
   'styleFocusRingBoxShadow',
+  // Alert focus ring properties
+  'alertFocusRingBorderColor',
+  'alertFocusRingBorderRadius',
+  'alertFocusRingBorderWidth',
+  'alertFocusRingBoxShadow',
 ];
 module.exports = customCssPropertiesList;

src/alert/__tests__/alert.test.tsx

@@ -313,17 +313,17 @@ describe('Style API', () => {
     expect(getComputedStyle(wrapper.findRootElement().getElement()).getPropertyValue('color')).toBe('rgb(0, 0, 0)');
     expect(
       getComputedStyle(wrapper.findRootElement().getElement()).getPropertyValue(
-        customCssProps.styleFocusRingBorderColor
+        customCssProps.alertFocusRingBorderColor
       )
     ).toBe('rgb(23, 31, 118)');
     expect(
       getComputedStyle(wrapper.findRootElement().getElement()).getPropertyValue(
-        customCssProps.styleFocusRingBorderRadius
+        customCssProps.alertFocusRingBorderRadius
       )
     ).toBe('6px');
     expect(
       getComputedStyle(wrapper.findRootElement().getElement()).getPropertyValue(
-        customCssProps.styleFocusRingBorderWidth
+        customCssProps.alertFocusRingBorderWidth
       )
     ).toBe('4px');
 

src/alert/style.tsx

@@ -16,9 +16,9 @@ export function getAlertStyles(style: AlertProps['style']) {
     borderWidth: style.root?.borderWidth,
     color: style.root?.color,
     ...(style.root?.focusRing && {
-      [customCssProps.styleFocusRingBorderColor]: style.root.focusRing?.borderColor,
-      [customCssProps.styleFocusRingBorderRadius]: style.root.focusRing?.borderRadius,
-      [customCssProps.styleFocusRingBorderWidth]: style.root.focusRing?.borderWidth,
+      [customCssProps.alertFocusRingBorderColor]: style.root.focusRing?.borderColor,
+      [customCssProps.alertFocusRingBorderRadius]: style.root.focusRing?.borderRadius,
+      [customCssProps.alertFocusRingBorderWidth]: style.root.focusRing?.borderWidth,
     }),
   };
 }

src/alert/styles.scss

@@ -37,9 +37,9 @@
   padding-inline: awsui.$space-alert-horizontal;
   background-color: awsui.$color-background-container-content;
 
-  #{custom-props.$styleFocusRingBoxShadow}: 0 0 0
-    var(#{custom-props.$styleFocusRingBorderWidth}, foundation.$box-shadow-focused-width)
-    var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused);
+  #{custom-props.$alertFocusRingBoxShadow}: 0 0 0
+    var(#{custom-props.$alertFocusRingBorderWidth}, foundation.$box-shadow-focused-width)
+    var(#{custom-props.$alertFocusRingBorderColor}, awsui.$color-border-item-focused);
 }
 
 .alert-wrapper {
@@ -85,8 +85,8 @@
   @include focus-visible.when-visible {
     @include styles.focus-highlight(
       $gutter: awsui.$space-button-focus-outline-gutter,
-      $border-radius: var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring),
-      $box-shadow: var(#{custom-props.$styleFocusRingBoxShadow})
+      $border-radius: var(#{custom-props.$alertFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring),
+      $box-shadow: var(#{custom-props.$alertFocusRingBoxShadow})
     );
   }
 }