feat(button): add variables for customizing hover state (#18499)

resolves #17974
ionic-team · Jun 10, 2019 · 5c5934b · 5c5934b
1 parent 7610787
commit 5c5934b
Show file tree

Hide file tree

Showing 11 changed files with 118 additions and 85 deletions.
diff --git a/core/api.txt b/core/api.txt
@@ -149,6 +149,7 @@ ion-button,event,ionFocus,void,true
 ion-button,css-prop,--background
 ion-button,css-prop,--background-activated
 ion-button,css-prop,--background-focused
+ion-button,css-prop,--background-hover
 ion-button,css-prop,--border-color
 ion-button,css-prop,--border-radius
 ion-button,css-prop,--border-style
@@ -157,6 +158,7 @@ ion-button,css-prop,--box-shadow
 ion-button,css-prop,--color
 ion-button,css-prop,--color-activated
 ion-button,css-prop,--color-focused
+ion-button,css-prop,--color-hover
 ion-button,css-prop,--opacity
 ion-button,css-prop,--padding-bottom
 ion-button,css-prop,--padding-end

diff --git a/core/src/components/button/button.ios.scss b/core/src/components/button/button.ios.scss
@@ -127,7 +127,21 @@
     --opacity: #{$button-ios-opacity-hover};
   }
 
-  :host(.button-clear:hover) {
+  :host(.button-clear:hover),
+  :host(.button-outline:hover) {
     --opacity: #{$button-ios-clear-opacity-hover};
   }
+
+  // Since iOS changes the opacity on hover,
+  // we want to keep the background if focused
+  // or activated
+  :host(.ion-focused:hover) {
+    --background-hover: var(--background-focused);
+    --color-hover: var(--color-focused);
+  }
+
+  :host(.activated:hover) {
+    --background-hover: var(--background-activated);
+    --color-hover: var(--color-activated);
+  }
 }
diff --git a/core/src/components/button/button.md.scss b/core/src/components/button/button.md.scss
@@ -47,6 +47,7 @@
   --box-shadow: none;
   --background-activated: transparent;
   --background-focused: #{ion-color(primary, base, .1)};
+  --background-hover: #{ion-color(primary, base, .04)};
   --color-activated: #{ion-color(primary, base)};
 }
 
@@ -62,6 +63,7 @@
   --opacity: #{$button-md-clear-opacity};
   --background-activated: transparent;
   --background-focused: #{ion-color(primary, base, .1)};
+  --background-hover: #{ion-color(primary, base, .04)};
   --color-activated: #{ion-color(primary, base)};
   --color-focused: #{ion-color(primary, base)};
 }
@@ -117,23 +119,16 @@
 }
 
 
-// Material Design Button Sizes
+// Material Design Button: Hover
 // --------------------------------------------------
 
 @media (any-hover: hover) {
-  :host(.button-outline:hover) .button-native {
-    background: ion-color(primary, base, .04);
+  :host(.button-solid.ion-color:hover) .button-native {
+    background: #{current-color(base, .92)};
   }
 
+  :host(.button-clear.ion-color:hover) .button-native,
   :host(.button-outline.ion-color:hover) .button-native {
-    background: current-color(base, .04);
-  }
-
-  :host(.button-clear:hover) .button-native {
-    background: ion-color(primary, base, .04);
+    background: #{current-color(base, .04)};
   }
-
-  :host(.button-clear.ion-color:hover) .button-native {
-    background: current-color(base, .04);
-  }
-}
+}
diff --git a/core/src/components/button/button.scss b/core/src/components/button/button.scss
@@ -8,10 +8,12 @@
    * @prop --background: Background of the button
    * @prop --background-activated: Background of the button when activated
    * @prop --background-focused: Background of the button when focused
+   * @prop --background-hover: Background of the button on hover
    *
    * @prop --color: Text color of the button
    * @prop --color-activated: Text color of the button when activated
    * @prop --color-focused: Text color of the button when focused
