Skip to content

Commit 9324e6a

Browse files
mxschllmxschll
committed
fix: AWSUI-61442
1 parent 71a0376 commit 9324e6a

File tree

4 files changed

+145
-51
lines changed

4 files changed

+145
-51
lines changed

‎src/container/__tests__/styles.test.tsx‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2+
// SPDX-License-Identifier: Apache-2.0
3+
import {
4+
getContentStyles,
5+
getContentWrapperStyles,
6+
getFooterStyles,
7+
getHeaderStyles,
8+
getMediaStyles,
9+
getRootStyles,
10+
} from '../style';
11+
12+
jest.mock('../../internal/environment', () => ({
13+
SYSTEM: 'core',
14+
}));
15+
16+
describe('Container style utilities', () => {
17+
afterEach(() => {
18+
jest.resetModules();
19+
});
20+
21+
test('getRootStyles returns empty object when style is undefined', () => {
22+
expect(getRootStyles(undefined)).toEqual({});
23+
});
24+
25+
test('getContentStyles returns empty object when style is undefined', () => {
26+
expect(getContentStyles(undefined)).toEqual({});
27+
});
28+
29+
test('getContentWrapperStyles returns empty object when style is undefined', () => {
30+
expect(getContentWrapperStyles(undefined)).toEqual({});
31+
});
32+
33+
test('getContentWrapperStyles returns borderRadius when provided', () => {
34+
expect(getContentWrapperStyles({ root: { borderRadius: '20px' } })).toEqual({
35+
borderRadius: '20px',
36+
});
37+
});
38+
39+
test('getHeaderStyles returns empty object when style is undefined', () => {
40+
expect(getHeaderStyles(undefined)).toEqual({});
41+
});
42+
43+
test('getFooterStyles returns empty object when style is undefined', () => {
44+
expect(getFooterStyles(undefined)).toEqual({});
45+
});
46+
47+
test('getMediaStyles returns border radius properties when style is undefined', () => {
48+
expect(getMediaStyles('top', undefined)).toEqual({
49+
borderEndEndRadius: '0px',
50+
borderEndStartRadius: '0px',
51+
});
52+
});
53+
54+
test('returns empty object when SYSTEM is not core', async () => {
55+
jest.resetModules();
56+
jest.doMock('../../internal/environment', () => ({
57+
SYSTEM: 'visual-refresh',
58+
}));
59+
60+
const styleModule = await import('../style');
61+
const style = { root: { background: 'red' } };
62+
63+
expect(styleModule.getRootStyles(style)).toEqual({});
64+
expect(styleModule.getContentStyles(style)).toEqual({});
65+
expect(styleModule.getContentWrapperStyles(style)).toEqual({});
66+
expect(styleModule.getHeaderStyles(style)).toEqual({});
67+
expect(styleModule.getFooterStyles(style)).toEqual({});
68+
expect(styleModule.getMediaStyles('top', style)).toEqual({});
69+
});
70+
});

‎src/container/internal.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,14 @@ import { InternalBaseComponentProps } from '../internal/hooks/use-base-component
1414
import { useMobile } from '../internal/hooks/use-mobile';
1515
import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
1616
import { ContainerProps } from './interfaces';
17-
import { getContentStyles, getFooterStyles, getHeaderStyles, getMediaStyles, getRootStyles } from './style';
17+
import {
18+
getContentStyles,
19+
getContentWrapperStyles,
20+
getFooterStyles,
21+
getHeaderStyles,
22+
getMediaStyles,
23+
getRootStyles,
24+
} from './style';
1825
import { StickyHeaderContext, useStickyHeader } from './use-sticky-header';
1926

