Skip to content

fix(button): buttons using fill and color properties now account for hover and focused variables #23442

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Jun 21, 2021
Merged

fix(button): buttons using fill and color properties now account for hover and focused variables #23442

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
1720014
account for css vars with focus and hover when using color
liamdebeasi Jun 10, 2021
aeaba90
do not allow overriding of background
liamdebeasi Jun 21, 2021
bb1676e
add test
liamdebeasi Jun 21, 2021
6815b40
remove redundant tests
liamdebeasi Jun 21, 2021
f91f9a5
code cleanup
liamdebeasi Jun 21, 2021
48a789c
remove unnecessary override
liamdebeasi Jun 21, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 7 additions & 8 deletions core/src/components/button/button.md.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,30 +129,29 @@
// Material Design Button: Hover
// --------------------------------------------------

/**
* Only allow overriding of opacity here
* as developers should not be overriding
* colors when using the color prop.
*/

:host(.button-solid.ion-color.ion-focused) .button-native::after {
background: #{current-color(contrast)};

opacity: .24;
}

:host(.button-clear.ion-color.ion-focused) .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::after {
background: #{current-color(contrast)};

opacity: .08;
}

:host(.button-clear.ion-color:hover) .button-native::after,
:host(.button-outline.ion-color:hover) .button-native::after {
background: #{current-color(base)};

opacity: .04;
}
}
1 change: 1 addition & 0 deletions core/src/components/button/test/outline/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,7 @@
<ion-button fill="outline" class="ion-focused" color="dark">Dark.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>
<ion-button fill="outline" color="secondary" disabled>Secondary Disabled</ion-button>
Expand Down
36 changes: 36 additions & 0 deletions core/src/components/button/test/states/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,31 @@ <h3>Custom</h3>
<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>

<div class="custom-variables">
<ion-button>Button</ion-button>
<ion-button fill="clear">Button</ion-button>
<ion-button fill="outline">Button</ion-button>

<br>

<ion-button class="ion-focused">Button</ion-button>
<ion-button class="ion-focused" fill="clear">Button</ion-button>
<ion-button class="ion-focused" fill="outline">Button</ion-button>

<br>

<ion-button color="tertiary">Button</ion-button>
<ion-button color="tertiary" fill="clear">Button</ion-button>
<ion-button color="tertiary" fill="outline">Button</ion-button>

<br>

<ion-button color="tertiary" class="ion-focused">Button</ion-button>
<ion-button color="tertiary" class="ion-focused" fill="clear">Button</ion-button>
<ion-button color="tertiary" class="ion-focused" fill="outline">Button</ion-button>
</div>

</ion-content>
</ion-app>

Expand All @@ -110,6 +135,17 @@ <h3>Custom</h3>
.custom {
--color: red;
}

.custom-variables ion-button {
--color: black;

--background: pink;
--background-focused: red;
--background-hover: green;

--background-focused-opacity: .5;
--background-hover-opacity: .5;
}
</style>
</body>
</html>