Skip to content

Commit 96418a2

Browse files
mxschllmxschll
committed
refactor: rename underline to activeIndicator
1 parent 9590bef commit 96418a2

File tree

11 files changed

+250
-243
lines changed

11 files changed

+250
-243
lines changed

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -111,9 +111,9 @@ const customCssPropertiesList = [
111111
'stylePlaceholderFontStyle',
112112
'stylePlaceholderFontWeight',
113113
// Tabs style properties
114-
'styleTabsUnderlineColor',
115-
'styleTabsUnderlineWidth',
116-
'styleTabsUnderlineBorderRadius',
114+
'styleTabsActiveIndicatorColor',
115+
'styleTabsActiveIndicatorWidth',
116+
'styleTabsActiveIndicatorBorderRadius',
117117
'styleTabsSeparatorColor',
118118
'styleTabsSeparatorWidth',
119119
'styleTabsHeaderBorderColor',

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,10 +40,8 @@ const style1 = {
4040
borderRadius: '22px',
4141
borderWidth: '2px',
4242
},
43-
underline: {
43+
activeIndicator: {
4444
color: 'transparent',
45-
width: '0px',
46-
borderRadius: '0px',
4745
},
4846
},
4947
tabSeparator: {
@@ -88,7 +86,7 @@ const style2 = {
8886
borderRadius: '8px',
8987
borderWidth: '2px',
9088
},
91-
underline: {
89+
activeIndicator: {
9290
color: 'light-dark(#f59e0b, #fbbf24)',
9391
width: '4px',
9492
borderRadius: '4px',

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

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -25561,6 +25561,32 @@ need to introduce friction to the switching of tabs.",
2556125561
"inlineType": {
2556225562
"name": "object",
2556325563
"properties": [
25564+
{
25565+
"inlineType": {
25566+
"name": "{ color?: string | undefined; width?: string | undefined; borderRadius?: string | undefined; }",
25567+
"properties": [
25568+
{
25569+
"name": "borderRadius",
25570+
"optional": true,
25571+
"type": "string",
25572+
},
25573+
{
25574+
"name": "color",
25575+
"optional": true,
25576+
"type": "string",
25577+
},
25578+
{
25579+
"name": "width",
25580+
"optional": true,
25581+
"type": "string",
25582+
},
25583+
],
25584+
"type": "object",
25585+
},
25586+
"name": "activeIndicator",
25587+
"optional": true,
25588+
"type": "{ color?: string | undefined; width?: string | undefined; borderRadius?: string | undefined; }",
25589+
},
2556425590
{
2556525591
"inlineType": {
2556625592
"name": "object",
@@ -25710,32 +25736,6 @@ need to introduce friction to the switching of tabs.",
2571025736
"optional": true,
2571125737
"type": "string",
2571225738
},
25713-
{
25714-
"inlineType": {
25715-
"name": "{ color?: string | undefined; width?: string | undefined; borderRadius?: string | undefined; }",
25716-
"properties": [
25717-
{
25718-
"name": "borderRadius",
25719-
"optional": true,
25720-
"type": "string",
25721-
},
25722-
{
25723-
"name": "color",
25724-
"optional": true,
25725-
"type": "string",
25726-
},
25727-
{
25728-
"name": "width",
25729-
"optional": true,
25730-
"type": "string",
25731-
},
25732-
],
25733-
"type": "object",
25734-
},
25735-
"name": "underline",
25736-
"optional": true,
25737-
"type": "{ color?: string | undefined; width?: string | undefined; borderRadius?: string | undefined; }",
25738-
},
2573925739
],
2574025740
"type": "object",
2574125741
},

‎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-e3ao75": undefined,
6-
"--awsui-style-background-disabled-e3ao75": undefined,
7-
"--awsui-style-background-focus-e3ao75": undefined,
8-
"--awsui-style-background-hover-e3ao75": undefined,
9-
"--awsui-style-background-readonly-e3ao75": undefined,
10-
"--awsui-style-border-color-default-e3ao75": undefined,
11-
"--awsui-style-border-color-disabled-e3ao75": undefined,
12-
"--awsui-style-border-color-focus-e3ao75": undefined,
13-
"--awsui-style-border-color-hover-e3ao75": undefined,
14-
"--awsui-style-border-color-readonly-e3ao75": undefined,
15-
"--awsui-style-box-shadow-default-e3ao75": undefined,
16-
"--awsui-style-box-shadow-disabled-e3ao75": undefined,
17-
"--awsui-style-box-shadow-focus-e3ao75": undefined,
18-
"--awsui-style-box-shadow-hover-e3ao75": undefined,
19-
"--awsui-style-box-shadow-readonly-e3ao75": undefined,
20-
"--awsui-style-color-default-e3ao75": undefined,
21-
"--awsui-style-color-disabled-e3ao75": undefined,
22-
"--awsui-style-color-focus-e3ao75": undefined,
23-
"--awsui-style-color-hover-e3ao75": undefined,
24-
"--awsui-style-color-readonly-e3ao75": undefined,
25-
"--awsui-style-placeholder-color-e3ao75": undefined,
26-
"--awsui-style-placeholder-font-size-e3ao75": undefined,
27-
"--awsui-style-placeholder-font-style-e3ao75": undefined,
28-
"--awsui-style-placeholder-font-weight-e3ao75": undefined,
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,
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-e3ao75": undefined,
41-
"--awsui-style-background-disabled-e3ao75": undefined,
42-
"--awsui-style-background-focus-e3ao75": undefined,
43-
"--awsui-style-background-hover-e3ao75": undefined,
44-
"--awsui-style-background-readonly-e3ao75": undefined,
45-
"--awsui-style-border-color-default-e3ao75": undefined,
46-
"--awsui-style-border-color-disabled-e3ao75": undefined,
47-
"--awsui-style-border-color-focus-e3ao75": undefined,
48-
"--awsui-style-border-color-hover-e3ao75": undefined,
49-
"--awsui-style-border-color-readonly-e3ao75": undefined,
50-
"--awsui-style-box-shadow-default-e3ao75": undefined,
51-
"--awsui-style-box-shadow-disabled-e3ao75": undefined,
52-
"--awsui-style-box-shadow-focus-e3ao75": undefined,
53-
"--awsui-style-box-shadow-hover-e3ao75": undefined,
54-
"--awsui-style-box-shadow-readonly-e3ao75": undefined,
55-
"--awsui-style-color-default-e3ao75": undefined,
56-
"--awsui-style-color-disabled-e3ao75": undefined,
57-
"--awsui-style-color-focus-e3ao75": undefined,
58-
"--awsui-style-color-hover-e3ao75": undefined,
59-
"--awsui-style-color-readonly-e3ao75": undefined,
60-
"--awsui-style-placeholder-color-e3ao75": undefined,
61-
"--awsui-style-placeholder-font-size-e3ao75": undefined,
62-
"--awsui-style-placeholder-font-style-e3ao75": undefined,
63-
"--awsui-style-placeholder-font-weight-e3ao75": undefined,
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,
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-e3ao75": "#ffffff",
76-
"--awsui-style-background-disabled-e3ao75": "#f0f0f0",
77-
"--awsui-style-background-focus-e3ao75": "#ffffff",
78-
"--awsui-style-background-hover-e3ao75": "#fafafa",
79-
"--awsui-style-background-readonly-e3ao75": "#ffffff",
80-
"--awsui-style-border-color-default-e3ao75": "#cccccc",
81-
"--awsui-style-border-color-disabled-e3ao75": "#e0e0e0",
82-
"--awsui-style-border-color-focus-e3ao75": "#0073bb",
83-
"--awsui-style-border-color-hover-e3ao75": "#999999",
84-
"--awsui-style-border-color-readonly-e3ao75": "#e0e0e0",
85-
"--awsui-style-box-shadow-default-e3ao75": "none",
86-
"--awsui-style-box-shadow-disabled-e3ao75": "none",
87-
"--awsui-style-box-shadow-focus-e3ao75": "0 0 0 2px #0073bb",
88-
"--awsui-style-box-shadow-hover-e3ao75": "0 1px 2px rgba(0,0,0,0.1)",
89-
"--awsui-style-box-shadow-readonly-e3ao75": "none",
90-
"--awsui-style-color-default-e3ao75": "#000000",
91-
"--awsui-style-color-disabled-e3ao75": "#999999",
92-
"--awsui-style-color-focus-e3ao75": "#000000",
93-
"--awsui-style-color-hover-e3ao75": "#000000",
94-
"--awsui-style-color-readonly-e3ao75": "#000000",
95-
"--awsui-style-placeholder-color-e3ao75": "#999999",
96-
"--awsui-style-placeholder-font-size-e3ao75": "14px",
97-
"--awsui-style-placeholder-font-style-e3ao75": "italic",
98-
"--awsui-style-placeholder-font-weight-e3ao75": "400",
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",
9999
"borderRadius": "4px",
100100
"borderWidth": "1px",
101101
"fontSize": "14px",

‎src/segmented-control/__tests__/__snapshots__/styles.test.tsx.snap‎

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -20,17 +20,17 @@ exports[`getSegmentedControlRootStyles handles all possible style configurations
2020

2121
exports[`getSegmentedControlSegmentStyles handles all possible style configurations 1`] = `
2222
{
23-
"--awsui-style-background-active-e3ao75": undefined,
24-
"--awsui-style-background-default-e3ao75": undefined,
25-
"--awsui-style-background-disabled-e3ao75": undefined,
26-
"--awsui-style-background-hover-e3ao75": undefined,
27-
"--awsui-style-color-active-e3ao75": undefined,
28-
"--awsui-style-color-default-e3ao75": undefined,
29-
"--awsui-style-color-disabled-e3ao75": undefined,
30-
"--awsui-style-color-hover-e3ao75": undefined,
31-
"--awsui-style-focus-ring-border-color-e3ao75": undefined,
32-
"--awsui-style-focus-ring-border-radius-e3ao75": undefined,
33-
"--awsui-style-focus-ring-border-width-e3ao75": undefined,
23+
"--awsui-style-background-active-1rtoe3": undefined,
24+
"--awsui-style-background-default-1rtoe3": undefined,
25+
"--awsui-style-background-disabled-1rtoe3": undefined,
26+
"--awsui-style-background-hover-1rtoe3": undefined,
27+
"--awsui-style-color-active-1rtoe3": undefined,
28+
"--awsui-style-color-default-1rtoe3": undefined,
29+
"--awsui-style-color-disabled-1rtoe3": undefined,
30+
"--awsui-style-color-hover-1rtoe3": undefined,
31+
"--awsui-style-focus-ring-border-color-1rtoe3": undefined,
32+
"--awsui-style-focus-ring-border-radius-1rtoe3": undefined,
33+
"--awsui-style-focus-ring-border-width-1rtoe3": undefined,
3434
"borderRadius": undefined,
3535
"fontSize": undefined,
3636
"paddingBlock": undefined,
@@ -40,17 +40,17 @@ exports[`getSegmentedControlSegmentStyles handles all possible style configurati
4040

4141
exports[`getSegmentedControlSegmentStyles handles all possible style configurations 2`] = `
4242
{
43-
"--awsui-style-background-active-e3ao75": undefined,
44-
"--awsui-style-background-default-e3ao75": undefined,
45-
"--awsui-style-background-disabled-e3ao75": undefined,
46-
"--awsui-style-background-hover-e3ao75": undefined,
47-
"--awsui-style-color-active-e3ao75": undefined,
48-
"--awsui-style-color-default-e3ao75": undefined,
49-
"--awsui-style-color-disabled-e3ao75": undefined,
50-
"--awsui-style-color-hover-e3ao75": undefined,
51-
"--awsui-style-focus-ring-border-color-e3ao75": undefined,
52-
"--awsui-style-focus-ring-border-radius-e3ao75": undefined,
53-
"--awsui-style-focus-ring-border-width-e3ao75": undefined,
43+
"--awsui-style-background-active-1rtoe3": undefined,
44+
"--awsui-style-background-default-1rtoe3": undefined,
45+
"--awsui-style-background-disabled-1rtoe3": undefined,
46+
"--awsui-style-background-hover-1rtoe3": undefined,
47+
"--awsui-style-color-active-1rtoe3": undefined,
48+
"--awsui-style-color-default-1rtoe3": undefined,
49+
"--awsui-style-color-disabled-1rtoe3": undefined,
50+
"--awsui-style-color-hover-1rtoe3": undefined,
51+
"--awsui-style-focus-ring-border-color-1rtoe3": undefined,
52+
"--awsui-style-focus-ring-border-radius-1rtoe3": undefined,
53+
"--awsui-style-focus-ring-border-width-1rtoe3": undefined,
5454
"borderRadius": undefined,
5555
"fontSize": undefined,
5656
"paddingBlock": undefined,
@@ -60,17 +60,17 @@ exports[`getSegmentedControlSegmentStyles handles all possible style configurati
6060

6161
exports[`getSegmentedControlSegmentStyles handles all possible style configurations 3`] = `
6262
{
63-
"--awsui-style-background-active-e3ao75": "#0073bb",
64-
"--awsui-style-background-default-e3ao75": "#ffffff",
65-
"--awsui-style-background-disabled-e3ao75": "#f0f0f0",
66-
"--awsui-style-background-hover-e3ao75": "#fafafa",
67-
"--awsui-style-color-active-e3ao75": "#ffffff",
68-
"--awsui-style-color-default-e3ao75": "#000000",
69-
"--awsui-style-color-disabled-e3ao75": "#999999",
70-
"--awsui-style-color-hover-e3ao75": "#000000",
71-
"--awsui-style-focus-ring-border-color-e3ao75": "#0073bb",
72-
"--awsui-style-focus-ring-border-radius-e3ao75": "8px",
73-
"--awsui-style-focus-ring-border-width-e3ao75": "2px",
63+
"--awsui-style-background-active-1rtoe3": "#0073bb",
64+
"--awsui-style-background-default-1rtoe3": "#ffffff",
65+
"--awsui-style-background-disabled-1rtoe3": "#f0f0f0",
66+
"--awsui-style-background-hover-1rtoe3": "#fafafa",
67+
"--awsui-style-color-active-1rtoe3": "#ffffff",
68+
"--awsui-style-color-default-1rtoe3": "#000000",
69+
"--awsui-style-color-disabled-1rtoe3": "#999999",
70+
"--awsui-style-color-hover-1rtoe3": "#000000",
71+
"--awsui-style-focus-ring-border-color-1rtoe3": "#0073bb",
72+
"--awsui-style-focus-ring-border-radius-1rtoe3": "8px",
73+
"--awsui-style-focus-ring-border-width-1rtoe3": "2px",
7474
"borderRadius": "6px",
7575
"fontSize": "14px",
7676
"paddingBlock": "8px",

0 commit comments

Comments
 (0)