From 3af43610bb7dd949eedac7c731df435caa5c0d97 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Wed, 5 Sep 2018 12:23:47 -0400 Subject: [PATCH] fix(button): add custom properties and remove --ion-color overrides (#15463) - adds custom properties - removes the overrides of `--ion-color-*` variables - documents the properties references #14808 references #14853 references #14850 --- core/src/components.d.ts | 2 +- core/src/components/button/button.ios.scss | 30 ++--- core/src/components/button/button.md.scss | 22 ++-- core/src/components/button/button.scss | 110 ++++++++++++++++-- core/src/components/button/button.tsx | 1 + core/src/components/button/readme.md | 30 +++++ .../components/button/test/basic/index.html | 10 ++ .../button/test/{fill => clear}/e2e.js | 4 +- .../components/button/test/clear/index.html | 100 ++++++++++++++++ .../src/components/button/test/outline/e2e.js | 19 +++ .../button/test/{fill => outline}/index.html | 78 ++++--------- .../button/test/standalone/index.html | 94 ++++++++++++--- .../components/button/test/toolbar/index.html | 17 +++ core/src/components/buttons/buttons.ios.scss | 71 ++++++----- core/src/components/buttons/buttons.md.scss | 57 ++++++--- 15 files changed, 489 insertions(+), 156 deletions(-) rename core/src/components/button/test/{fill => clear}/e2e.js (86%) create mode 100644 core/src/components/button/test/clear/index.html create mode 100644 core/src/components/button/test/outline/e2e.js rename core/src/components/button/test/{fill => outline}/index.html (54%) diff --git a/core/src/components.d.ts b/core/src/components.d.ts index f1c538b2b3..458b1acabd 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -4011,7 +4011,7 @@ export namespace Components { * The text to display on the ok button. Default: `OK`. */ 'okText': string; - 'open': (ev?: UIEvent | undefined) => Promise; + 'open': (ev?: UIEvent | undefined) => Promise; /** * The text to display when the select is empty. */ diff --git a/core/src/components/button/button.ios.scss b/core/src/components/button/button.ios.scss index 14c2da3471..efd9b3c5a7 100644 --- a/core/src/components/button/button.ios.scss +++ b/core/src/components/button/button.ios.scss @@ -31,12 +31,7 @@ --opacity: #{$button-ios-opacity-hover}; } -:host(.button-solid.focused) { - --background: #{current-color(shade)}; -} - :host(.button-solid.activated) { - --background: #{current-color(shade)}; --opacity: #{$button-ios-opacity-activated}; } @@ -47,22 +42,16 @@ --border-radius: #{$button-ios-outline-border-radius}; --border-width: #{$button-ios-outline-border-width}; --border-style: #{$button-ios-outline-border-style}; + --background-activated: #{ion-color(primary, base)}; + --background-focused: #{ion-color(primary, base, .1)}; + --color-activated: #{ion-color(primary, contrast)}; } -:host(.button-outline.activated) { - --background: #{current-color(base)}; - - color: #{current-color(contrast)}; +:host(.button-outline.activated.ion-color) .button-native { + background: current-color(base); + color: current-color(contrast); } -:host(.button-outline.focused) { - --background: #{current-color(base, .1)}; -} - -:host(.button-outline.activated.focused) { - --border-color: #{current-color(shade)}; - --background: #{current-color(shade)}; -} // iOS Clear Button // -------------------------------------------------- @@ -75,8 +64,11 @@ --opacity: #{$button-ios-clear-opacity-activated}; } -:host(.button-clear.focused) { - --background: #{current-color(base, .1)}; +:host(.button-clear) { + --background-activated: transparent; + --background-focused: #{ion-color(primary, base, .1)}; + --color-activated: #{ion-color(primary, base)}; + --color-focused: #{ion-color(primary, base)}; } diff --git a/core/src/components/button/button.md.scss b/core/src/components/button/button.md.scss index 51007da795..cdc18dc1a6 100644 --- a/core/src/components/button/button.md.scss +++ b/core/src/components/button/button.md.scss @@ -5,9 +5,6 @@ // -------------------------------------------------- :host { - --transition: #{box-shadow $button-md-transition-duration $button-md-transition-timing-function, - background-color $button-md-transition-duration $button-md-transition-timing-function, - color $button-md-transition-duration $button-md-transition-timing-function}; --border-radius: #{$button-md-border-radius}; --margin-top: #{$button-md-margin-top}; --margin-bottom: #{$button-md-margin-bottom}; @@ -18,6 +15,9 @@ --padding-start: #{$button-md-padding-start}; --padding-end: #{$button-md-padding-end}; --height: #{$button-md-height}; + --transition: #{box-shadow $button-md-transition-duration $button-md-transition-timing-function, + background-color $button-md-transition-duration $button-md-transition-timing-function, + color $button-md-transition-duration $button-md-transition-timing-function}; font-size: #{$button-md-font-size}; font-weight: #{$button-md-font-weight}; @@ -36,7 +36,6 @@ :host(.button-solid.activated) { --box-shadow: #{$button-md-box-shadow-activated}; - --background: #{current-color(shade)}; } // Material Design Outline Button @@ -46,14 +45,13 @@ --border-width: 1px; --border-style: solid; --box-shadow: none; + --background-activated: transparent; + --background-focused: #{ion-color(primary, base, .1)}; + --color-activated: #{ion-color(primary, base)}; } -:host(.button-outline.activated) { - --background: transparent; -} - -:host(.button-outline.focused) { - --background: #{current-color(base, .1)}; +:host(.button-outline.activated.ion-color) .button-native { + background: transparent; } @@ -62,6 +60,10 @@ :host(.button-clear) { --opacity: #{$button-md-clear-opacity}; + --background-activated: transparent; + --background-focused: #{ion-color(primary, base, .1)}; + --color-activated: #{ion-color(primary, base)}; + --color-focused: #{ion-color(primary, base)}; } diff --git a/core/src/components/button/button.scss b/core/src/components/button/button.scss index 646bc67390..1be1ed9afe 100644 --- a/core/src/components/button/button.scss +++ b/core/src/components/button/button.scss @@ -4,9 +4,40 @@ // -------------------------------------------------- :host { - --ion-color-base: #{ion-color(primary, base)}; - --ion-color-contrast: #{ion-color(primary, contrast)}; - --ion-color-shade: #{ion-color(primary, shade)}; + /** + * @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 --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 --width: Width of the button + * @prop --height: Height of the button + * + * @prop --transition: Transition of the button + * + * @prop --border-radius: Border radius of the button + * @prop --border-width: Border width of the button + * @prop --border-style: Border style of the button + * @prop --border-color: Border color of the button + * + * @prop --ripple-color: Color of the button ripple effect + * + * @prop --box-shadow: Box shadow of the button + * @prop --opacity: Opacity of the button + * + * @prop --margin-top: Margin top of the button + * @prop --margin-end: Margin end of the button + * @prop --margin-bottom: Margin bottom of the button + * @prop --margin-start: Margin start of the button + * + * @prop --padding-top: Padding top of the button + * @prop --padding-end: Padding end of the button + * @prop --padding-bottom: Padding bottom of the button + * @prop --padding-start: Padding start of the button + */ --overflow: hidden; --ripple-color: currentColor; @@ -35,32 +66,79 @@ // Solid Button // -------------------------------------------------- +// Default Solid Color :host(.button-solid) { - --background: #{current-color(base)}; + --background: #{ion-color(primary, base)}; + --background-activated: #{ion-color(primary, shade)}; + --background-focused: #{ion-color(primary, shade)}; + --color: #{ion-color(primary, contrast)}; + --color-activated: #{ion-color(primary, contrast)}; + --color-focused: #{ion-color(primary, contrast)}; +} - color: #{current-color(contrast)}; +// Solid Button with Color +:host(.button-solid.ion-color) .button-native { + background: current-color(base); + color: current-color(contrast); +} + +// Focused/Activated Solid Button with Color +:host(.button-solid.ion-color.focused) .button-native, +:host(.button-solid.ion-color.activated) .button-native { + background: #{current-color(shade)}; } // Outline Button // -------------------------------------------------- +// Default Outline Color :host(.button-outline) { - --border-color: #{current-color(base)}; + --border-color: #{ion-color(primary, base)}; --background: transparent; + --color: #{ion-color(primary, base)}; + --color-focused: #{ion-color(primary, base)}; +} - color: #{current-color(base)}; +// Outline Button with Color +:host(.button-outline.ion-color) .button-native { + border-color: current-color(base); + + background: transparent; + color: current-color(base); +} + +:host(.button-outline.focused.ion-color) .button-native { + background: current-color(base, .1); + color: current-color(base); } // Clear Button // -------------------------------------------------- +// Default Clear Color :host(.button-clear) { --border-width: 0; --background: transparent; + --color: #{ion-color(primary, base)}; +} - color: #{current-color(base)}; +// Clear Button with Color +:host(.button-clear.ion-color) .button-native { + background: transparent; + color: current-color(base); +} + +// Focused Clear Button with Color +:host(.button-clear.focused.ion-color) .button-native { + background: current-color(base, .1); + color: current-color(base); +} + +// Activated Clear Button with Color +:host(.button-clear.activated.ion-color) .button-native { + background: transparent; } @@ -112,17 +190,17 @@ border-left-width: 0; } - .button-native { - @include text-inherit(); @include border-radius(var(--border-radius)); @include font-smoothing(); @include margin(var(--margin-top), var(--margin-end), var(--margin-bottom), var(--margin-start)); @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start)); + @include text-inherit(); display: block; position: relative; + width: var(--width); height: var(--height); transition: var(--transition); @@ -134,6 +212,7 @@ outline: none; background: var(--background); + color: var(--color); line-height: 1; @@ -154,6 +233,17 @@ pointer-events: none; } +:host(.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); // } diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx index 31511cd4d7..b8263a81f8 100644 --- a/core/src/components/button/button.tsx +++ b/core/src/components/button/button.tsx @@ -231,6 +231,7 @@ function getColorClassMap(buttonType: string, color: string | undefined, fill: s [`${className}-${mode}`]: true, }; if (color !== undefined) { + map[`ion-color`] = true; map[`ion-color-${color}`] = true; } return map; diff --git a/core/src/components/button/readme.md b/core/src/components/button/readme.md index 254967dfe8..593a39b992 100644 --- a/core/src/components/button/readme.md +++ b/core/src/components/button/readme.md @@ -61,6 +61,36 @@ This attribute specifies the size of the button. Setting this attribute will cha | `ionFocus` | Emitted when the button has focus. | +## CSS Custom Properties + +| Name | Description | +| ------------------------ | --------------------------------------- | +| `--background` | Background of the button | +| `--background-activated` | Background of the button when activated | +| `--background-focused` | Background of the button when focused | +| `--border-color` | Border color of the button | +| `--border-radius` | Border radius of the button | +| `--border-style` | Border style of the button | +| `--border-width` | Border width of the button | +| `--box-shadow` | Box shadow of the button | +| `--color` | Text color of the button | +| `--color-activated` | Text color of the button when activated | +| `--color-focused` | Text color of the button when focused | +| `--height` | Height of the button | +| `--margin-bottom` | Margin bottom of the button | +| `--margin-end` | Margin end of the button | +| `--margin-start` | Margin start of the button | +| `--margin-top` | Margin top of the button | +| `--opacity` | Opacity of the button | +| `--padding-bottom` | Padding bottom of the button | +| `--padding-end` | Padding end of the button | +| `--padding-start` | Padding start of the button | +| `--padding-top` | Padding top of the button | +| `--ripple-color` | Color of the button ripple effect | +| `--transition` | Transition of the button | +| `--width` | Width of the button | + + ---------------------------------------------- *Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/button/test/basic/index.html b/core/src/components/button/test/basic/index.html index a7a504e507..8c1074ff15 100644 --- a/core/src/components/button/test/basic/index.html +++ b/core/src/components/button/test/basic/index.html @@ -21,51 +21,61 @@

Default + Default.focused Default.activated

Primary + Primary.focused Primary.activated

Secondary + Secondary.focused Secondary.activated

Tertiary + Tertiary.focused Tertiary.activated

Success + Success.focused Success.activated

Warning + Warning.focused Warning.activated

Danger + Danger.focused Danger.activated

Light + Light.focused Light.activated

Medium + Medium.focused Medium.activated

Dark + Dark.focused Dark.activated

diff --git a/core/src/components/button/test/fill/e2e.js b/core/src/components/button/test/clear/e2e.js similarity index 86% rename from core/src/components/button/test/fill/e2e.js rename to core/src/components/button/test/clear/e2e.js index 5a9555b9b5..a3505e893b 100644 --- a/core/src/components/button/test/fill/e2e.js +++ b/core/src/components/button/test/clear/e2e.js @@ -5,12 +5,12 @@ const { register, Page, platforms } = require('../../../../../scripts/e2e'); class E2ETestPage extends Page { constructor(driver, platform) { - super(driver, `http://localhost:3333/src/components/button/test/fill?ionic:mode=${platform}`); + super(driver, `http://localhost:3333/src/components/button/test/clear?ionic:mode=${platform}`); } } platforms.forEach(platform => { - describe('button/fill', () => { + describe('button/clear', () => { register('should init', driver => { const page = new E2ETestPage(driver, platform); return page.navigate('#content'); diff --git a/core/src/components/button/test/clear/index.html b/core/src/components/button/test/clear/index.html new file mode 100644 index 0000000000..56ebfc28ff --- /dev/null +++ b/core/src/components/button/test/clear/index.html @@ -0,0 +1,100 @@ + + + + + + Button - Clear + + + + + + + + + + + Button - Clear + + + + +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+

+ Disabled + Secondary Disabled +

+ + + + + + diff --git a/core/src/components/button/test/outline/e2e.js b/core/src/components/button/test/outline/e2e.js new file mode 100644 index 0000000000..1a3d284890 --- /dev/null +++ b/core/src/components/button/test/outline/e2e.js @@ -0,0 +1,19 @@ +'use strict'; + +const { By, until } = require('selenium-webdriver'); +const { register, Page, platforms } = require('../../../../../scripts/e2e'); + +class E2ETestPage extends Page { + constructor(driver, platform) { + super(driver, `http://localhost:3333/src/components/button/test/outline?ionic:mode=${platform}`); + } +} + +platforms.forEach(platform => { + describe('button/outline', () => { + register('should init', driver => { + const page = new E2ETestPage(driver, platform); + return page.navigate('#content'); + }); + }); +}); diff --git a/core/src/components/button/test/fill/index.html b/core/src/components/button/test/outline/index.html similarity index 54% rename from core/src/components/button/test/fill/index.html rename to core/src/components/button/test/outline/index.html index 5e1bda167c..b93fea398c 100644 --- a/core/src/components/button/test/fill/index.html +++ b/core/src/components/button/test/outline/index.html @@ -3,7 +3,7 @@ - Button - Fill + Button - Outline @@ -14,7 +14,7 @@ - Button - Fill + Button - Outline @@ -22,110 +22,76 @@

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

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

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

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

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

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

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

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

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

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

Disabled Secondary Disabled

- -

- Default - Default.activated -

- -

- Primary - Primary.activated -

- -

- Secondary - Secondary.activated -

- -

- Tertiary - Tertiary.activated -

- -

- Success - Success.activated -

- -

- Warning - Warning.activated -

- -

- Danger - Danger.activated -

- -

- Light - Light.activated -

- -

- Medium - Medium.activated -

- -

- Dark - Dark.activated -

-

- Disabled - Secondary Disabled -

diff --git a/core/src/components/button/test/standalone/index.html b/core/src/components/button/test/standalone/index.html index d65faa500b..17a7abe0b0 100644 --- a/core/src/components/button/test/standalone/index.html +++ b/core/src/components/button/test/standalone/index.html @@ -10,27 +10,91 @@ +

Default

+

+ Default + + Map + Round + Outline + Clear + Full Outline Full Outline Full Outline Full Outline Full Outline Full Outline Full Outline + Block Clear +

+ +

Colors

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

-

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

+ +

Custom

+ + + wide + large + rounded + + + custom + custom.activated + custom w/ secondary + + + + Default + + Bar + + Secondary + + + + + + Custom + Custom.a + + Bar + + Custom Secondary + + + + diff --git a/core/src/components/button/test/toolbar/index.html b/core/src/components/button/test/toolbar/index.html index 8a74d7e39e..92f9efadc5 100644 --- a/core/src/components/button/test/toolbar/index.html +++ b/core/src/components/button/test/toolbar/index.html @@ -61,6 +61,23 @@ This is a long title with buttons. It just goes on and on my friend. + + + + Close + + + + + + + + + + + This is a long title with buttons. It just goes on and on my friend. + + diff --git a/core/src/components/buttons/buttons.ios.scss b/core/src/components/buttons/buttons.ios.scss index 554e020bde..da777a4377 100644 --- a/core/src/components/buttons/buttons.ios.scss +++ b/core/src/components/buttons/buttons.ios.scss @@ -2,12 +2,12 @@ @import "./buttons"; -// iOS Toolbar Button Default +// iOS Toolbar Default Button // -------------------------------------------------- ::slotted(*) .button { --padding-top: 0; - --pading-bottom: 0; + --padding-bottom: 0; --padding-start: 5px; --padding-end: 5px; --height: 32px; @@ -20,10 +20,31 @@ --border-radius: #{$toolbar-ios-button-border-radius}; } +// iOS Toolbar with Color Default Button +// -------------------------------------------------- + :host-context(.ion-color)::slotted(*) .button { - --ion-color-base: currentColor; + --color: currentColor; + --color-activated: currentColor; } + +// iOS Toolbar Clear Button +// -------------------------------------------------- + +::slotted(*) .button-clear.activated { + color: $toolbar-ios-button-color; +} + + +// iOS Toolbar Button Solid +// -------------------------------------------------- + +::slotted(*) .button-solid-ios:hover { + opacity: .4; +} + + // iOS Toolbar Button Icon // -------------------------------------------------- ::slotted(*) ion-icon[slot="start"] { @@ -56,41 +77,31 @@ pointer-events: none; } -::slotted(*) .button.button-clear { - --height: 35px; -} -// iOS Toolbar Button Solid +// iOS Toolbar Menu Toggle // -------------------------------------------------- -::slotted(*) .button.button-solid-ios:hover { - opacity: .4; -} +// .button-menutoggle-ios { +// order: map-get($toolbar-order-ios, menu-toggle-start); - // iOS Toolbar Menu Toggle - // -------------------------------------------------- +// min-width: 36px; - // .button-menutoggle-ios { - // order: map-get($toolbar-order-ios, menu-toggle-start); +// --margin-top: 0; +// --margin-bottom: 0; +// --margin-start: 6px; +// --margin-end: 6px; - // min-width: 36px; +// --padding-top: 0; +// --padding-bottom: 0; +// --padding-start: 0; +// --padding-end: 0; - // --margin-top: 0; - // --margin-bottom: 0; - // --margin-start: 6px; - // --margin-end: 6px; +// ion-icon { +// @include padding(0, 6px); - // --padding-top: 0; - // --padding-bottom: 0; - // --padding-start: 0; - // --padding-end: 0; - - // ion-icon { - // @include padding(0, 6px); - - // font-size: 28px; - // } - // } +// font-size: 28px; +// } +// } // iOS Toolbar Button Placement // -------------------------------------------------- diff --git a/core/src/components/buttons/buttons.md.scss b/core/src/components/buttons/buttons.md.scss index 85882b737d..4d38ebf99e 100644 --- a/core/src/components/buttons/buttons.md.scss +++ b/core/src/components/buttons/buttons.md.scss @@ -1,7 +1,7 @@ @import "./buttons.md.vars"; @import "./buttons"; -// Material Design Toolbar Button Default +// Material Design Toolbar Default Button // -------------------------------------------------- ::slotted(*) .button { @@ -20,6 +20,49 @@ --border-radius: #{$toolbar-md-button-border-radius}; } + +// Material Design Toolbar w/ Color Default Button +// -------------------------------------------------- + +:host-context(.ion-color)::slotted(*) .button { + --color: currentColor; + --color-activated: currentColor; +} + + +// Material Design Toolbar Solid Button +// -------------------------------------------------- + +::slotted(*) .button-solid { + --color: #{$toolbar-md-background-color}; + --color-activated: #{$toolbar-md-background-color}; + --background: #{$toolbar-md-text-color}; + --background-activated: #{$toolbar-md-text-color}; +} + + +// Material Design Toolbar Outline Button +// -------------------------------------------------- + +::slotted(*) .button-outline { + --color: #{$toolbar-md-text-color}; + --color-activated: #{$toolbar-md-text-color}; + --background: transparent; + --background-activated: transparent; + --border-color: #{$toolbar-md-text-color}; +} + + +// Material Design Toolbar Clear Button +// -------------------------------------------------- + +::slotted(*) .button-clear { + --color: #{$toolbar-md-text-color}; + --color-activated: #{$toolbar-md-text-color}; + --background: transparent; +} + + // Material Design Toolbar Button Icon // -------------------------------------------------- ::slotted(*) ion-icon[slot="start"] { @@ -46,18 +89,6 @@ pointer-events: none; } -::slotted(*) .button.button-solid, -::slotted(*) .button.button-outline { - --ion-color-base: #{$toolbar-md-text-color}; - --ion-color-contrast: #{$toolbar-md-background-color}; - --ion-color-shade: #{$toolbar-md-text-color}; -} - -::slotted(*) .button.button-clear { - --ion-color-base: currentColor; - --height: 45px; -} - // Material Design Toolbar Button Placement // --------------------------------------------------