Skip to content

Commit ad00679

Browse files
brandyscarneybrandyscarney
authored
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
1 parent 598a13e commit ad00679

File tree

9 files changed

+122
-59
lines changed

9 files changed

+122
-59
lines changed

‎core/api.txt

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -360,6 +360,7 @@ ion-fab-button,event,ionFocus,void,true
360360
ion-fab-button,css-prop,--background
361361
ion-fab-button,css-prop,--background-activated
362362
ion-fab-button,css-prop,--background-focused
363+
ion-fab-button,css-prop,--background-hover
363364
ion-fab-button,css-prop,--border-color
364365
ion-fab-button,css-prop,--border-radius
365366
ion-fab-button,css-prop,--border-style
@@ -368,6 +369,7 @@ ion-fab-button,css-prop,--box-shadow
368369
ion-fab-button,css-prop,--color
369370
ion-fab-button,css-prop,--color-activated
370371
ion-fab-button,css-prop,--color-focused
372+
ion-fab-button,css-prop,--color-hover
371373
ion-fab-button,css-prop,--padding-bottom
372374
ion-fab-button,css-prop,--padding-end
373375
ion-fab-button,css-prop,--padding-start

‎core/src/components.d.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -815,7 +815,7 @@ export namespace Components {
815815
*/
816816
'target': string | undefined;
817817
/**
818-
* If `true`, the fab button will be translucent.
818+
* 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).
819819
*/
820820
'translucent': boolean;
821821
/**
@@ -4160,7 +4160,7 @@ declare namespace LocalJSX {
41604160
*/
41614161
'target'?: string | undefined;
41624162
/**
4163-
* If `true`, the fab button will be translucent.
4163+
* 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).
41644164
*/
41654165
'translucent'?: boolean;
41664166
/**

‎core/src/components/fab-button/fab-button.ios.scss

Lines changed: 28 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
--background: #{$fab-ios-list-button-background-color};
3434
--background-activated: #{$fab-ios-list-button-background-color-activated};
3535
--background-focused: var(--background-activated);
36+
--background-hover: #{$fab-ios-list-button-background-color-hover};
3637
--color: #{$fab-ios-list-button-text-color};
3738
--color-activated: #{$fab-ios-list-button-text-color};
3839
--color-focused: var(--color-activated);
@@ -48,23 +49,37 @@
4849
// Translucent FAB buttons
4950
// --------------------------------------------------
5051

51-
:host(.fab-button-translucent) {
52-
--background: #{$fab-ios-translucent-background-color};
53-
--backdrop-filter: #{$fab-ios-translucent-filter};
54-
}
52+
@supports (backdrop-filter: blur(0)) {
53+
:host(.fab-button-translucent) {
54+
--background: #{ion-color(primary, base, $fab-ios-translucent-background-alpha)};
55+
--background-hover: #{ion-color(primary, base, $fab-ios-translucent-background-alpha-hover)};
56+
--background-focused: #{ion-color(primary, base, $fab-ios-translucent-background-alpha-focused)};
57+
--backdrop-filter: #{$fab-ios-translucent-filter};
58+
}
5559

56-
:host(.fab-button-translucent-in-list) {
57-
--background: #{$fab-ios-list-button-translucent-background-color};
60+
:host(.fab-button-translucent-in-list) {
61+
--background: #{ion-color(light, base, $fab-ios-translucent-background-alpha)};
62+
--background-hover: #{ion-color(light, base, $fab-ios-translucent-background-alpha-hover)};
63+
--background-focused: #{ion-color(light, base, $fab-ios-translucent-background-alpha-focused)};
64+
}
5865
}
5966

6067
// Translucent FAB buttons with color
6168
// --------------------------------------------------
6269

63-
:host(.ion-color.fab-button-translucent) .button-native {
64-
background: #{current-color(base, $fab-ios-translucent-background-color-alpha)};
65-
}
70+
@supports (backdrop-filter: blur(0)) {
71+
@media (any-hover: hover) {
72+
:host(.fab-button-translucent.ion-color:hover) .button-native {
73+
background: #{current-color(base, $fab-ios-translucent-background-alpha-hover)};
74+
}
75+
}
6676

67-
:host(.ion-color.ion-focused.fab-button-translucent) .button-native,
68-
:host(.ion-color.activated.fab-button-translucent) .button-native {
69-
background: #{current-color(base)};
70-
}
77+
:host(.ion-color.fab-button-translucent) .button-native {
78+
background: #{current-color(base, $fab-ios-translucent-background-alpha)};
79+
}
80+
81+
:host(.ion-color.ion-focused.fab-button-translucent) .button-native,
82+
:host(.ion-color.activated.fab-button-translucent) .button-native {
83+
background: #{current-color(base)};
84+
}
85+
}

‎core/src/components/fab-button/fab-button.ios.vars.scss

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -24,18 +24,9 @@ $fab-ios-background-color: ion-color(primary,
2424
/// @prop - Background color of the activated button
2525
$fab-ios-background-color-activated: ion-color(primary, shade) !default;
2626

27-
/// @prop - Background color alpha of the button in translucent mode
28-
$fab-ios-translucent-background-color-alpha: .9 !default;
29-
30-
/// @prop - Background color of the button in translucent mode
31-
$fab-ios-translucent-background-color: ion-color(primary, base, $fab-ios-translucent-background-color-alpha) !default;
32-
3327
/// @prop - Text color of the button
3428
$fab-ios-text-color: ion-color(primary, contrast) !default;
3529

36-
/// @prop - Color of the button icon
37-
$fab-ios-icon-fill-color: $fab-ios-text-color !default;
38-
3930
/// @prop - Font size of the button icon
4031
$fab-ios-icon-font-size: 28px !default;
4132

@@ -45,17 +36,26 @@ $fab-ios-list-button-background-color: ion-color(light, b
4536
/// @prop - Background color of the activated button in a list
4637
$fab-ios-list-button-background-color-activated: ion-color(light, shade) !default;
4738

39+
/// @prop - Background color of the hovered button in a list
40+
$fab-ios-list-button-background-color-hover: ion-color(light, tint) !default;
41+
4842
/// @prop - Text color of the button in a list
4943
$fab-ios-list-button-text-color: ion-color(light, contrast) !default;
5044

5145
/// @prop - Font size of the button icon in a list
5246
$fab-ios-list-button-icon-font-size: 18px !default;
5347

54-
/// @prop - Background color of the button in a list
55-
$fab-ios-list-button-translucent-background-color-alpha: .8 !default;
56-
57-
/// @prop - Background color of the button in a list
58-
$fab-ios-list-button-translucent-background-color: rgba($background-color-rgb, $fab-ios-list-button-translucent-background-color-alpha) !default;
48+
// Translucent FAB Button
49+
// --------------------------------------------------
5950

60-
/// @prop - Filter of the translucent fab
51+
/// @prop - Backdrop filter of the translucent button
6152
$fab-ios-translucent-filter: saturate(180%) blur(20px) !default;
53+
54+
/// @prop - Alpha level of the translucent button background
55+
$fab-ios-translucent-background-alpha: .9 !default;
56+
57+
/// @prop - Alpha level of the translucent button background on hover
58+
$fab-ios-translucent-background-alpha-hover: .8 !default;
59+
60+
/// @prop - Alpha level of the translucent button background on focus
61+
$fab-ios-translucent-background-alpha-focused: .82 !default;

‎core/src/components/fab-button/fab-button.md.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@
4141
--background: #{$fab-md-list-button-background-color};
4242
--background-activated: #{$fab-md-list-button-background-color-activated};
4343
--background-focused: var(--background-activated);
44+
--background-hover: #{$fab-md-list-button-background-color-hover};
4445
}
4546

4647
:host(.fab-button-in-list) ::slotted(ion-icon) {

‎core/src/components/fab-button/fab-button.md.vars.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,9 @@ $fab-md-list-button-background-color: ion-color(light, base) !defaul
2727
/// @prop - Background color of the activated button in a list
2828
$fab-md-list-button-background-color-activated: ion-color(light, shade) !default;
2929

30+
/// @prop - Background color of the activated button in a list
31+
$fab-md-list-button-background-color-hover: ion-color(light, tint) !default;
32+
3033
/// @prop - Text color of the button in a list
3134
$fab-md-list-button-text-color: rgba(var(--ion-text-color-rgb, $text-color-rgb), 0.54) !default;
3235

‎core/src/components/fab-button/fab-button.scss

Lines changed: 66 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,12 @@
88
* @prop --background: Background of the button
99
* @prop --background-activated: Background of the button when pressed
1010
* @prop --background-focused: Background of the button when focused with the tab key
11+
* @prop --background-hover: Background of the button on hover
1112
*
1213
* @prop --color: Text color of the button
1314
* @prop --color-activated: Text color of the button when pressed
1415
* @prop --color-focused: Text color of the button when focused with the tab key
16+
* @prop --color-hover: Text color of the button on hover
1517
*
1618
* @prop --transition: Transition of the button
1719
*
@@ -29,6 +31,8 @@
2931
* @prop --padding-bottom: Bottom padding of the button
3032
* @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button
3133
*/
34+
--color-hover: #{var(--color)};
35+
--background-hover: #{ion-color(primary, tint)};
3236
--transition: background-color, opacity 100ms linear;
3337
--ripple-color: currentColor;
3438
--border-radius: #{$fab-border-radius};
@@ -57,22 +61,6 @@
5761
}
5862

