Skip to content

Commit 311693c

Browse files
DaemonCahillDaemonCahill
authored
feat: Implementation of the Container component Style API (#3695)
1 parent 1d4f2d5 commit 311693c

File tree

7 files changed

+624
-3
lines changed

7 files changed

+624
-3
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,7 @@
167167
{
168168
"path": "lib/components/internal/widget-exports.js",
169169
"brotli": false,
170-
"limit": "800 kB",
170+
"limit": "810 kB",
171171
"ignore": "react-dom"
172172
}
173173
],

‎pages/container/style-custom.page.tsx

Lines changed: 217 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,217 @@
1+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2+
// SPDX-License-Identifier: Apache-2.0
3+
import React, { useRef } from 'react';
4+
5+
import { useCurrentMode } from '@cloudscape-design/component-toolkit/internal';
6+
7+
import { Box, Container, SpaceBetween } from '~components';
8+
9+
import ScreenshotArea from '../utils/screenshot-area';
10+
import image43 from './images/4-3.png';
11+
12+
export default function CustomContainer() {
13+
const mode = useCurrentMode(useRef(document.body));
14+
const background = mode === 'light' ? '#fcfcfc' : '#000';
15+
16+
return (
17+
<ScreenshotArea>
18+
<h1>Custom Container</h1>
19+
20+
<SpaceBetween size="m" direction="horizontal">
21+
<Container
22+
style={{
23+
root: {
24+
background,
25+
borderColor: 'green',
26+
borderRadius: '8px',
27+
borderWidth: '4px',
28+
boxShadow: '0px 5px 5px red',
29+
},
30+
content: {
31+
paddingBlock: '0px',
32+
paddingInline: '0px',
33+
},
34+
}}
35+
>
36+
Container content
37+
</Container>
38+
39+
<Container
40+
header="Container header"
41+
style={{
42+
root: {
43+
background,
44+
borderColor: 'magenta',
45+
borderRadius: '0px',
46+
borderWidth: '1px',
47+
boxShadow: '0px 5px 5px green',
48+
},
49+
content: {
50+
paddingBlock: '20px',
51+
paddingInline: '40px',
52+
},
53+
header: {
54+
paddingBlock: '20px',
55+
paddingInline: '40px',
56+
},
57+
}}
58+
>
59+
Container content
60+
</Container>
61+
62+
<Container
63+
footer="Container footer"
64+
style={{
65+
root: {
66+
background,
67+
borderColor: '#000',
68+
borderRadius: '20px',
69+
borderWidth: '3px',
70+
boxShadow: '0px 5px 5px blue',
71+
},
72+
content: {
73+
paddingBlock: '40px',
74+
paddingInline: '40px',
75+
},
76+
footer: {
77+
root: {
78+
paddingBlock: '40px',
79+
paddingInline: '40px',
80+
},
81+
divider: {
82+
borderColor: '#000',
83+
borderWidth: '3px',
84+
},
85+
},
86+
}}
87+
>
88+
Container content
89+
</Container>
90+
91+
<Container
92+
header="Container header"
93+
footer="Container footer"
94+
style={{
95+
root: {
96+
background,
97+
borderColor: 'blue',
98+
borderRadius: '40px',
99+
borderWidth: '4px',
100+
boxShadow: '5px 5px 5px pink',
101+
},
102+
header: {
103+
paddingBlock: '60px',
104+
paddingInline: '10px',
105+
},
106+
footer: {
107+
root: {
108+
paddingBlock: '60px',
109+
paddingInline: '10px',
110+
},
111+
divider: {
112+
borderWidth: '0px',
113+
},
114+
},
115+
}}
116+
/>
117+
118+
<Container
119+
header="Container header"
120+
footer="Container footer"
121+
style={{
122+
root: {
123+
background,
124+
borderColor: 'purple',
125+
borderRadius: '240px',
126+
borderWidth: '6px',
127+
boxShadow: '0px 5px 5px orange',
128+
},
129+
content: {
130+
paddingBlock: '20px',
131+
paddingInline: '140px',
132+
},
133+
header: {
134+
paddingBlock: '20px 0px',
135+
paddingInline: '140px',
136+
},
137+
footer: {
138+
root: {
139+
paddingBlock: '40px',
140+
paddingInline: '140px',
141+
},
142+
divider: {
143+
borderColor: 'purple',
144+
borderWidth: '6px',
145+
},
146+
},
147+
}}
148+
>
149+
Container content
150+
</Container>
151+
<Box>
152+
<Container
153+
header="Header content"
154+
variant="stacked"
155+
style={{
156+
root: {
157+
borderColor: 'green',
158+
borderWidth: '2px',
159+
},
160+
}}
161+
>
162+
Container content
163+
</Container>
164+
165+
<Container
166+
header="Header content"
167+
variant="stacked"
168+
style={{
169+
root: {
170+
borderColor: 'purple',
171+
borderWidth: '10px',
172+
},
173+
}}
174+
>
175+
Container content
176+
</Container>
177+
</Box>
178+
179+
<Container
180+
header="Header content"
181+
media={{
182+
content: <img src={image43} alt="placeholder" />,
183+
height: 200,
184+
position: 'top',
185+
}}
186+
style={{
187+
root: {
188+
borderColor: 'green',
189+
borderWidth: '1px',
190+
borderRadius: '40px',
191+
},
192+
}}
193+
>
194+
Container content
195+
</Container>
196+
197+
<Container
198+
header="Header content"
199+
media={{
200+
content: <img src={image43} alt="placeholder" />,
201+
width: 200,
202+
position: 'side',
203+
}}
204+
style={{
205+
root: {
206+
borderColor: 'green',
207+
borderWidth: '1px',
208+
borderRadius: '40px',
209+
},
210+
}}
211+
>
212+
Container content
213+
</Container>
214+
</SpaceBetween>
215+
</ScreenshotArea>
216+
);
217+
}

