Skip to content

feat: add CSS theming variables for focused & hover elements #18279

Open
@brandyscarney

Description

@brandyscarney

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)

Metadata

Metadata

Assignees

No one assigned

    Labels

    desktopDesktop related issuespackage: core@ionic/core packagetype: feature requesta new feature, enhancement, or improvement

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions