From 6420f02257d7e11157ca5dc213216eddb2ebabbb Mon Sep 17 00:00:00 2001 From: dimaatkaev Date: Mon, 12 Feb 2018 18:02:19 +0300 Subject: [PATCH] feat(checkbox): expand checkbox variables for easier customization Closes #143 BREAKING CHANGE: Checkbox check mark color variable (radio-fg) is expanded. There are three variables instead to set a color depending a the checkbox state: - checkbox-checkmark - base color - checkbox-checked-checkmark - color when checkbox checked - checkbox-disabled-checkmark - color when checkbox is disabled --- docs/output.json | 313 ++++++++++++++++-- e2e/checkbox.e2e-spec.ts | 165 +++++++++ .../components/checkbox/checkbox.component.ts | 14 +- .../theme/styles/themes/_cosmic.scss | 18 +- 4 files changed, 480 insertions(+), 30 deletions(-) create mode 100644 e2e/checkbox.e2e-spec.ts diff --git a/docs/output.json b/docs/output.json index da52253bc5..530b0ca150 100644 --- a/docs/output.json +++ b/docs/output.json @@ -1438,15 +1438,47 @@ "description": "" }, { - "name": "checkbox-selected-border-color", + "name": "checkbox-checkmark", "description": "" }, { - "name": "checkbox-fg", + "name": "checkbox-checked-bg", "description": "" }, { - "name": "radio-fg", + "name": "checkbox-checked-size", + "description": "" + }, + { + "name": "checkbox-checked-border-size", + "description": "" + }, + { + "name": "checkbox-checked-border-color", + "description": "" + }, + { + "name": "checkbox-checked-checkmark", + "description": "" + }, + { + "name": "checkbox-disabled-bg", + "description": "" + }, + { + "name": "checkbox-disabled-size", + "description": "" + }, + { + "name": "checkbox-disabled-border-size", + "description": "" + }, + { + "name": "checkbox-disabled-border-color", + "description": "" + }, + { + "name": "checkbox-disabled-checkmark", "description": "" } ] @@ -5272,7 +5304,15 @@ }, { "theme": "default", - "prop": "checkbox-fg" + "prop": "checkbox-checked-checkmark" + }, + { + "theme": "default", + "prop": "checkbox-disabled-border-color" + }, + { + "theme": "default", + "prop": "checkbox-disabled-checkmark" }, { "theme": "default", @@ -5499,7 +5539,7 @@ }, { "theme": "default", - "prop": "checkbox-selected-border-color" + "prop": "checkbox-checked-border-color" }, { "theme": "default", @@ -8522,6 +8562,10 @@ { "theme": "default", "prop": "checkbox-border-color" + }, + { + "theme": "default", + "prop": "checkbox-checkmark" } ] }, @@ -8732,8 +8776,52 @@ ], "childs": [] }, - "checkbox-selected-border-color": { - "name": "checkbox-selected-border-color", + "checkbox-checkmark": { + "name": "checkbox-checkmark", + "value": "#dadfe6", + "parents": [ + { + "theme": "default", + "prop": "form-control-border-color" + } + ], + "childs": [] + }, + "checkbox-checked-bg": { + "name": "checkbox-checked-bg", + "value": "rgba(0, 0, 0, 0)", + "parents": [], + "childs": [ + { + "theme": "cosmic", + "prop": "checkbox-checked-bg" + } + ] + }, + "checkbox-checked-size": { + "name": "checkbox-checked-size", + "value": "1.25rem", + "parents": [], + "childs": [ + { + "theme": "cosmic", + "prop": "checkbox-checked-size" + } + ] + }, + "checkbox-checked-border-size": { + "name": "checkbox-checked-border-size", + "value": "2px", + "parents": [], + "childs": [ + { + "theme": "cosmic", + "prop": "checkbox-checked-border-size" + } + ] + }, + "checkbox-checked-border-color": { + "name": "checkbox-checked-border-color", "value": "#40dc7e", "parents": [ { @@ -8743,8 +8831,63 @@ ], "childs": [] }, - "checkbox-fg": { - "name": "checkbox-fg", + "checkbox-checked-checkmark": { + "name": "checkbox-checked-checkmark", + "value": "#2a2a2a", + "parents": [ + { + "theme": "default", + "prop": "color-fg-heading" + } + ], + "childs": [] + }, + "checkbox-disabled-bg": { + "name": "checkbox-disabled-bg", + "value": "rgba(0, 0, 0, 0)", + "parents": [], + "childs": [ + { + "theme": "cosmic", + "prop": "checkbox-disabled-bg" + } + ] + }, + "checkbox-disabled-size": { + "name": "checkbox-disabled-size", + "value": "1.25rem", + "parents": [], + "childs": [ + { + "theme": "cosmic", + "prop": "checkbox-disabled-size" + } + ] + }, + "checkbox-disabled-border-size": { + "name": "checkbox-disabled-border-size", + "value": "2px", + "parents": [], + "childs": [ + { + "theme": "cosmic", + "prop": "checkbox-disabled-border-size" + } + ] + }, + "checkbox-disabled-border-color": { + "name": "checkbox-disabled-border-color", + "value": "#2a2a2a", + "parents": [ + { + "theme": "default", + "prop": "color-fg-heading" + } + ], + "childs": [] + }, + "checkbox-disabled-checkmark": { + "name": "checkbox-disabled-checkmark", "value": "#2a2a2a", "parents": [ { @@ -9659,10 +9802,6 @@ { "theme": "cosmic", "prop": "form-control-placeholder-color" - }, - { - "theme": "cosmic", - "prop": "checkbox-border-color" } ] }, @@ -9733,11 +9872,15 @@ }, { "theme": "cosmic", - "prop": "checkbox-fg" + "prop": "checkbox-checked-checkmark" }, { "theme": "cosmic", - "prop": "radio-fg" + "prop": "checkbox-disabled-border-color" + }, + { + "theme": "cosmic", + "prop": "checkbox-disabled-checkmark" }, { "theme": "cosmic", @@ -9983,7 +10126,11 @@ }, { "theme": "cosmic", - "prop": "checkbox-selected-border-color" + "prop": "checkbox-checked-border-color" + }, + { + "theme": "cosmic", + "prop": "radio-fg" }, { "theme": "cosmic", @@ -13275,7 +13422,16 @@ "prop": "separator" } ], - "childs": [] + "childs": [ + { + "theme": "cosmic", + "prop": "checkbox-border-color" + }, + { + "theme": "cosmic", + "prop": "checkbox-checkmark" + } + ] }, "form-control-selected-border-color": { "name": "form-control-selected-border-color", @@ -13491,17 +13647,69 @@ }, "checkbox-border-color": { "name": "checkbox-border-color", - "value": "#a1a1e5", + "value": "#342e73", "parents": [ { "theme": "cosmic", - "prop": "color-fg" + "prop": "form-control-border-color" + }, + { + "theme": "cosmic", + "prop": "separator" + } + ], + "childs": [] + }, + "checkbox-checkmark": { + "name": "checkbox-checkmark", + "value": "#342e73", + "parents": [ + { + "theme": "cosmic", + "prop": "form-control-border-color" + }, + { + "theme": "cosmic", + "prop": "separator" + } + ], + "childs": [] + }, + "checkbox-checked-bg": { + "name": "checkbox-checked-bg", + "value": "rgba(0, 0, 0, 0)", + "parents": [ + { + "theme": "default", + "prop": "checkbox-checked-bg" + } + ], + "childs": [] + }, + "checkbox-checked-size": { + "name": "checkbox-checked-size", + "value": "1.25rem", + "parents": [ + { + "theme": "default", + "prop": "checkbox-checked-size" + } + ], + "childs": [] + }, + "checkbox-checked-border-size": { + "name": "checkbox-checked-border-size", + "value": "2px", + "parents": [ + { + "theme": "default", + "prop": "checkbox-checked-border-size" } ], "childs": [] }, - "checkbox-selected-border-color": { - "name": "checkbox-selected-border-color", + "checkbox-checked-border-color": { + "name": "checkbox-checked-border-color", "value": "#00d977", "parents": [ { @@ -13511,8 +13719,8 @@ ], "childs": [] }, - "checkbox-fg": { - "name": "checkbox-fg", + "checkbox-checked-checkmark": { + "name": "checkbox-checked-checkmark", "value": "#ffffff", "parents": [ { @@ -13522,8 +13730,41 @@ ], "childs": [] }, - "radio-fg": { - "name": "radio-fg", + "checkbox-disabled-bg": { + "name": "checkbox-disabled-bg", + "value": "rgba(0, 0, 0, 0)", + "parents": [ + { + "theme": "default", + "prop": "checkbox-disabled-bg" + } + ], + "childs": [] + }, + "checkbox-disabled-size": { + "name": "checkbox-disabled-size", + "value": "1.25rem", + "parents": [ + { + "theme": "default", + "prop": "checkbox-disabled-size" + } + ], + "childs": [] + }, + "checkbox-disabled-border-size": { + "name": "checkbox-disabled-border-size", + "value": "2px", + "parents": [ + { + "theme": "default", + "prop": "checkbox-disabled-border-size" + } + ], + "childs": [] + }, + "checkbox-disabled-border-color": { + "name": "checkbox-disabled-border-color", "value": "#ffffff", "parents": [ { @@ -13533,6 +13774,28 @@ ], "childs": [] }, + "checkbox-disabled-checkmark": { + "name": "checkbox-disabled-checkmark", + "value": "#ffffff", + "parents": [ + { + "theme": "cosmic", + "prop": "color-fg-heading" + } + ], + "childs": [] + }, + "radio-fg": { + "name": "radio-fg", + "value": "#00d977", + "parents": [ + { + "theme": "cosmic", + "prop": "color-success" + } + ], + "childs": [] + }, "modal-font-size": { "name": "modal-font-size", "value": "1rem", diff --git a/e2e/checkbox.e2e-spec.ts b/e2e/checkbox.e2e-spec.ts new file mode 100644 index 0000000000..2de1fefe16 --- /dev/null +++ b/e2e/checkbox.e2e-spec.ts @@ -0,0 +1,165 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +import { browser, by, element } from 'protractor'; + +describe('nb-search', () => { + const transparent = 'rgba(0, 0, 0, 0)'; + + const border_color = 'rgb(218, 223, 230)'; + const checked_color = 'rgb(64, 220, 126)'; + const hover_color = 'rgb(107, 228, 155)'; + + const warning_color = 'rgb(255, 161, 0)'; + const warning_hover = 'rgb(255, 180, 51)'; + + const danger_color = 'rgb(255, 76, 106)'; + const danger_hover = 'rgb(255, 127, 148)'; + + + beforeEach((done) => { + browser.get('#/checkbox').then(() => done()); + }); + + it('should apply check on click', () => { + const input = element(by.css('#first input')); + const indicator = element(by.css('#first .customised-control-indicator')); + + expect(input.getAttribute('checked')).toBeFalsy(); + indicator.click(); + expect(input.getAttribute('checked')).toBeTruthy(); + indicator.click(); + expect(input.getAttribute('checked')).toBeFalsy(); + }); + + it('should ignore click if disable', () => { + const input = element(by.css('#disabled input')); + const indicator = element(by.css('#disabled .customised-control-indicator')); + + expect(input.getAttribute('disabled')).toBeTruthy(); + expect(input.getAttribute('checked')).toBeFalsy(); + indicator.click(); + expect(input.getAttribute('checked')).toBeFalsy(); + expect(input.getAttribute('disabled')).toBeTruthy(); + }); + + it('should apply style if checked/unchecked', () => { + const input = element(by.css('#first input')); + const indicator = element(by.css('#first .customised-control-indicator')); + const otherElement = element(by.css('#danger')); + + // unchecked + expect(input.getAttribute('checked')).toBeFalsy(); + expect(indicator.getCssValue('background-color')).toEqual(transparent); + expect(indicator.getCssValue('border')).toEqual('2px solid ' + border_color); + + // check ::before styles + browser.executeScript( + 'return ' + + 'window.getComputedStyle(document.querySelector(' + + '"#first .customised-control-indicator"' + + '), ":before").content') + .then(data => expect(data).toBe('""')); + + browser.executeScript( + 'return ' + + 'window.getComputedStyle(document.querySelector(' + + '"#first .customised-control-indicator"' + + '), ":before").borderTopColor') + .then(data => expect(data).toBe(transparent)); + + indicator.click(); + browser.actions().mouseMove(otherElement).perform(); + + // checked + expect(input.getAttribute('checked')).toBeTruthy(); + expect(indicator.getCssValue('background-color')).toEqual(transparent); + expect(indicator.getCssValue('border')).toEqual('2px solid ' + checked_color); + + // check ::before styles + browser.executeScript( + 'return ' + + 'window.getComputedStyle(document.querySelector(' + + '"#first .customised-control-indicator"' + + '), ":before").content') + .then(data => expect(data).toBe('""')); + + browser.executeScript( + 'return ' + + 'window.getComputedStyle(document.querySelector(' + + '"#first .customised-control-indicator"' + + '), ":before").borderTopColor') + .then(data => { + expect(data).toBe('rgb(42, 42, 42)'); + }); + }); + + it('should apply style if hover', () => { + const indicator = element(by.css('#first .customised-control-indicator')); + + // without hover + expect(indicator.getCssValue('border')).toEqual('2px solid ' + border_color); + + browser.actions().mouseMove(indicator).perform(); + + // hover + expect(indicator.getCssValue('border')).toEqual('2px solid ' + hover_color); + }); + + it('should apply style if status success', () => { + const success = element(by.css('#success .customised-control-indicator')); + const other = element(by.css('#first .customised-control-indicator')); + + // without hover + expect(success.getCssValue('border-color')).toEqual(border_color); + + success.click(); + + // hover + expect(success.getCssValue('border-color')).toEqual(hover_color); + + // checked + browser.actions().mouseMove(other).perform(); + expect(success.getCssValue('border-color')).toEqual(checked_color); + + }); + + it('should apply style if status warning', () => { + const warning = element(by.css('#warning .customised-control-indicator')); + const other = element(by.css('#first .customised-control-indicator')); + + // without hover + expect(warning.getCssValue('border-color')).toEqual(border_color); + + warning.click(); + + // hover + expect(warning.getCssValue('border-color')).toEqual(warning_hover); + + // checked + browser.actions().mouseMove(other).perform(); + expect(warning.getCssValue('border-color')).toEqual(warning_color); + }); + + it('should apply style if status danger', () => { + const danger = element(by.css('#danger .customised-control-indicator')); + const other = element(by.css('#first .customised-control-indicator')); + + // without hover + expect(danger.getCssValue('border-color')).toEqual(border_color); + + danger.click(); + + // hover + expect(danger.getCssValue('border-color')).toEqual(danger_hover); + + // checked + browser.actions().mouseMove(other).perform(); + + expect(danger.getCssValue('border-color')).toEqual(danger_color); + + }); +}); diff --git a/src/framework/theme/components/checkbox/checkbox.component.ts b/src/framework/theme/components/checkbox/checkbox.component.ts index 8a7a0368e4..9258ea57c8 100644 --- a/src/framework/theme/components/checkbox/checkbox.component.ts +++ b/src/framework/theme/components/checkbox/checkbox.component.ts @@ -29,9 +29,17 @@ import { convertToBoolProperty } from '../helpers'; * checkbox-size: * checkbox-border-size: * checkbox-border-color: - * checkbox-selected-border-color: - * checkbox-fg: - * radio-fg: + * checkbox-checkmark: + * checkbox-checked-bg: + * checkbox-checked-size: + * checkbox-checked-border-size: + * checkbox-checked-border-color: + * checkbox-checked-checkmark: + * checkbox-disabled-bg: + * checkbox-disabled-size: + * checkbox-disabled-border-size: + * checkbox-disabled-border-color: + * checkbox-disabled-checkmark: */ @Component({ selector: 'nb-checkbox', diff --git a/src/framework/theme/styles/themes/_cosmic.scss b/src/framework/theme/styles/themes/_cosmic.scss index e0293c2838..cd89c39b9c 100644 --- a/src/framework/theme/styles/themes/_cosmic.scss +++ b/src/framework/theme/styles/themes/_cosmic.scss @@ -99,9 +99,23 @@ $theme: ( form-control-border-color: separator, form-control-selected-border-color: color-primary, + checkbox-bg: transparent, + checkbox-size: 1.25rem, + checkbox-border-size: 2px, checkbox-border-color: color-fg, - checkbox-selected-border-color: color-success, - radio-fg: color-fg-heading, + checkbox-checkmark: transparent, + + checkbox-checked-bg: transparent, + checkbox-checked-size: 1.25rem, + checkbox-checked-border-size: 2px, + checkbox-checked-border-color: color-success, + checkbox-checked-checkmark: color-fg-heading, + + checkbox-disabled-bg: transparent, + checkbox-disabled-size: 1.25rem, + checkbox-disabled-border-size: 2px, + checkbox-disabled-border-color: color-fg-heading, + checkbox-disabled-checkmark: color-fg-heading, search-bg: linear-gradient(to right, #171749, #413789),