Skip to content

Commit 3af4361

Browse files
brandyscarneybrandyscarney
authored
fix(button): add custom properties and remove --ion-color overrides (#15463)
- adds custom properties - removes the overrides of `--ion-color-*` variables - documents the properties references #14808 references #14853 references #14850
1 parent 1f24370 commit 3af4361

File tree

15 files changed

+489
-156
lines changed

15 files changed

+489
-156
lines changed

‎core/src/components.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4011,7 +4011,7 @@ export namespace Components {
40114011
* The text to display on the ok button. Default: `OK`.
40124012
*/
40134013
'okText': string;
4014-
'open': (ev?: UIEvent | undefined) => Promise<HTMLIonActionSheetElement | HTMLIonAlertElement | HTMLIonPopoverElement>;
4014+
'open': (ev?: UIEvent | undefined) => Promise<HTMLIonPopoverElement | HTMLIonActionSheetElement | HTMLIonAlertElement>;
40154015
/**
40164016
* The text to display when the select is empty.
40174017
*/

‎core/src/components/button/button.ios.scss

Lines changed: 11 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -31,12 +31,7 @@
3131
--opacity: #{$button-ios-opacity-hover};
3232
}
3333

34-
:host(.button-solid.focused) {
35-
--background: #{current-color(shade)};
36-
}
37-
3834
:host(.button-solid.activated) {
39-
--background: #{current-color(shade)};
4035
--opacity: #{$button-ios-opacity-activated};
4136
}
4237

@@ -47,22 +42,16 @@
4742
--border-radius: #{$button-ios-outline-border-radius};
4843
--border-width: #{$button-ios-outline-border-width};
4944
--border-style: #{$button-ios-outline-border-style};
45+
--background-activated: #{ion-color(primary, base)};
46+
--background-focused: #{ion-color(primary, base, .1)};
47+
--color-activated: #{ion-color(primary, contrast)};
5048
}
5149

52-
:host(.button-outline.activated) {
53-
--background: #{current-color(base)};
54-
55-
color: #{current-color(contrast)};
56-
}
57-
58-
:host(.button-outline.focused) {
59-
--background: #{current-color(base, .1)};
50+
:host(.button-outline.activated.ion-color) .button-native {
51+
background: current-color(base);
52+
color: current-color(contrast);
6053
}
6154

62-
:host(.button-outline.activated.focused) {
63-
--border-color: #{current-color(shade)};
64-
--background: #{current-color(shade)};
65-
}
6655

6756
// iOS Clear Button
6857
// --------------------------------------------------
@@ -75,8 +64,11 @@
7564
--opacity: #{$button-ios-clear-opacity-activated};
7665
}
7766

78-
:host(.button-clear.focused) {
79-
--background: #{current-color(base, .1)};
67+
:host(.button-clear) {
68+
--background-activated: transparent;
69+
--background-focused: #{ion-color(primary, base, .1)};
70+
--color-activated: #{ion-color(primary, base)};
71+
--color-focused: #{ion-color(primary, base)};
8072
}
8173

8274

‎core/src/components/button/button.md.scss

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,6 @@
55
// --------------------------------------------------
66

77
:host {
8-
--transition: #{box-shadow $button-md-transition-duration $button-md-transition-timing-function,
9-
background-color $button-md-transition-duration $button-md-transition-timing-function,
10-
color $button-md-transition-duration $button-md-transition-timing-function};
118
--border-radius: #{$button-md-border-radius};
129
--margin-top: #{$button-md-margin-top};
1310
--margin-bottom: #{$button-md-margin-bottom};
@@ -18,6 +15,9 @@
1815
--padding-start: #{$button-md-padding-start};
1916
--padding-end: #{$button-md-padding-end};
2017
--height: #{$button-md-height};
18+
--transition: #{box-shadow $button-md-transition-duration $button-md-transition-timing-function,
19+
background-color $button-md-transition-duration $button-md-transition-timing-function,
20+
color $button-md-transition-duration $button-md-transition-timing-function};
2121

2222
font-size: #{$button-md-font-size};
2323
font-weight: #{$button-md-font-weight};
@@ -36,7 +36,6 @@
3636

3737
:host(.button-solid.activated) {
3838
--box-shadow: #{$button-md-box-shadow-activated};
39-
--background: #{current-color(shade)};
4039
}
4140

