fix: AWSUI-61442

Author: mxschll

src/container/__tests__/styles.test.tsx

@@ -0,0 +1,52 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { getContentStyles, getFooterStyles, getHeaderStyles, getMediaStyles, getRootStyles } from '../style';
+
+jest.mock('../../internal/environment', () => ({
+  SYSTEM: 'core',
+}));
+
+describe('Container style utilities', () => {
+  afterEach(() => {
+    jest.resetModules();
+  });
+
+  test('getRootStyles returns empty object when style is undefined', () => {
+    expect(getRootStyles(undefined)).toEqual({});
+  });
+
+  test('getContentStyles returns empty object when style is undefined', () => {
+    expect(getContentStyles(undefined)).toEqual({});
+  });
+
+  test('getHeaderStyles returns empty object when style is undefined', () => {
+    expect(getHeaderStyles(undefined)).toEqual({});
+  });
+
+  test('getFooterStyles returns empty object when style is undefined', () => {
+    expect(getFooterStyles(undefined)).toEqual({});
+  });
+
+  test('getMediaStyles returns border radius properties when style is undefined', () => {
+    expect(getMediaStyles('top', undefined)).toEqual({
+      borderEndEndRadius: '0px',
+      borderEndStartRadius: '0px',
+    });
+  });
+
+  test('returns empty object when SYSTEM is not core', async () => {
+    jest.resetModules();
+    jest.doMock('../../internal/environment', () => ({
+      SYSTEM: 'visual-refresh',
+    }));
+
+    const styleModule = await import('../style');
+    const style = { root: { background: 'red' } };
+
+    expect(styleModule.getRootStyles(style)).toEqual({});
+    expect(styleModule.getContentStyles(style)).toEqual({});
+    expect(styleModule.getHeaderStyles(style)).toEqual({});
+    expect(styleModule.getFooterStyles(style)).toEqual({});
+    expect(styleModule.getMediaStyles('top', style)).toEqual({});
+  });
+});

src/container/style.tsx

@@ -4,74 +4,74 @@ import { SYSTEM } from '../internal/environment';
 import { ContainerProps } from './interfaces';
 
 export function getRootStyles(style: ContainerProps.Style | undefined) {
-  let properties = {};
-
-  if (SYSTEM === 'core' && style?.root) {
-    properties = {
-      background: style.root?.background,
-      borderColor: style.root?.borderColor,
-      borderRadius: style.root?.borderRadius,
-      borderWidth: style.root?.borderWidth,
-      boxShadow: style.root?.boxShadow,
-    };
+  if (SYSTEM !== 'core') {
+    return {};
   }
 
-  return properties;
+  const properties = {
+    background: style?.root?.background,
+    borderColor: style?.root?.borderColor,
+    borderRadius: style?.root?.borderRadius,
+    borderWidth: style?.root?.borderWidth,
+    boxShadow: style?.root?.boxShadow,
+  };
+
+  return Object.fromEntries(Object.entries(properties).filter(([, value]) => value !== undefined));
 }
 
 export function getContentStyles(style: ContainerProps.Style | undefined) {
-  let properties = {};
-
-  if (SYSTEM === 'core' && style?.content) {
-    properties = {
-      paddingBlock: style.content?.paddingBlock,
-      paddingInline: style.content?.paddingInline,
-    };
+  if (SYSTEM !== 'core') {
+    return {};
   }
 
-  return properties;
+  const properties = {
+    paddingBlock: style?.content?.paddingBlock,
+    paddingInline: style?.content?.paddingInline,
+  };
+
+  return Object.fromEntries(Object.entries(properties).filter(([, value]) => value !== undefined));
 }
 
 export function getHeaderStyles(style: ContainerProps.Style | undefined) {
-  let properties = {};
-
-  if (SYSTEM === 'core' && style?.header) {
-    properties = {
-      ...(style?.root?.background && { background: style?.root?.background }),
-      ...(style?.root?.borderRadius && { background: style?.root?.borderRadius }),
-      paddingBlock: style.header?.paddingBlock,
-      paddingInline: style.header?.paddingInline,
-    };
+  if (SYSTEM !== 'core') {
+    return {};
   }
 
-  return properties;
+  const properties = {
+    background: style?.root?.background,
+    borderRadius: style?.root?.borderRadius,
+    paddingBlock: style?.header?.paddingBlock,
+    paddingInline: style?.header?.paddingInline,
+  };
+
+  return Object.fromEntries(Object.entries(properties).filter(([, value]) => value !== undefined));
 }
 
 export function getFooterStyles(style: ContainerProps.Style | undefined) {
-  let properties = {};
-
-  if (SYSTEM === 'core' && style?.footer) {
-    properties = {
-      borderColor: style.footer?.divider?.borderColor,
-      borderWidth: style.footer?.divider?.borderWidth,
-      paddingBlock: style.footer?.root?.paddingBlock,
-      paddingInline: style.footer?.root?.paddingInline,
-    };
+  if (SYSTEM !== 'core') {
+    return {};
   }
 
-  return properties;
+  const properties = {
+    borderColor: style?.footer?.divider?.borderColor,
+    borderWidth: style?.footer?.divider?.borderWidth,
+    paddingBlock: style?.footer?.root?.paddingBlock,
+    paddingInline: style?.footer?.root?.paddingInline,
+  };
+
+  return Object.fromEntries(Object.entries(properties).filter(([, value]) => value !== undefined));
 }
 
 export function getMediaStyles(mediaPosition: string, style: ContainerProps.Style | undefined) {
-  let properties = {};
-
-  if (SYSTEM === 'core' && style?.root?.borderRadius) {
-    properties = {
-      borderRadius: style?.root?.borderRadius,
-      ...(mediaPosition === 'top' && { borderEndStartRadius: '0px', borderEndEndRadius: '0px' }),
-      ...(mediaPosition === 'side' && { borderStartEndRadius: '0px', borderEndEndRadius: '0px' }),
-    };
+  if (SYSTEM !== 'core') {
+    return {};
   }
 
-  return properties;
+  const properties = {
+    borderRadius: style?.root?.borderRadius,
+    ...(mediaPosition === 'top' && { borderEndStartRadius: '0px', borderEndEndRadius: '0px' }),
+    ...(mediaPosition === 'side' && { borderStartEndRadius: '0px', borderEndEndRadius: '0px' }),
+  };
+
+  return Object.fromEntries(Object.entries(properties).filter(([, value]) => value !== undefined));
 }

src/container/styles.scss

@@ -12,6 +12,10 @@
   word-wrap: break-word;
   position: relative;
 
+  // Necessary, because rounded borders cause the header to overflow. Since the
+  // header has a background color, the edges of the header stick out.
+  overflow: hidden;
+
   &.fit-height {
     display: flex;
     flex-direction: column;