diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx
index 4475e1374e..c588bc893d 100644
--- a/core/src/components/button/button.tsx
+++ b/core/src/components/button/button.tsx
@@ -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: {
diff --git a/core/src/components/button/test/dynamic/e2e.ts b/core/src/components/button/test/dynamic/e2e.ts
new file mode 100644
index 0000000000..48c4f0fa06
--- /dev/null
+++ b/core/src/components/button/test/dynamic/e2e.ts
@@ -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();
+ }
+});
diff --git a/core/src/components/button/test/dynamic/index.html b/core/src/components/button/test/dynamic/index.html
new file mode 100644
index 0000000000..f4175446b4
--- /dev/null
+++ b/core/src/components/button/test/dynamic/index.html
@@ -0,0 +1,68 @@
+
+
+
+
+
+ Button - Dynamic
+
+
+
+
+
+
+
+
+
+
+
+
+ Button - Dynamic
+
+
+
+
+
+ Default
+ Dynamic Button
+ Large
+
+
+ Add a Button
+
+
+ Change Button Size
+
+
+
+ Default
+ Dynamic Button
+ Large
+
+
+ Add a Button
+
+
+ Change Button Size
+
+
+
+
+
+
+
+
+
diff --git a/core/src/components/item-divider/item-divider.tsx b/core/src/components/item-divider/item-divider.tsx
index 2b09a94b8b..4885296d7c 100644
--- a/core/src/components/item-divider/item-divider.tsx
+++ b/core/src/components/item-divider/item-divider.tsx
@@ -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: {
diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx
index e8e98ec497..1882509554 100644
--- a/core/src/components/item/item.tsx
+++ b/core/src/components/item/item.tsx
@@ -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;