feat: add basic and control statuses #2047

yggg · 2019-10-29T17:11:45Z

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:

Following variables were renamed:

alert-background-color                             -> alert-basic-background-color
alert-text-color                                   -> alert-basic-text-color

button-outline-background-color                    -> button-outline-<status>-background-color
button-ghost-<status>-hover-color                  -> button-ghost-<status>-hover-text-color

checkbox-background-color                          -> checkbox-basic-background-color
checkbox-border-color                              -> checkbox-basic-border-color
checkbox-text-color                                -> checkbox-basic-text-color
checkbox-disabled-background-color                 -> checkbox-basic-disabled-background-color
checkbox-disabled-border-color                     -> checkbox-basic-disabled-border-color
checkbox-disabled-checkmark-color                  -> checkbox-basic-disabled-checkmark-color
checkbox-disabled-text-color                       -> checkbox-basic-disabled-text-color

input-background-color                             -> input-basic-background-color
input-placeholder-text-color                       -> input-basic-placeholder-text-color
input-text-color                                   -> input-basic-text-color
input-border-color                                 -> input-basic-border-color
input-focus-border-color                           -> input-basic-focus-border-color
input-hover-border-color                           -> input-basic-hover-border-color
input-disabled-border-color                        -> input-basic-disabled-border-color
input-disabled-background-color                    -> input-basic-disabled-background-color
input-disabled-text-color                          -> input-basic-disabled-text-color
input-disabled-placeholder-text-color              -> input-basic-disabled-placeholder-text-color

radio-background-color                             -> radio-basic-background-color
radio-border-color                                 -> radio-basic-border-color
radio-text-color                                   -> radio-basic-text-color
radio-disabled-background-color                    -> radio-basic-disabled-background-color
radio-disabled-border-color                        -> radio-basic-disabled-border-color
radio-disabled-text-color                          -> radio-basic-disabled-text-color
radio-disabled-checked-background-color            -> radio-basic-disabled-checked-background-color
radio-disabled-checked-inner-circle-color          -> radio-basic-disabled-checked-inner-circle-color

select-text-font-weight                            -> select-<size>-text-font-weight
select-placeholder-text-font-weight                -> select-<size>-placeholder-text-font-weight
select-outline-background-color                    -> select-outline-basic-background-color
select-outline-border-color                        -> select-outline-basic-border-color
select-outline-icon-color                          -> select-outline-basic-icon-color
select-outline-text-color                          -> select-outline-basic-text-color
select-outline-placeholder-text-color              -> select-outline-basic-placeholder-text-color
select-outline-focus-border-color                  -> select-outline-basic-focus-border-color
select-outline-hover-border-color                  -> select-outline-basic-hover-border-color
select-outline-disabled-background-color           -> select-outline-basic-disabled-background-color
select-outline-disabled-border-color               -> select-outline-basic-disabled-border-color
select-outline-disabled-icon-color                 -> select-outline-basic-disabled-icon-color
select-outline-disabled-text-color                 -> select-outline-basic-disabled-text-color
select-open-outline-border-color                   -> select-outline-<status>-open-border-color
select-outline-adjacent-border-color               -> select-outline-<status>-adjacent-border-color
select-options-list-outline-border-color           -> select-options-list-outline-basic-border-color
select-filled-background-color                     -> select-filled-basic-background-color
select-filled-border-color                         -> select-filled-basic-border-color
select-filled-icon-color                           -> select-filled-basic-icon-color
select-filled-text-color                           -> select-filled-basic-text-color
select-filled-placeholder-text-color               -> select-filled-basic-placeholder-text-color
select-filled-focus-border-color                   -> select-filled-basic-focus-border-color
select-filled-hover-border-color                   -> select-filled-basic-hover-border-color
select-filled-disabled-background-color            -> select-filled-basic-disabled-background-color
select-filled-disabled-border-color                -> select-filled-basic-disabled-border-color
select-filled-disabled-icon-color                  -> select-filled-basic-disabled-icon-color
select-filled-disabled-text-color                  -> select-filled-basic-disabled-text-color
select-options-list-filled-border-color            -> select-options-list-filled-basic-border-color
select-hero-icon-color                             -> select-hero-basic-icon-color
select-hero-text-color                             -> select-hero-basic-text-color
select-hero-placeholder-text-color                 -> select-hero-basic-placeholder-text-color
select-hero-disabled-background-color              -> select-hero-basic-disabled-background-color
select-hero-disabled-icon-color                    -> select-hero-basic-disabled-icon-color
select-hero-disabled-text-color                    -> select-hero-basic-disabled-text-color
select-options-list-hero-border-color              -> select-options-list-hero-basic-border-color

