feat(checkbox): Eva style 💅 #1311

yggg · 2019-03-21T19:56:19Z

Please read and mark the following check list before creating a pull request:

I read and followed the CONTRIBUTING.md guide.
I read and followed the New Feature Checklist guide.

Short description of what this resolves:

Adds Eva theme variables to theme file.
Restyle checkbox in Eva styles. Add indeterminate state, 'change' output event and two new statuses (primary, info).

BREAKING CHANGES:
Following map keys were removed:

border-color
color-gray
color-neutral
color-disabled
Mapping for borders, disabled and similar styles would controlled
by design system and configured for each component individually.

Properties 'checkbox-bg', 'checkbox-checked-bg' and 'checkbox-disabled-bg'
replaced with:

checkbox-disabled-background-color
checkbox-[status]-background-color
checkbox-[status]-checked-background-color
checkbox-[status]-indeterminate-background-color
checkbox-[status]-focus-background-color
checkbox-[status]-hover-background-color
checkbox-[status]-active-background-color

Property 'checkbox-size' splited into 'checkbox-height', 'checkbox-width'.

Following properties were removed (along with ability to change appearance of checkbox
based on checked or disabled state):

checkbox-checked-size
checkbox-checked-border-size
checkbox-disabled-size
checkbox-disabled-border-size

Property 'checkbox-border-size' replaced with 'checkbox-border-width'.

Properties 'checkbox-border-color', 'checkbox-checked-border-color', 'checkbox-disabled-border-color'
replaced with:

checkbox-disabled-border-color
checkbox-[status]-border-color
checkbox-[status]-checked-border-color
checkbox-[status]-indeterminate-border-color
checkbox-[status]-hover-border-color
checkbox-[status]-active-border-color

Properties 'checkbox-checkmark', 'checkbox-checked-checkmark', 'checkbox-disabled-checkmark'
replaced with:

checkbox-disabled-checkmark-color
checkbox-[status]-checked-checkmark-color
checkbox-[status]-indeterminate-checkmark-color

Check mark pseudo element replaced with nb-icon.

Checkbox classes were changed.
Class 'customised-control' replaced with 'label'.
Class 'customised-control-input' replaced with 'native-input'.
Class 'customised-control-indicator' replaced with 'custom-checkbox'.
Class 'customised-control-description' replaced with 'text'.

NbCheckboxComponent's '_value' property now private. Use 'value' instead.

nnixaa · 2019-03-22T16:17:55Z

src/framework/theme/components/checkbox/_checkbox.component.theme.scss

-      width: nb-theme(checkbox-size);
-      height: nb-theme(checkbox-size);
-      border: nb-theme(checkbox-border-size) solid nb-theme(checkbox-border-color);
+  $status-variants: 'primary', 'success', 'warning', 'danger', 'info', 'white';


so will move this into a mixin one day, right?

nnixaa · 2019-03-27T19:54:07Z

src/framework/theme/components/checkbox/_checkbox.component.theme.scss

