feat(radio): Eva style #1344

yggg · 2019-04-02T19:46:50Z

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:

BREAKING CHANGES:

Following theme variables were renamed:
radio-bg -> radio-border-color, radio-inner-circle-color, radio-[status]-border-color, radio-[status]-inner-circle-color
radio-fg -> radio-text-color
radio-size -> radio-width, radio-height
radio-border-size -> radio-border-width
radio-checkmark -> radio-inner-circle-color
radio-disabled-checkmark -> radio-disabled-inner-circle
radio-indicator -> radio-circle
radio-description -> text

Following theme variables were removed:
radio-checked-bg
radio-checked-size
radio-checked-border-size
radio-checked-border-color
radio-checked-checkmark
radio-disabled-bg
radio-disabled-size
radio-disabled-border-size

'radio-bg', 'radio-checkmark' theme variables were removed.
Use radio-[status]-border-color and radio-[status]-inner-circle-color
instead.

NbRadioGroupComponent setters 'setValue', 'setName', 'setDisabled',
'setStatus' were removed. Use 'value', 'name', 'disabled', 'status'.

NbRadioComponent setter 'setDisabled' removed. Use 'disabled' instead.

BREAKING CHANGES: Following theme variables were renamed: radio-bg -> radio-border-color, radio-inner-circle-color, radio-[status]-border-color, radio-[status]-inner-circle-color radio-fg -> radio-text-color radio-size -> radio-width, radio-height radio-border-size -> radio-border-width radio-checkmark -> radio-inner-circle-color radio-disabled-checkmark -> radio-disabled-inner-circle Following theme variables were removed: radio-checked-bg radio-checked-size radio-checked-border-size radio-checked-border-color radio-checked-checkmark radio-disabled-bg radio-disabled-size radio-disabled-border-size

BREAKING CHANGES: Following classes were renamed: radio-indicator -> radio-circle radio-description -> text

BREAKING CHANGES: 'radio-bg', 'radio-checkmark' theme variables were removed. Use radio-[status]-border-color and radio-[status]-inner-circle-color instead.

Set inner circle dimensions to be multiple of radio circle dimensions

BREAKING CHANGE: NbRadioGroupComponent setters 'setValue', 'setName', 'setDisabled', 'setStatus' were removed. Use 'value', 'name', 'disabled', 'status'. NbRadioComponent setter 'setDisabled' removed. Use 'disabled' instead.

codecov · 2019-04-02T19:55:49Z

Codecov Report

Merging #1344 into next will increase coverage by 0.19%.
The diff coverage is 92.04%.

@@            Coverage Diff             @@
##             next    #1344      +/-   ##
==========================================
+ Coverage   81.44%   81.63%   +0.19%     
==========================================
  Files         237      237              
  Lines        7222     7275      +53     
  Branches      617      626       +9     
==========================================
+ Hits         5882     5939      +57     
+ Misses       1154     1150       -4     
  Partials      186      186

Impacted Files	Coverage Δ
...rk/theme/components/radio/radio-group.component.ts	`87.62% <87.23%> (+9.99%)`	⬆️
...ramework/theme/components/radio/radio.component.ts	`98.11% <97.56%> (-1.89%)`	⬇️

nnixaa · 2019-04-03T07:28:58Z

src/framework/theme/components/radio/_radio.component.theme.scss

