Skip to content

Commit cb98739

Browse files
jordanchjordanch
authored
Merge pull request #97 from mendix/fix/WT-2806_native_dropdown_selected_item_underlaycolor
Native dropdown menu item styling
2 parents aae5e43 + a361025 commit cb98739

File tree

10 files changed

+151
-136
lines changed

10 files changed

+151
-136
lines changed

‎styles/native/js/app/custom-variables.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -156,6 +156,7 @@ export const input = {
156156
selectionColor: contrast.lower,
157157
placeholderTextColor: contrast.regular,
158158
underlineColorAndroid: "transparent",
159+
inputContainerUnderlayColor: `rgba(${anyColorToRgbString(contrast.low)},0.4)`,
159160
// Sizes
160161
fontSize: font.size,
161162
fontFamily: font.family,

‎styles/native/js/core/variables.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -156,6 +156,7 @@ let input = {
156156
selectionColor: contrast.lower,
157157
placeholderTextColor: contrast.regular,
158158
underlineColorAndroid: "transparent",
159+
inputContainerUnderlayColor: `rgba(${anyColorToRgbString(contrast.low)},0.4)`,
159160
// Sizes
160161
fontSize: font.size,
161162
fontFamily: font.family,

‎styles/native/js/core/widgets/dropdown.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export const DropDown = {
5252
},
5353
/* New dropdown styles start */
5454
valueContainer: {
55-
// All ViewStyle properties & rippleColor are allowed
55+
// All ViewStyle properties & rippleColor & activeOpacity & underlayColor are allowed
5656
},
5757
valueContainerDisabled: {
5858
// All ViewStyle properties are allowed
@@ -67,11 +67,12 @@ export const DropDown = {
6767
backgroundColor: input.backgroundColor,
6868
},
6969
itemContainer: {
70-
// All ViewStyle properties are allowed
70+
// All ViewStyle properties & rippleColor & activeOpacity & underlayColor are allowed
7171
maxWidth: 500,
7272
paddingVertical: 6,
7373
paddingHorizontal: 16,
7474
backgroundColor: input.backgroundColor,
75+
underlayColor: input.inputContainerUnderlayColor,
7576
},
7677
item: {
7778
// All TextStlye properties are allowed

‎styles/native/js/core/widgets/referenceselector.js‎

Lines changed: 126 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -1,124 +1,126 @@
1-
import { border, contrast, font, input } from "../variables";
2-
import { DropDown } from "./dropdown";
3-
import { TextBox, TextBoxVertical } from "./textbox";
4-
/*
5-
6-
DISCLAIMER:
7-
Do not change this file because it is core styling.
8-
Customizing core files will make updating Atlas much more difficult in the future.
9-
To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten.
10-
11-
==========================================================================
12-
Reference Selector
13-
14-
Default Class For Mendix Reference Selector Widget
15-
========================================================================== */
16-
export const ReferenceSelector = {
17-
container: {
18-
// All ViewStyle properties are allowed
19-
...TextBox.container,
20-
},
21-
containerDisabled: {
22-
// All ViewStyle properties are allowed
23-
...TextBox.containerDisabled,
24-
},
25-
label: {
26-
// numberOfLines and all TextStyle properties are allowed
27-
...TextBox.label,
28-
},
29-
labelDisabled: {
30-
// All TextStyle properties are allowed
31-
...TextBox.labelDisabled,
32-
},
33-
value: {
34-
// All TextStyle properties & placeholderTextColor are allowed
35-
color: input.color,
36-
borderColor: input.borderColor,
37-
backgroundColor: input.backgroundColor,
38-
fontSize: input.fontSize,
39-
fontFamily: input.fontFamily,
40-
borderWidth: input.borderWidth,
41-
borderRadius: input.borderRadius,
42-
overflow: "hidden",
43-
paddingHorizontal: input.paddingHorizontal,
44-
paddingVertical: input.paddingVertical,
45-
placeholderTextColor: input.placeholderTextColor,
46-
},
47-
valueDisabled: {
48-
// All TextStyle properties are allowed
49-
...TextBox.inputDisabled
50-
},
51-
validationMessage: {
52-
// All TextStyle properties are allowed
53-
...TextBox.validationMessage,
54-
},
55-
/* New dropdown styles start */
56-
valueContainer: {
57-
// All ViewStyle properties & rippleColor are allowed
58-
},
59-
valueContainerDisabled: {
60-
// All ViewStyle properties are allowed
61-
},
62-
menuWrapper: {
63-
// All ViewStyle properties are allowed
64-
borderRadius: border.radius,
65-
shadowColor: "#000",
66-
shadowOpacity: 0.2,
67-
shadowRadius: 10,
68-
elevation: 16,
69-
},
70-
itemContainer: {
71-
// All ViewStyle properties are allowed
72-
maxWidth: 500,
73-
paddingVertical: 6,
74-
paddingHorizontal: 16,
75-
backgroundColor: input.backgroundColor,
76-
},
77-
item: {
78-
// All TextStyle properties are allowed
79-
color: input.color,
80-
},
81-
selectedItem: {
82-
// All TextStyle properties are allowed
83-
fontWeight: font.weightBold,
84-
},
85-
selectedItemContainer: {
86-
// All ViewStyle properties are allowed
87-
backgroundColor: contrast.lowest,
88-
},
89-
/* New dropdown styles end */
90-
useUniformDesign: true,
91-
/* Old dropdown styles start */
92-
pickerIOS: {
93-
// All ViewStyle properties are allowed
94-
backgroundColor: input.backgroundColor,
95-
},
96-
pickerItemIOS: {
97-
// All TextStyle properties are allowed
98-
},
99-
pickerBackdropIOS: {
100-
// All ViewStyle properties are allowed
101-
},
102-
pickerTopIOS: {
103-
// All ViewStyle properties are allowed
104-
backgroundColor: input.backgroundColor,
105-
},
106-
};
107-
export const ReferenceSelectorVertical = {
108-
container: TextBoxVertical.container,
109-
containerDisabled: TextBoxVertical.containerDisabled,
110-
label: TextBoxVertical.label,
111-
labelDisabled: TextBoxVertical.labelDisabled,
112-
value: DropDown.value,
113-
valueContainer: DropDown.valueContainer,
114-
valueContainerDisabled: DropDown.valueContainerDisabled,
115-
validationMessage: TextBoxVertical.validationMessage,
116-
menuWrapper: DropDown.menuWrapper,
117-
itemContainer: DropDown.itemContainer,
118-
item: DropDown.item,
119-
useUniformDesign: DropDown.useUniformDesign,
120-
pickerIOS: DropDown.pickerIOS,
121-
pickerItemIOS: DropDown.pickerItemIOS,
122-
pickerBackdropIOS: DropDown.pickerBackdropIOS,
123-
pickerTopIOS: DropDown.pickerTopIOS,
124-
};
1+
import { border, contrast, font, input } from "../variables";
2+
import { DropDown } from "./dropdown";
3+
import { TextBox, TextBoxVertical } from "./textbox";
4+
/*
5+
6+
DISCLAIMER:
7+
Do not change this file because it is core styling.
8+
Customizing core files will make updating Atlas much more difficult in the future.
9+
To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten.
10+
11+
==========================================================================
12+
Reference Selector
13+
14+
Default Class For Mendix Reference Selector Widget
15+
========================================================================== */
16+
export const ReferenceSelector = {
17+
container: {
18+
// All ViewStyle properties are allowed
19+
...TextBox.container,
20+
},
21+
containerDisabled: {
22+
// All ViewStyle properties are allowed
23+
...TextBox.containerDisabled,
24+
},
25+
label: {
26+
// numberOfLines and all TextStyle properties are allowed
27+
...TextBox.label,
28+
},
29+
labelDisabled: {
30+
// All TextStyle properties are allowed
31+
...TextBox.labelDisabled,
32+
},
33+
value: {
34+
// All TextStyle properties & placeholderTextColor are allowed
35+
color: input.color,
36+
borderColor: input.borderColor,
37+
backgroundColor: input.backgroundColor,
38+
fontSize: input.fontSize,
39+
fontFamily: input.fontFamily,
40+
borderWidth: input.borderWidth,
41+
borderRadius: input.borderRadius,
42+
overflow: "hidden",
43+
paddingHorizontal: input.paddingHorizontal,
44+
paddingVertical: input.paddingVertical,
45+
placeholderTextColor: input.placeholderTextColor,
46+
},
47+
valueDisabled: {
48+
// All TextStyle properties are allowed
49+
...TextBox.inputDisabled
50+
},
51+
validationMessage: {
52+
// All TextStyle properties are allowed
53+
...TextBox.validationMessage,
54+
},
55+
/* New dropdown styles start */
56+
valueContainer: {
57+
// All ViewStyle properties & rippleColor & activeOpacity & underlayColor are allowed
58+
},
59+
valueContainerDisabled: {
60+
// All ViewStyle properties are allowed
61+
},
62+
menuWrapper: {
63+
// All ViewStyle properties are allowed
64+
borderRadius: border.radius,
65+
shadowColor: "#000",
66+
shadowOpacity: 0.2,
67+
shadowRadius: 10,
68+
elevation: 16,
69+
backgroundColor: input.backgroundColor
70+
},
71+
itemContainer: {
72+
// All ViewStyle properties & rippleColor & activeOpacity & underlayColor are allowed
73+
maxWidth: 500,
74+
paddingVertical: 6,
75+
paddingHorizontal: 16,
76+
backgroundColor: input.backgroundColor,
77+
underlayColor: input.inputContainerUnderlayColor,
78+
},
79+
item: {
80+
// All TextStyle properties are allowed
81+
color: input.color,
82+
},
83+
selectedItem: {
84+
// All TextStyle properties are allowed
85+
fontWeight: font.weightBold,
86+
},
87+
selectedItemContainer: {
88+
// All ViewStyle properties are allowed
89+
backgroundColor: contrast.lowest,
90+
},
91+
/* New dropdown styles end */
92+
useUniformDesign: true,
93+
/* Old dropdown styles start */
94+
pickerIOS: {
95+
// All ViewStyle properties are allowed
96+
backgroundColor: input.backgroundColor,
97+
},
98+
pickerItemIOS: {
99+
// All TextStyle properties are allowed
100+
},
101+
pickerBackdropIOS: {
102+
// All ViewStyle properties are allowed
103+
},
104+
pickerTopIOS: {
105+
// All ViewStyle properties are allowed
106+
backgroundColor: input.backgroundColor,
107+
},
108+
};
109+
export const ReferenceSelectorVertical = {
110+
container: TextBoxVertical.container,
111+
containerDisabled: TextBoxVertical.containerDisabled,
112+
label: TextBoxVertical.label,
113+
labelDisabled: TextBoxVertical.labelDisabled,
114+
value: DropDown.value,
115+
valueContainer: DropDown.valueContainer,
116+
valueContainerDisabled: DropDown.valueContainerDisabled,
117+
validationMessage: TextBoxVertical.validationMessage,
118+
menuWrapper: DropDown.menuWrapper,
119+
itemContainer: DropDown.itemContainer,
120+
item: DropDown.item,
121+
useUniformDesign: DropDown.useUniformDesign,
122+
pickerIOS: DropDown.pickerIOS,
123+
pickerItemIOS: DropDown.pickerItemIOS,
124+
pickerBackdropIOS: DropDown.pickerBackdropIOS,
125+
pickerTopIOS: DropDown.pickerTopIOS,
126+
};

‎styles/native/ts/app/custom-variables.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -175,6 +175,7 @@ export const input: VariablesInput = {
175175
selectionColor: contrast.lower,
176176
placeholderTextColor: contrast.regular,
177177
underlineColorAndroid: "transparent",
178+
inputContainerUnderlayColor: `rgba(${anyColorToRgbString(contrast.low)},0.4)`,
178179

179180
// Sizes
180181
fontSize: font.size,

‎styles/native/ts/core/variables.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -172,6 +172,7 @@ let input: VariablesInput = {
172172
selectionColor: contrast.lower,
173173
placeholderTextColor: contrast.regular,
174174
underlineColorAndroid: "transparent",
175+
inputContainerUnderlayColor: `rgba(${anyColorToRgbString(contrast.low)},0.4)`,
175176

176177
// Sizes
177178
fontSize: font.size,

‎styles/native/ts/core/widgets/dropdown.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ export const DropDown: DropDownType = {
5656
},
5757
/* New dropdown styles start */
5858
valueContainer: {
59-
// All ViewStyle properties & rippleColor are allowed
59+
// All ViewStyle properties & rippleColor & activeOpacity & underlayColor are allowed
6060
},
6161
valueContainerDisabled: {
6262
// All ViewStyle properties are allowed
@@ -71,11 +71,12 @@ export const DropDown: DropDownType = {
7171
backgroundColor: input.backgroundColor,
7272
},
7373
itemContainer: {
74-
// All ViewStyle properties are allowed
74+
// All ViewStyle properties & rippleColor & activeOpacity & underlayColor are allowed
7575
maxWidth: 500,
7676
paddingVertical: 6,
7777
paddingHorizontal: 16,
7878
backgroundColor: input.backgroundColor,
79+
underlayColor: input.inputContainerUnderlayColor,
7980
},
8081
item: {
8182
// All TextStlye properties are allowed

‎styles/native/ts/core/widgets/referenceselector.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ export const ReferenceSelector: DropDownType = {
5858
},
5959
/* New dropdown styles start */
6060
valueContainer: {
61-
// All ViewStyle properties & rippleColor are allowed
61+
// All ViewStyle properties & rippleColor & activeOpacity & underlayColor are allowed
6262
},
6363
valueContainerDisabled: {
6464
// All ViewStyle properties are allowed
@@ -70,13 +70,15 @@ export const ReferenceSelector: DropDownType = {
7070
shadowOpacity: 0.2,
7171
shadowRadius: 10,
7272
elevation: 16,
73+
backgroundColor: input.backgroundColor
7374
},
7475
itemContainer: {
75-
// All ViewStyle properties are allowed
76+
// All ViewStyle properties & rippleColor & activeOpacity & underlayColor are allowed
7677
maxWidth: 500,
7778
paddingVertical: 6,
7879
paddingHorizontal: 16,
7980
backgroundColor: input.backgroundColor,
81+
underlayColor: input.inputContainerUnderlayColor,
8082
},
8183
item: {
8284
// All TextStyle properties are allowed

‎styles/native/ts/types/variables.d.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@
22
Types
33
========================================================================== */
44

5-
import { badge, font } from "../app/custom-variables";
6-
75
declare type FontWeight = "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900";
86
declare type TextAlign = "auto" | "left" | "right" | "center" | "justify";
97
declare type TextTransform = "none" | "capitalize" | "uppercase" | "lowercase";
@@ -124,6 +122,7 @@ export interface VariablesInput {
124122
selectionColor: string,
125123
placeholderTextColor: string,
126124
underlineColorAndroid: string,
125+
inputContainerUnderlayColor: string,
127126

128127
fontSize: number,
129128
fontFamily: string,

‎styles/native/ts/types/widgets.d.ts‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -173,13 +173,19 @@ export interface DropDownType {
173173
valueDisabled?: TextStyle,
174174
validationMessage?: TextStyle,
175175
/* New dropdown styles start */
176-
valueContainer?: {
177-
rippleColor?: string
178-
} & ViewStyle;
176+
valueContainer?: ViewStyle & {
177+
rippleColor?: string;
178+
underlayColor?: string;
179+
activeOpacity?: number;
180+
};
179181
valueContainerDisabled?: ViewStyle;
180182
menuWrapper?: ViewStyle;
181183
item?: TextStyle;
182-
itemContainer?: ViewStyle;
184+
itemContainer?: ViewStyle & {
185+
rippleColor?: string;
186+
underlayColor?: string;
187+
activeOpacity?: number;
188+
};
183189
selectedItem?: TextStyle;
184190
selectedItemContainer?: ViewStyle;
185191
/* New dropdown styles end */

0 commit comments

Comments
 (0)