-    border-width: 0 $border-size $border-size 0;
-  }
-}
+      svg {


we would need to use nb-icon right after we merge it

nnixaa · 2019-03-27T19:54:40Z

src/framework/theme/components/checkbox/_checkbox.component.theme.scss

-        nb-theme(checkbox-border-size)
-      );
+        use {
+          fill: nb-theme(checkbox-#{$status}-checked-checkmark-color);


and then we can just specify color to style the icon

nnixaa · 2019-03-27T19:56:28Z

src/framework/theme/components/checkbox/checkbox-status.ts

@@ -0,0 +1,8 @@
+export enum NbCheckboxStatus {


and this would be NbComponentStatus I believe? So that we can share it across the component.

nnixaa · 2019-03-27T19:58:07Z

src/framework/theme/components/checkbox/checkbox.component.ts

@@ -91,27 +211,56 @@ export class NbCheckboxComponent implements ControlValueAccessor {
  }


let's also remove all named inputs and use _ as a prefix for private vars, as _disabled.

codecov · 2019-03-30T17:07:06Z

Codecov Report

Merging #1311 into next will increase coverage by 0.09%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##             next    #1311      +/-   ##
==========================================
+ Coverage   81.37%   81.47%   +0.09%     
==========================================
  Files         237      237              
  Lines        7212     7233      +21     
  Branches      617      618       +1     
==========================================
+ Hits         5869     5893      +24     
+ Misses       1157     1154       -3     
  Partials      186      186

Impacted Files	Coverage Δ
src/framework/theme/components/icon/icon.module.ts	`81.81% <ø> (ø)`	⬆️
...rk/theme/components/checkbox/checkbox.component.ts	`100% <100%> (+8.33%)`	⬆️
...ework/theme/components/checkbox/checkbox.module.ts	`100% <100%> (ø)`	⬆️

Closes #46

@NgModule

…-icons package (#1319) BREAKING CHANGE: Starting from version 4.0, Nebular introduces new `nb-icon` component and `NbIconLibraries` service to host SVG and Font icon packs. As a breaking change, Nebular moves from `nebular-icons` package to much more popular [Eva Icons pack](https://akveo.github.io/eva-icons/) consisting of 480+ beautiful SVG icons. We believe this will bring more quality and variety to interfaces based on Nebular. Now all Nebular components internally use `<nb-icon></nb-icon>` component utilizing Eva Icons SVG icons. More details on [nb-icon](https://akveo.github.io/nebular/docs/components/icon) component. There are two ways to upgrade: **Migrate to Eva Icons** (recommended): 1) install Eva Icons Nebular package `npm i @nebular/eva-icons` 2) register `NbEvaIconsModule` in the `app.module.ts` ``` import { NbEvaIconsModule } form '@nebular/eva-icons'; @NgModule({ imports: [ // ... NbEvaIconsModule, ], }) ``` 3) Search for all usages of `<span icon="nb-*"` or ``<i icon="nb-*"``and replace with `<nb-icon icon="icon-name"></nb-icon>`. Full icons list https://akveo.github.io/eva-icons/. 4) Search for `icon: 'nb-*'` references in properties for such components as Menu, Actions, Tabs, etc. Replace those with `icon: 'icon-name'`. Please note, there is no need to specify any icon prefix (such as `eva-` or `nb-`) since prefix is specified when the icon package is registered in Nebular. 4) Update styles if necessary. 5) if you have `nebular-icons` installed, remove the package and all references. **Continue using nebular-icons** This option is also possible, but please note, Nebular Component will still use Eva Icons pack for internal component icons, such as `close`, `arrow-down`, `arrow-up`, etc. 1) Register nebular-icons as a pack for Nebular in your `app.component.ts` ``` import { NbIconLibraries } from '@nebular/theme'; constructor(private iconLibraries: NbIconLibraries) { this.iconLibraries.registerFontPack('nebular', { iconClassPrefix: 'nb' }); this.iconLibraries.setDefaultPack('nebular'); } ``` 3) Search for all usages of `<span icon="nb-*"` or ``<i icon="nb-*"`` and replace with `<nb-icon icon="icon-name"></nb-icon>` without the `nb-` prefix since prefix is specified when the icon package is registered in Nebular. 4) Search for `icon: 'nb-*'` references in properties for such components as Menu, Actions, Tabs, etc. Replace those with `icon: 'icon-name'` without `nb-` prefix since it is unnecessary and covered under the hood. Please open an issue if you have any questions or having difficulties to migrate.

BREAKING CHANGE: Following map keys were removed: - border-color - color-gray - color-neutral - color-disabled Mapping for borders, disabled and similar styles would controlled by design system and configured for each component individually.

BREAKING CHANGE: Properties 'checkbox-bg', 'checkbox-checked-bg' and 'checkbox-disabled-bg' replaced with: - checkbox-disabled-background-color - checkbox-[status]-background-color - checkbox-[status]-checked-background-color - checkbox-[status]-indeterminate-background-color - checkbox-[status]-focus-background-color - checkbox-[status]-hover-background-color - checkbox-[status]-active-background-color Property 'checkbox-size' splited into 'checkbox-height', 'checkbox-width'. Following properties were removed (along with ability to change appearance of checkbox based on checked or disabled state): - checkbox-checked-size - checkbox-checked-border-size - checkbox-disabled-size removed - checkbox-disabled-border-size Property 'checkbox-border-size' replaced with 'checkbox-border-width'. Properties 'checkbox-border-color', 'checkbox-checked-border-color', 'checkbox-disabled-border-color' replaced with: - checkbox-disabled-border-color - checkbox-[status]-border-color - checkbox-[status]-checked-border-color - checkbox-[status]-indeterminate-border-color - checkbox-[status]-hover-border-color - checkbox-[status]-active-border-color Properties 'checkbox-checkmark', 'checkbox-checked-checkmark', 'checkbox-disabled-checkmark' replaced with: - checkbox-disabled-checkmark-color - checkbox-[status]-checked-checkmark-color - checkbox-[status]-indeterminate-checkmark-color

BREAKING CHANGE: Description for change made in 37a490b. Check mark pseudo element replaced with svg. Checkbox classes were changed. Class 'customised-control' replaced with 'label'. Class 'customised-control-input' replaced with 'native-input'. Class 'customised-control-indicator' replaced with 'custom-checkbox'. Class 'customised-control-description' replaced with 'text'.

package.json

nnixaa · 2019-04-01T18:41:45Z

src/framework/theme/components/checkbox/_checkbox.component.theme.scss

-        nb-theme(checkbox-checked-checkmark),
-        nb-theme(checkbox-checked-border-size)
-      );
+      transition-duration: nb-theme(checkbox-state-transition-duration);


I was thinking we should use Angular animations rather than css

nnixaa · 2019-04-01T18:43:06Z

src/framework/theme/components/checkbox/_checkbox.component.theme.scss

-      );
-    }
+@mixin nb-checkbox-status($status: '') {
+  $status: if($status == '', '', -#{$status});


probably we should not have the - part in here -#{$status}
and leave it there

background-color: nb-theme(checkbox-#{$status}-background-color);

for redability

nb-checkbox-status called without a value (to set default styling) so -#{$status} used to prevent extra dash in variables name when $status is ''. But I agree it looks bad, will try to refactor.

nnixaa · 2019-04-01T18:45:21Z

src/framework/theme/components/select/_select.component.theme.scss

@@ -83,15 +83,15 @@
    }

    nb-checkbox {
-      .customised-control-description {


select styles in checkbox PR?

nnixaa · 2019-04-01T18:46:01Z

src/framework/theme/styles/_theming.scss

@@ -269,3 +269,31 @@ $nb-themes-export: () !global;
    }
  }
 }
+
+@mixin nb-install-global() {


why do we have new nb-install-global here?

yggg marked this pull request as ready for review March 22, 2019 07:46

yggg requested a review from nnixaa March 22, 2019 07:46

nnixaa reviewed Mar 27, 2019

View reviewed changes

yggg changed the base branch from feat/4.0 to next March 30, 2019 15:24

yggg requested a review from nnixaa April 1, 2019 06:38

nnixaa force-pushed the next branch from b9661ad to 435a6ac Compare April 1, 2019 12:29

nnixaa and others added 23 commits April 1, 2019 18:55

feat(theme): css variables support (#1257)

0e6e507

Closes #46

feat(theme): add eva palette

a0e00e7

BREAKING CHANGE: Following map keys were removed: - border-color - color-gray - color-neutral - color-disabled Mapping for borders, disabled and similar styles would controlled by design system and configured for each component individually.

feat(theme): add file for helper classes

ac905d3

feat(checkbox): add primary, info and white statuses

e8a623b

feat(checkbox): add indeterminate input

c872be9

feat(checkbox): add change output

70a8f72

test(checkbox): add checks for indeterminate and change events

7b22a49

refactor(checkbox): use updated component properties for styles

f2d183a

refactor(theme): separate new theme tokens from old ones

b27e091

refactor(theme): simplify font variables naming

9160cf6

docs(checkbox): add new properties

ce6e4d9

docs(checkbox): add indeterminate example

1ab9147

docs(checkbox): add indeterminate and checked disable examples

8fd00af

docs(checkbox): add examples with new statuses

30c98a7

docs(checkbox): make reset button visible

b467746

fix(theme): use proper values for typography settings

dce09e0

refactor(theme): move global styles to proper directory

6a1a31f

refactor(theme): add statuses function

6bf6f69

fix(checkbox): ignore basic status

bc09545

refactor(checkbox): extract statuses into enum

fabfb05

yggg added 12 commits April 1, 2019 18:56

refactor(checkbox): extract component statuses in shared type

d1e19f0

refactor(theme): remove 'white' and 'basic' statuses

8f78594

refactor(checkbox): use nb-icon

583489d

test(checkbox): add icon module import

c3738ee

test(checkbox): add mark touched test

9666be7

feat(checkbox): add state transition properties

97af6e2

feat(checkbox): add minus and check mark checkbox icons

700a8e0

feat: add default component status

5ed643d

refactor(checkbox): add default checkbox appearance

844e4ae

docs(checkbox): add new theme properties

5a46c5d

fix(select): update icon selector

d8c299c

feat(checkbox): add border style theme property

56a034c

nnixaa requested changes Apr 1, 2019

View reviewed changes

yggg added 2 commits April 1, 2019 22:02

refactor: remove mixin duplicate

dde47fb

refactor(theme): make transition not configurable

61cc8d3

yggg requested a review from nnixaa April 2, 2019 09:14

yggg added 8 commits April 2, 2019 15:58

refactor(checkbox): set default status in ts file

0299171

feat(theme): update typography

e053b2c

feat(theme): add sizes ts type and scss function

437df3e

docs(checkbox): update theme properties list

610d70a

feat(checkbox): update view after focus change

48e5e83

test(checkbox): ensure default if set when no status passed

e6b5eac

feat(checkbox): typo in event name

497027f

refactor(checkbox): remove unused class and auxiliary methods

a7eab6c

nnixaa approved these changes Apr 2, 2019

View reviewed changes

yggg merged commit 9a7ecad into akveo:next Apr 2, 2019

brannon-darby pushed a commit to brannon-darby/nebular that referenced this pull request Apr 5, 2019

feat(checkbox): Eva style 💅 (akveo#1311)

b17b215

brannon-darby pushed a commit to brannon-darby/nebular that referenced this pull request Apr 5, 2019

feat(checkbox): Eva style 💅 (akveo#1311)

f70354c

yggg added a commit that referenced this pull request Apr 17, 2019

feat(checkbox): Eva style 💅 (#1311)

103cf45

yggg added a commit that referenced this pull request May 27, 2019

feat(checkbox): Eva style 💅 (#1311)

75498aa

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(checkbox): Eva style 💅 #1311

feat(checkbox): Eva style 💅 #1311

yggg commented Mar 21, 2019 •

edited

Loading

nnixaa Mar 22, 2019

nnixaa Mar 27, 2019

nnixaa Mar 27, 2019

nnixaa Mar 27, 2019

nnixaa Mar 27, 2019

codecov bot commented Mar 30, 2019 •

edited

Loading

nnixaa Apr 1, 2019

nnixaa Apr 1, 2019

yggg Apr 1, 2019

nnixaa Apr 1, 2019

nnixaa Apr 1, 2019

		@@ -91,27 +211,56 @@ export class NbCheckboxComponent implements ControlValueAccessor {
		}

feat(checkbox): Eva style 💅 #1311

feat(checkbox): Eva style 💅 #1311

Conversation

yggg commented Mar 21, 2019 • edited Loading

Please read and mark the following check list before creating a pull request:

Short description of what this resolves:

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codecov bot commented Mar 30, 2019 • edited Loading

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yggg commented Mar 21, 2019 •

edited

Loading

codecov bot commented Mar 30, 2019 •

edited

Loading