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

feat(components): improve button states and add new css properties (#19440)

Browse Source 
Before users had to know the exact opacity that the MD/iOS spec called for in order to change the hover or focused background color. This allows them to change the background without having to know the opacity. 

- changes apply to Action Sheet (Buttons), Back Button, Button, FAB Button, Item, Menu Button, Segment Button, Tab Button
- greatly reduces the requirement by users to set the background hover, focused states for dark modes and custom themes, also eliminates the need to know what the hover opacity is for each based on the spec
- updates the MD dark theme per their spec
- adds a component guide for internal use changing Ionic components

references #18279 fixes #20213 fixes #19965

BREAKING CHANGE:

*Activated Class*

The `activated` class that is automatically added to buttons on press has been renamed to `ion-activated`. This will be more consistent with our `ion-focused` class we add and also will reduce conflicts with user's CSS.

*CSS Variables*

The `--background-hover`, `--background-focused` and `--background-activated` CSS variables on components that render native buttons will now have an opacity automatically set. If you are setting any of these like the following:

```
--background-hover: rgba(44, 44, 44, 0.08);
```

You will likely not see a hover state anymore. It should be updated to only set the desired color:

```
--background-hover: rgba(44, 44, 44);
```

If the opacity desired is something other than what the spec asks for, use:

```
--background-hover: rgba(44, 44, 44);
--background-hover-opacity: 1;
```
This commit is contained in:
Brandy Carney
2020-01-23 16:57:47 -05:00
committed by GitHub
parent 445f129e2d
commit 94159291b2
114 changed files with 3641 additions and 1487 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
core/src/components/button/button.ios.scss
View File

@ -23,20 +23,19 @@
letter-spacing: #{$button-ios-letter-spacing};
}
// iOS Solid Button
// --------------------------------------------------
:host(.button-solid) {
--background-activated: #{ion-color(primary, shade)};
--background-focused: #{ion-color(primary, shade)};
--background-hover: #{ion-color(primary, tint)};
--background-activated-opacity: 1;
--background-focused-opacity: 1;
--background-hover-opacity: 1;
}
:host(.button-solid.activated) {
--opacity: #{$button-ios-opacity-activated};
}
:host(.button-solid.activated.ion-color) .button-native {
background: current-color(shade);
}
// iOS Outline Button
// --------------------------------------------------
@ -46,28 +45,21 @@
--border-width: #{$button-ios-outline-border-width};
--border-style: #{$button-ios-outline-border-style};
--background-activated: #{ion-color(primary, base)};
--background-focused: #{ion-color(primary, base, .1)};
--background-focused: #{ion-color(primary, base)};
--background-hover: transparent;
--background-focused-opacity: .1;
--color-activated: #{ion-color(primary, contrast)};
}
:host(.button-outline.activated.ion-color) .button-native {
background: current-color(base);
color: current-color(contrast);
}
// iOS Clear Button
// --------------------------------------------------
:host(.button-clear.activated) {
--opacity: #{$button-ios-clear-opacity-activated};
}
:host(.button-clear) {
--background-activated: transparent;
--background-focused: #{ion-color(primary, base, .1)};
--color-activated: #{ion-color(primary, base)};
--color-focused: #{ion-color(primary, base)};
--background-focused: #{ion-color(primary, base)};
--background-hover: transparent;
--background-focused-opacity: .1;
font-size: #{$button-ios-clear-font-size};
font-weight: #{$button-ios-clear-font-weight};
@ -124,29 +116,63 @@
}
// iOS Button Focus
// iOS Button Activated
// --------------------------------------------------
:host(.button-clear.ion-activated) {
opacity: #{$button-ios-clear-opacity-activated};
}
:host(.button-outline.ion-activated.ion-color) .button-native {
color: current-color(contrast);
&::after {
background: current-color(base);
}
}
:host(.button-solid.ion-color.ion-activated) .button-native::after {
background: #{current-color(shade)};
}
// iOS Button Focused
// --------------------------------------------------
:host(.button-outline.ion-focused.ion-color) .button-native,
:host(.button-clear.ion-focused.ion-color) .button-native {
color: current-color(base);
&::after {
background: current-color(base);
}
}
:host(.button-solid.ion-color.ion-focused) .button-native::after {
background: #{current-color(shade)};
}
// iOS Button Hover
// --------------------------------------------------
@media (any-hover: hover) {
:host(.button-solid:hover) {
--opacity: #{$button-ios-opacity-hover};
}
// Clear and outline buttons use opacity so set
// background to transparent
:host(.button-clear:hover),
:host(.button-outline:hover) {
--opacity: #{$button-ios-clear-opacity-hover};
opacity: #{$button-ios-clear-opacity-hover};
}
// Since iOS changes the opacity on hover,
// we want to keep the background if focused
// or activated
:host(.ion-focused:hover) {
--background-hover: var(--background-focused);
--color-hover: var(--color-focused);
:host(.button-clear.ion-color:hover) .button-native,
:host(.button-outline.ion-color:hover) .button-native {
color: #{current-color(base)};
&::after {
background: transparent;
}
}
:host(.activated:hover) {
--background-hover: var(--background-activated);
--color-hover: var(--color-activated);
// Solid buttons use the tint background
:host(.button-solid.ion-color:hover) .button-native::after {
background: #{current-color(tint)};
}
}

58
core/src/components/button/button.md.scss
View File

@ -30,11 +30,16 @@
// --------------------------------------------------
:host(.button-solid) {
--background-activated: var(--background);
--background-activated: transparent;
--background-hover: #{ion-color(primary, contrast)};
--background-focused: #{ion-color(primary, contrast)};
--background-activated-opacity: 0;
--background-focused-opacity: .24;
--background-hover-opacity: .08;
--box-shadow: #{$button-md-box-shadow};
}
:host(.button-solid.activated) {
:host(.button-solid.ion-activated) {
--box-shadow: #{$button-md-box-shadow-activated};
}
@ -46,12 +51,14 @@
--border-style: solid;
--box-shadow: none;
--background-activated: transparent;
--background-focused: #{ion-color(primary, base, .1)};
--background-hover: #{ion-color(primary, base, .04)};
--color-activated: #{ion-color(primary, base)};
--background-focused: #{ion-color(primary, base)};
--background-hover: #{ion-color(primary, base)};
--background-activated-opacity: 0;
--background-focused-opacity: .12;
--background-hover-opacity: .04;
}
:host(.button-outline.activated.ion-color) .button-native {
:host(.button-outline.ion-activated.ion-color) .button-native {
background: transparent;
}
@ -61,10 +68,11 @@
:host(.button-clear) {
--background-activated: transparent;
--background-focused: #{ion-color(primary, base, .1)};
--background-hover: #{ion-color(primary, base, .04)};
--color-activated: #{ion-color(primary, base)};
--color-focused: #{ion-color(primary, base)};
--background-focused: #{ion-color(primary, base)};
--background-hover: #{ion-color(primary, base)};
--background-activated-opacity: 0;
--background-focused-opacity: .12;
--background-hover-opacity: .04;
}
@ -121,13 +129,33 @@
// Material Design Button: Hover
// --------------------------------------------------
:host(.button-solid.ion-color.ion-activated) .button-native::after,
:host(.button-solid.ion-color.ion-focused) .button-native::after {
background: #{current-color(contrast)};
opacity: .24;
}
:host(.button-clear.ion-color.ion-activated) .button-native::after,
:host(.button-clear.ion-color.ion-focused) .button-native::after,
:host(.button-outline.ion-color.ion-activated) .button-native::after,
:host(.button-outline.ion-color.ion-focused) .button-native::after {
background: #{current-color(base)};
opacity: .12;
}
@media (any-hover: hover) {
:host(.button-solid.ion-color:hover) .button-native {
background: #{current-color(tint)};
:host(.button-solid.ion-color:hover) .button-native::after {
background: #{current-color(contrast)};
opacity: .08;
}
:host(.button-clear.ion-color:hover) .button-native,
:host(.button-outline.ion-color:hover) .button-native {
background: #{current-color(base, .04)};
:host(.button-clear.ion-color:hover) .button-native::after,
:host(.button-outline.ion-color:hover) .button-native::after {
background: #{current-color(base)};
opacity: .04;
}
}

129
core/src/components/button/button.scss
View File

@ -6,9 +6,12 @@
:host {
/**
* @prop --background: Background of the button
* @prop --background-activated: Background of the button when pressed
* @prop --background-activated: Background of the button when pressed. Note: setting this will interfere with the Material Design ripple.
* @prop --background-activated-opacity: Opacity of the button when pressed
* @prop --background-focused: Background of the button when focused with the tab key
* @prop --background-focused-opacity: Opacity of the button when focused with the tab key
* @prop --background-hover: Background of the button on hover
* @prop --background-hover-opacity: Opacity of the background on hover
*
* @prop --color: Text color of the button
* @prop --color-activated: Text color of the button when pressed
@ -37,7 +40,9 @@
--border-width: initial;
--border-color: initial;
--border-style: initial;
--color-hover: initial;
--color-activated: var(--color);
--color-focused: var(--color);
--color-hover: var(--color);
--box-shadow: none;
display: inline-block;
@ -63,12 +68,8 @@
}
:host(.button-disabled) {
--opacity: .5;
pointer-events: none;
}
:host(.button-disabled) .button-native {
cursor: default;
opacity: .5;
pointer-events: none;
}
@ -78,22 +79,7 @@
// Default Solid Color
:host(.button-solid) {
--background: #{ion-color(primary, base)};
--background-focused: #{ion-color(primary, shade)};
--background-hover: #{ion-color(primary, tint)};
--color: #{ion-color(primary, contrast)};
--color-activated: #{ion-color(primary, contrast)};
--color-focused: #{ion-color(primary, contrast)};
}
// Solid Button with Color
:host(.button-solid.ion-color) .button-native {
background: current-color(base);
color: current-color(contrast);
}
// Focused/Activated Solid Button with Color
:host(.button-solid.ion-color.ion-focused) .button-native {
background: #{current-color(shade)};
}
@ -105,20 +91,6 @@
--border-color: #{ion-color(primary, base)};
--background: transparent;
--color: #{ion-color(primary, base)};
--color-focused: #{ion-color(primary, base)};
}
// Outline Button with Color
:host(.button-outline.ion-color) .button-native {
border-color: current-color(base);
background: transparent;
color: current-color(base);
}
:host(.button-outline.ion-focused.ion-color) .button-native {
background: current-color(base, .1);
color: current-color(base);
}
@ -132,23 +104,6 @@
--color: #{ion-color(primary, base)};
}
// Clear Button with Color
:host(.button-clear.ion-color) .button-native {
background: transparent;
color: current-color(base);
}
// Focused Clear Button with Color
:host(.button-clear.ion-focused.ion-color) .button-native {
background: current-color(base, .1);
color: current-color(base);
}
// Activated Clear Button with Color
:host(.button-clear.activated.ion-color) .button-native {
background: transparent;
}
// Block Button
// --------------------------------------------------
@ -229,6 +184,8 @@
opacity: var(--opacity);
overflow: var(--overflow);
overflow: hidden;
z-index: 0;
box-sizing: border-box;
appearance: none;
@ -240,6 +197,7 @@
.button-inner {
display: flex;
position: relative;
flex-flow: row nowrap;
flex-shrink: 0;
@ -248,6 +206,8 @@
width: 100%;
height: 100%;
z-index: 1;
}
@ -279,22 +239,69 @@ ion-ripple-effect {
color: var(--ripple-color);
}
// Button: Hover
// Button: States
// --------------------------------------------------
:host(.ion-focused) .button-native {
background: var(--background-focused);
color: var(--color-focused);
.button-native::after {
@include button-state();
}
:host(.activated) .button-native {
background: var(--background-activated);
// Button Activated
:host(.ion-activated) {
color: var(--color-activated);
}
:host(.ion-activated) .button-native::after {
background: var(--background-activated);
opacity: var(--background-activated-opacity);
}
// Button Focused
:host(.ion-focused) {
color: var(--color-focused);
}
:host(.ion-focused) .button-native::after {
background: var(--background-focused);
opacity: var(--background-focused-opacity);
}
// Button Hover
@media (any-hover: hover) {
:host(:hover) .button-native {
background: var(--background-hover);
:host(:hover) {
color: var(--color-hover);
}
:host(:hover) .button-native::after {
background: var(--background-hover);
opacity: var(--background-hover-opacity);
}
}
// Button Colors
// --------------------------------------------------
// Solid Button with Color
:host(.button-solid.ion-color) .button-native {
background: current-color(base);
color: current-color(contrast);
}
// Outline Button with Color
:host(.button-outline.ion-color) .button-native {
border-color: current-color(base);
background: transparent;
color: current-color(base);
}
// Clear Button with Color
:host(.button-clear.ion-color) .button-native {
background: transparent;
color: current-color(base);
}

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

@ -13,6 +13,9 @@ import { createColorClasses, openURL } from '../../utils/theme';
* @slot icon-only - Should be used on an icon in a button that has no text.
* @slot start - Content is placed to the left of the button text in LTR, and to the right in RTL.
* @slot end - Content is placed to the right of the button text in LTR, and to the left in RTL.
*
* @part button - The native button or anchor tag that is rendered.
* @part button-inner - The span inside of the native button or anchor.
*/
@Component({
tag: 'ion-button',
@ -218,8 +221,9 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
disabled={disabled}
onFocus={this.onFocus}
onBlur={this.onBlur}
part="button"
>
<span class="button-inner">
<span class="button-inner" part="button-inner">
<slot name="icon-only"></slot>
<slot name="start"></slot>
<slot></slot>

47
core/src/components/button/readme.md
View File

@ -252,28 +252,31 @@ export const ButtonExample: React.FC = () => (
## CSS Custom Properties
| Name | Description |
| ------------------------ | --------------------------------------------------------------------------------------------------------- |
| `--background` | Background of the button |
| `--background-activated` | Background of the button when pressed |
| `--background-focused` | Background of the button when focused with the tab key |
| `--background-hover` | Background of the button on hover |
| `--border-color` | Border color of the button |
| `--border-radius` | Border radius of the button |
| `--border-style` | Border style of the button |
| `--border-width` | Border width of the button |
| `--box-shadow` | Box shadow of the button |
| `--color` | Text color of the button |
| `--color-activated` | Text color of the button when pressed |
| `--color-focused` | Text color of the button when focused with the tab key |
| `--color-hover` | Text color of the button when hover |
| `--opacity` | Opacity of the button |
| `--padding-bottom` | Bottom padding of the button |
| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button |
| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button |
| `--padding-top` | Top padding of the button |
| `--ripple-color` | Color of the button ripple effect |
| `--transition` | Transition of the button |
| Name | Description |
| -------------------------------- | --------------------------------------------------------------------------------------------------------- |
| `--background` | Background of the button |
| `--background-activated` | Background of the button when pressed. Note: setting this will interfere with the Material Design ripple. |
| `--background-activated-opacity` | Opacity of the button when pressed |
| `--background-focused` | Background of the button when focused with the tab key |
| `--background-focused-opacity` | Opacity of the button when focused with the tab key |
| `--background-hover` | Background of the button on hover |
| `--background-hover-opacity` | Opacity of the background on hover |
| `--border-color` | Border color of the button |
| `--border-radius` | Border radius of the button |
| `--border-style` | Border style of the button |
| `--border-width` | Border width of the button |
| `--box-shadow` | Box shadow of the button |
| `--color` | Text color of the button |
| `--color-activated` | Text color of the button when pressed |
| `--color-focused` | Text color of the button when focused with the tab key |
| `--color-hover` | Text color of the button when hover |
| `--opacity` | Opacity of the button |
| `--padding-bottom` | Bottom padding of the button |
| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button |
| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button |
| `--padding-top` | Top padding of the button |
| `--ripple-color` | Color of the button ripple effect |
| `--transition` | Transition of the button |
## Dependencies

20
core/src/components/button/test/anchor/index.html
View File

@ -23,43 +23,43 @@
<ion-content class="ion-padding" id="content" no-bounce>
<p>
<ion-button href="#">Default</ion-button>
<ion-button href="#" class="activated">Default.activated</ion-button>
<ion-button href="#" class="ion-activated">Default.activated</ion-button>
</p>
<p>
<ion-button href="#" color="primary">Primary</ion-button>
<ion-button href="#" class="activated" color="primary">Primary.activated</ion-button>
<ion-button href="#" class="ion-activated" color="primary">Primary.activated</ion-button>
</p>
<p>
<ion-button href="#" color="secondary">Secondary</ion-button>
<ion-button href="#" class="activated" color="secondary">Secondary.activated</ion-button>
<ion-button href="#" class="ion-activated" color="secondary">Secondary.activated</ion-button>
</p>
<p>
<ion-button href="#" color="tertiary">Tertiary</ion-button>
<ion-button href="#" class="activated" color="tertiary">Tertiary.activated</ion-button>
<ion-button href="#" class="ion-activated" color="tertiary">Tertiary.activated</ion-button>
</p>
<p>
<ion-button href="#" color="success">Success</ion-button>
<ion-button href="#" class="activated" color="success">Success.activated</ion-button>
<ion-button href="#" class="ion-activated" color="success">Success.activated</ion-button>
</p>
<p>
<ion-button href="#" color="warning">Warning</ion-button>
<ion-button href="#" class="activated" color="warning">Warning.activated</ion-button>
<ion-button href="#" class="ion-activated" color="warning">Warning.activated</ion-button>
</p>
<p>
<ion-button href="#" color="danger">Danger</ion-button>
<ion-button href="#" class="activated" color="danger">Danger.activated</ion-button>
<ion-button href="#" class="ion-activated" color="danger">Danger.activated</ion-button>
</p>
<p>
<ion-button href="#" color="light">Light</ion-button>
<ion-button href="#" class="activated" color="light">Light.activated</ion-button>
<ion-button href="#" class="ion-activated" color="light">Light.activated</ion-button>
</p>
<p>
<ion-button href="#" color="medium">Medium</ion-button>
<ion-button href="#" class="activated" color="medium">Medium.activated</ion-button>
<ion-button href="#" class="ion-activated" color="medium">Medium.activated</ion-button>
</p>
<p>
<ion-button href="#" color="dark">Dark</ion-button>
<ion-button href="#" class="activated" color="dark">Dark.activated</ion-button>
<ion-button href="#" class="ion-activated" color="dark">Dark.activated</ion-button>
</p>
<p>
<ion-button href="#" disabled>Disabled</ion-button>

20
core/src/components/button/test/basic/index.html
View File

@ -24,61 +24,61 @@
<p>
<ion-button>Default</ion-button>
<ion-button class="ion-focused">Default.focused</ion-button>
<ion-button class="activated">Default.activated</ion-button>
<ion-button class="ion-activated">Default.activated</ion-button>
</p>
<p>
<ion-button color="primary">Primary</ion-button>
<ion-button class="ion-focused" color="primary">Primary.focused</ion-button>
<ion-button class="activated" color="primary">Primary.activated</ion-button>
<ion-button class="ion-activated" color="primary">Primary.activated</ion-button>
</p>
<p>
<ion-button color="secondary">Secondary</ion-button>
<ion-button class="ion-focused" color="secondary">Secondary.focused</ion-button>
<ion-button class="activated" color="secondary">Secondary.activated</ion-button>
<ion-button class="ion-activated" color="secondary">Secondary.activated</ion-button>
</p>
<p>
<ion-button color="tertiary">Tertiary</ion-button>
<ion-button class="ion-focused" color="tertiary">Tertiary.focused</ion-button>
<ion-button class="activated" color="tertiary">Tertiary.activated</ion-button>
<ion-button class="ion-activated" color="tertiary">Tertiary.activated</ion-button>
</p>
<p>
<ion-button color="success">Success</ion-button>
<ion-button class="ion-focused" color="success">Success.focused</ion-button>
<ion-button class="activated" color="success">Success.activated</ion-button>
<ion-button class="ion-activated" color="success">Success.activated</ion-button>
</p>
<p>
<ion-button color="warning">Warning</ion-button>
<ion-button class="ion-focused" color="warning">Warning.focused</ion-button>
<ion-button class="activated" color="warning">Warning.activated</ion-button>
<ion-button class="ion-activated" color="warning">Warning.activated</ion-button>
</p>
<p>
<ion-button color="danger">Danger</ion-button>
<ion-button class="ion-focused" color="danger">Danger.focused</ion-button>
<ion-button class="activated" color="danger">Danger.activated</ion-button>
<ion-button class="ion-activated" color="danger">Danger.activated</ion-button>
</p>
<p>
<ion-button color="light">Light</ion-button>
<ion-button class="ion-focused" color="light">Light.focused</ion-button>
<ion-button class="activated" color="light">Light.activated</ion-button>
<ion-button class="ion-activated" color="light">Light.activated</ion-button>
</p>
<p>
<ion-button color="medium">Medium</ion-button>
<ion-button class="ion-focused" color="medium">Medium.focused</ion-button>
<ion-button class="activated" color="medium">Medium.activated</ion-button>
<ion-button class="ion-activated" color="medium">Medium.activated</ion-button>
</p>
<p>
<ion-button color="dark">Dark</ion-button>
<ion-button class="ion-focused" color="dark">Dark.focused</ion-button>
<ion-button class="activated" color="dark">Dark.activated</ion-button>
<ion-button class="ion-activated" color="dark">Dark.activated</ion-button>
</p>
<p>

40
core/src/components/button/test/clear/index.html
View File

@ -23,72 +23,72 @@
<ion-content class="ion-padding" id="content" no-bounce>
<p>
<ion-button fill="clear">Default</ion-button>
<ion-button fill="clear" class="activated">Default.activated</ion-button>
<ion-button fill="clear" class="ion-activated">Default.activated</ion-button>
<ion-button fill="clear" class="ion-focused">Default.focused</ion-button>
<ion-button fill="clear" class="activated ion-focused">Default.activated.focused</ion-button>
<ion-button fill="clear" class="ion-activated ion-focused">Default.activated.focused</ion-button>
</p>
<p>
<ion-button fill="clear" color="primary">Primary</ion-button>
<ion-button fill="clear" class="activated" color="primary">Primary.activated</ion-button>
<ion-button fill="clear" class="ion-activated" color="primary">Primary.activated</ion-button>
<ion-button fill="clear" class="ion-focused" color="primary">Primary.focused</ion-button>
<ion-button fill="clear" class="activated ion-focused" color="primary">Primary.activated.focused</ion-button>
<ion-button fill="clear" class="ion-activated ion-focused" color="primary">Primary.activated.focused</ion-button>
</p>
<p>
<ion-button fill="clear" color="secondary">Secondary</ion-button>
<ion-button fill="clear" class="activated" color="secondary">Secondary.activated</ion-button>
<ion-button fill="clear" class="ion-activated" color="secondary">Secondary.activated</ion-button>
<ion-button fill="clear" class="ion-focused" color="secondary">Secondary.focused</ion-button>
<ion-button fill="clear" class="activated ion-focused" color="secondary">Secondary.activated.focused</ion-button>
<ion-button fill="clear" class="ion-activated ion-focused" color="secondary">Secondary.activated.focused</ion-button>
</p>
<p>
<ion-button fill="clear" color="tertiary">Tertiary</ion-button>
<ion-button fill="clear" class="activated" color="tertiary">Tertiary.activated</ion-button>
<ion-button fill="clear" class="ion-activated" color="tertiary">Tertiary.activated</ion-button>
<ion-button fill="clear" class="ion-focused" color="tertiary">Tertiary.focused</ion-button>
<ion-button fill="clear" class="activated ion-focused" color="tertiary">Tertiary.activated.focused</ion-button>
<ion-button fill="clear" class="ion-activated ion-focused" color="tertiary">Tertiary.activated.focused</ion-button>
</p>
<p>
<ion-button fill="clear" color="success">Success</ion-button>
<ion-button fill="clear" class="activated" color="success">Success.activated</ion-button>
<ion-button fill="clear" class="ion-activated" color="success">Success.activated</ion-button>
<ion-button fill="clear" class="ion-focused" color="success">Success.focused</ion-button>
<ion-button fill="clear" class="activated ion-focused" color="success">Success.activated.focused</ion-button>
<ion-button fill="clear" class="ion-activated ion-focused" color="success">Success.activated.focused</ion-button>
</p>
<p>
<ion-button fill="clear" color="warning">Warning</ion-button>
<ion-button fill="clear" class="activated" color="warning">Warning.activated</ion-button>
<ion-button fill="clear" class="ion-activated" color="warning">Warning.activated</ion-button>
<ion-button fill="clear" class="ion-focused" color="warning">Warning.focused</ion-button>
<ion-button fill="clear" class="activated ion-focused" color="warning">Warning.activated.focused</ion-button>
<ion-button fill="clear" class="ion-activated ion-focused" color="warning">Warning.activated.focused</ion-button>
</p>
<p>
<ion-button fill="clear" color="danger">Danger</ion-button>
<ion-button fill="clear" class="activated" color="danger">Danger.activated</ion-button>
<ion-button fill="clear" class="ion-activated" color="danger">Danger.activated</ion-button>
<ion-button fill="clear" class="ion-focused" color="danger">Danger.focused</ion-button>
<ion-button fill="clear" class="activated ion-focused" color="danger">Danger.activated.focused</ion-button>
<ion-button fill="clear" class="ion-activated ion-focused" color="danger">Danger.activated.focused</ion-button>
</p>
<p>
<ion-button fill="clear" color="light">Light</ion-button>
<ion-button fill="clear" class="activated" color="light">Light.activated</ion-button>
<ion-button fill="clear" class="ion-activated" color="light">Light.activated</ion-button>
<ion-button fill="clear" class="ion-focused" color="light">Light.focused</ion-button>
<ion-button fill="clear" class="activated ion-focused" color="light">Light.activated.focused</ion-button>
<ion-button fill="clear" class="ion-activated ion-focused" color="light">Light.activated.focused</ion-button>
</p>
<p>
<ion-button fill="clear" color="medium">Medium</ion-button>
<ion-button fill="clear" class="activated" color="medium">Medium.activated</ion-button>
<ion-button fill="clear" class="ion-activated" color="medium">Medium.activated</ion-button>
<ion-button fill="clear" class="ion-focused" color="medium">Medium.focused</ion-button>
<ion-button fill="clear" class="activated ion-focused" color="medium">Medium.activated.focused</ion-button>
<ion-button fill="clear" class="ion-activated ion-focused" color="medium">Medium.activated.focused</ion-button>
</p>
<p>
<ion-button fill="clear" color="dark">Dark</ion-button>
<ion-button fill="clear" class="activated" color="dark">Dark.activated</ion-button>
<ion-button fill="clear" class="ion-activated" color="dark">Dark.activated</ion-button>
<ion-button fill="clear" class="ion-focused" color="dark">Dark.focused</ion-button>
<ion-button fill="clear" class="activated ion-focused" color="dark">Dark.activated.focused</ion-button>
<ion-button fill="clear" class="ion-activated ion-focused" color="dark">Dark.activated.focused</ion-button>
</p>
<p>
<ion-button fill="clear" disabled>Disabled</ion-button>

40
core/src/components/button/test/outline/index.html
View File

@ -23,72 +23,72 @@
<ion-content class="ion-padding" id="content" no-bounce>
<p>
<ion-button fill="outline">Default</ion-button>
<ion-button fill="outline" class="activated">Default.activated</ion-button>
<ion-button fill="outline" class="ion-activated">Default.activated</ion-button>
<ion-button fill="outline" class="ion-focused">Default.focused</ion-button>
<ion-button fill="outline" class="activated ion-focused">Default.activated.focused</ion-button>
<ion-button fill="outline" class="ion-activated ion-focused">Default.activated.focused</ion-button>
</p>
<p>
<ion-button fill="outline" color="primary">Primary</ion-button>
<ion-button fill="outline" class="activated" color="primary">Primary.activated</ion-button>
<ion-button fill="outline" class="ion-activated" color="primary">Primary.activated</ion-button>
<ion-button fill="outline" class="ion-focused" color="primary">Primary.focused</ion-button>
<ion-button fill="outline" class="activated ion-focused" color="primary">Primary.activated.focused</ion-button>
<ion-button fill="outline" class="ion-activated ion-focused" color="primary">Primary.activated.focused</ion-button>
</p>
<p>
<ion-button fill="outline" color="secondary">Secondary</ion-button>
<ion-button fill="outline" class="activated" color="secondary">Secondary.activated</ion-button>
<ion-button fill="outline" class="ion-activated" color="secondary">Secondary.activated</ion-button>
<ion-button fill="outline" class="ion-focused" color="secondary">Secondary.focused</ion-button>
<ion-button fill="outline" class="activated ion-focused" color="secondary">Secondary.activated.focused</ion-button>
<ion-button fill="outline" class="ion-activated ion-focused" color="secondary">Secondary.activated.focused</ion-button>
</p>
<p>
<ion-button fill="outline" color="tertiary">Tertiary</ion-button>
<ion-button fill="outline" class="activated" color="tertiary">Tertiary.activated</ion-button>
<ion-button fill="outline" class="ion-activated" color="tertiary">Tertiary.activated</ion-button>
<ion-button fill="outline" class="ion-focused" color="tertiary">Tertiary.focused</ion-button>
<ion-button fill="outline" class="activated ion-focused" color="tertiary">Tertiary.activated.focused</ion-button>
<ion-button fill="outline" class="ion-activated ion-focused" color="tertiary">Tertiary.activated.focused</ion-button>
</p>
<p>
<ion-button fill="outline" color="success">Success</ion-button>
<ion-button fill="outline" class="activated" color="success">Success.activated</ion-button>
<ion-button fill="outline" class="ion-activated" color="success">Success.activated</ion-button>
<ion-button fill="outline" class="ion-focused" color="success">Success.focused</ion-button>
<ion-button fill="outline" class="activated ion-focused" color="success">Success.activated.focused</ion-button>
<ion-button fill="outline" class="ion-activated ion-focused" color="success">Success.activated.focused</ion-button>
</p>
<p>
<ion-button fill="outline" color="warning">Warning</ion-button>
<ion-button fill="outline" class="activated" color="warning">Warning.activated</ion-button>
<ion-button fill="outline" class="ion-activated" color="warning">Warning.activated</ion-button>
<ion-button fill="outline" class="ion-focused" color="warning">Warning.focused</ion-button>
<ion-button fill="outline" class="activated ion-focused" color="warning">Warning.activated.focused</ion-button>
<ion-button fill="outline" class="ion-activated ion-focused" color="warning">Warning.activated.focused</ion-button>
</p>
<p>
<ion-button fill="outline" color="danger">Danger</ion-button>
<ion-button fill="outline" class="activated" color="danger">Danger.activated</ion-button>
<ion-button fill="outline" class="ion-activated" color="danger">Danger.activated</ion-button>
<ion-button fill="outline" class="ion-focused" color="danger">Danger.focused</ion-button>
<ion-button fill="outline" class="activated ion-focused" color="danger">Danger.activated.focused</ion-button>
<ion-button fill="outline" class="ion-activated ion-focused" color="danger">Danger.activated.focused</ion-button>
</p>
<p>
<ion-button fill="outline" color="light">Light</ion-button>
<ion-button fill="outline" class="activated" color="light">Light.activated</ion-button>
<ion-button fill="outline" class="ion-activated" color="light">Light.activated</ion-button>
<ion-button fill="outline" class="ion-focused" color="light">Light.focused</ion-button>
<ion-button fill="outline" class="activated ion-focused" color="light">Light.activated.focused</ion-button>
<ion-button fill="outline" class="ion-activated ion-focused" color="light">Light.activated.focused</ion-button>
</p>
<p>
<ion-button fill="outline" color="medium">Medium</ion-button>
<ion-button fill="outline" class="activated" color="medium">Medium.activated</ion-button>
<ion-button fill="outline" class="ion-activated" color="medium">Medium.activated</ion-button>
<ion-button fill="outline" class="ion-focused" color="medium">Medium.focused</ion-button>
<ion-button fill="outline" class="activated ion-focused" color="medium">Medium.activated.focused</ion-button>
<ion-button fill="outline" class="ion-activated ion-focused" color="medium">Medium.activated.focused</ion-button>
</p>
<p>
<ion-button fill="outline" color="dark">Dark</ion-button>
<ion-button fill="outline" class="activated" color="dark">Dark.activated</ion-button>
<ion-button fill="outline" class="ion-activated" color="dark">Dark.activated</ion-button>
<ion-button fill="outline" class="ion-focused" color="dark">Dark.focused</ion-button>
<ion-button fill="outline" class="activated ion-focused" color="dark">Dark.activated.focused</ion-button>
<ion-button fill="outline" class="ion-activated ion-focused" color="dark">Dark.activated.focused</ion-button>
</p>
<p>
<ion-button fill="outline" disabled>Disabled</ion-button>

10
core/src/components/button/test/standalone/index.html
View File

@ -53,8 +53,8 @@
<!-- Custom Colors -->
<ion-button class="custom">custom</ion-button>
<ion-button class="custom activated ion-focused">custom.focused</ion-button>
<ion-button class="custom activated">custom.activated</ion-button>
<ion-button class="custom ion-activated ion-focused">custom.focused</ion-button>
<ion-button class="custom ion-activated">custom.activated</ion-button>
<ion-button color="secondary" class="custom">custom w/ secondary</ion-button>
<ion-button fill="clear" class="medium">custom medium</ion-button>
@ -71,7 +71,7 @@
<ion-toolbar>
<ion-buttons slot="start">
<ion-button class="custom">Custom</ion-button>
<ion-button class="custom activated">Custom.a</ion-button>
<ion-button class="custom ion-activated">Custom.a</ion-button>
</ion-buttons>
<ion-title>Bar</ion-title>
<ion-buttons slot="end">
@ -101,7 +101,7 @@
.custom {
--background: lightpink;
--background-hover: rgba(255, 182, 193, 0.5);
--background-hover: #ffb6c1;
--background-activated: green;
--color: #222;
--color-activated: white;
@ -110,7 +110,7 @@
.medium {
--color: #989aa2;
--background-hover: rgba(152, 154, 162, 0.4);
--background-hover: #989aa2;
}
</style>
</body>

10
core/src/components/button/test/states/e2e.ts Normal file
View File

@ -0,0 +1,10 @@
import { newE2EPage } from '@stencil/core/testing';
test('button: states', async () => {
const page = await newE2EPage({
url: '/src/components/button/test/states?ionic:_testing=true'
});
const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
});

115
core/src/components/button/test/states/index.html Normal file
View File

@ -0,0 +1,115 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Button - States</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/core.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
<script src="../../../../../scripts/testing/scripts.js"></script>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
<body>
<ion-app>
<ion-content>
<h3>Default</h3>
<p>
<ion-button>Default</ion-button>
<ion-button><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
<ion-button shape="round">Round</ion-button>
<ion-button fill="outline">Outline</ion-button>
<ion-button fill="clear">Clear</ion-button>
<ion-button color="secondary">Default</ion-button>
<ion-button color="tertiary"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
<ion-button color="danger" shape="round">Round</ion-button>
<ion-button color="warning" fill="outline">Outline</ion-button>
<ion-button color="dark" fill="clear">Clear</ion-button>
</p>
<h3>Focused</h3>
<p>
<ion-button class="ion-focused">Default</ion-button>
<ion-button class="ion-focused"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
<ion-button class="ion-focused" shape="round">Round</ion-button>
<ion-button class="ion-focused" fill="outline">Outline</ion-button>
<ion-button class="ion-focused" fill="clear">Clear</ion-button>
<ion-button class="ion-focused" color="secondary">Default</ion-button>
<ion-button class="ion-focused" color="tertiary"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
<ion-button class="ion-focused" color="danger" shape="round">Round</ion-button>
<ion-button class="ion-focused" color="warning" fill="outline">Outline</ion-button>
<ion-button class="ion-focused" color="dark" fill="clear">Clear</ion-button>
</p>
<h3>Activated</h3>
<p>
<ion-button class="ion-activated">Default</ion-button>
<ion-button class="ion-activated"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
<ion-button class="ion-activated" shape="round">Round</ion-button>
<ion-button class="ion-activated" fill="outline">Outline</ion-button>
<ion-button class="ion-activated" fill="clear">Clear</ion-button>
<ion-button class="ion-activated" color="secondary">Default</ion-button>
<ion-button class="ion-activated" color="tertiary"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
<ion-button class="ion-activated" color="danger" shape="round">Round</ion-button>
<ion-button class="ion-activated" color="warning" fill="outline">Outline</ion-button>
<ion-button class="ion-activated" color="dark" fill="clear">Clear</ion-button>
</p>
<h3>Custom</h3>
<p>
<ion-button class="custom">Default</ion-button>
<ion-button class="custom"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
<ion-button class="custom" shape="round">Round</ion-button>
<ion-button class="custom" fill="outline">Outline</ion-button>
<ion-button class="custom" fill="clear">Clear</ion-button>
<ion-button class="custom" color="secondary">Default</ion-button>
<ion-button class="custom" color="tertiary"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
<ion-button class="custom" color="danger" shape="round">Round</ion-button>
<ion-button class="custom" color="warning" fill="outline">Outline</ion-button>
<ion-button class="custom" color="dark" fill="clear">Clear</ion-button>
<ion-button class="custom ion-focused">Default</ion-button>
<ion-button class="custom ion-focused"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
<ion-button class="custom ion-focused" shape="round">Round</ion-button>
<ion-button class="custom ion-focused" fill="outline">Outline</ion-button>
<ion-button class="custom ion-focused" fill="clear">Clear</ion-button>
<ion-button class="custom ion-focused" color="secondary">Default</ion-button>
<ion-button class="custom ion-focused" color="tertiary"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
<ion-button class="custom ion-focused" color="danger" shape="round">Round</ion-button>
<ion-button class="custom ion-focused" color="warning" fill="outline">Outline</ion-button>
<ion-button class="custom ion-focused" color="dark" fill="clear">Clear</ion-button>
<ion-button class="custom ion-activated">Default</ion-button>
<ion-button class="custom ion-activated"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
<ion-button class="custom ion-activated" shape="round">Round</ion-button>
<ion-button class="custom ion-activated" fill="outline">Outline</ion-button>
<ion-button class="custom ion-activated" fill="clear">Clear</ion-button>
<ion-button class="custom ion-activated" color="secondary">Default</ion-button>
<ion-button class="custom ion-activated" color="tertiary"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
<ion-button class="custom ion-activated" color="danger" shape="round">Round</ion-button>
<ion-button class="custom ion-activated" color="warning" fill="outline">Outline</ion-button>
<ion-button class="custom ion-activated" color="dark" fill="clear">Clear</ion-button>
</p>
</ion-content>
</ion-app>
<style>
.custom {
--background-hover: red;
--background-hover-opacity: 1;
--background-focused: green;
--background-activated: blue;
}
.custom:hover {
opacity: 1;
}
/* TODO should this inherit or users set all */
.custom {
--color: red;
}
</style>
</body>
</html>

18
core/src/components/button/test/toolbar/index.html
View File

@ -99,15 +99,15 @@
<ion-toolbar>
<ion-buttons slot="secondary">
<ion-button class="activated">
<ion-button class="ion-activated">
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button>
<ion-button class="activated">
<ion-button class="ion-activated">
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button color="secondary" class="activated">
<ion-button color="secondary" class="ion-activated">
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
@ -135,17 +135,17 @@
<ion-toolbar>
<ion-buttons slot="secondary">
<ion-button fill="solid" class="activated">
<ion-button fill="solid" class="ion-activated">
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button>
<ion-button fill="solid" class="activated">
<ion-button fill="solid" class="ion-activated">
<ion-icon name="person-circle" slot="start"></ion-icon>
Solid
</ion-button>
</ion-buttons>
<ion-title>Solid Activated</ion-title>
<ion-buttons slot="primary">
<ion-button fill="solid" shape="round" color="secondary" class="activated">
<ion-button fill="solid" shape="round" color="secondary" class="ion-activated">
Help
<ion-icon name="help-circle" slot="end"></ion-icon>
</ion-button>
@ -172,16 +172,16 @@
<ion-toolbar>
<ion-buttons slot="secondary">
<ion-button fill="outline" class="activated">
<ion-button fill="outline" class="ion-activated">
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button>
<ion-button fill="outline" class="activated">
<ion-button fill="outline" class="ion-activated">
<ion-icon name="star" slot="start"></ion-icon>
Star
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button color="secondary" fill="outline" class="activated">
<ion-button color="secondary" fill="outline" class="ion-activated">
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button>
</ion-buttons>