Skip to content
Permalink
Browse files

fix(button): use correct size on a dynamic button in an item (#18395)

fixes ##18085
  • Loading branch information...
topalavlad authored and brandyscarney committed Jun 10, 2019
1 parent 58672fb commit a3e23fc9fabb57bd4e09a66841f89f1bb095019b
@@ -21,6 +21,7 @@ import { createColorClasses, openURL } from '../../utils/theme';
export class Button implements ComponentInterface {

private inToolbar = false;
private inItem = false;

@Element() el!: HTMLElement;

@@ -105,6 +106,7 @@ export class Button implements ComponentInterface {

componentWillLoad() {
this.inToolbar = !!this.el.closest('ion-buttons');
this.inItem = !!this.el.closest('ion-item') || !!this.el.closest('ion-item-divider');
}

@Listen('click')
@@ -155,11 +157,12 @@ export class Button implements ComponentInterface {
}

hostData() {
const { buttonType, disabled, color, expand, hasIconOnly, shape, size, strong } = this;
const { buttonType, disabled, color, expand, hasIconOnly, shape, strong } = this;
let fill = this.fill;
if (fill === undefined) {
fill = this.inToolbar ? 'clear' : 'solid';
}
const size = this.size === undefined && this.inItem ? 'small' : this.size;
return {
'aria-disabled': disabled ? 'true' : null,
class: {
@@ -0,0 +1,31 @@
import { newE2EPage } from '@stencil/core/testing';

test('button: dynamic', async () => {
const page = await newE2EPage({
url: '/src/components/button/test/dynamic?ionic:_testing=true'
});

const compares = [];

compares.push(await page.compareScreenshot());

await page.click('#add-item-button');

compares.push(await page.compareScreenshot('add item button'));

await page.click('#add-item-divider-button');

compares.push(await page.compareScreenshot('add item divider button'));

await page.click('#change-item-button');

compares.push(await page.compareScreenshot('change item button size'));

await page.click('#change-item-divider-button');

compares.push(await page.compareScreenshot('change item divider button size'));

for (const compare of compares) {
expect(compare).toMatchScreenshot();
}
});
@@ -0,0 +1,68 @@
<!DOCTYPE html>
<html dir="ltr">

<head>
<meta charset="UTF-8">
<title>Button - Dynamic</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
<script src="../../../../../scripts/testing/scripts.js"></script>
<script src="../../../../../dist/ionic.js"></script>
</head>

<body>
<ion-app>

<ion-header>
<ion-toolbar>
<ion-title>Button - Dynamic</ion-title>
</ion-toolbar>
</ion-header>

<ion-content class="ion-padding" id="content" no-bounce>
<ion-item id="dynamicItem">
<ion-button slot="start">Default</ion-button>
<ion-label>Dynamic Button</ion-label>
<ion-button id="dynamicItemLarge" slot="end" size="large">Large</ion-button>
</ion-item>
<ion-button id="add-item-button" color="success" onClick="addButton('dynamicItem')">
Add a Button
</ion-button>
<ion-button id="change-item-button" color="tertiary" onClick="changeButtonSize('dynamicItemLarge')">
Change Button Size
</ion-button>

<ion-item-divider id="dynamicItemDivider">
<ion-button slot="start">Default</ion-button>
<ion-label>Dynamic Button</ion-label>
<ion-button id="dynamicItemDividerLarge" slot="end" size="large">Large</ion-button>
</ion-item-divider>
<ion-button id="add-item-divider-button" color="success" onClick="addButton('dynamicItemDivider')">
Add a Button
</ion-button>
<ion-button id="change-item-divider-button" color="tertiary" onClick="changeButtonSize('dynamicItemDividerLarge')">
Change Button Size
</ion-button>
</ion-content>

</ion-app>

<script>
function addButton(dynamicId) {
var item = document.querySelector('#' + dynamicId);
var button = document.createElement("ion-button");
button.textContent = "Button";
button.slot = "start";
item.appendChild(button);
}
function changeButtonSize(dynamicId) {
var button = document.querySelector('#' + dynamicId);
var size = button.size === 'large' ? undefined : 'large';
button.size = size;
}
</script>
</body>

</html>
@@ -41,16 +41,6 @@ export class ItemDivider implements ComponentInterface {
*/
@Prop() sticky = false;

componentDidLoad() {
// Change the button size to small for each ion-button in the item
// unless the size is explicitly set
Array.from(this.el.querySelectorAll('ion-button')).forEach(button => {
if (button.size === undefined) {
button.size = 'small';
}
});
}

hostData() {
return {
class: {
@@ -108,14 +108,6 @@ export class Item implements ComponentInterface {
}

componentDidLoad() {
// Change the button size to small for each ion-button in the item
// unless the size is explicitly set
Array.from(this.el.querySelectorAll('ion-button')).forEach(button => {
if (button.size === undefined) {
button.size = 'small';
}
});

// Check for multiple inputs to change the position to relative
const inputs = this.el.querySelectorAll('ion-select, ion-datetime');
this.multipleInputs = inputs.length > 1 ? true : false;

0 comments on commit a3e23fc

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