+   * @prop --color-hover: Text color of the button when hover
    *
    * @prop --transition: Transition of the button
    *
@@ -35,6 +37,7 @@
   --border-width: initial;
   --border-color: initial;
   --border-style: initial;
+  --color-hover: initial;
   --box-shadow: none;
 
   display: inline-block;
@@ -76,6 +79,7 @@
 :host(.button-solid) {
   --background: #{ion-color(primary, base)};
   --background-focused: #{ion-color(primary, shade)};
+  --background-hover: #{ion-color(primary, base, 0.92)};
   --color: #{ion-color(primary, contrast)};
   --color-activated: #{ion-color(primary, contrast)};
   --color-focused: #{ion-color(primary, contrast)};
@@ -234,16 +238,6 @@
   border: 0;
 }
 
-:host(.ion-focused) .button-native {
-  background: var(--background-focused);
-  color: var(--color-focused);
-}
-
-:host(.activated) .button-native {
-  background: var(--background-activated);
-  color: var(--color-activated);
-}
-
 
 // .button > .button-container:hover {
 //   opacity: var(--opacity-hover);
@@ -289,3 +283,23 @@
 ion-ripple-effect {
   color: var(--ripple-color);
 }
+
+// Button: Hover
+// --------------------------------------------------
+
+:host(.ion-focused) .button-native {
+  background: var(--background-focused);
+  color: var(--color-focused);
+}
+
+:host(.activated) .button-native {
+  background: var(--background-activated);
+  color: var(--color-activated);
+}
+
+@media (any-hover: hover) {
+  :host(:hover) .button-native {
+    background: var(--background-hover);
+    color: var(--color-hover);
+  }
+}
diff --git a/core/src/components/button/button.vars.scss b/core/src/components/button/button.vars.scss
@@ -17,5 +17,3 @@ $button-round-padding-start:      $button-round-padding-end !default;
 
 /// @prop - Border radius of the round button
 $button-round-border-radius:      64px !default;
-
-/// @prop - Opacity of the button when disabled
diff --git a/core/src/components/button/readme.md b/core/src/components/button/readme.md
@@ -255,6 +255,7 @@ export default Example;
 | `--background`           | Background of the button                |
 | `--background-activated` | Background of the button when activated |
 | `--background-focused`   | Background of the button when focused   |
+| `--background-hover`     | Background of the button on hover       |
 | `--border-color`         | Border color of the button              |
 | `--border-radius`        | Border radius of the button             |
 | `--border-style`         | Border style of the button              |
@@ -263,6 +264,7 @@ export default Example;
 | `--color`                | Text color of the button                |
 | `--color-activated`      | Text color of the button when activated |
 | `--color-focused`        | Text color of the button when focused   |
+| `--color-hover`          | Text color of the button when hover     |
 | `--opacity`              | Opacity of the button                   |
 | `--padding-bottom`       | Padding bottom of the button            |
 | `--padding-end`          | Padding end of the button               |

diff --git a/core/src/components/button/test/basic/index.html b/core/src/components/button/test/basic/index.html
@@ -23,61 +23,61 @@
     <ion-content class="ion-padding ion-text-center" id="content" no-bounce>
       <p>
         <ion-button>Default</ion-button>
-        <ion-button class="focused">Default.focused</ion-button>
+        <ion-button class="ion-focused">Default.focused</ion-button>
         <ion-button class="activated">Default.activated</ion-button>
       </p>
 
       <p>
         <ion-button color="primary">Primary</ion-button>
-        <ion-button class="focused" color="primary">Primary.focused</ion-button>
+        <ion-button class="ion-focused" color="primary">Primary.focused</ion-button>
         <ion-button class="activated" color="primary">Primary.activated</ion-button>
       </p>
 
       <p>
         <ion-button color="secondary">Secondary</ion-button>
