feat(back-button): add variables and support for focused and hover

also adds e2e tests and adds them to screenshot references #18279
ionic-team · Jun 3, 2019 · e51b76f · e51b76f
1 parent 5ba0aa9
commit e51b76f
Show file tree

Hide file tree

Showing 12 changed files with 424 additions and 186 deletions.
diff --git a/core/api.txt b/core/api.txt
@@ -89,8 +89,12 @@ ion-back-button,prop,icon,null | string | undefined,undefined,false,false
 ion-back-button,prop,mode,"ios" | "md",undefined,false,false
 ion-back-button,prop,text,null | string | undefined,undefined,false,false
 ion-back-button,css-prop,--background
+ion-back-button,css-prop,--background-focused
+ion-back-button,css-prop,--background-hover
 ion-back-button,css-prop,--border-radius
 ion-back-button,css-prop,--color
+ion-back-button,css-prop,--color-focused
+ion-back-button,css-prop,--color-hover
 ion-back-button,css-prop,--icon-font-size
 ion-back-button,css-prop,--icon-font-weight
 ion-back-button,css-prop,--icon-margin-bottom

diff --git a/core/src/components/back-button/back-button.ios.scss b/core/src/components/back-button/back-button.ios.scss
@@ -6,25 +6,10 @@
 
 :host {
   --color: #{$back-button-ios-color};
-  --margin-top: 0;
-  --margin-end: 0;
-  --margin-bottom: 0;
-  --margin-start: 0;
-  --padding-top: 0;
-  --padding-end: 0;
-  --padding-bottom: 0;
-  --padding-start: 0;
-  --min-height: 32px;
-  --min-width: auto;
-  --icon-padding-top: 0;
-  --icon-padding-end: 0;
-  --icon-padding-bottom: 0;
-  --icon-padding-start: 0;
-  --icon-margin-top: 0;
   --icon-margin-end: -5px;
-  --icon-margin-bottom: 0;
   --icon-margin-start: -4px;
   --icon-font-size: 1.85em;
+  --min-height: 32px;
 
   font-size: 17px;
 }

diff --git a/core/src/components/back-button/back-button.md.scss b/core/src/components/back-button/back-button.md.scss
@@ -5,38 +5,30 @@
 // --------------------------------------------------
 
 :host {
+  --background-focused: rgba(66, 66, 66, 0.24);
+  --background-hover: rgba(66, 66, 66, 0.08);
   --color: #{$back-button-md-color};
-  --margin-top: 0;
-  --margin-end: 0;
-  --margin-bottom: 0;
-  --margin-start: 0;
-  --padding-top: 0;
-  --padding-end: 0;
-  --padding-bottom: 0;
-  --padding-start: 0;
-  --min-height: 32px;
-  --min-width: 44px;
-  --icon-padding-top: 0;
-  --icon-padding-end: 0;
-  --icon-padding-start: 0;
-  --icon-padding-bottom: 0;
-  --icon-margin-top: 0;
   --icon-margin-end: 0;
-  --icon-margin-bottom: 0;
   --icon-margin-start: 0;
   --icon-font-size: 24px;
   --icon-font-weight: normal;
+  --min-height: 32px;
+  --min-width: 44px;
 
   font-size: 14px;
   font-weight: 500;
 
   text-transform: uppercase;
 }
 