‎src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8616,6 +8616,166 @@ If no height is provided, the media slot will be displayed at its full height.",
86168616
"optional": true,
86178617
"type": "ContainerProps.Media",
86188618
},
8619+
{
8620+
"description": "Specifies an object of selectors and properties that are used to apply custom styles.
8621+
8622+
- \`root.background\` (string) - (Optional) Background of the container.
8623+
- \`root.borderColor\` (string) - (Optional) Border color of the container.
8624+
- \`root.borderRadius\` (string) - (Optional) Border radius of the container.
8625+
- \`root.borderWidth\` (string) - (Optional) Border width of the container.
8626+
- \`root.boxShadow\` (string) - (Optional) Box shadow of the container.
8627+
- \`content.paddingBlock\` (string) - (Optional) Block dimension padding of the content slot.
8628+
- \`content.paddingInline\` (string) - (Optional) Inline dimension padding of the content slot.
8629+
- \`header.paddingBlock\` (string) - (Optional) Block dimension padding of the header slot.
8630+
- \`header.paddingInline\` (string) - (Optional) Inline dimension padding of the header slot.
8631+
- \`footer.root.paddingBlock\` (string) - (Optional) Block dimension padding of the footer slot.
8632+
- \`footer.root.paddingInline\` (string) - (Optional) Inline dimension padding of the footer slot.
8633+
- \`footer.divider.borderColor\` (string) - (Optional) Border color of the footer divider.
8634+
- \`footer.divider.borderWidth\` (string) - (Optional) Border width of the footer divider.",
8635+
"inlineType": {
8636+
"name": "ContainerProps.Style",
8637+
"properties": [
8638+
{
8639+
"inlineType": {
8640+
"name": "{ paddingBlock?: string | undefined; paddingInline?: string | undefined; }",
8641+
"properties": [
8642+
{
8643+
"name": "paddingBlock",
8644+
"optional": true,
8645+
"type": "string",
8646+
},
8647+
{
8648+
"name": "paddingInline",
8649+
"optional": true,
8650+
"type": "string",
8651+
},
8652+
],
8653+
"type": "object",
8654+
},
8655+
"name": "content",
8656+
"optional": true,
8657+
"type": "{ paddingBlock?: string | undefined; paddingInline?: string | undefined; }",
8658+
},
8659+
{
8660+
"inlineType": {
8661+
"name": "object",
8662+
"properties": [
8663+
{
8664+
"inlineType": {
8665+
"name": "{ borderColor?: string | undefined; borderWidth?: string | undefined; }",
8666+
"properties": [
8667+
{
8668+
"name": "borderColor",
8669+
"optional": true,
8670+
"type": "string",
8671+
},
8672+
{
8673+
"name": "borderWidth",
8674+
"optional": true,
8675+
"type": "string",
8676+
},
8677+
],
8678+
"type": "object",
8679+
},
8680+
"name": "divider",
8681+
"optional": false,
8682+
"type": "{ borderColor?: string | undefined; borderWidth?: string | undefined; }",
8683+
},
8684+
{
8685+
"inlineType": {
8686+
"name": "{ paddingBlock?: string | undefined; paddingInline?: string | undefined; }",
8687+
"properties": [
8688+
{
8689+
"name": "paddingBlock",
8690+
"optional": true,
8691+
"type": "string",
8692+
},
8693+
{
8694+
"name": "paddingInline",
8695+
"optional": true,
8696+
"type": "string",
8697+
},
8698+
],
8699+
"type": "object",
8700+
},
8701+
"name": "root",
8702+
"optional": false,
8703+
"type": "{ paddingBlock?: string | undefined; paddingInline?: string | undefined; }",
8704+
},
8705+
],
8706+
"type": "object",
8707+
},
8708+
"name": "footer",
8709+
"optional": true,
8710+
"type": "{ root: { paddingBlock?: string | undefined; paddingInline?: string | undefined; }; divider: { borderColor?: string | undefined; borderWidth?: string | undefined; }; }",
8711+
},
8712+
{
8713+
"inlineType": {
8714+
"name": "{ paddingBlock?: string | undefined; paddingInline?: string | undefined; }",
8715+
"properties": [
8716+
{
8717+
"name": "paddingBlock",
8718+
"optional": true,
8719+
"type": "string",
8720+
},
8721+
{
8722+
"name": "paddingInline",
8723+
"optional": true,
8724+
"type": "string",
8725+
},
8726+
],
8727+
"type": "object",
8728+
},
8729+
"name": "header",
8730+
"optional": true,
8731+
"type": "{ paddingBlock?: string | undefined; paddingInline?: string | undefined; }",
8732+
},
8733+
{
8734+
"inlineType": {
8735+
"name": "object",
8736+
"properties": [
8737+
{
8738+
"name": "background",
8739+
"optional": true,
8740+
"type": "string",
8741+
},
8742+
{
8743+
"name": "borderColor",
8744+
"optional": true,
8745+
"type": "string",
8746+
},
8747+
{
8748+
"name": "borderRadius",
8749+
"optional": true,
8750+
"type": "string",
8751+
},
8752+
{
8753+
"name": "borderWidth",
8754+
"optional": true,
8755+
"type": "string",
8756+
},
8757+
{
8758+
"name": "boxShadow",
8759+
"optional": true,
8760+
"type": "string",
8761+
},
8762+
],
8763+
"type": "object",
8764+
},
8765+
"name": "root",
8766+
"optional": true,
8767+
"type": "{ background?: string | undefined; borderColor?: string | undefined; borderRadius?: string | undefined; borderWidth?: string | undefined; boxShadow?: string | undefined; }",
8768+
},
8769+
],
8770+
"type": "object",
8771+
},
8772+
"name": "style",
8773+
"optional": true,
8774+
"systemTags": [
8775+
"core",
8776+
],
8777+
"type": "ContainerProps.Style",
8778+
},
86198779
{
86208780
"defaultValue": "'default'",
86218781
"description": "Specify a container variant with one of the following:

0 commit comments

Comments
 (0)