-        <ion-button class="focused" color="secondary">Secondary.focused</ion-button>
+        <ion-button class="ion-focused" color="secondary">Secondary.focused</ion-button>
         <ion-button class="activated" color="secondary">Secondary.activated</ion-button>
       </p>
 
       <p>
         <ion-button color="tertiary">Tertiary</ion-button>
-        <ion-button class="focused" color="tertiary">Tertiary.focused</ion-button>
+        <ion-button class="ion-focused" color="tertiary">Tertiary.focused</ion-button>
         <ion-button class="activated" color="tertiary">Tertiary.activated</ion-button>
       </p>
 
       <p>
         <ion-button color="success">Success</ion-button>
-        <ion-button class="focused" color="success">Success.focused</ion-button>
+        <ion-button class="ion-focused" color="success">Success.focused</ion-button>
         <ion-button class="activated" color="success">Success.activated</ion-button>
       </p>
 
       <p>
         <ion-button color="warning">Warning</ion-button>
-        <ion-button class="focused" color="warning">Warning.focused</ion-button>
+        <ion-button class="ion-focused" color="warning">Warning.focused</ion-button>
         <ion-button class="activated" color="warning">Warning.activated</ion-button>
       </p>
 
       <p>
         <ion-button color="danger">Danger</ion-button>
-        <ion-button class="focused" color="danger">Danger.focused</ion-button>
+        <ion-button class="ion-focused" color="danger">Danger.focused</ion-button>
         <ion-button class="activated" color="danger">Danger.activated</ion-button>
       </p>
 
       <p>
         <ion-button color="light">Light</ion-button>
-        <ion-button class="focused" color="light">Light.focused</ion-button>
+        <ion-button class="ion-focused" color="light">Light.focused</ion-button>
         <ion-button class="activated" color="light">Light.activated</ion-button>
       </p>
 
       <p>
         <ion-button color="medium">Medium</ion-button>
-        <ion-button class="focused" color="medium">Medium.focused</ion-button>
+        <ion-button class="ion-focused" color="medium">Medium.focused</ion-button>
         <ion-button class="activated" color="medium">Medium.activated</ion-button>
       </p>
 
       <p>
         <ion-button color="dark">Dark</ion-button>
-        <ion-button class="focused" color="dark">Dark.focused</ion-button>
+        <ion-button class="ion-focused" color="dark">Dark.focused</ion-button>
         <ion-button class="activated" color="dark">Dark.activated</ion-button>
       </p>
 

diff --git a/core/src/components/button/test/clear/index.html b/core/src/components/button/test/clear/index.html
@@ -24,71 +24,71 @@
       <p>
         <ion-button fill="clear">Default</ion-button>
         <ion-button fill="clear" class="activated">Default.activated</ion-button>
-        <ion-button fill="clear" class="focused">Default.focused</ion-button>
-        <ion-button fill="clear" class="activated focused">Default.activated.focused</ion-button>
+        <ion-button fill="clear" class="ion-focused">Default.focused</ion-button>
+        <ion-button fill="clear" class="activated ion-focused">Default.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="clear" color="primary">Primary</ion-button>
         <ion-button fill="clear" class="activated" color="primary">Primary.activated</ion-button>
-        <ion-button fill="clear" class="focused" color="primary">Primary.focused</ion-button>
-        <ion-button fill="clear" class="activated focused" color="primary">Primary.activated.focused</ion-button>
+        <ion-button fill="clear" class="ion-focused" color="primary">Primary.focused</ion-button>
+        <ion-button fill="clear" class="activated ion-focused" color="primary">Primary.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="clear" color="secondary">Secondary</ion-button>
         <ion-button fill="clear" class="activated" color="secondary">Secondary.activated</ion-button>