spinner-background-color                           -> spinner-basic-background-color
spinner-circle-filled-color                        -> spinner-basic-circle-filled-color
spinner-circle-empty-color                         -> spinner-basic-circle-empty-color

toastr-background-color                            -> toastr-basic-background-color
toastr-border-color                                -> toastr-basic-border-color
toastr-text-color                                  -> toastr-basic-text-color
toastr-destroyable-hover-background-color          -> toastr-destroyable-basic-hover-background-color
toastr-destroyable-hover-border-color              -> toastr-destroyable-basic-hover-border-color
toastr-destroyable-hover-<status>-background-color -> toastr-destroyable-<status>-hover-background-color
toastr-destroyable-hover-<status>-border-color     -> toastr-destroyable-<status>-hover-border-color

toggle-background-color                            -> toggle-basic-background-color
toggle-border-color                                -> toggle-basic-border-color
toggle-switcher-background-color                   -> toggle-basic-switcher-background-color
toggle-switcher-checkmark-color                    -> toggle-basic-switcher-checkmark-color
toggle-text-color                                  -> toggle-basic-text-color
toggle-focus-background-color                      -> toggle-basic-focus-background-color
toggle-focus-border-color                          -> toggle-basic-focus-border-color
toggle-hover-background-color                      -> toggle-basic-hover-background-color
toggle-hover-border-color                          -> toggle-basic-hover-border-color
toggle-active-background-color                     -> toggle-basic-active-background-color
toggle-active-border-color                         -> toggle-basic-active-border-color
toggle-disabled-background-color                   -> toggle-basic-disabled-background-color
toggle-disabled-border-color                       -> toggle-basic-disabled-border-color
toggle-disabled-switcher-background-color          -> toggle-basic-disabled-switcher-background-color
toggle-disabled-checked-switcher-checkmark-color   -> toggle-basic-disabled-checked-switcher-checkmark-color
toggle-disabled-text-color                         -> toggle-basic-disabled-text-color

chart-scrollbar-color                              -> chat-scrollbar-color
chart-scrollbar-background-color                   -> chat-scrollbar-background-color
chart-scrollbar-width                              -> chat-scrollbar-width
chat-header-text-color                             -> chat-basic-header-text-color

Following variables were removed:

select-hero-focus-border-color
select-hero-hover-border-color
select-hero-background-color
select-hero-border-color
select-hero-border-style
select-hero-border-width

Toastr now has `basic` status by default. Default toastr backround, border and text color theme variables became `basic`: toastr-background-color -> toastr-basic-background-color toastr-border-color -> toastr-basic-border-color toastr-text-color -> toastr-basic-text-color toastr-destroyable-hover-background-color -> toastr-destroyable-hover-basic-background-color toastr-destroyable-hover-border-color -> toastr-destroyable-hover-basic-border-color

Button now has `basic` status by default. `button-outline-background-color` became `button-outline-basic-background-color`.

Input now has `basic` status by default and empty string value is deprecated. Default background, border, text colors theme variables became basic: input-background-color -> input-basic-background-color input-placeholder-text-color -> input-basic-placeholder-text-color input-text-color -> input-basic-text-color input-border-color -> input-basic-border-color input-focus-border-color -> input-basic-focus-border-color input-hover-border-color -> input-basic-hover-border-color

Checkbox now has `basic` status by default and empty string value is deprecated. Default background, border and text colors theme variables became `basic`: checkbox-background-color -> checkbox-basic-background-color checkbox-border-color -> checkbox-basic-border-color checkbox-text-color -> checkbox-basic-text-color

Badge now has `basic` status by default.

Progress now has `basic` status by default.

Alert now has `basic` status by default. Default background and text colors theme variables became `basic`: alert-background-color -> alert-basic-background-color alert-text-color -> alert-basic-text-color

Spinner now has `basic` status by default. Default background, filled and empty colors theme variables became `basic`: spinner-background-color -> spinner-basic-background-color spinner-circle-filled-color -> spinner-basic-circle-filled-color spinner-circle-empty-color -> spinner-basic-circle-empty-color

Tooltip now has `basic` status by default. Default background, filled and empty colors theme variables became `basic`: tooltip-background-color -> tooltip-basic-background-color tooltip-border-color -> tooltip-basic-border-color tooltip-text-color -> tooltip-basic-text-color

