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

feat(fab-button): add hover state using tint colors (#18536)

Browse Source 
- fixes a bug where backdrop filter was not applied on translucent buttons and checks for support first

references #17624
This commit is contained in:
Brandy Carney
2019-06-25 17:26:29 -04:00
committed by GitHub
parent 598a13ecc0
commit ad00679da9
9 changed files with 122 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/api.txt
View File

@ -360,6 +360,7 @@ ion-fab-button,event,ionFocus,void,true
ion-fab-button,css-prop,--background
ion-fab-button,css-prop,--background-activated
ion-fab-button,css-prop,--background-focused
ion-fab-button,css-prop,--background-hover
ion-fab-button,css-prop,--border-color
ion-fab-button,css-prop,--border-radius
ion-fab-button,css-prop,--border-style
@ -368,6 +369,7 @@ ion-fab-button,css-prop,--box-shadow
ion-fab-button,css-prop,--color
ion-fab-button,css-prop,--color-activated
ion-fab-button,css-prop,--color-focused
ion-fab-button,css-prop,--color-hover
ion-fab-button,css-prop,--padding-bottom
ion-fab-button,css-prop,--padding-end
ion-fab-button,css-prop,--padding-start

4
core/src/components.d.ts vendored
View File

@ -815,7 +815,7 @@ export namespace Components {
*/
'target': string | undefined;
/**
* If `true`, the fab button will be translucent.
* If `true`, the fab button will be translucent. Only applies to `ios` mode on devices that support [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
*/
'translucent': boolean;
/**
@ -4160,7 +4160,7 @@ declare namespace LocalJSX {
*/
'target'?: string | undefined;
/**
* If `true`, the fab button will be translucent.
* If `true`, the fab button will be translucent. Only applies to `ios` mode on devices that support [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
*/
'translucent'?: boolean;
/**

41
core/src/components/fab-button/fab-button.ios.scss
View File

@ -33,6 +33,7 @@
--background: #{$fab-ios-list-button-background-color};
--background-activated: #{$fab-ios-list-button-background-color-activated};
--background-focused: var(--background-activated);
--background-hover: #{$fab-ios-list-button-background-color-hover};
--color: #{$fab-ios-list-button-text-color};
--color-activated: #{$fab-ios-list-button-text-color};
--color-focused: var(--color-activated);
@ -48,23 +49,37 @@
// Translucent FAB buttons
// --------------------------------------------------
:host(.fab-button-translucent) {
--background: #{$fab-ios-translucent-background-color};
--backdrop-filter: #{$fab-ios-translucent-filter};
}
@supports (backdrop-filter: blur(0)) {
:host(.fab-button-translucent) {
--background: #{ion-color(primary, base, $fab-ios-translucent-background-alpha)};
--background-hover: #{ion-color(primary, base, $fab-ios-translucent-background-alpha-hover)};
--background-focused: #{ion-color(primary, base, $fab-ios-translucent-background-alpha-focused)};
--backdrop-filter: #{$fab-ios-translucent-filter};
}
:host(.fab-button-translucent-in-list) {
--background: #{$fab-ios-list-button-translucent-background-color};
:host(.fab-button-translucent-in-list) {
--background: #{ion-color(light, base, $fab-ios-translucent-background-alpha)};
--background-hover: #{ion-color(light, base, $fab-ios-translucent-background-alpha-hover)};
--background-focused: #{ion-color(light, base, $fab-ios-translucent-background-alpha-focused)};
}
}
// Translucent FAB buttons with color
// --------------------------------------------------
:host(.ion-color.fab-button-translucent) .button-native {
background: #{current-color(base, $fab-ios-translucent-background-color-alpha)};
}
@supports (backdrop-filter: blur(0)) {
@media (any-hover: hover) {
:host(.fab-button-translucent.ion-color:hover) .button-native {
background: #{current-color(base, $fab-ios-translucent-background-alpha-hover)};
}
}
:host(.ion-color.ion-focused.fab-button-translucent) .button-native,
:host(.ion-color.activated.fab-button-translucent) .button-native {
background: #{current-color(base)};
}
:host(.ion-color.fab-button-translucent) .button-native {
background: #{current-color(base, $fab-ios-translucent-background-alpha)};
}
:host(.ion-color.ion-focused.fab-button-translucent) .button-native,
:host(.ion-color.activated.fab-button-translucent) .button-native {
background: #{current-color(base)};
}
}

30
core/src/components/fab-button/fab-button.ios.vars.scss
View File

@ -24,18 +24,9 @@ $fab-ios-background-color: ion-color(primary,
/// @prop - Background color of the activated button
$fab-ios-background-color-activated: ion-color(primary, shade) !default;
/// @prop - Background color alpha of the button in translucent mode
$fab-ios-translucent-background-color-alpha: .9 !default;
/// @prop - Background color of the button in translucent mode
$fab-ios-translucent-background-color: ion-color(primary, base, $fab-ios-translucent-background-color-alpha) !default;
/// @prop - Text color of the button
$fab-ios-text-color: ion-color(primary, contrast) !default;
/// @prop - Color of the button icon
$fab-ios-icon-fill-color: $fab-ios-text-color !default;
/// @prop - Font size of the button icon
$fab-ios-icon-font-size: 28px !default;
@ -45,17 +36,26 @@ $fab-ios-list-button-background-color: ion-color(light, b
/// @prop - Background color of the activated button in a list
$fab-ios-list-button-background-color-activated: ion-color(light, shade) !default;
/// @prop - Background color of the hovered button in a list
$fab-ios-list-button-background-color-hover: ion-color(light, tint) !default;
/// @prop - Text color of the button in a list
$fab-ios-list-button-text-color: ion-color(light, contrast) !default;
/// @prop - Font size of the button icon in a list
$fab-ios-list-button-icon-font-size: 18px !default;
/// @prop - Background color of the button in a list
$fab-ios-list-button-translucent-background-color-alpha: .8 !default;
// Translucent FAB Button
// --------------------------------------------------
/// @prop - Background color of the button in a list
$fab-ios-list-button-translucent-background-color: rgba($background-color-rgb, $fab-ios-list-button-translucent-background-color-alpha) !default;
/// @prop - Filter of the translucent fab
/// @prop - Backdrop filter of the translucent button
$fab-ios-translucent-filter: saturate(180%) blur(20px) !default;
/// @prop - Alpha level of the translucent button background
$fab-ios-translucent-background-alpha: .9 !default;
/// @prop - Alpha level of the translucent button background on hover
$fab-ios-translucent-background-alpha-hover: .8 !default;
/// @prop - Alpha level of the translucent button background on focus
$fab-ios-translucent-background-alpha-focused: .82 !default;

1
core/src/components/fab-button/fab-button.md.scss
View File

@ -41,6 +41,7 @@
--background: #{$fab-md-list-button-background-color};
--background-activated: #{$fab-md-list-button-background-color-activated};
--background-focused: var(--background-activated);
--background-hover: #{$fab-md-list-button-background-color-hover};
}
:host(.fab-button-in-list) ::slotted(ion-icon) {

3
core/src/components/fab-button/fab-button.md.vars.scss
View File

@ -27,6 +27,9 @@ $fab-md-list-button-background-color: ion-color(light, base) !defaul
/// @prop - Background color of the activated button in a list
$fab-md-list-button-background-color-activated: ion-color(light, shade) !default;
/// @prop - Background color of the activated button in a list
$fab-md-list-button-background-color-hover: ion-color(light, tint) !default;
/// @prop - Text color of the button in a list
$fab-md-list-button-text-color: rgba(var(--ion-text-color-rgb, $text-color-rgb), 0.54) !default;

94
core/src/components/fab-button/fab-button.scss
View File

@ -8,10 +8,12 @@
* @prop --background: Background of the button
* @prop --background-activated: Background of the button when pressed
* @prop --background-focused: Background of the button when focused with the tab key
* @prop --background-hover: Background of the button on hover
*
* @prop --color: Text color of the button
* @prop --color-activated: Text color of the button when pressed
* @prop --color-focused: Text color of the button when focused with the tab key
* @prop --color-hover: Text color of the button on hover
*
* @prop --transition: Transition of the button
*
@ -29,6 +31,8 @@
* @prop --padding-bottom: Bottom padding of the button
* @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button
*/
--color-hover: #{var(--color)};
--background-hover: #{ion-color(primary, tint)};
--transition: background-color, opacity 100ms linear;
--ripple-color: currentColor;
--border-radius: #{$fab-border-radius};
@ -57,22 +61,6 @@
}
// FAB with Color
// --------------------------------------------------
// Default Button with Color
:host(.ion-color) .button-native {
background: #{current-color(base)};
color: #{current-color(contrast)};
}
// Focused/Activated Button with Color
:host(.ion-color.ion-focused) .button-native,
:host(.ion-color.activated) .button-native {
background: #{current-color(shade)};
color: #{current-color(contrast)};
}
.button-native {
@include border-radius(var(--border-radius));
@include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
@ -131,32 +119,73 @@
}
// FAB States
// FAB Button: Color
// --------------------------------------------------
// Activated / Pressed Button
:host(.activated) .button-native {
background: var(--background-activated);
color: var(--color-activated);
:host(.ion-color) .button-native {
background: #{current-color(base)};
color: #{current-color(contrast)};
}
// Focused Button
:host(.ion-focused) .button-native {
background: var(--background-focused);
color: var(--color-focused);
}
// Disabled Button
// FAB Button: Disabled
// --------------------------------------------------
:host(.fab-button-disabled) {
--opacity: .5;
pointer-events: none;
}
:host(.fab-button-disabled) .button-native {
cursor: default;
opacity: .5;
pointer-events: none;
}
// FAB Button: Hover
// --------------------------------------------------
@media (any-hover: hover) {
:host(:hover) .button-native {
background: var(--background-hover);
color: var(--color-hover);
}
:host(.ion-color:hover) .button-native {
background: #{current-color(tint)};
color: #{current-color(contrast)};
}
}
// FAB Button: Focused
// --------------------------------------------------
:host(.ion-focused) .button-native {
background: var(--background-focused);
color: var(--color-focused);
}
:host(.ion-color.ion-focused) .button-native {
background: #{current-color(shade)};
}
// FAB Button: Activated
// --------------------------------------------------
:host(.activated) .button-native {
background: var(--background-activated);
color: var(--color-activated);
}
// Focused/Activated Button with Color
:host(.ion-color.ion-focused) .button-native,
:host(.ion-color.activated) .button-native {
background: #{current-color(shade)};
color: #{current-color(contrast)};
}
// FAB Content
// --------------------------------------------------
@ -215,3 +244,12 @@
ion-ripple-effect {
color: var(--ripple-color);
}
// Translucent FAB button
// --------------------------------------------------
@supports (backdrop-filter: blur(0)) {
:host(.fab-button-translucent) .button-native {
backdrop-filter: var(--backdrop-filter);
}
}

2
core/src/components/fab-button/fab-button.tsx
View File

@ -76,6 +76,8 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
/**
* If `true`, the fab button will be translucent.
* Only applies to `ios` mode on devices that support
* [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
*/
@Prop() translucent = false;

4
core/src/components/fab-button/readme.md
View File

@ -111,7 +111,7 @@ export const FabButtonExample: React.FunctionComponent = () => (
| `show` | `show` | If `true`, the fab button will show when in a fab-list. | `boolean` | `false` |
| `size` | `size` | The size of the button. Set this to `small` in order to have a mini fab. | `"small" \| undefined` | `undefined` |
| `target` | `target` | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. | `string \| undefined` | `undefined` |
| `translucent` | `translucent` | If `true`, the fab button will be translucent. | `boolean` | `false` |
| `translucent` | `translucent` | If `true`, the fab button will be translucent. Only applies to `ios` mode on devices that support [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` |
| `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` |
@ -130,6 +130,7 @@ export const FabButtonExample: React.FunctionComponent = () => (
| `--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 |
@ -138,6 +139,7 @@ export const FabButtonExample: React.FunctionComponent = () => (
| `--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 on hover |
| `--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 |