Description
Feature Request
Ionic version:
master
Branch created with the beginning of the non-breaking changes: https://github.com/ionic-team/ionic/tree/non-breaking-button-states
Describe the Feature Request
Add hover, focused, activated state to missing button components.
The following pull request made some major changes to the way we set hover, activated & focused: #19440
This allows users to customize the button by changing the color once and not having to know the opacity of each state. That change only applied to components with existing hover states due to it being breaking, the following need to be added:
Name | Existing Hover (master ) |
Updated Hover? | Updated Activated? | Updated Focused? |
---|---|---|---|---|
Alert (Buttons) | ⬜ | ⬜ | ⬜ | ⬜ |
Card | ⬜ | ⬜ | ⬜ | ⬜ |
Checkbox | ⬜ | ⬜ | ⬜ | ⬜ |
Chip | ⬜ | ⬜ | ⬜ | ⬜ |
Item Option | ⬜ | ✅ | ⬜ | ⬜ |
Picker (Buttons) | ⬜ | ✅ | ⬜ | ⬜ |
Radio | ⬜ | ⬜ | ⬜ | ⬜ |
Tab Button | ⬜ | ⬜ | ⬜ | ✅ |
Toast (Buttons) | ⬜ | ⬜ | ⬜ | ⬜ |
Toggle | ⬜ | ⬜ | ⬜ | ⬜ |
- Alert needs hovers on the buttons and tappable items
- Router link is just an anchor, should it have an underline or follow MD design for clear buttons?
- Buttons (in overlays) should be named
--button-background-hover
Activated Components
Components that have --background-activated
& --color-activated
or --button-background-activated
& --button-color-activated
for overlays.
- action-sheet (MISSING
--button-color-activated
) - button
- fab-button
- item
Hover Components
Components that have --background-hover
& --color-hover
or --button-background-hover
& --button-color-hover
for overlays.
- action-sheet
- back-button
- button
- fab-button
- item-option (MISSING
--color-hover
) - item
- menu-button
- picker (MISSING
--button-color-hover
) - segment-button
Focused Components
Components that have --background-focused
& --color-focused
or --button-background-focused
& --button-color-focused
for overlays.
- back-button
- button
- fab-button
- item
- menu-button
- tab-button (MISSING
--color-focused
)