Radio now has `basic` status by default. Default background, filled and empty colors theme variables became `basic`: radio-background-color -> radio-basic-background-color radio-circle-filled-color -> radio-basic-circle-filled-color radio-circle-empty-color -> radio-basic-circle-empty-color

Icon now has `basic` status by default.

Toggle now has `basic` status by default. Default background, filled and empty colors theme variables became `basic`: toggle-border-color -> toggle-basic-border-color toggle-background-color -> toggle-basic-background-color toggle-switcher-background-color -> toggle-basic-switcher-background-color toggle-switcher-checkmark-color -> toggle-basic-switcher-checkmark-color toggle-text-color -> toggle-basic-text-color

Select now has `basic` status by default. Default colors theme variables became `basic`: select-outline-background-color -> select-outline-basic-background-color select-outline-border-color -> select-outline-basic-border-color select-outline-icon-color -> select-outline-basic-icon-color select-outline-text-color -> select-outline-basic-text-color select-outline-placeholder-text-color -> select-outline-basic-placeholder-text-color select-outline-focus-border-color -> select-outline-basic-focus-border-color select-outline-hover-border-color -> select-outline-basic-hover-border-color select-open-outline-border-color -> select-open-basic-outline-border-color select-outline-adjacent-border-color -> select-outline-basic-adjacent-border-color select-filled-icon-color -> select-filled-basic-icon-color select-filled-text-color -> select-filled-basic-text-color select-filled-placeholder-text-color -> select-filled-basic-placeholder-text-color select-filled-focus-border-color -> select-filled-basic-focus-border-color select-filled-hover-border-color -> select-filled-basic-hover-border-color select-filled-disabled-background-color -> select-filled-basic-disabled-background-color select-filled-disabled-border-color -> select-filled-basic-disabled-border-color select-filled-disabled-icon-color -> select-filled-basic-disabled-icon-color select-filled-disabled-text-color -> select-filled-basic-disabled-text-color select-hero-background-color -> select-hero-basic-background-color select-hero-border-color -> select-hero-basic-border-color select-hero-icon-color -> select-hero-basic-icon-color select-hero-text-color -> select-hero-basic-text-color select-hero-placeholder-text-color -> select-hero-basic-placeholder-text-color select-hero-focus-border-color -> select-hero-basic-focus-border-color select-hero-hover-border-color -> select-hero-basic-hover-border-color select-hero-disabled-background-color -> select-hero-basic-disabled-background-color select-hero-disabled-icon-color -> select-hero-basic-disabled-icon-color select-hero-disabled-text-color -> select-hero-basic-disabled-text-color select-options-list-hero-border-color -> select-options-list-hero-basic-border-color

Generic disabled theme variables replaced with separate for each status variables: input-disabled-border-color -> input-<status>-disabled-border-color input-disabled-background-color -> input-<status>-disabled-background-color input-disabled-text-color -> input-<status>-disabled-text-color input-disabled-placeholder-text-color -> input-<status>-disabled-placeholder-text-color

Generic disabled theme variables replaced with separate for each status variables (outline appearance only): select-outline-disabled-background-color -> select-outline-<status>-disabled-background-color select-outline-disabled-border-color -> select-outline-<status>-disabled-border-color select-outline-disabled-icon-color -> select-outline-<status>-disabled-icon-color select-outline-disabled-text-color -> select-outline-<status>-disabled-text-color

Card now has `basic` status by default.

codecov · 2019-10-31T11:27:56Z

Codecov Report

Merging #2047 into master will decrease coverage by 0.21%.
The diff coverage is 75.6%.

@@            Coverage Diff             @@
##           master    #2047      +/-   ##
==========================================
- Coverage   84.28%   84.07%   -0.22%     
==========================================
  Files         235      235              
  Lines        7905     8031     +126     
  Branches      695      705      +10     
==========================================
+ Hits         6663     6752      +89     
- Misses       1039     1068      +29     
- Partials      203      211       +8

Impacted Files	Coverage Δ
...me/components/calendar/calendar-range.component.ts	`89.09% <ø> (ø)`	⬆️
...ramework/theme/components/dialog/dialog.service.ts	`89.23% <ø> (ø)`	⬆️
...heme/components/datepicker/datepicker.directive.ts	`80.32% <ø> (ø)`	⬆️
.../components/route-tabset/route-tabset.component.ts	`83.33% <ø> (ø)`	⬆️
...mponents/card/reveal-card/reveal-card.component.ts	`85.71% <ø> (ø)`	⬆️
...work/theme/components/spinner/spinner.directive.ts	`34.21% <100%> (ø)`	⬆️
...work/theme/components/tooltip/tooltip.component.ts	`100% <100%> (ø)`	⬆️
.../framework/theme/components/card/card.component.ts	`98.18% <100%> (+3.95%)`	⬆️
.../components/progress-bar/progress-bar.component.ts	`100% <100%> (ø)`	⬆️
...ramework/theme/components/badge/badge.component.ts	`100% <100%> (ø)`	⬆️
... and 17 more

