feat(toggle): add --border-radius and --handle-border-radius variables (

#20141)
ionic-team · Jan 3, 2020 · 02a46a1 · 02a46a1
1 parent 83f77e2
commit 02a46a1
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 5 deletions.
diff --git a/core/api.txt b/core/api.txt
@@ -1270,8 +1270,10 @@ ion-toggle,event,ionChange,ToggleChangeEventDetail,true
 ion-toggle,event,ionFocus,void,true
 ion-toggle,css-prop,--background
 ion-toggle,css-prop,--background-checked
+ion-toggle,css-prop,--border-radius
 ion-toggle,css-prop,--handle-background
 ion-toggle,css-prop,--handle-background-checked
+ion-toggle,css-prop,--handle-border-radius
 
 ion-toolbar,shadow
 ion-toolbar,prop,color,string | undefined,undefined,false,false

diff --git a/core/src/components/toggle/readme.md b/core/src/components/toggle/readme.md
@@ -202,8 +202,10 @@ export const ToggleExample: React.FC = () => (
 | ----------------------------- | -------------------------------------------- |
 | `--background`                | Background of the toggle                     |
 | `--background-checked`        | Background of the toggle when checked        |
+| `--border-radius`             | Border radius of the toggle track            |
 | `--handle-background`         | Background of the toggle handle              |
 | `--handle-background-checked` | Background of the toggle handle when checked |
+| `--handle-border-radius`      | Border radius of the toggle handle           |
 
 
 ----------------------------------------------

diff --git a/core/src/components/toggle/test/basic/index.html b/core/src/components/toggle/test/basic/index.html
@@ -70,6 +70,11 @@
           <ion-label>Button w/ right side default icon, really long text that should ellipsis</ion-label>
           <ion-icon name="information-circle" slot="end"></ion-icon>
         </ion-item>
+
+        <ion-item>
+          <ion-label>Custom</ion-label>
+          <ion-toggle slot="start" style="--border-radius: 0px;--handle-border-radius: 0px;" checked></ion-toggle>
+        </ion-item>
 
       </ion-list>
 

diff --git a/core/src/components/toggle/toggle.ios.scss b/core/src/components/toggle/toggle.ios.scss
@@ -9,7 +9,9 @@
   --background-checked: #{ion-color(primary, base)};
   --handle-background: #{$toggle-ios-handle-background-color};
   --handle-background-checked: #{$toggle-ios-handle-background-color};
-
+  --border-radius: #{$toggle-ios-border-radius};
+  --handle-border-radius: #{$toggle-ios-handle-border-radius};
+
   box-sizing: content-box;
 
   position: relative;
@@ -29,7 +31,7 @@
 // -----------------------------------------
 
 .toggle-icon {
-  @include border-radius($toggle-ios-border-radius);
+  @include border-radius(var(--border-radius));
 
   display: block;
   position: relative;
@@ -55,7 +57,7 @@
 
 .toggle-inner {
   @include position($toggle-ios-border-width, null, null, $toggle-ios-border-width);
-  @include border-radius($toggle-ios-handle-border-radius);
+  @include border-radius(var(--handle-border-radius));
 
   position: absolute;
 

diff --git a/core/src/components/toggle/toggle.md.scss b/core/src/components/toggle/toggle.md.scss
@@ -9,6 +9,8 @@
   --background-checked: #{ion-color(primary, base, $toggle-md-track-background-color-alpha-on)};
   --handle-background: #{$toggle-md-handle-background-color-off};
   --handle-background-checked: #{ion-color(primary, base)};
+  --border-radius: #{$toggle-md-track-height};
+  --handle-border-radius: #{$toggle-md-handle-border-radius};
 
   @include padding($toggle-md-padding-top, $toggle-md-padding-end, $toggle-md-padding-bottom, $toggle-md-padding-start);
 
@@ -34,7 +36,7 @@
 // -----------------------------------------
 
 .toggle-icon {
-  @include border-radius($toggle-md-track-height);
+  @include border-radius(var(--border-radius));
 
   display: block;
   position: relative;
@@ -54,7 +56,7 @@
 
 .toggle-inner {
   @include position(($toggle-md-handle-height - $toggle-md-track-height) / -2, null, null, 0);
-  @include border-radius($toggle-md-handle-border-radius);
+  @include border-radius(var(--handle-border-radius));
 
   position: absolute;
 

diff --git a/core/src/components/toggle/toggle.scss b/core/src/components/toggle/toggle.scss
@@ -9,6 +9,8 @@
    * @prop --background-checked: Background of the toggle when checked
    * @prop --handle-background: Background of the toggle handle
    * @prop --handle-background-checked: Background of the toggle handle when checked
+   * @prop --border-radius: Border radius of the toggle track
+   * @prop --handle-border-radius: Border radius of the toggle handle
    */
 
   /* stylelint-disable-next-line declaration-no-important */