-.button-native {
-  width: 48px;
+:host(.back-button-has-icon-only) {
+  --border-radius: 50%;
+
+  min-width: 48px;
   height: 48px;
+}
 
+.button-native {
   box-shadow: none;
 }
 
@@ -45,3 +37,23 @@ ion-icon {
 
   text-align: start;
 }
+
+
+// Menu Button Color: Hover
+// --------------------------------------------------
+
+@media (any-hover: hover) {
+  :host(.ion-color:hover) .button-native {
+    background: #{current-color(base, .08)};
+    color: #{current-color(base)};
+  }
+}
+
+
+// Back Button Color: Focused
+// --------------------------------------------------
+
+:host(.ion-color.ion-focused) .button-native {
+  background: #{current-color(base, .24)};
+  color: #{current-color(base)};
+}
diff --git a/core/src/components/back-button/back-button.scss b/core/src/components/back-button/back-button.scss
@@ -6,8 +6,12 @@
 :host {
  /**
    * @prop --background: Background of the button
+   * @prop --background-focused: Background of the button when focused
+   * @prop --background-hover: Background of the button when hover
    *
    * @prop --color: Text color of the button
+   * @prop --color-focused: Text color of the button when focused
+   * @prop --color-hover: Text color of the button when hover
    *
    * @prop --min-width: Minimum width of the button
    * @prop --min-height: Minimum height of the button
@@ -43,13 +47,33 @@
    * @prop --icon-font-size: Font size of the button icon
    * @prop --icon-font-weight: Font weight of the button icon
    */
+  --color-focused: var(--color);
   --background: transparent;
+  --icon-margin-top: 0;
+  --icon-margin-bottom: 0;
+  --icon-padding-top: 0;
+  --icon-padding-end: 0;
+  --icon-padding-bottom: 0;
+  --icon-padding-start: 0;
+  --margin-top: 0;
+  --margin-end: 0;
+  --margin-bottom: 0;
+  --margin-start: 0;
+  --min-width: auto;
+  --min-height: auto;
+  --padding-top: 0;
+  --padding-end: 0;
+  --padding-bottom: 0;
+  --padding-start: 0;
+  --opacity: 1;
   --ripple-color: currentColor;
   --transition: background-color, opacity 100ms linear;
-  --opacity: 1;
 
   display: none;
 
+  min-width: var(--min-width);
+  min-height: var(--min-height);
+
   color: var(--color);
 
   font-family: $font-family-base;
@@ -96,8 +120,10 @@
   display: block;
   position: relative;
 
-  min-width: var(--min-width);
-  min-height: var(--min-height);
+  width: 100%;
+  height: 100%;
+
+  min-height: inherit;
 
   transition: var(--transition);
 
@@ -145,6 +171,26 @@ ion-icon {
   pointer-events: none;
 }
 
+
+// Back Button: Hover
+// --------------------------------------------------
+
+@media (any-hover: hover) {
+  :host(:hover) .button-native {
+    background: var(--background-hover);
+    color: var(--color-hover);
+  }
+}
+
+// Back Button: Focused
+// --------------------------------------------------
+
+:host(.ion-focused) .button-native {
+  background: var(--background-focused);
+  color: var(--color-focused);
+}
+
+
 // Back Button in Toolbar: Global Theming
 // --------------------------------------------------
 

diff --git a/core/src/components/back-button/back-button.tsx b/core/src/components/back-button/back-button.tsx
@@ -56,6 +56,29 @@ export class BackButton implements ComponentInterface {
     return openURL(this.win, this.defaultHref, ev, 'back');
   }
 
+  private get backButtonIcon() {
+    return this.icon != null ? this.icon : this.config.get('backButtonIcon', 'arrow-back');
+  }
+
+  private get backButtonText() {
+    const defaultBackButtonText = this.mode === 'ios' ? 'Back' : null;
+    return this.text != null ? this.text : this.config.get('backButtonText', defaultBackButtonText);
+  }
+
+  private get hasIconOnly() {
+    return this.backButtonIcon && !this.backButtonText;
+  }
+
+  private get rippleType() {
+    // If the button only has an icon we use the unbounded
+    // "circular" ripple effect
+    if (this.hasIconOnly) {
+      return 'unbounded';
+    }
+
+    return 'bounded';
+  }
+
   hostData() {
     const showBackButton = this.defaultHref !== undefined;
 
@@ -65,24 +88,24 @@ export class BackButton implements ComponentInterface {
         [`${this.mode}`]: true,
 
         'button': true, // ion-buttons target .button
+        'back-button-has-icon-only': this.hasIconOnly,
         'ion-activatable': true,
+        'ion-focusable': true,
         'show-back-button': showBackButton
       }
     };
   }
 
   render() {
-    const defaultBackButtonText = this.mode === 'ios' ? 'Back' : null;
-    const backButtonIcon = this.icon != null ? this.icon : this.config.get('backButtonIcon', 'arrow-back');
-    const backButtonText = this.text != null ? this.text : this.config.get('backButtonText', defaultBackButtonText);
+    const { backButtonIcon, backButtonText } = this;
 
     return (
       <button type="button" class="button-native">
         <span class="button-inner">
           {backButtonIcon && <ion-icon icon={backButtonIcon} lazy={false}></ion-icon>}
           {backButtonText && <span class="button-text">{backButtonText}</span>}
         </span>
-        {this.mode === 'md' && <ion-ripple-effect type="unbounded"></ion-ripple-effect>}
+        {this.mode === 'md' && <ion-ripple-effect type={this.rippleType}></ion-ripple-effect>}
       </button>
     );
   }

diff --git a/core/src/components/back-button/readme.md b/core/src/components/back-button/readme.md
@@ -250,34 +250,38 @@ export default Example;
 
 ## CSS Custom Properties
 
-| Name                    | Description                       |
-| ----------------------- | --------------------------------- |
-| `--background`          | Background of the button          |
-| `--border-radius`       | Border radius of the button       |
-| `--color`               | Text color of the button          |
-| `--icon-font-size`      | Font size of the button icon      |
-| `--icon-font-weight`    | Font weight of the button icon    |
-| `--icon-margin-bottom`  | Margin bottom of the button icon  |
-| `--icon-margin-end`     | Margin end of the button icon     |
-| `--icon-margin-start`   | Margin start of the button icon   |
-| `--icon-margin-top`     | Margin top of the button icon     |
-| `--icon-padding-bottom` | Padding bottom of the button icon |
-| `--icon-padding-end`    | Padding end of the button icon    |
-| `--icon-padding-start`  | Padding start of the button icon  |
-| `--icon-padding-top`    | Padding top of the button icon    |
-| `--margin-bottom`       | Margin bottom of the button       |
-| `--margin-end`          | Margin end of the button          |
-| `--margin-start`        | Margin start of the button        |
-| `--margin-top`          | Margin top of the button          |
-| `--min-height`          | Minimum height of the button      |
-| `--min-width`           | Minimum width of the button       |
-| `--opacity`             | Opacity of the button             |
-| `--padding-bottom`      | Padding bottom of the button      |
-| `--padding-end`         | Padding end of the button         |
-| `--padding-start`       | Padding start of the button       |
-| `--padding-top`         | Padding top of the button         |
-| `--ripple-color`        | Color of the button ripple effect |
-| `--transition`          | Transition of the button          |
+| Name                    | Description                           |
+| ----------------------- | ------------------------------------- |
+| `--background`          | Background of the button              |
+| `--background-focused`  | Background of the button when focused |
+| `--background-hover`    | Background of the button when hover   |
+| `--border-radius`       | Border radius of the button           |
+| `--color`               | Text color of the button              |
+| `--color-focused`       | Text color of the button when focused |
+| `--color-hover`         | Text color of the button when hover   |
+| `--icon-font-size`      | Font size of the button icon          |
+| `--icon-font-weight`    | Font weight of the button icon        |
+| `--icon-margin-bottom`  | Margin bottom of the button icon      |
+| `--icon-margin-end`     | Margin end of the button icon         |
+| `--icon-margin-start`   | Margin start of the button icon       |
+| `--icon-margin-top`     | Margin top of the button icon         |
+| `--icon-padding-bottom` | Padding bottom of the button icon     |
+| `--icon-padding-end`    | Padding end of the button icon        |
+| `--icon-padding-start`  | Padding start of the button icon      |
+| `--icon-padding-top`    | Padding top of the button icon        |
+| `--margin-bottom`       | Margin bottom of the button           |
+| `--margin-end`          | Margin end of the button              |
+| `--margin-start`        | Margin start of the button            |
+| `--margin-top`          | Margin top of the button              |
+| `--min-height`          | Minimum height of the button          |
+| `--min-width`           | Minimum width of the button           |
+| `--opacity`             | Opacity of the button                 |
+| `--padding-bottom`      | Padding bottom of the button          |
+| `--padding-end`         | Padding end of the button             |
+| `--padding-start`       | Padding start of the button           |
+| `--padding-top`         | Padding top of the button             |
+| `--ripple-color`        | Color of the button ripple effect     |
+| `--transition`          | Transition of the button              |
 
 
 ----------------------------------------------

diff --git a/core/src/components/back-button/test/basic/e2e.ts b/core/src/components/back-button/test/basic/e2e.ts
@@ -0,0 +1,10 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+test('back-button: basic', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/back-button/test/basic?ionic:_testing=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});