Skip to content
Permalink
Browse files

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

…ates (#18451)

- updates MD spacing for back button text
- also adds e2e tests and adds them to screenshot

references #18279 references #17624 fixes #18465
  • Loading branch information...
brandyscarney committed Jun 10, 2019
1 parent 5c5934b commit 58672fb22176562871c112152e3a3943186db08e
@@ -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
@@ -5,26 +5,13 @@
// --------------------------------------------------

:host {
--background-focused: #{ion-color(primary, base, .1)};
--border-radius: 10px;
--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;
}
@@ -41,4 +28,19 @@

:host(.activated) .button-native {
opacity: .4;
}
}

@media (any-hover: hover) {
:host(:hover) {
--opacity: #{$button-ios-clear-opacity-hover};
}
}



// Back Button Color: Focused
// --------------------------------------------------

:host(.ion-color.ion-focused) .button-native {
background: #{current-color(base, .1)};
}
@@ -1,5 +1,9 @@
@import "../../themes/ionic.globals.ios";

// TODO this is needed for the ios vars to import
@import "../button/button.vars";
@import "../button/button.ios.vars";

// iOS Back Button
// --------------------------------------------------

@@ -5,43 +5,60 @@
// --------------------------------------------------

:host {
--border-radius: 4px;
--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;
--padding-start: 12px;
--padding-end: 12px;

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;
}

.button-text {
@include padding(0, 4px);
}

ion-icon {
line-height: .67;

text-align: start;
}


// Back Button Color: Hover
// --------------------------------------------------

@media (any-hover: hover) {
:host(.ion-color:hover) .button-native {
background: #{current-color(base, .08)};
}
}


// Back Button Color: Focused
// --------------------------------------------------

:host(.ion-color.ion-focused) .button-native {
background: #{current-color(base, .24)};
}
@@ -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
@@ -44,12 +48,33 @@
* @prop --icon-font-weight: Font weight of the button icon
*/
--background: transparent;
--color-focused: var(--color);
--color-hover: var(--color);
--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 +121,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 +172,44 @@ 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 Color: Hover
// --------------------------------------------------

@media (any-hover: hover) {
:host(.ion-color:hover) .button-native {
color: #{current-color(base)};
}
}


// Back Button Color: Focused
// --------------------------------------------------

:host(.ion-color.ion-focused) .button-native {
color: #{current-color(base)};
}


// Back Button in Toolbar: Global Theming
// --------------------------------------------------

@@ -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>
);
}
@@ -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 |


----------------------------------------------
@@ -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();
});

0 comments on commit 58672fb

Please sign in to comment.
You can’t perform that action at this time.