From 6668d80172c805128920ac100fbdb8c9f415c4f9 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Wed, 19 Sep 2018 14:25:08 +0300 Subject: [PATCH 1/3] feat(checkbox): add outline on focus --- .../checkbox/_checkbox.component.theme.scss | 18 +++++++++++------- .../components/checkbox/checkbox.component.ts | 15 ++++++++++++++- 2 files changed, 25 insertions(+), 8 deletions(-) diff --git a/src/framework/theme/components/checkbox/_checkbox.component.theme.scss b/src/framework/theme/components/checkbox/_checkbox.component.theme.scss index 7ab5938e6f..cd5eb25338 100644 --- a/src/framework/theme/components/checkbox/_checkbox.component.theme.scss +++ b/src/framework/theme/components/checkbox/_checkbox.component.theme.scss @@ -5,12 +5,16 @@ */ // locally used mixin -@mixin hover-border($color) { +@mixin outline-border($color) { .customised-control-input:checked ~ .customised-control-indicator { border-color: $color; } - .customised-control-input:hover:enabled ~ .customised-control-indicator { - border-color: lighten($color, 10%); + + &.focus .customised-control-input:enabled, + .customised-control-input:hover:enabled { + & ~ .customised-control-indicator { + border-color: lighten($color, 10%); + } } } // locally used mixin @@ -150,15 +154,15 @@ } } - @include hover-border(nb-theme(checkbox-checked-border-color)); + @include outline-border(nb-theme(checkbox-checked-border-color)); &.success { - @include hover-border(nb-theme(color-success)); + @include outline-border(nb-theme(color-success)); } &.warning { - @include hover-border(nb-theme(color-warning)); + @include outline-border(nb-theme(color-warning)); } &.danger { - @include hover-border(nb-theme(color-danger)); + @include outline-border(nb-theme(color-danger)); } .customised-control-description { diff --git a/src/framework/theme/components/checkbox/checkbox.component.ts b/src/framework/theme/components/checkbox/checkbox.component.ts index 6f60515032..1d9a920d9a 100644 --- a/src/framework/theme/components/checkbox/checkbox.component.ts +++ b/src/framework/theme/components/checkbox/checkbox.component.ts @@ -44,7 +44,9 @@ import { convertToBoolProperty } from '../helpers'; + (change)="value = !value" + (focus)="setFocus()" + (blur)="removeFocus()"> @@ -98,6 +100,9 @@ export class NbCheckboxComponent implements ControlValueAccessor { return this.status === 'danger'; } + @HostBinding('class.focus') + focus: boolean = false; + onChange: any = () => { }; onTouched: any = () => { }; @@ -126,4 +131,12 @@ export class NbCheckboxComponent implements ControlValueAccessor { setDisabledState(val: boolean) { this.disabled = convertToBoolProperty(val); } + + setFocus() { + this.focus = true; + } + + removeFocus() { + this.focus = false; + } } From 3a108a25ca95cf4575de65f130a55bfccd3275aa Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Wed, 19 Sep 2018 18:26:30 +0300 Subject: [PATCH 2/3] test(checkbox): move focus to another element before checks to remove focus styling --- e2e/checkbox.e2e-spec.ts | 76 +++++++++++++++++----------------------- 1 file changed, 33 insertions(+), 43 deletions(-) diff --git a/e2e/checkbox.e2e-spec.ts b/e2e/checkbox.e2e-spec.ts index a48f525b61..28f5cb6a8e 100644 --- a/e2e/checkbox.e2e-spec.ts +++ b/e2e/checkbox.e2e-spec.ts @@ -6,12 +6,23 @@ import { browser, by, element } from 'protractor'; -describe('nb-search', () => { +function getComputedProperty(property: string, selector: string) { + const script = ` + return window.getComputedStyle( + document.querySelector('${selector}'), + ':before' + ).${property}; + `; + + return browser.executeScript(script); +} + +describe('nb-checkbox', () => { 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 outline_color = 'rgb(107, 228, 155)'; const warning_color = 'rgb(255, 161, 0)'; const warning_hover = 'rgb(255, 180, 51)'; @@ -49,7 +60,7 @@ describe('nb-search', () => { 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')); + const otherElement = element(by.css('#danger .customised-control-indicator')); // unchecked expect(input.getAttribute('checked')).toBeFalsy(); @@ -57,22 +68,15 @@ describe('nb-search', () => { 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') + getComputedProperty('content', '#first .customised-control-indicator') .then(data => expect(data).toBe('""')); - browser.executeScript( - 'return ' + - 'window.getComputedStyle(document.querySelector(' + - '"#first .customised-control-indicator"' + - '), ":before").borderTopColor') + getComputedProperty('borderTopColor', '#first .customised-control-indicator') .then(data => expect(data).toBe(transparent)); indicator.click(); - browser.actions().mouseMove(otherElement).perform(); + // change focus to another input, so .focus styles removed. + otherElement.click(); // checked expect(input.getAttribute('checked')).toBeTruthy(); @@ -80,21 +84,11 @@ describe('nb-search', () => { 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') + getComputedProperty('content', '#first .customised-control-indicator') .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)'); - }); + getComputedProperty('borderTopColor', '#first .customised-control-indicator') + .then(data => expect(data).toBe('rgb(42, 42, 42)')); }); it('should apply style if hover', () => { @@ -106,23 +100,22 @@ describe('nb-search', () => { browser.actions().mouseMove(indicator).perform(); // hover - expect(indicator.getCssValue('border')).toEqual('2px solid ' + hover_color); + expect(indicator.getCssValue('border')).toEqual('2px solid ' + outline_color); }); - it('should apply style if status success', () => { + it('should apply status style', () => { 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); + // checked & focus success.click(); + expect(success.getCssValue('border-color')).toEqual(outline_color); - // hover - expect(success.getCssValue('border-color')).toEqual(hover_color); - - // checked - browser.actions().mouseMove(other).perform(); + // checked w/o focus + other.click(); expect(success.getCssValue('border-color')).toEqual(checked_color); }); @@ -134,13 +127,12 @@ describe('nb-search', () => { // without hover expect(warning.getCssValue('border-color')).toEqual(border_color); + // checked & focus warning.click(); - - // hover expect(warning.getCssValue('border-color')).toEqual(warning_hover); - // checked - browser.actions().mouseMove(other).perform(); + // checked w/o focus + other.click(); expect(warning.getCssValue('border-color')).toEqual(warning_color); }); @@ -151,14 +143,12 @@ describe('nb-search', () => { // without hover expect(danger.getCssValue('border-color')).toEqual(border_color); + // checked & focus danger.click(); - - // hover expect(danger.getCssValue('border-color')).toEqual(danger_hover); - // checked - browser.actions().mouseMove(other).perform(); - + // checked w/o focus + other.click(); expect(danger.getCssValue('border-color')).toEqual(danger_color); }); From 3ec1550a011848d2137a7478457f0ed86b94b11a Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Wed, 19 Sep 2018 18:26:45 +0300 Subject: [PATCH 3/3] test(checkbox): add focus style check --- e2e/checkbox.e2e-spec.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/e2e/checkbox.e2e-spec.ts b/e2e/checkbox.e2e-spec.ts index 28f5cb6a8e..ea70a5d90d 100644 --- a/e2e/checkbox.e2e-spec.ts +++ b/e2e/checkbox.e2e-spec.ts @@ -152,4 +152,12 @@ describe('nb-checkbox', () => { expect(danger.getCssValue('border-color')).toEqual(danger_color); }); + + it('should apply focus class when receive focus', () => { + const firstCheckbox = element(by.css('nb-checkbox#first')); + const firstCheckboxInput = element(by.css('#first .customised-control-indicator')); + + firstCheckboxInput.click(); + expect(firstCheckbox.getAttribute('class')).toContain('focus'); + }); });