javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 03:00:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
fixes ##18085
This commit is contained in:
Vlad Topala
2019-06-10 23:47:32 +03:00
committed by Brandy Carney
parent 58672fb221
commit a3e23fc9fa
5 changed files with 103 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
core/src/components/button/button.tsx
View File

@ -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: {

31
core/src/components/button/test/dynamic/e2e.ts Normal file
View File

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

68
core/src/components/button/test/dynamic/index.html Normal file
View File

@ -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>

10
core/src/components/item-divider/item-divider.tsx
View File

@ -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: {

8
core/src/components/item/item.tsx
View File

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