From ad00679da97c1c3d779afbe80505760b03043559 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Tue, 25 Jun 2019 17:26:29 -0400 Subject: [PATCH] feat(fab-button): add hover state using tint colors (#18536) - fixes a bug where backdrop filter was not applied on translucent buttons and checks for support first references #17624 --- core/api.txt | 2 + core/src/components.d.ts | 4 +- .../components/fab-button/fab-button.ios.scss | 41 +++++--- .../fab-button/fab-button.ios.vars.scss | 30 +++--- .../components/fab-button/fab-button.md.scss | 1 + .../fab-button/fab-button.md.vars.scss | 3 + .../src/components/fab-button/fab-button.scss | 94 +++++++++++++------ core/src/components/fab-button/fab-button.tsx | 2 + core/src/components/fab-button/readme.md | 4 +- 9 files changed, 122 insertions(+), 59 deletions(-) diff --git a/core/api.txt b/core/api.txt index 54a3d8993f..56fc0d66ff 100644 --- a/core/api.txt +++ b/core/api.txt @@ -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 diff --git a/core/src/components.d.ts b/core/src/components.d.ts index c8e9a11e5b..c4618d2408 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -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; /** diff --git a/core/src/components/fab-button/fab-button.ios.scss b/core/src/components/fab-button/fab-button.ios.scss index 31388a8f52..178b7a892b 100755 --- a/core/src/components/fab-button/fab-button.ios.scss +++ b/core/src/components/fab-button/fab-button.ios.scss @@ -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)}; + } +} \ No newline at end of file diff --git a/core/src/components/fab-button/fab-button.ios.vars.scss b/core/src/components/fab-button/fab-button.ios.vars.scss index da7ffa1da9..1d1faa392a 100755 --- a/core/src/components/fab-button/fab-button.ios.vars.scss +++ b/core/src/components/fab-button/fab-button.ios.vars.scss @@ -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; diff --git a/core/src/components/fab-button/fab-button.md.scss b/core/src/components/fab-button/fab-button.md.scss index 8757d76685..ebdca4507e 100755 --- a/core/src/components/fab-button/fab-button.md.scss +++ b/core/src/components/fab-button/fab-button.md.scss @@ -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) { diff --git a/core/src/components/fab-button/fab-button.md.vars.scss b/core/src/components/fab-button/fab-button.md.vars.scss index e90c20d2d2..58f64611d4 100755 --- a/core/src/components/fab-button/fab-button.md.vars.scss +++ b/core/src/components/fab-button/fab-button.md.vars.scss @@ -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; diff --git a/core/src/components/fab-button/fab-button.scss b/core/src/components/fab-button/fab-button.scss index 197a260531..ae24110897 100755 --- a/core/src/components/fab-button/fab-button.scss +++ b/core/src/components/fab-button/fab-button.scss @@ -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); + } +} \ No newline at end of file diff --git a/core/src/components/fab-button/fab-button.tsx b/core/src/components/fab-button/fab-button.tsx index 30f9176e35..2ef79c0210 100755 --- a/core/src/components/fab-button/fab-button.tsx +++ b/core/src/components/fab-button/fab-button.tsx @@ -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; diff --git a/core/src/components/fab-button/readme.md b/core/src/components/fab-button/readme.md index 22229899ed..ad800402e5 100644 --- a/core/src/components/fab-button/readme.md +++ b/core/src/components/fab-button/readme.md @@ -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 |