diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
index fb7e651b30..d4ba305f44 100644
--- a/packages/core/src/components.d.ts
+++ b/packages/core/src/components.d.ts
@@ -354,10 +354,9 @@ declare global {
}
namespace JSXElements {
export interface IonButtonAttributes extends HTMLAttributes {
- itemButton?: boolean;
href?: string;
buttonType?: string;
- size?: 'small' | 'large';
+ size?: 'small' | 'default' | 'large';
disabled?: boolean;
fill?: 'clear' | 'outline' | 'solid' | 'default';
round?: boolean;
diff --git a/packages/core/src/components/button/button.tsx b/packages/core/src/components/button/button.tsx
index 59f1768fb1..a2c9d1722a 100644
--- a/packages/core/src/components/button/button.tsx
+++ b/packages/core/src/components/button/button.tsx
@@ -12,8 +12,6 @@ import { getElementClassObject } from '../../utils/theme';
export class Button {
@Element() private el: HTMLElement;
- @Prop() itemButton: boolean = false;
-
/**
* Contains a URL or a URL fragment that the hyperlink points to.
* If this property is set, an anchor tag will be rendered.
@@ -28,9 +26,9 @@ export class Button {
/**
* The button size.
- * Possible values are: `"small"`, `"large"`.
+ * Possible values are: `"small"`, `"default"`, `"large"`.
*/
- @Prop() size: 'small' | 'large';
+ @Prop() size: 'small' | 'default' | 'large';
/**
* If true, sets the button into a disabled state.
@@ -40,13 +38,12 @@ export class Button {
/**
* Set to `"clear"` for a transparent button, to `"outline"` for a transparent
* button with a border, or to `"solid"`. The default style is `"solid"` except inside of
- * `ion-navbar`, where the default is `"clear"`.
+ * a toolbar, where the default is `"clear"`.
*/
@Prop() fill: 'clear' | 'outline' | 'solid' | 'default' = 'default';
/**
* If true, activates a button with rounded corners.
- * Type: shape
*/
@Prop() round: boolean = false;
@@ -58,7 +55,6 @@ export class Button {
/**
* If true, activates a button with a heavier font weight.
- * Type: decorator
*/
@Prop() strong: boolean = false;
@@ -80,7 +76,6 @@ export class Button {
const {
buttonType,
- itemButton,
color,
expand,
fill,
@@ -98,7 +93,6 @@ export class Button {
getClassList(buttonType, round ? 'round' : null, mode),
getClassList(buttonType, strong ? 'strong' : null, mode),
getColorClassList(buttonType, color, fill, mode),
- getItemClassList(itemButton, size)
);
const TagType = this.href ? 'a' : 'button';
@@ -178,7 +172,3 @@ function getColorClassList(buttonType: string, color: string, fill: string, mode
color ? `${className}-${mode}-${color}` : []
);
}
-
-function getItemClassList(itemButton: boolean, size: string) {
- return itemButton && !size ? ['item-button'] : [];
-}
diff --git a/packages/core/src/components/button/readme.md b/packages/core/src/components/button/readme.md
index 6df08aa65b..fa914383b4 100644
--- a/packages/core/src/components/button/readme.md
+++ b/packages/core/src/components/button/readme.md
@@ -1,23 +1,52 @@
# ion-button
-Buttons are simple components in Ionic. They can consist of text and icons
-and be enhanced by a wide range of attributes.
+Buttons provide a clickable element, which can be used in forms, or anywhere that needs simple, standard button functionality. They may display text, icons, or both. Buttons can be styled with several attributes to look a specific way.
+
+## Expand
+
+This attribute lets you specify how wide the button should be. By default, buttons are inline blocks, but setting this attribute will change the button to a full-width block element.
+
+| Value | Details |
+|----------------|------------------------------------------------------------------------------|
+| `block` | Full-width button with rounded corners. |
+| `full` | Full-width button with square corners and no border on the left or right. |
+
+## Fill
+
+This attributes determines the background and border color of the button. By default, buttons have a solid background unless the button is inside of a toolbar, in which case it has a transparent background.
+
+| Value | Details |
+|----------------|------------------------------------------------------------------------------|
+| `clear` | Button with a transparent background that resembles a flat button. |
+| `outline` | Button with a transparent background and a visible border. |
+| `solid` | Button with a filled background. Useful for buttons in a toolbar. |
+
+## Size
+
+This attribute specifies the size of the button. Setting this attribute will change the height and padding of a button.
+
+| Value | Details |
+|----------------|------------------------------------------------------------------------------|
+| `small` | Button with less height and padding. Default for buttons in an item. |
+| `default` | Button with the default height and padding. Useful for buttons in an item. |
+| `large` | Button with more height and padding. |
+
```html
-
DefaultSecondary
+WarningDangerLightDark
-
+
Full ButtonBlock ButtonRound Button
-
+
Outline + FullOutline + BlockOutline + Round
@@ -79,11 +108,6 @@ any
string
-#### itemButton
-
-boolean
-
-
#### mode
any
@@ -136,11 +160,6 @@ any
string
-#### itemButton
-
-boolean
-
-
#### mode
any
diff --git a/packages/core/src/components/item/item.tsx b/packages/core/src/components/item/item.tsx
index 791ca60a8c..abdead3730 100644
--- a/packages/core/src/components/item/item.tsx
+++ b/packages/core/src/components/item/item.tsx
@@ -62,10 +62,13 @@ export class Item {
}
componentDidLoad() {
- // Add item-button classes to each ion-button in the item
- const buttons = this.el.querySelectorAll('ion-button') as any;
+ // Change the button size to small for each ion-button in the item
+ // unless the size is explicitly set
+ const buttons = this.el.querySelectorAll('ion-button');
for (var i = 0; i < buttons.length; i++) {
- buttons[i].itemButton = true;
+ if (!buttons[i].size) {
+ buttons[i].size = 'small';
+ }
}
}
diff --git a/packages/core/src/components/item/test/basic/index.html b/packages/core/src/components/item/test/basic/index.html
index a068cba2d0..4715bb2865 100644
--- a/packages/core/src/components/item/test/basic/index.html
+++ b/packages/core/src/components/item/test/basic/index.html
@@ -1,95 +1,99 @@
+
Item - Basic
+
Item - Basic
-
-
- Default
-
-
-
-
-
-
-
- Item Icons
-
-
-
-
-
- Item No Size Button
- Start Button
- End Button
-
-
-
- Item Outline Button
- Start Button
- End Button
-
-
-
- Item Large Button
- Start Button
-
-
-
- Item Large Button
- End Button
-
-
-
- Item Small Button
- Start Button
- End Button
-
-
-
- Item Default Button
- Start Button
- End Button
-
-
-
- Divider
-
+
+
+ List Header
+
- Item Large Button
- Start Button
+ Item
-
+
+ Item Divider
+
- Item Large Button
- End Button
+ Item
+
-
- Item Small Button
- Start Button
- End Button
-
+
+
+ Plain Ol' div with some text
+
+
+
+
+
+ Single line text that should have ellipses when it doesn't all fit in the item
+
+
+
+
+
+ Single line item with no lines
+
+
+
+
+
+ Multiline text that should wrap when it is too long to fit on one line in the item. Attribute on .item
+
+
+
+
+
+