2027
import analyticsSelectors from './analytics-metadata/styles.css.js';
@@ -144,6 +151,7 @@ export default function InternalContainer({
144151
id={contentId}
145152
ref={__subStepRef}
146153
className={clsx(styles['content-wrapper'], fitHeight && styles['content-wrapper-fit-height'])}
154+
style={getContentWrapperStyles(style)}
147155
>
148156
{header && (
149157
<ContainerHeaderContextProvider>

‎src/container/style.tsx‎

Lines changed: 58 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -4,74 +4,85 @@ import { SYSTEM } from '../internal/environment';
44
import { ContainerProps } from './interfaces';
55

66
export function getRootStyles(style: ContainerProps.Style | undefined) {
7-
let properties = {};
8-
9-
if (SYSTEM === 'core' && style?.root) {
10-
properties = {
11-
background: style.root?.background,
12-
borderColor: style.root?.borderColor,
13-
borderRadius: style.root?.borderRadius,
14-
borderWidth: style.root?.borderWidth,
15-
boxShadow: style.root?.boxShadow,
16-
};
7+
if (SYSTEM !== 'core') {
8+
return {};
179
}
1810

19-
return properties;
11+
const properties = {
12+
background: style?.root?.background,
13+
borderColor: style?.root?.borderColor,
14+
borderRadius: style?.root?.borderRadius,
15+
borderWidth: style?.root?.borderWidth,
16+
boxShadow: style?.root?.boxShadow,
17+
};
18+
19+
return Object.fromEntries(Object.entries(properties).filter(([, value]) => value !== undefined));
2020
}
2121

2222
export function getContentStyles(style: ContainerProps.Style | undefined) {
23-
let properties = {};
23+
if (SYSTEM !== 'core') {
24+
return {};
25+
}
26+
27+
const properties = {
28+
paddingBlock: style?.content?.paddingBlock,
29+
paddingInline: style?.content?.paddingInline,
30+
};
31+
32+
return Object.fromEntries(Object.entries(properties).filter(([, value]) => value !== undefined));
33+
}
2434

25-
if (SYSTEM === 'core' && style?.content) {
26-
properties = {
27-
paddingBlock: style.content?.paddingBlock,
28-
paddingInline: style.content?.paddingInline,
29-
};
35+
export function getContentWrapperStyles(style: ContainerProps.Style | undefined) {
36+
if (SYSTEM !== 'core') {
37+
return {};
3038
}
3139

32-
return properties;
40+
const properties = {
41+
borderRadius: style?.root?.borderRadius,
42+
};
43+
44+
return Object.fromEntries(Object.entries(properties).filter(([, value]) => value !== undefined));
3345
}
3446

3547
export function getHeaderStyles(style: ContainerProps.Style | undefined) {
36-
let properties = {};
37-
38-
if (SYSTEM === 'core' && style?.header) {
39-
properties = {
40-
...(style?.root?.background && { background: style?.root?.background }),
41-
...(style?.root?.borderRadius && { background: style?.root?.borderRadius }),
42-
paddingBlock: style.header?.paddingBlock,
43-
paddingInline: style.header?.paddingInline,
44-
};
48+
if (SYSTEM !== 'core') {
49+
return {};
4550
}
4651

47-
return properties;
52+
const properties = {
53+
background: style?.root?.background,
54+
paddingBlock: style?.header?.paddingBlock,
55+
paddingInline: style?.header?.paddingInline,
56+
};
57+
58+
return Object.fromEntries(Object.entries(properties).filter(([, value]) => value !== undefined));
4859
}
4960

5061
export function getFooterStyles(style: ContainerProps.Style | undefined) {
51-
let properties = {};
52-
53-
if (SYSTEM === 'core' && style?.footer) {
54-
properties = {
55-
borderColor: style.footer?.divider?.borderColor,
56-
borderWidth: style.footer?.divider?.borderWidth,
57-
paddingBlock: style.footer?.root?.paddingBlock,
58-
paddingInline: style.footer?.root?.paddingInline,
59-
};
62+
if (SYSTEM !== 'core') {
63+
return {};
6064
}
6165

62-
return properties;
66+
const properties = {
67+
borderColor: style?.footer?.divider?.borderColor,
68+
borderWidth: style?.footer?.divider?.borderWidth,
69+
paddingBlock: style?.footer?.root?.paddingBlock,
70+
paddingInline: style?.footer?.root?.paddingInline,
71+
};
72+
73+
return Object.fromEntries(Object.entries(properties).filter(([, value]) => value !== undefined));
6374
}
6475

6576
export function getMediaStyles(mediaPosition: string, style: ContainerProps.Style | undefined) {
66-
let properties = {};
67-
68-
if (SYSTEM === 'core' && style?.root?.borderRadius) {
69-
properties = {
70-
borderRadius: style?.root?.borderRadius,
71-
...(mediaPosition === 'top' && { borderEndStartRadius: '0px', borderEndEndRadius: '0px' }),
72-
...(mediaPosition === 'side' && { borderStartEndRadius: '0px', borderEndEndRadius: '0px' }),
73-
};
77+
if (SYSTEM !== 'core') {
78+
return {};
7479
}
7580

76-
return properties;
81+
const properties = {
82+
borderRadius: style?.root?.borderRadius,
83+
...(mediaPosition === 'top' && { borderEndStartRadius: '0px', borderEndEndRadius: '0px' }),
84+
...(mediaPosition === 'side' && { borderStartEndRadius: '0px', borderEndEndRadius: '0px' }),
85+
};
86+
87+
return Object.fromEntries(Object.entries(properties).filter(([, value]) => value !== undefined));
7788
}

‎src/container/styles.scss‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@
1212
word-wrap: break-word;
1313
position: relative;
1414

15+
// Necessary, because rounded borders cause the header to overflow. Since the
16+
// header has a background color, the edges of the header stick out.
17+
// overflow: hidden;
18+
1519
&.fit-height {
1620
display: flex;
1721
flex-direction: column;
@@ -80,11 +84,12 @@
8084
display: flex;
8185
flex-direction: column;
8286
inline-size: 100%;
87+
overflow: hidden;
88+
border-end-start-radius: awsui.$border-radius-container;
89+
border-end-end-radius: awsui.$border-radius-container;
90+
8391
&-fit-height {
8492
block-size: 100%;
85-
overflow: hidden;
86-
border-end-start-radius: awsui.$border-radius-container;
87-
border-end-end-radius: awsui.$border-radius-container;
8893
}
8994
}
9095

0 commit comments

Comments
 (0)