-        <ion-button fill="clear" class="focused" color="secondary">Secondary.focused</ion-button>
-        <ion-button fill="clear" class="activated focused" color="secondary">Secondary.activated.focused</ion-button>
+        <ion-button fill="clear" class="ion-focused" color="secondary">Secondary.focused</ion-button>
+        <ion-button fill="clear" class="activated ion-focused" color="secondary">Secondary.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="clear" color="tertiary">Tertiary</ion-button>
         <ion-button fill="clear" class="activated" color="tertiary">Tertiary.activated</ion-button>
-        <ion-button fill="clear" class="focused" color="tertiary">Tertiary.focused</ion-button>
-        <ion-button fill="clear" class="activated focused" color="tertiary">Tertiary.activated.focused</ion-button>
+        <ion-button fill="clear" class="ion-focused" color="tertiary">Tertiary.focused</ion-button>
+        <ion-button fill="clear" class="activated ion-focused" color="tertiary">Tertiary.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="clear" color="success">Success</ion-button>
         <ion-button fill="clear" class="activated" color="success">Success.activated</ion-button>
-        <ion-button fill="clear" class="focused" color="success">Success.focused</ion-button>
-        <ion-button fill="clear" class="activated focused" color="success">Success.activated.focused</ion-button>
+        <ion-button fill="clear" class="ion-focused" color="success">Success.focused</ion-button>
+        <ion-button fill="clear" class="activated ion-focused" color="success">Success.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="clear" color="warning">Warning</ion-button>
         <ion-button fill="clear" class="activated" color="warning">Warning.activated</ion-button>
-        <ion-button fill="clear" class="focused" color="warning">Warning.focused</ion-button>
-        <ion-button fill="clear" class="activated focused" color="warning">Warning.activated.focused</ion-button>
+        <ion-button fill="clear" class="ion-focused" color="warning">Warning.focused</ion-button>
+        <ion-button fill="clear" class="activated ion-focused" color="warning">Warning.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="clear" color="danger">Danger</ion-button>
         <ion-button fill="clear" class="activated" color="danger">Danger.activated</ion-button>
-        <ion-button fill="clear" class="focused" color="danger">Danger.focused</ion-button>
-        <ion-button fill="clear" class="activated focused" color="danger">Danger.activated.focused</ion-button>
+        <ion-button fill="clear" class="ion-focused" color="danger">Danger.focused</ion-button>
+        <ion-button fill="clear" class="activated ion-focused" color="danger">Danger.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="clear" color="light">Light</ion-button>
         <ion-button fill="clear" class="activated" color="light">Light.activated</ion-button>
-        <ion-button fill="clear" class="focused" color="light">Light.focused</ion-button>
-        <ion-button fill="clear" class="activated focused" color="light">Light.activated.focused</ion-button>
+        <ion-button fill="clear" class="ion-focused" color="light">Light.focused</ion-button>
+        <ion-button fill="clear" class="activated ion-focused" color="light">Light.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="clear" color="medium">Medium</ion-button>
         <ion-button fill="clear" class="activated" color="medium">Medium.activated</ion-button>
-        <ion-button fill="clear" class="focused" color="medium">Medium.focused</ion-button>
-        <ion-button fill="clear" class="activated focused" color="medium">Medium.activated.focused</ion-button>
+        <ion-button fill="clear" class="ion-focused" color="medium">Medium.focused</ion-button>
+        <ion-button fill="clear" class="activated ion-focused" color="medium">Medium.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="clear" color="dark">Dark</ion-button>
         <ion-button fill="clear" class="activated" color="dark">Dark.activated</ion-button>
-        <ion-button fill="clear" class="focused" color="dark">Dark.focused</ion-button>
-        <ion-button fill="clear" class="activated focused" color="dark">Dark.activated.focused</ion-button>
+        <ion-button fill="clear" class="ion-focused" color="dark">Dark.focused</ion-button>
+        <ion-button fill="clear" class="activated ion-focused" color="dark">Dark.activated.focused</ion-button>
       </p>
       <p>
         <ion-button fill="clear" disabled>Disabled</ion-button>