4241
// Material Design Outline Button
@@ -46,14 +45,13 @@
4645
--border-width: 1px;
4746
--border-style: solid;
4847
--box-shadow: none;
48+
--background-activated: transparent;
49+
--background-focused: #{ion-color(primary, base, .1)};
50+
--color-activated: #{ion-color(primary, base)};
4951
}
5052

51-
:host(.button-outline.activated) {
52-
--background: transparent;
53-
}
54-
55-
:host(.button-outline.focused) {
56-
--background: #{current-color(base, .1)};
53+
:host(.button-outline.activated.ion-color) .button-native {
54+
background: transparent;
5755
}
5856

5957

@@ -62,6 +60,10 @@
6260

6361
:host(.button-clear) {
6462
--opacity: #{$button-md-clear-opacity};
63+
--background-activated: transparent;
64+
--background-focused: #{ion-color(primary, base, .1)};
65+
--color-activated: #{ion-color(primary, base)};
66+
--color-focused: #{ion-color(primary, base)};
6567
}
6668

6769

‎core/src/components/button/button.scss

Lines changed: 100 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,40 @@
44
// --------------------------------------------------
55

66
:host {
7-
--ion-color-base: #{ion-color(primary, base)};
8-
--ion-color-contrast: #{ion-color(primary, contrast)};
9-
--ion-color-shade: #{ion-color(primary, shade)};
7+
/**
8+
* @prop --background: Background of the button
9+
* @prop --background-activated: Background of the button when activated
10+
* @prop --background-focused: Background of the button when focused
11+
*
12+
* @prop --color: Text color of the button
13+
* @prop --color-activated: Text color of the button when activated
14+
* @prop --color-focused: Text color of the button when focused
15+
*
16+
* @prop --width: Width of the button
17+
* @prop --height: Height of the button
18+
*
19+
* @prop --transition: Transition of the button
20+
*
21+
* @prop --border-radius: Border radius of the button
22+
* @prop --border-width: Border width of the button
23+
* @prop --border-style: Border style of the button
24+
* @prop --border-color: Border color of the button
25+
*
26+
* @prop --ripple-color: Color of the button ripple effect
27+
*
28+
* @prop --box-shadow: Box shadow of the button
29+
* @prop --opacity: Opacity of the button
30+
*
31+
* @prop --margin-top: Margin top of the button
32+
* @prop --margin-end: Margin end of the button
33+
* @prop --margin-bottom: Margin bottom of the button
34+
* @prop --margin-start: Margin start of the button
35+
*
36+
* @prop --padding-top: Padding top of the button
37+
* @prop --padding-end: Padding end of the button
38+
* @prop --padding-bottom: Padding bottom of the button
39+
* @prop --padding-start: Padding start of the button
40+
*/
1041
--overflow: hidden;
1142
--ripple-color: currentColor;
1243

@@ -35,32 +66,79 @@
3566
// Solid Button
3667
// --------------------------------------------------
3768

69+
// Default Solid Color
3870
:host(.button-solid) {
39-
--background: #{current-color(base)};
71+
--background: #{ion-color(primary, base)};
72+
--background-activated: #{ion-color(primary, shade)};
73+
--background-focused: #{ion-color(primary, shade)};
74+
--color: #{ion-color(primary, contrast)};
75+
--color-activated: #{ion-color(primary, contrast)};
76+
--color-focused: #{ion-color(primary, contrast)};
77+
}
78+
79+
// Solid Button with Color
80+
:host(.button-solid.ion-color) .button-native {
81+
background: current-color(base);
82+
color: current-color(contrast);
83+
}
4084

41-
color: #{current-color(contrast)};
85+
// Focused/Activated Solid Button with Color
86+
:host(.button-solid.ion-color.focused) .button-native,
87+
:host(.button-solid.ion-color.activated) .button-native {
88+
background: #{current-color(shade)};
4289
}
4390

4491

4592
// Outline Button
4693
// --------------------------------------------------
4794

95+
// Default Outline Color
4896
:host(.button-outline) {
49-
--border-color: #{current-color(base)};
97+
--border-color: #{ion-color(primary, base)};
5098
--background: transparent;
99+
--color: #{ion-color(primary, base)};
100+
--color-focused: #{ion-color(primary, base)};
101+
}
102+
103+
// Outline Button with Color
104+
:host(.button-outline.ion-color) .button-native {
105+
border-color: current-color(base);
51106

52-
color: #{current-color(base)};
107+
background: transparent;
108+
color: current-color(base);
109+
}
110+
111+
:host(.button-outline.focused.ion-color) .button-native {
112+
background: current-color(base, .1);
113+
color: current-color(base);
53114
}
54115

55116

56117
// Clear Button
57118
// --------------------------------------------------
58119

120+
// Default Clear Color
59121
:host(.button-clear) {
60122
--border-width: 0;
61123
--background: transparent;
124+
--color: #{ion-color(primary, base)};
125+
}
126+
127+
// Clear Button with Color
128+
:host(.button-clear.ion-color) .button-native {
129+
background: transparent;
130+
color: current-color(base);
131+
}
62132

63-
color: #{current-color(base)};
133+
// Focused Clear Button with Color
134+
:host(.button-clear.focused.ion-color) .button-native {
135+
background: current-color(base, .1);
136+
color: current-color(base);
137+
}
138+
139+
// Activated Clear Button with Color
140+
:host(.button-clear.activated.ion-color) .button-native {
141+
background: transparent;
64142
}
65143

66144

@@ -112,17 +190,17 @@
112190
border-left-width: 0;
113191
}
114192

115-
116193
.button-native {
117-
@include text-inherit();
118194
@include border-radius(var(--border-radius));
119195
@include font-smoothing();
120196
@include margin(var(--margin-top), var(--margin-end), var(--margin-bottom), var(--margin-start));
121197
@include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
198+
@include text-inherit();
122199

123200
display: block;
124201
position: relative;
125202

203+
width: var(--width);
126204
height: var(--height);
127205

128206
transition: var(--transition);
@@ -134,6 +212,7 @@
134212
outline: none;
135213

136214
background: var(--background);
215+
color: var(--color);
137216

138217
line-height: 1;
139218

@@ -154,6 +233,17 @@
154233
pointer-events: none;
155234
}
156235

236+
:host(.focused) .button-native {
237+
background: var(--background-focused);
238+
color: var(--color-focused);
239+
}
240+
241+
:host(.activated) .button-native {
242+
background: var(--background-activated);
243+
color: var(--color-activated);
244+
}
245+
246+
157247
// .button > .button-container:hover {
158248
// opacity: var(--opacity-hover);
159249
// }

‎core/src/components/button/button.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -231,6 +231,7 @@ function getColorClassMap(buttonType: string, color: string | undefined, fill: s
231231
[`${className}-${mode}`]: true,
232232
};
233233
if (color !== undefined) {
234+
map[`ion-color`] = true;
234235
map[`ion-color-${color}`] = true;
235236
}
236237
return map;

‎core/src/components/button/readme.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,36 @@ This attribute specifies the size of the button. Setting this attribute will cha
6161
| `ionFocus` | Emitted when the button has focus. |
6262

6363

64+
## CSS Custom Properties
65+
66+
| Name | Description |
67+
| ------------------------ | --------------------------------------- |
68+
| `--background` | Background of the button |
69+
| `--background-activated` | Background of the button when activated |
70+
| `--background-focused` | Background of the button when focused |
71+
| `--border-color` | Border color of the button |
72+
| `--border-radius` | Border radius of the button |
73+
| `--border-style` | Border style of the button |
74+
| `--border-width` | Border width of the button |
75+
| `--box-shadow` | Box shadow of the button |
76+
| `--color` | Text color of the button |
77+
| `--color-activated` | Text color of the button when activated |
78+
| `--color-focused` | Text color of the button when focused |
79+
| `--height` | Height of the button |
80+
| `--margin-bottom` | Margin bottom of the button |
81+
| `--margin-end` | Margin end of the button |
82+
| `--margin-start` | Margin start of the button |
83+
| `--margin-top` | Margin top of the button |
84+
| `--opacity` | Opacity of the button |
85+
| `--padding-bottom` | Padding bottom of the button |
86+
| `--padding-end` | Padding end of the button |
87+
| `--padding-start` | Padding start of the button |
88+
| `--padding-top` | Padding top of the button |
89+
| `--ripple-color` | Color of the button ripple effect |
90+
| `--transition` | Transition of the button |
91+
| `--width` | Width of the button |
92+
93+
6494
----------------------------------------------
6595

6696
*Built with [StencilJS](https://stenciljs.com/)*

0 commit comments

Comments
 (0)