yggg added 30 commits October 28, 2019 13:10

refactor: change basic control base color to white

91643a4

feat: add transparent semantic variables

bb8e791

refactor: change default text color

8fa6820

feat: add basic and control statuses

d8586e3

fix(playground): skip control background class generation

3d9a6d4

docs(toastr): update default status

b507d84

feat(button): add basic and control statuses

cdb5ec8

Button now has `basic` status by default. `button-outline-background-color` became `button-outline-basic-background-color`.

feat(badge): add basic and control statuses

20bfd67

Badge now has `basic` status by default.

feat(progress bar): add basic and control statuses

73ddf53

Progress now has `basic` status by default.

feat(alert): add basic and control statuses

988a948

Alert now has `basic` status by default. Default background and text colors theme variables became `basic`: alert-background-color -> alert-basic-background-color alert-text-color -> alert-basic-text-color

fix(playground): prevent components overlay overflow by spinners

753bdf3

feat(icon): add basic and control statuses

6ab012a

Icon now has `basic` status by default.

fix(input): set proper text color for control status

4d562e2

refactor(playground): use primary color as control examples background

5e7039e

feat(card): add basic and control statuses

58de8fa

Card now has `basic` status by default.

feat(chat): add basic and control statuses

4337b62

refactor: use nb-outline mixin

b394a10

fix(toggle): update basic and control statuses according design

702827a

feat(toggle): allow checked input to be set as an attribute

be43268

refactor: revert default status breaking changes

49f654e

yggg and others added 16 commits October 30, 2019 14:35

fix(icon): set default status if it's not provided in config

515bc40

refactor(tooltip): update icon size according to design

ed7c338

refactor(spinner): update sizes according to design

2aadba1

refactor(input, spinner): make input and select same height as buttons

8d7a03d

fix(button): change icon depending on size

96696c8

refactor(icon): make status optional

dea19d2

refactor(tooltip): make status optional

51f17f1

Merge branch 'master' into feat/add-basic-and-control-statuses

a613aff

fix(select): use correct variable for adjacent border

b054807

refactor(spinner): convert empty status value to basic

eee5db0

docs(tooltip): update theme properties list

5f7b67b

docs(chat): update theme properties list

5ee17e0

docs(icon): update theme properties list

cad2de4

style: remove tab symbol

d1fa646

refactor(toastr): move status before state in theme variable name

1ba549b

Merge branch 'master' into feat/add-basic-and-control-statuses

663f442

nnixaa previously approved these changes Oct 31, 2019

View reviewed changes

Merge branch 'master' into feat/add-basic-and-control-statuses

c6cfe4e

yggg added 2 commits October 31, 2019 14:53

fix(chat): set status on input hover and focus

8c3676f

fix(chat): make basic default status

9cf8eba

yggg dismissed nnixaa’s stale review via 9cf8eba October 31, 2019 11:53

yggg added 5 commits October 31, 2019 15:00

docs(checkbox): add space between checkboxes

5502e2a

refactor(overlay): use color from Eva

d8fd0a5

docs(infinite list): make placeholders full width

4b74beb

fix(popover): set text color for any popover

14c2163

refactor(chat): add empty status deprecation warning

afde53e

yggg requested a review from nnixaa October 31, 2019 12:52

nnixaa approved these changes Oct 31, 2019

View reviewed changes

yggg merged commit 884dd66 into akveo:master Oct 31, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add basic and control statuses #2047

feat: add basic and control statuses #2047

yggg commented Oct 29, 2019 •

edited

Loading

codecov bot commented Oct 31, 2019 •

edited

Loading

feat: add basic and control statuses #2047

feat: add basic and control statuses #2047

Conversation

yggg commented Oct 29, 2019 • edited Loading

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

Short description of what this resolves:

codecov bot commented Oct 31, 2019 • edited Loading

Codecov Report

yggg commented Oct 29, 2019 •

edited

Loading

codecov bot commented Oct 31, 2019 •

edited

Loading