5963

60-
// FAB with Color
61-
// --------------------------------------------------
62-
63-
// Default Button with Color
64-
:host(.ion-color) .button-native {
65-
background: #{current-color(base)};
66-
color: #{current-color(contrast)};
67-
}
68-
69-
// Focused/Activated Button with Color
70-
:host(.ion-color.ion-focused) .button-native,
71-
:host(.ion-color.activated) .button-native {
72-
background: #{current-color(shade)};
73-
color: #{current-color(contrast)};
74-
}
75-
7664
.button-native {
7765
@include border-radius(var(--border-radius));
7866
@include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
@@ -131,32 +119,73 @@
131119
}
132120

133121

134-
// FAB States
122+
// FAB Button: Color
135123
// --------------------------------------------------
136124

137-
// Activated / Pressed Button
138-
:host(.activated) .button-native {
139-
background: var(--background-activated);
140-
color: var(--color-activated);
125+
:host(.ion-color) .button-native {
126+
background: #{current-color(base)};
127+
color: #{current-color(contrast)};
141128
}
142129

143-
// Focused Button
144-
:host(.ion-focused) .button-native {
145-
background: var(--background-focused);
146-
color: var(--color-focused);
147-
}
148130

149-
// Disabled Button
131+
// FAB Button: Disabled
132+
// --------------------------------------------------
133+
150134
:host(.fab-button-disabled) {
135+
--opacity: .5;
136+
151137
pointer-events: none;
152138
}
153139

154140
:host(.fab-button-disabled) .button-native {
155141
cursor: default;
156-
opacity: .5;
157142
pointer-events: none;
158143
}
159144

145+
146+
// FAB Button: Hover
147+
// --------------------------------------------------
148+
149+
@media (any-hover: hover) {
150+
:host(:hover) .button-native {
151+
background: var(--background-hover);
152+
color: var(--color-hover);
153+
}
154+
155+
:host(.ion-color:hover) .button-native {
156+
background: #{current-color(tint)};
157+
color: #{current-color(contrast)};
158+
}
159+
}
160+
161+
// FAB Button: Focused
162+
// --------------------------------------------------
163+
164+
:host(.ion-focused) .button-native {
165+
background: var(--background-focused);
166+
color: var(--color-focused);
167+
}
168+
169+
:host(.ion-color.ion-focused) .button-native {
170+
background: #{current-color(shade)};
171+
}
172+
173+
// FAB Button: Activated
174+
// --------------------------------------------------
175+
176+
:host(.activated) .button-native {
177+
background: var(--background-activated);
178+
color: var(--color-activated);
179+
}
180+
181+
// Focused/Activated Button with Color
182+
:host(.ion-color.ion-focused) .button-native,
183+
:host(.ion-color.activated) .button-native {
184+
background: #{current-color(shade)};
185+
color: #{current-color(contrast)};
186+
}
187+
188+
160189
// FAB Content
161190
// --------------------------------------------------
162191

@@ -215,3 +244,12 @@
215244
ion-ripple-effect {
216245
color: var(--ripple-color);
217246
}
247+
248+
// Translucent FAB button
249+
// --------------------------------------------------
250+
251+
@supports (backdrop-filter: blur(0)) {
252+
:host(.fab-button-translucent) .button-native {
253+
backdrop-filter: var(--backdrop-filter);
254+
}
255+
}

‎core/src/components/fab-button/fab-button.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,8 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
7676

7777
/**
7878
* If `true`, the fab button will be translucent.
79+
* Only applies to `ios` mode on devices that support
80+
* [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
7981
*/
8082
@Prop() translucent = false;
8183

‎core/src/components/fab-button/readme.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ export const FabButtonExample: React.FunctionComponent = () => (
111111
| `show` | `show` | If `true`, the fab button will show when in a fab-list. | `boolean` | `false` |
112112
| `size` | `size` | The size of the button. Set this to `small` in order to have a mini fab. | `"small" \| undefined` | `undefined` |
113113
| `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` |
114-
| `translucent` | `translucent` | If `true`, the fab button will be translucent. | `boolean` | `false` |
114+
| `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` |
115115
| `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` |
116116

117117

@@ -130,6 +130,7 @@ export const FabButtonExample: React.FunctionComponent = () => (
130130
| `--background` | Background of the button |
131131
| `--background-activated` | Background of the button when pressed |
132132
| `--background-focused` | Background of the button when focused with the tab key |
133+
| `--background-hover` | Background of the button on hover |
133134
| `--border-color` | Border color of the button |
134135
| `--border-radius` | Border radius of the button |
135136
| `--border-style` | Border style of the button |
@@ -138,6 +139,7 @@ export const FabButtonExample: React.FunctionComponent = () => (
138139
| `--color` | Text color of the button |
139140
| `--color-activated` | Text color of the button when pressed |
140141
| `--color-focused` | Text color of the button when focused with the tab key |
142+
| `--color-hover` | Text color of the button on hover |
141143
| `--padding-bottom` | Bottom padding of the button |
142144
| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button |
143145
| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button |

0 commit comments

Comments
 (0)