Skip to content

Commit 773c2c2

Browse files
camwiegertcamwiegert
committed
fix(toggle): add and document custom properties
references #14850
1 parent 9beca98 commit 773c2c2

File tree

6 files changed

+57
-16
lines changed

6 files changed

+57
-16
lines changed

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,15 @@ Emitted when the toggle has focus.
123123
Emitted when the styles change.
124124

125125

126+
## CSS Custom Properties
127+
128+
| Name | Description |
129+
| ----------------------------- | -------------------------------------------- |
130+
| `--background` | Background of the toggle |
131+
| `--background-checked` | Background of the toggle when checked |
132+
| `--handle-background` | Background of the toggle handle |
133+
| `--handle-background-checked` | Background of the toggle handle when checked |
134+
126135

127136
----------------------------------------------
128137

‎core/src/components/toggle/test/standalone/index.html

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,17 @@
2323
<ion-toggle checked color="light"></ion-toggle>
2424
<ion-toggle checked color="medium"></ion-toggle>
2525
<ion-toggle checked color="dark"></ion-toggle>
26+
<ion-toggle checked class="custom"></ion-toggle>
2627

2728
<!-- Disabled -->
2829
<ion-toggle checked disabled></ion-toggle>
2930
<ion-toggle checked disabled color="secondary"></ion-toggle>
31+
32+
<style>
33+
.custom {
34+
--background-checked: papayawhip;
35+
--handle-background-checked: purple;
36+
}
37+
</style>
3038
</body>
3139
</html>

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

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

77
:host {
8-
--checked-background: #{current-color(base)};
9-
--checked-knob: #{current-color(base)};
8+
--background: #{$toggle-ios-background-color-off};
9+
--background-checked: #{ion-color(primary, base)};
10+
--handle-background: #{$toggle-ios-handle-background-color};
11+
--handle-background-checked: #{$toggle-ios-handle-background-color};
1012

1113
box-sizing: content-box;
1214

@@ -18,6 +20,13 @@
1820
contain: strict;
1921
}
2022

23+
:host(.ion-color.toggle-checked) .toggle-icon {
24+
background: current-color(base);
25+
}
26+
27+
:host(.ion-color.toggle-checked) .toggle-inner {
28+
background: current-color(contrast);
29+
}
2130

2231
// iOS Toggle Background Track: Unchecked
2332
// -----------------------------------------
@@ -53,7 +62,7 @@
5362

5463
transition: transform $toggle-ios-transition-duration;
5564

56-
background-color: $toggle-ios-background-color-off;
65+
background: var(--background);
5766

5867
content: "";
5968
}
@@ -73,7 +82,7 @@
7382

7483
transition: transform $toggle-ios-transition-duration, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms, right 110ms ease-in-out 80ms;
7584

76-
background-color: $toggle-ios-handle-background-color;
85+
background: var(--handle-background);
7786

7887
box-shadow: $toggle-ios-handle-box-shadow;
7988
will-change: transform;
@@ -85,7 +94,7 @@
8594
// -----------------------------------------
8695

8796
:host(.toggle-checked) .toggle-icon {
88-
background-color: var(--checked-knob);
97+
background: var(--background-checked);
8998
}
9099

91100

@@ -103,6 +112,8 @@
103112

104113
:host(.toggle-checked) .toggle-inner {
105114
@include transform(translate3d($toggle-ios-width - $toggle-ios-handle-width - ($toggle-ios-border-width * 2), 0, 0));
115+
116+
background: var(--handle-background-checked);
106117
}
107118

108119

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

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

77
:host {
8-
--checked-background: #{current-color(base, $toggle-md-track-background-color-alpha-on)};
9-
--checked-knob: #{current-color(base)};
8+
--background: #{$toggle-md-track-background-color-off};
9+
--background-checked: #{ion-color(primary, base, $toggle-md-track-background-color-alpha-on)};
10+
--handle-background: #{$toggle-md-handle-background-color-off};
11+
--handle-background-checked: #{ion-color(primary, base)};
1012

1113
@include padding($toggle-md-padding-top, $toggle-md-padding-end, $toggle-md-padding-bottom, $toggle-md-padding-start);
1214

@@ -20,6 +22,13 @@
2022
contain: strict;
2123
}
2224

25+
:host(.ion-color.toggle-checked) .toggle-icon {
26+
background: current-color(base, $toggle-md-track-background-color-alpha-on);
27+
}
28+
29+
:host(.ion-color.toggle-checked) .toggle-inner {
30+
background: current-color(base);
31+
}
2332

2433
// Material Design Toggle Background Track: Unchecked
2534
// -----------------------------------------
@@ -35,7 +44,7 @@
3544

3645
transition: background-color $toggle-md-transition-duration;
3746

38-
background-color: $toggle-md-track-background-color-off;
47+
background: var(--background);
3948
pointer-events: none;
4049
}
4150

@@ -55,7 +64,7 @@
5564
transition-duration: $toggle-md-transition-duration;
5665
transition-property: transform, background-color;
5766

58-
background-color: $toggle-md-handle-background-color-off;
67+
background: var(--handle-background);
5968

6069
box-shadow: $toggle-md-handle-box-shadow;
6170
will-change: transform, background-color;
@@ -67,7 +76,7 @@
6776
// -----------------------------------------
6877

6978
:host(.toggle-checked) .toggle-icon {
70-
background-color: var(--checked-background);
79+
background: var(--background-checked);
7180
}
7281

7382
// Material Design Toggle Inner Knob: Checked
@@ -76,7 +85,7 @@
7685
:host(.toggle-checked) .toggle-inner {
7786
@include transform(translate3d($toggle-md-track-width - $toggle-md-handle-width, 0, 0));
7887

79-
background-color: var(--checked-knob);
88+
background: var(--handle-background-checked);
8089
}
8190

8291

‎core/src/components/toggle/toggle.scss

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,12 @@
44
// --------------------------------------------------
55

66
:host {
7-
--ion-color-base: #{ion-color(primary, base)};
8-
--ion-color-base-rgb: #{ion-color(primary, base, null, true)};
7+
/**
8+
* @prop --background: Background of the toggle
9+
* @prop --background-checked: Background of the toggle when checked
10+
* @prop --handle-background: Background of the toggle handle
11+
* @prop --handle-background-checked: Background of the toggle handle when checked
12+
*/
913

1014
// TODO can we remove important here
1115
/* stylelint-disable-next-line declaration-no-important */

‎core/src/components/toggle/toggle.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ export class Toggle implements CheckboxInput {
9494
'interactive-disabled': this.disabled,
9595
});
9696
if (this.gesture) {
97-
this.gesture.setDisabled(this.disabled);
97+
this.gesture.disabled = this.disabled;
9898
}
9999
}
100100

@@ -112,11 +112,11 @@ export class Toggle implements CheckboxInput {
112112
}
113113
}
114114

115-
this.gesture = (await import('../../utils/gesture/gesture')).createGesture({
115+
this.gesture = (await import('../../utils/gesture/gesture')).create({
116116
el: this.el,
117117
queue: this.queue,
118118
gestureName: 'toggle',
119-
gesturePriority: 100,
119+
gesturePriority: 30,
120120
threshold: 0,
121121
onStart: this.onDragStart.bind(this),
122122
onMove: this.onDragMove.bind(this),

0 commit comments

Comments
 (0)