+    }
+
+    @each $status in nb-get-statuses() {
+      .native-input:enabled + .radio-circle.status-#{$status} {


don't we need the same empty check as for checkbox?

No need, nb-get-status has no empty statuses only 'primary', 'success', 'warning', 'danger', 'info'.

nnixaa · 2019-04-03T08:55:15Z

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

        [name]="name"
        [value]="value"
        [checked]="checked"
        [disabled]="disabled"
        (change)="onChange($event)"
        (click)="onClick($event)">
-      <span class="radio-indicator"></span>
-      <span class="radio-description">
+      <span class="radio-circle"


why we don't just put a class on top as we usually do?

Changed in d09570e

Fixes 'ExpressionHasBeenChanged'. NbRadioComponent has host bindings which could change after view initialized since NbRadioGroupComponent updates radio status in AfterContentInit.

Prevents unnecessary mark for check when option property changed from 'undefined' to 'false'.

nnixaa · 2019-04-04T14:11:33Z

src/playground/with-layout/radio/radio-statuses.component.ts

@@ -0,0 +1,33 @@
+import { Component } from '@angular/core';
+
+interface Option {


I would prefer to skip this from docs as it complicates the case

Ok, removed in 8533560

BREAKING CHANGES: Following theme variables were renamed: radio-bg -> radio-border-color, radio-inner-circle-color, radio-[status]-border-color, radio-[status]-inner-circle-color radio-fg -> radio-text-color radio-size -> radio-width, radio-height radio-border-size -> radio-border-width radio-checkmark -> radio-inner-circle-color radio-disabled-checkmark -> radio-disabled-inner-circle radio-indicator -> radio-circle radio-description -> text Following theme variables were removed: radio-checked-bg radio-checked-size radio-checked-border-size radio-checked-border-color radio-checked-checkmark radio-disabled-bg radio-disabled-size radio-disabled-border-size 'radio-bg', 'radio-checkmark' theme variables were removed. Use radio-[status]-border-color and radio-[status]-inner-circle-color instead. NbRadioGroupComponent setters 'setValue', 'setName', 'setDisabled', 'setStatus' were removed. Use 'value', 'name', 'disabled', 'status'. NbRadioComponent setter 'setDisabled' removed. Use 'disabled' instead. 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. Following theme properties were renamed: form-control-border-width -> input-border-width form-control-border-radius -> input-rectangle-border-radius form-control-semi-round-border-radius -> input-semi-round-border-radius form-control-round-border-radius -> input-round-border-radius form-control-text-primary-color -> input-text-color form-control-border-color -> input-border-color form-control-selected-border-color -> input-focus-border-color, input-[status]-focus-color form-control-bg -> input-background-color form-control-focus-bg -> input-focus-border-color form-control-placeholder-color -> input-placeholder-text-color form-control-placeholder-font-size -> input-placeholder-font-size form-control-font-size -> input-medium-text-font-size form-control-font-size-sm -> input-small-text-font-size form-control-font-size-lg -> input-large-text-font-size form-control-padding -> input-medium-padding form-control-padding-sm -> input-small-padding form-control-padding-lg -> input-large-padding form-control-info-border-color -> input-info-border-color form-control-success-border-color -> input-success-border-color form-control-danger-border-color -> input-danger-border-color form-control-warning-border-color -> input-warning-border-color form-control-border-type -> input-border-style Removed: form-control-label-font-weight form-control-feedback-font-size form-control-feedback-font-weight Input status classes were renamed from input-[status-name] to status-[status-name]. Input size classes were renamed from input-[size-name] to size-[size-name]. Input shape classes were renamed from input-[shape-name] to shape-[shape-name]. All NbInputDirective static fields removed. Removed fields: SIZE_SMALL, SIZE_MEDIUM, SIZE_LARGE, STATUS_PRIMARY, STATUS_INFO, STATUS_SUCCESS, STATUS_WARNING, STATUS_DANGER, SHAPE_SEMI_ROUND, SHAPE_RECTANGLE, SHAPE_ROUND. Use NbComponentStatus, NbComponentShape, NbComponentSize instead. NbInputDirective 'size' property and 'setSize' getter removed. Use unified 'fieldSize' property instead. NbInputDirective 'setFullWidth' replaced with read/write 'fullWidth' property. Remove bootstrap theme support until it's refactored to use updated theme properties

yggg added 19 commits April 2, 2019 22:09

refactor(radio): align class names with checkbox

267670b

BREAKING CHANGES: Following classes were renamed: radio-indicator -> radio-circle radio-description -> text

fix(radio): update and resubscribe to option after they change

b07dbe9

fix(radio): update and resubscribe to option after they change

3138b24

feat(radio): add statuses to radio button

3dd3cd7

refactor(radio): style using updated component properties

00a4ce2

BREAKING CHANGES: 'radio-bg', 'radio-checkmark' theme variables were removed. Use radio-[status]-border-color and radio-[status]-inner-circle-color instead.

fix(radio): prevent inner circle distortion

409b149

Set inner circle dimensions to be multiple of radio circle dimensions

docs(radio): add statuses and disabled group examples

37a550a

docs(radio): update theme properties list

79931f2

fix(radio): proper typography settings

fc04ebf

refactor(radio): remove white status

0eb812f

feat(radio): add background color

89df6bd

refactor(radio): remove named inputs

5476810

BREAKING CHANGE: NbRadioGroupComponent setters 'setValue', 'setName', 'setDisabled', 'setStatus' were removed. Use 'value', 'name', 'disabled', 'status'. NbRadioComponent setter 'setDisabled' removed. Use 'disabled' instead.

refactor(radio): remove own status enum and use shared

7496c65

fix(radio): typo

f725667

docs(radio): fix examples

1458ec0

feat(radio): add border style theme property

94d2f2b

refactor(radio): use named state colors

218f14e

feat(radio): prevent setting empty status

60e60c6

yggg requested a review from nnixaa April 2, 2019 19:46

yggg changed the title ~~feat(radio): Eva styles~~ feat(radio): Eva style Apr 3, 2019

docs(radio): update theme properties list

c0abb37

nnixaa requested changes Apr 3, 2019

View reviewed changes

yggg added 2 commits April 3, 2019 12:13

refactor(radio): move status class to the host

d09570e

feat(radio): set default status if value not passed

42baf59

yggg requested a review from nnixaa April 3, 2019 17:38

yggg added 3 commits April 3, 2019 21:31

fix(radio): update radio status and trigger change detection

09b5f3a

Fixes 'ExpressionHasBeenChanged'. NbRadioComponent has host bindings which could change after view initialized since NbRadioGroupComponent updates radio status in AfterContentInit.

refactor(radio): set provided status if it differ from current

19e5fe7

refactor(radio): call change detector methods from radio component

b43cc88

fix(radio): set radio name right away

32003be

yggg mentioned this pull request Apr 3, 2019

feat(tooltip): Eva style #1345

Merged

2 tasks

yggg and others added 4 commits April 4, 2019 13:01

Merge branch 'next' into feat/eva-radio

54852e9

fix(radio): prevent subscription creating if no options

3275354

feat(radio): initialize radio properties

5c2b1d7

Prevents unnecessary mark for check when option property changed from 'undefined' to 'false'.

fix(radio): wait change detection to finish before updating options

bae04b9

nnixaa reviewed Apr 4, 2019

View reviewed changes

docs(radio): remove unnecessary interface

8533560

nnixaa approved these changes Apr 5, 2019

View reviewed changes

yggg merged commit 9bc88fb into akveo:next Apr 5, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(radio): Eva style #1344

feat(radio): Eva style #1344

yggg commented Apr 2, 2019

codecov bot commented Apr 2, 2019 •

edited

nnixaa Apr 3, 2019

yggg Apr 3, 2019

nnixaa Apr 3, 2019

yggg Apr 3, 2019

nnixaa Apr 4, 2019

yggg Apr 4, 2019

		@@ -0,0 +1,33 @@
		import { Component } from '@angular/core';

		interface Option {

feat(radio): Eva style #1344

feat(radio): Eva style #1344

Conversation

yggg commented Apr 2, 2019

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

Short description of what this resolves:

codecov bot commented Apr 2, 2019 • edited

Codecov Report

nnixaa Apr 3, 2019

Choose a reason for hiding this comment

yggg Apr 3, 2019

Choose a reason for hiding this comment

nnixaa Apr 3, 2019

Choose a reason for hiding this comment

yggg Apr 3, 2019

Choose a reason for hiding this comment

nnixaa Apr 4, 2019

Choose a reason for hiding this comment

yggg Apr 4, 2019

Choose a reason for hiding this comment

codecov bot commented Apr 2, 2019 •

edited