Skip to content

Commit 1f50f95

Browse files
mxschllmxschll
committed
refactor: move header styling to container
1 parent 96418a2 commit 1f50f95

File tree

13 files changed

+349
-247
lines changed

13 files changed

+349
-247
lines changed

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -116,8 +116,6 @@ const customCssPropertiesList = [
116116
'styleTabsActiveIndicatorBorderRadius',
117117
'styleTabsSeparatorColor',
118118
'styleTabsSeparatorWidth',
119-
'styleTabsHeaderBorderColor',
120-
'styleTabsHeaderBorderWidth',
121119
// Alert focus ring properties
122120
'alertFocusRingBorderColor',
123121
'alertFocusRingBorderRadius',

‎pages/tabs/style-permutations.page.tsx‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,11 @@ import ScreenshotArea from '../utils/screenshot-area';
1010

1111
// Rounded with background
1212
const style1 = {
13+
container: {
14+
root: {
15+
borderRadius: '0px',
16+
},
17+
},
1318
tab: {
1419
backgroundColor: {
1520
default: 'light-dark(#f1f5f9, #1e293b)',
@@ -48,14 +53,20 @@ const style1 = {
4853
color: 'light-dark(#e2e8f0, #334155)',
4954
width: '1px',
5055
},
51-
headerBorder: {
52-
color: 'light-dark(#cbd5e1, #475569)',
53-
width: '1px',
56+
header: {
57+
borderColor: 'light-dark(#cbd5e1, #475569)',
58+
borderWidth: '2px',
5459
},
5560
};
5661

5762
// Border colors with background
5863
const style2 = {
64+
container: {
65+
// All container properties are tested in pages/container/style-custom.page.tsx
66+
root: {
67+
borderRadius: '0px',
68+
},
69+
},
5970
tab: {
6071
backgroundColor: {
6172
default: 'light-dark(#fef3c7, #422006)',
@@ -96,10 +107,6 @@ const style2 = {
96107
color: 'light-dark(#fde68a, #78350f)',
97108
width: '2px',
98109
},
99-
headerBorder: {
100-
color: 'light-dark(#fde047, #92400e)',
101-
width: '2px',
102-
},
103110
};
104111

105112
const permutations = createPermutations<TabsProps>([

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

Lines changed: 128 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25538,24 +25538,145 @@ need to introduce friction to the switching of tabs.",
2553825538
"properties": [
2553925539
{
2554025540
"inlineType": {
25541-
"name": "{ color?: string | undefined; width?: string | undefined; }",
25541+
"name": "ContainerProps.Style",
2554225542
"properties": [
2554325543
{
25544-
"name": "color",
25544+
"inlineType": {
25545+
"name": "{ paddingBlock?: string | undefined; paddingInline?: string | undefined; }",
25546+
"properties": [
25547+
{
25548+
"name": "paddingBlock",
25549+
"optional": true,
25550+
"type": "string",
25551+
},
25552+
{
25553+
"name": "paddingInline",
25554+
"optional": true,
25555+
"type": "string",
25556+
},
25557+
],
25558+
"type": "object",
25559+
},
25560+
"name": "content",
2554525561
"optional": true,
25546-
"type": "string",
25562+
"type": "{ paddingBlock?: string | undefined; paddingInline?: string | undefined; }",
2554725563
},
2554825564
{
25549-
"name": "width",
25565+
"inlineType": {
25566+
"name": "object",
25567+
"properties": [
25568+
{
25569+
"inlineType": {
25570+
"name": "{ borderColor?: string | undefined; borderWidth?: string | undefined; }",
25571+
"properties": [
25572+
{
25573+
"name": "borderColor",
25574+
"optional": true,
25575+
"type": "string",
25576+
},
25577+
{
25578+
"name": "borderWidth",
25579+
"optional": true,
25580+
"type": "string",
25581+
},
25582+
],
25583+
"type": "object",
25584+
},
25585+
"name": "divider",
25586+
"optional": false,
25587+
"type": "{ borderColor?: string | undefined; borderWidth?: string | undefined; }",
25588+
},
25589+
{
25590+
"inlineType": {
25591+
"name": "{ paddingBlock?: string | undefined; paddingInline?: string | undefined; }",
25592+
"properties": [
25593+
{
25594+
"name": "paddingBlock",
25595+
"optional": true,
25596+
"type": "string",
25597+
},
25598+
{
25599+
"name": "paddingInline",
25600+
"optional": true,
25601+
"type": "string",
25602+
},
25603+
],
25604+
"type": "object",
25605+
},
25606+
"name": "root",
25607+
"optional": false,
25608+
"type": "{ paddingBlock?: string | undefined; paddingInline?: string | undefined; }",
25609+
},
25610+
],
25611+
"type": "object",
25612+
},
25613+
"name": "footer",
2555025614
"optional": true,
25551-
"type": "string",
25615+
"type": "{ root: { paddingBlock?: string | undefined; paddingInline?: string | undefined; }; divider: { borderColor?: string | undefined; borderWidth?: string | undefined; }; }",
25616+
},
25617+
{
25618+
"inlineType": {
25619+
"name": "{ paddingBlock?: string | undefined; paddingInline?: string | undefined; }",
25620+
"properties": [
25621+
{
25622+
"name": "paddingBlock",
25623+
"optional": true,
25624+
"type": "string",
25625+
},
25626+
{
25627+
"name": "paddingInline",
25628+
"optional": true,
25629+
"type": "string",
25630+
},
25631+
],
25632+
"type": "object",
25633+
},
25634+
"name": "header",
25635+
"optional": true,
25636+
"type": "{ paddingBlock?: string | undefined; paddingInline?: string | undefined; }",
25637+
},
25638+
{
25639+
"inlineType": {
25640+
"name": "object",
25641+
"properties": [
25642+
{
25643+
"name": "background",
25644+
"optional": true,
25645+
"type": "string",
25646+
},
25647+
{
25648+
"name": "borderColor",
25649+
"optional": true,
25650+
"type": "string",
25651+
},
25652+
{
25653+
"name": "borderRadius",
25654+
"optional": true,
25655+
"type": "string",
25656+
},
25657+
{
25658+
"name": "borderWidth",
25659+
"optional": true,
25660+
"type": "string",
25661+
},
25662+
{
25663+
"name": "boxShadow",
25664+
"optional": true,
25665+
"type": "string",
25666+
},
25667+
],
25668+
"type": "object",
25669+
},
25670+
"name": "root",
25671+
"optional": true,
25672+
"type": "{ background?: string | undefined; borderColor?: string | undefined; borderRadius?: string | undefined; borderWidth?: string | undefined; boxShadow?: string | undefined; }",
2555225673
},
2555325674
],
2555425675
"type": "object",
2555525676
},
25556-
"name": "headerBorder",
25677+
"name": "container",
2555725678
"optional": true,
25558-
"type": "{ color?: string | undefined; width?: string | undefined; }",
25679+
"type": "ContainerProps.Style",
2555925680
},
2556025681
{
2556125682
"inlineType": {

‎src/input/__tests__/__snapshots__/styles.test.tsx.snap‎

Lines changed: 72 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -2,30 +2,30 @@
22

33
exports[`getInputStyles handles all possible style configurations 1`] = `
44
{
5-
"--awsui-style-background-default-1rtoe3": undefined,
6-
"--awsui-style-background-disabled-1rtoe3": undefined,
7-
"--awsui-style-background-focus-1rtoe3": undefined,
8-
"--awsui-style-background-hover-1rtoe3": undefined,
9-
"--awsui-style-background-readonly-1rtoe3": undefined,
10-
"--awsui-style-border-color-default-1rtoe3": undefined,
11-
"--awsui-style-border-color-disabled-1rtoe3": undefined,
12-
"--awsui-style-border-color-focus-1rtoe3": undefined,
13-
"--awsui-style-border-color-hover-1rtoe3": undefined,
14-
"--awsui-style-border-color-readonly-1rtoe3": undefined,
15-
"--awsui-style-box-shadow-default-1rtoe3": undefined,
16-
"--awsui-style-box-shadow-disabled-1rtoe3": undefined,
17-
"--awsui-style-box-shadow-focus-1rtoe3": undefined,
18-
"--awsui-style-box-shadow-hover-1rtoe3": undefined,
19-
"--awsui-style-box-shadow-readonly-1rtoe3": undefined,
20-
"--awsui-style-color-default-1rtoe3": undefined,
21-
"--awsui-style-color-disabled-1rtoe3": undefined,
22-
"--awsui-style-color-focus-1rtoe3": undefined,
23-
"--awsui-style-color-hover-1rtoe3": undefined,
24-
"--awsui-style-color-readonly-1rtoe3": undefined,
25-
"--awsui-style-placeholder-color-1rtoe3": undefined,
26-
"--awsui-style-placeholder-font-size-1rtoe3": undefined,
27-
"--awsui-style-placeholder-font-style-1rtoe3": undefined,
28-
"--awsui-style-placeholder-font-weight-1rtoe3": undefined,
5+
"--awsui-style-background-default-rhu47t": undefined,
6+
"--awsui-style-background-disabled-rhu47t": undefined,
7+
"--awsui-style-background-focus-rhu47t": undefined,
8+
"--awsui-style-background-hover-rhu47t": undefined,
9+
"--awsui-style-background-readonly-rhu47t": undefined,
10+
"--awsui-style-border-color-default-rhu47t": undefined,
11+
"--awsui-style-border-color-disabled-rhu47t": undefined,
12+
"--awsui-style-border-color-focus-rhu47t": undefined,
13+
"--awsui-style-border-color-hover-rhu47t": undefined,
14+
"--awsui-style-border-color-readonly-rhu47t": undefined,
15+
"--awsui-style-box-shadow-default-rhu47t": undefined,
16+
"--awsui-style-box-shadow-disabled-rhu47t": undefined,
17+
"--awsui-style-box-shadow-focus-rhu47t": undefined,
18+
"--awsui-style-box-shadow-hover-rhu47t": undefined,
19+
"--awsui-style-box-shadow-readonly-rhu47t": undefined,
20+
"--awsui-style-color-default-rhu47t": undefined,
21+
"--awsui-style-color-disabled-rhu47t": undefined,
22+
"--awsui-style-color-focus-rhu47t": undefined,
23+
"--awsui-style-color-hover-rhu47t": undefined,
24+
"--awsui-style-color-readonly-rhu47t": undefined,
25+
"--awsui-style-placeholder-color-rhu47t": undefined,
26+
"--awsui-style-placeholder-font-size-rhu47t": undefined,
27+
"--awsui-style-placeholder-font-style-rhu47t": undefined,
28+
"--awsui-style-placeholder-font-weight-rhu47t": undefined,
2929
"borderRadius": undefined,
3030
"borderWidth": undefined,
3131
"fontSize": undefined,
@@ -37,30 +37,30 @@ exports[`getInputStyles handles all possible style configurations 1`] = `
3737

3838
exports[`getInputStyles handles all possible style configurations 2`] = `
3939
{
40-
"--awsui-style-background-default-1rtoe3": undefined,
41-
"--awsui-style-background-disabled-1rtoe3": undefined,
42-
"--awsui-style-background-focus-1rtoe3": undefined,
43-
"--awsui-style-background-hover-1rtoe3": undefined,
44-
"--awsui-style-background-readonly-1rtoe3": undefined,
45-
"--awsui-style-border-color-default-1rtoe3": undefined,
46-
"--awsui-style-border-color-disabled-1rtoe3": undefined,
47-
"--awsui-style-border-color-focus-1rtoe3": undefined,
48-
"--awsui-style-border-color-hover-1rtoe3": undefined,
49-
"--awsui-style-border-color-readonly-1rtoe3": undefined,
50-
"--awsui-style-box-shadow-default-1rtoe3": undefined,
51-
"--awsui-style-box-shadow-disabled-1rtoe3": undefined,
52-
"--awsui-style-box-shadow-focus-1rtoe3": undefined,
53-
"--awsui-style-box-shadow-hover-1rtoe3": undefined,
54-
"--awsui-style-box-shadow-readonly-1rtoe3": undefined,
55-
"--awsui-style-color-default-1rtoe3": undefined,
56-
"--awsui-style-color-disabled-1rtoe3": undefined,
57-
"--awsui-style-color-focus-1rtoe3": undefined,
58-
"--awsui-style-color-hover-1rtoe3": undefined,
59-
"--awsui-style-color-readonly-1rtoe3": undefined,
60-
"--awsui-style-placeholder-color-1rtoe3": undefined,
61-
"--awsui-style-placeholder-font-size-1rtoe3": undefined,
62-
"--awsui-style-placeholder-font-style-1rtoe3": undefined,
63-
"--awsui-style-placeholder-font-weight-1rtoe3": undefined,
40+
"--awsui-style-background-default-rhu47t": undefined,
41+
"--awsui-style-background-disabled-rhu47t": undefined,
42+
"--awsui-style-background-focus-rhu47t": undefined,
43+
"--awsui-style-background-hover-rhu47t": undefined,
44+
"--awsui-style-background-readonly-rhu47t": undefined,
45+
"--awsui-style-border-color-default-rhu47t": undefined,
46+
"--awsui-style-border-color-disabled-rhu47t": undefined,
47+
"--awsui-style-border-color-focus-rhu47t": undefined,
48+
"--awsui-style-border-color-hover-rhu47t": undefined,
49+
"--awsui-style-border-color-readonly-rhu47t": undefined,
50+
"--awsui-style-box-shadow-default-rhu47t": undefined,
51+
"--awsui-style-box-shadow-disabled-rhu47t": undefined,
52+
"--awsui-style-box-shadow-focus-rhu47t": undefined,
53+
"--awsui-style-box-shadow-hover-rhu47t": undefined,
54+
"--awsui-style-box-shadow-readonly-rhu47t": undefined,
55+
"--awsui-style-color-default-rhu47t": undefined,
56+
"--awsui-style-color-disabled-rhu47t": undefined,
57+
"--awsui-style-color-focus-rhu47t": undefined,
58+
"--awsui-style-color-hover-rhu47t": undefined,
59+
"--awsui-style-color-readonly-rhu47t": undefined,
60+
"--awsui-style-placeholder-color-rhu47t": undefined,
61+
"--awsui-style-placeholder-font-size-rhu47t": undefined,
62+
"--awsui-style-placeholder-font-style-rhu47t": undefined,
63+
"--awsui-style-placeholder-font-weight-rhu47t": undefined,
6464
"borderRadius": undefined,
6565
"borderWidth": undefined,
6666
"fontSize": undefined,
@@ -72,30 +72,30 @@ exports[`getInputStyles handles all possible style configurations 2`] = `
7272

7373
exports[`getInputStyles handles all possible style configurations 3`] = `
7474
{
75-
"--awsui-style-background-default-1rtoe3": "#ffffff",
76-
"--awsui-style-background-disabled-1rtoe3": "#f0f0f0",
77-
"--awsui-style-background-focus-1rtoe3": "#ffffff",
78-
"--awsui-style-background-hover-1rtoe3": "#fafafa",
79-
"--awsui-style-background-readonly-1rtoe3": "#ffffff",
80-
"--awsui-style-border-color-default-1rtoe3": "#cccccc",
81-
"--awsui-style-border-color-disabled-1rtoe3": "#e0e0e0",
82-
"--awsui-style-border-color-focus-1rtoe3": "#0073bb",
83-
"--awsui-style-border-color-hover-1rtoe3": "#999999",
84-
"--awsui-style-border-color-readonly-1rtoe3": "#e0e0e0",
85-
"--awsui-style-box-shadow-default-1rtoe3": "none",
86-
"--awsui-style-box-shadow-disabled-1rtoe3": "none",
87-
"--awsui-style-box-shadow-focus-1rtoe3": "0 0 0 2px #0073bb",
88-
"--awsui-style-box-shadow-hover-1rtoe3": "0 1px 2px rgba(0,0,0,0.1)",
89-
"--awsui-style-box-shadow-readonly-1rtoe3": "none",
90-
"--awsui-style-color-default-1rtoe3": "#000000",
91-
"--awsui-style-color-disabled-1rtoe3": "#999999",
92-
"--awsui-style-color-focus-1rtoe3": "#000000",
93-
"--awsui-style-color-hover-1rtoe3": "#000000",
94-
"--awsui-style-color-readonly-1rtoe3": "#000000",
95-
"--awsui-style-placeholder-color-1rtoe3": "#999999",
96-
"--awsui-style-placeholder-font-size-1rtoe3": "14px",
97-
"--awsui-style-placeholder-font-style-1rtoe3": "italic",
98-
"--awsui-style-placeholder-font-weight-1rtoe3": "400",
75+
"--awsui-style-background-default-rhu47t": "#ffffff",
76+
"--awsui-style-background-disabled-rhu47t": "#f0f0f0",
77+
"--awsui-style-background-focus-rhu47t": "#ffffff",
78+
"--awsui-style-background-hover-rhu47t": "#fafafa",
79+
"--awsui-style-background-readonly-rhu47t": "#ffffff",
80+
"--awsui-style-border-color-default-rhu47t": "#cccccc",
81+
"--awsui-style-border-color-disabled-rhu47t": "#e0e0e0",
82+
"--awsui-style-border-color-focus-rhu47t": "#0073bb",
83+
"--awsui-style-border-color-hover-rhu47t": "#999999",
84+
"--awsui-style-border-color-readonly-rhu47t": "#e0e0e0",
85+
"--awsui-style-box-shadow-default-rhu47t": "none",
86+
"--awsui-style-box-shadow-disabled-rhu47t": "none",
87+
"--awsui-style-box-shadow-focus-rhu47t": "0 0 0 2px #0073bb",
88+
"--awsui-style-box-shadow-hover-rhu47t": "0 1px 2px rgba(0,0,0,0.1)",
89+
"--awsui-style-box-shadow-readonly-rhu47t": "none",
90+
"--awsui-style-color-default-rhu47t": "#000000",
91+
"--awsui-style-color-disabled-rhu47t": "#999999",
92+
"--awsui-style-color-focus-rhu47t": "#000000",
93+
"--awsui-style-color-hover-rhu47t": "#000000",
94+
"--awsui-style-color-readonly-rhu47t": "#000000",
95+
"--awsui-style-placeholder-color-rhu47t": "#999999",
96+
"--awsui-style-placeholder-font-size-rhu47t": "14px",
97+
"--awsui-style-placeholder-font-style-rhu47t": "italic",
98+
"--awsui-style-placeholder-font-weight-rhu47t": "400",
9999
"borderRadius": "4px",
100100
"borderWidth": "1px",
101101
"fontSize": "14px",

0 commit comments

Comments
 (0)