mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-17 18:54:11 +08:00
fix(button): use correct size on a dynamic button in an item (#18395)
fixes ##18085
This commit is contained in:
Vlad Topala
committed by
Brandy Carney
Brandy Carney
parent
58672fb221
commit
a3e23fc9fa
@ -21,6 +21,7 @@ import { createColorClasses, openURL } from '../../utils/theme';
|
|||||||
export class Button implements ComponentInterface {
|
export class Button implements ComponentInterface {
|
||||||
|
|
||||||
private inToolbar = false;
|
private inToolbar = false;
|
||||||
|
private inItem = false;
|
||||||
|
|
||||||
@Element() el!: HTMLElement;
|
@Element() el!: HTMLElement;
|
||||||
|
|
||||||
@ -105,6 +106,7 @@ export class Button implements ComponentInterface {
|
|||||||
|
|
||||||
componentWillLoad() {
|
componentWillLoad() {
|
||||||
this.inToolbar = !!this.el.closest('ion-buttons');
|
this.inToolbar = !!this.el.closest('ion-buttons');
|
||||||
|
this.inItem = !!this.el.closest('ion-item') || !!this.el.closest('ion-item-divider');
|
||||||
}
|
}
|
||||||
|
|
||||||
@Listen('click')
|
@Listen('click')
|
||||||
@ -155,11 +157,12 @@ export class Button implements ComponentInterface {
|
|||||||
}
|
}
|
||||||
|
|
||||||
hostData() {
|
hostData() {
|
||||||
const { buttonType, disabled, color, expand, hasIconOnly, shape, size, strong } = this;
|
const { buttonType, disabled, color, expand, hasIconOnly, shape, strong } = this;
|
||||||
let fill = this.fill;
|
let fill = this.fill;
|
||||||
if (fill === undefined) {
|
if (fill === undefined) {
|
||||||
fill = this.inToolbar ? 'clear' : 'solid';
|
fill = this.inToolbar ? 'clear' : 'solid';
|
||||||
}
|
}
|
||||||
|
const size = this.size === undefined && this.inItem ? 'small' : this.size;
|
||||||
return {
|
return {
|
||||||
'aria-disabled': disabled ? 'true' : null,
|
'aria-disabled': disabled ? 'true' : null,
|
||||||
class: {
|
class: {
|
||||||
|
|||||||
31
core/src/components/button/test/dynamic/e2e.ts
Normal file
31
core/src/components/button/test/dynamic/e2e.ts
Normal 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
68
core/src/components/button/test/dynamic/index.html
Normal 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>
|
||||||
@ -41,16 +41,6 @@ export class ItemDivider implements ComponentInterface {
|
|||||||
*/
|
*/
|
||||||
@Prop() sticky = false;
|
@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() {
|
hostData() {
|
||||||
return {
|
return {
|
||||||
class: {
|
class: {
|
||||||
|
|||||||
@ -108,14 +108,6 @@ export class Item implements ComponentInterface {
|
|||||||
}
|
}
|
||||||
|
|
||||||
componentDidLoad() {
|
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
|
// Check for multiple inputs to change the position to relative
|
||||||
const inputs = this.el.querySelectorAll('ion-select, ion-datetime');
|
const inputs = this.el.querySelectorAll('ion-select, ion-datetime');
|
||||||
this.multipleInputs = inputs.length > 1 ? true : false;
|
this.multipleInputs = inputs.length > 1 ? true : false;
|
||||||
|
|||||||
Reference in New Issue
Block a user