From 5c5934bc24bde387fe66e16f88158d992c71dcc9 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Mon, 10 Jun 2019 13:38:50 -0400 Subject: [PATCH] feat(button): add variables for customizing hover state (#18499) resolves #17974 --- core/api.txt | 2 + core/src/components/button/button.ios.scss | 16 +++++++- core/src/components/button/button.md.scss | 21 ++++------ core/src/components/button/button.scss | 34 +++++++++++----- core/src/components/button/button.vars.scss | 2 - core/src/components/button/readme.md | 2 + .../components/button/test/basic/index.html | 20 +++++----- .../components/button/test/clear/index.html | 40 +++++++++---------- .../components/button/test/outline/index.html | 40 +++++++++---------- .../button/test/standalone/index.html | 8 ++++ core/src/themes/test/css-variables/index.html | 18 ++++----- 11 files changed, 118 insertions(+), 85 deletions(-) diff --git a/core/api.txt b/core/api.txt index 08d59c55b1..e9c4c71ad3 100644 --- a/core/api.txt +++ b/core/api.txt @@ -149,6 +149,7 @@ ion-button,event,ionFocus,void,true ion-button,css-prop,--background ion-button,css-prop,--background-activated ion-button,css-prop,--background-focused +ion-button,css-prop,--background-hover ion-button,css-prop,--border-color ion-button,css-prop,--border-radius ion-button,css-prop,--border-style @@ -157,6 +158,7 @@ ion-button,css-prop,--box-shadow ion-button,css-prop,--color ion-button,css-prop,--color-activated ion-button,css-prop,--color-focused +ion-button,css-prop,--color-hover ion-button,css-prop,--opacity ion-button,css-prop,--padding-bottom ion-button,css-prop,--padding-end diff --git a/core/src/components/button/button.ios.scss b/core/src/components/button/button.ios.scss index 139c3bd68f..d735e11215 100644 --- a/core/src/components/button/button.ios.scss +++ b/core/src/components/button/button.ios.scss @@ -127,7 +127,21 @@ --opacity: #{$button-ios-opacity-hover}; } - :host(.button-clear:hover) { + :host(.button-clear:hover), + :host(.button-outline:hover) { --opacity: #{$button-ios-clear-opacity-hover}; } + + // Since iOS changes the opacity on hover, + // we want to keep the background if focused + // or activated + :host(.ion-focused:hover) { + --background-hover: var(--background-focused); + --color-hover: var(--color-focused); + } + + :host(.activated:hover) { + --background-hover: var(--background-activated); + --color-hover: var(--color-activated); + } } diff --git a/core/src/components/button/button.md.scss b/core/src/components/button/button.md.scss index e4d37335ab..e11c232542 100644 --- a/core/src/components/button/button.md.scss +++ b/core/src/components/button/button.md.scss @@ -47,6 +47,7 @@ --box-shadow: none; --background-activated: transparent; --background-focused: #{ion-color(primary, base, .1)}; + --background-hover: #{ion-color(primary, base, .04)}; --color-activated: #{ion-color(primary, base)}; } @@ -62,6 +63,7 @@ --opacity: #{$button-md-clear-opacity}; --background-activated: transparent; --background-focused: #{ion-color(primary, base, .1)}; + --background-hover: #{ion-color(primary, base, .04)}; --color-activated: #{ion-color(primary, base)}; --color-focused: #{ion-color(primary, base)}; } @@ -117,23 +119,16 @@ } -// Material Design Button Sizes +// Material Design Button: Hover // -------------------------------------------------- @media (any-hover: hover) { - :host(.button-outline:hover) .button-native { - background: ion-color(primary, base, .04); + :host(.button-solid.ion-color:hover) .button-native { + background: #{current-color(base, .92)}; } + :host(.button-clear.ion-color:hover) .button-native, :host(.button-outline.ion-color:hover) .button-native { - background: current-color(base, .04); + background: #{current-color(base, .04)}; } - - :host(.button-clear:hover) .button-native { - background: ion-color(primary, base, .04); - } - - :host(.button-clear.ion-color:hover) .button-native { - background: current-color(base, .04); - } -} +} \ No newline at end of file diff --git a/core/src/components/button/button.scss b/core/src/components/button/button.scss index 023cc6b51f..ef5bcda76a 100644 --- a/core/src/components/button/button.scss +++ b/core/src/components/button/button.scss @@ -8,10 +8,12 @@ * @prop --background: Background of the button * @prop --background-activated: Background of the button when activated * @prop --background-focused: Background of the button when focused + * @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 activated * @prop --color-focused: Text color of the button when focused + * @prop --color-hover: Text color of the button when hover * * @prop --transition: Transition of the button * @@ -35,6 +37,7 @@ --border-width: initial; --border-color: initial; --border-style: initial; + --color-hover: initial; --box-shadow: none; display: inline-block; @@ -76,6 +79,7 @@ :host(.button-solid) { --background: #{ion-color(primary, base)}; --background-focused: #{ion-color(primary, shade)}; + --background-hover: #{ion-color(primary, base, 0.92)}; --color: #{ion-color(primary, contrast)}; --color-activated: #{ion-color(primary, contrast)}; --color-focused: #{ion-color(primary, contrast)}; @@ -234,16 +238,6 @@ border: 0; } -:host(.ion-focused) .button-native { - background: var(--background-focused); - color: var(--color-focused); -} - -:host(.activated) .button-native { - background: var(--background-activated); - color: var(--color-activated); -} - // .button > .button-container:hover { // opacity: var(--opacity-hover); @@ -289,3 +283,23 @@ ion-ripple-effect { color: var(--ripple-color); } + +// Button: Hover +// -------------------------------------------------- + +:host(.ion-focused) .button-native { + background: var(--background-focused); + color: var(--color-focused); +} + +:host(.activated) .button-native { + background: var(--background-activated); + color: var(--color-activated); +} + +@media (any-hover: hover) { + :host(:hover) .button-native { + background: var(--background-hover); + color: var(--color-hover); + } +} \ No newline at end of file diff --git a/core/src/components/button/button.vars.scss b/core/src/components/button/button.vars.scss index 6ae48363c0..6f8578c2b9 100644 --- a/core/src/components/button/button.vars.scss +++ b/core/src/components/button/button.vars.scss @@ -17,5 +17,3 @@ $button-round-padding-start: $button-round-padding-end !default; /// @prop - Border radius of the round button $button-round-border-radius: 64px !default; - -/// @prop - Opacity of the button when disabled diff --git a/core/src/components/button/readme.md b/core/src/components/button/readme.md index 68f5346d36..a643b7532f 100644 --- a/core/src/components/button/readme.md +++ b/core/src/components/button/readme.md @@ -255,6 +255,7 @@ export default Example; | `--background` | Background of the button | | `--background-activated` | Background of the button when activated | | `--background-focused` | Background of the button when focused | +| `--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 | @@ -263,6 +264,7 @@ export default Example; | `--color` | Text color of the button | | `--color-activated` | Text color of the button when activated | | `--color-focused` | Text color of the button when focused | +| `--color-hover` | Text color of the button when hover | | `--opacity` | Opacity of the button | | `--padding-bottom` | Padding bottom of the button | | `--padding-end` | Padding end of the button | diff --git a/core/src/components/button/test/basic/index.html b/core/src/components/button/test/basic/index.html index 1f8e0548a3..4ad9f443e3 100644 --- a/core/src/components/button/test/basic/index.html +++ b/core/src/components/button/test/basic/index.html @@ -23,61 +23,61 @@

Default - Default.focused + Default.focused Default.activated

Primary - Primary.focused + Primary.focused Primary.activated

Secondary - Secondary.focused + Secondary.focused Secondary.activated

Tertiary - Tertiary.focused + Tertiary.focused Tertiary.activated

Success - Success.focused + Success.focused Success.activated

Warning - Warning.focused + Warning.focused Warning.activated

Danger - Danger.focused + Danger.focused Danger.activated

Light - Light.focused + Light.focused Light.activated

Medium - Medium.focused + Medium.focused Medium.activated

Dark - Dark.focused + Dark.focused Dark.activated

diff --git a/core/src/components/button/test/clear/index.html b/core/src/components/button/test/clear/index.html index 9736e7de04..fe396ab81f 100644 --- a/core/src/components/button/test/clear/index.html +++ b/core/src/components/button/test/clear/index.html @@ -24,71 +24,71 @@

Default Default.activated - Default.focused - Default.activated.focused + Default.focused + Default.activated.focused

Primary Primary.activated - Primary.focused - Primary.activated.focused + Primary.focused + Primary.activated.focused

Secondary Secondary.activated - Secondary.focused - Secondary.activated.focused + Secondary.focused + Secondary.activated.focused

Tertiary Tertiary.activated - Tertiary.focused - Tertiary.activated.focused + Tertiary.focused + Tertiary.activated.focused

Success Success.activated - Success.focused - Success.activated.focused + Success.focused + Success.activated.focused

Warning Warning.activated - Warning.focused - Warning.activated.focused + Warning.focused + Warning.activated.focused

Danger Danger.activated - Danger.focused - Danger.activated.focused + Danger.focused + Danger.activated.focused

Light Light.activated - Light.focused - Light.activated.focused + Light.focused + Light.activated.focused

Medium Medium.activated - Medium.focused - Medium.activated.focused + Medium.focused + Medium.activated.focused

Dark Dark.activated - Dark.focused - Dark.activated.focused + Dark.focused + Dark.activated.focused

Disabled diff --git a/core/src/components/button/test/outline/index.html b/core/src/components/button/test/outline/index.html index 4e556fd872..82351ab8c4 100644 --- a/core/src/components/button/test/outline/index.html +++ b/core/src/components/button/test/outline/index.html @@ -24,71 +24,71 @@

Default Default.activated - Default.focused - Default.activated.focused + Default.focused + Default.activated.focused

Primary Primary.activated - Primary.focused - Primary.activated.focused + Primary.focused + Primary.activated.focused

Secondary Secondary.activated - Secondary.focused - Secondary.activated.focused + Secondary.focused + Secondary.activated.focused

Tertiary Tertiary.activated - Tertiary.focused - Tertiary.activated.focused + Tertiary.focused + Tertiary.activated.focused

Success Success.activated - Success.focused - Success.activated.focused + Success.focused + Success.activated.focused

Warning Warning.activated - Warning.focused - Warning.activated.focused + Warning.focused + Warning.activated.focused

Danger Danger.activated - Danger.focused - Danger.activated.focused + Danger.focused + Danger.activated.focused

Light Light.activated - Light.focused - Light.activated.focused + Light.focused + Light.activated.focused

Medium Medium.activated - Medium.focused - Medium.activated.focused + Medium.focused + Medium.activated.focused

Dark Dark.activated - Dark.focused - Dark.activated.focused + Dark.focused + Dark.activated.focused

Disabled diff --git a/core/src/components/button/test/standalone/index.html b/core/src/components/button/test/standalone/index.html index faf12bf832..49b33c44e7 100644 --- a/core/src/components/button/test/standalone/index.html +++ b/core/src/components/button/test/standalone/index.html @@ -53,8 +53,10 @@ custom + custom.focused custom.activated custom w/ secondary + custom medium @@ -99,11 +101,17 @@ .custom { --background: lightpink; + --background-hover: rgba(255, 182, 193, 0.5); --background-activated: green; --color: #222; --color-activated: white; --opacity: 1; } + + .medium { + --color: #989aa2; + --background-hover: rgba(152, 154, 162, 0.4); + } diff --git a/core/src/themes/test/css-variables/index.html b/core/src/themes/test/css-variables/index.html index 9487b2ac6a..87f157a1fe 100644 --- a/core/src/themes/test/css-variables/index.html +++ b/core/src/themes/test/css-variables/index.html @@ -375,15 +375,15 @@

- Primary - Secondary - Tertiary - Success Outline - Warning Clear - Danger - Light - Medium Outline - Dark Clear + Primary + Secondary + Tertiary + Success Outline + Warning Clear + Danger + Light + Medium Outline + Dark Clear