diff --git a/build-tools/utils/custom-css-properties.js b/build-tools/utils/custom-css-properties.js index 7db67cf777..73998ca2e2 100644 --- a/build-tools/utils/custom-css-properties.js +++ b/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; diff --git a/src/alert/__tests__/alert.test.tsx b/src/alert/__tests__/alert.test.tsx index b9a5bd7ff2..3378848c22 100644 --- a/src/alert/__tests__/alert.test.tsx +++ b/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'); diff --git a/src/alert/style.tsx b/src/alert/style.tsx index 2e2599cd95..44b607ce43 100644 --- a/src/alert/style.tsx +++ b/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, }), }; } diff --git a/src/alert/styles.scss b/src/alert/styles.scss index 33d026b1ac..77f3a651ef 100644 --- a/src/alert/styles.scss +++ b/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}) ); } }