feat(input): Eva style #1343

yggg · 2019-04-02T18:47:20Z

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:

Restyle input in Eva styles.

BREAKING CHANGES:

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

BREAKING CHANGES: - calendar - use primary button in cosmic theme - checkbox - `opacity` instead of `lightning` - context-menu, popover, datepicker - `calc` instead of `round` and scss calculations - input - `opacity` for placeholder instead of `lightning` - tabs - remove gradient for tab bottom separator in cosmic theme - toastr - use `background-color` instead of the gradient in cosmic theme - text colors are now used from success/primary/warning/etc colors - add color palette instead of generating colors using scss-functions, an example for `primary` `color-primary-200` `color-primary-300` `color-primary-400` `color-primary-600` `color-primary-700` `create-colors-palette()` scss function that can be used during the theme installation process to generate palette automatically Closes #1228

Closes #46

Disable e2e on next branch. Will be enabled after updating tests to new colors, etc.

@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'.

BREAKING CHANGES: NbCheckboxComponent's '_value' property now private. Use 'value' instead.

BREAKING CHANGE: Following NbInputDirective static fields removed: SIZE_SMALL, SIZE_LARGE, STATUS_PRIMARY, STATUS_INFO, STATUS_SUCCESS, STATUS_WARNING, STATUS_DANGER, SHAPE_SEMI_ROUND, SHAPE_ROUND.

BREAKING CHANGE: 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

codecov · 2019-04-03T09:16:44Z

Codecov Report

Merging #1343 into next will decrease coverage by 0.02%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##             next    #1343      +/-   ##
==========================================
- Coverage   81.47%   81.44%   -0.03%     
==========================================
  Files         237      237              
  Lines        7233     7222      -11     
  Branches      618      617       -1     
==========================================
- Hits         5893     5882      -11     
  Misses       1154     1154              
  Partials      186      186

Impacted Files	Coverage Δ
...ramework/theme/components/input/input.directive.ts	`100% <100%> (ø)`	⬆️
...rk/theme/components/checkbox/checkbox.component.ts	`100% <100%> (ø)`	⬆️

nnixaa · 2019-04-03T10:51:08Z

src/framework/theme/components/component-size.ts

@@ -1 +1 @@
-export type NbComponentSize = '' | 'tiny' | 'small' | 'medium' | 'large' | 'giant';
+export type NbComponentSize = 'tiny' | 'small' | 'medium' | 'large' | 'giant';


so, no empty status after all?

Yep. No more empty values for size, status or shape. Component which could has unset value, should add '' as possible value. Like this:
status: '' | NbComponentStatus;

nnixaa and others added 30 commits March 28, 2019 17:26

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

2cbb668

Closes #46

chore: disable e2e on next branch (#1328)

f12f9db

Disable e2e on next branch. Will be enabled after updating tests to new colors, etc.

feat(theme): add eva palette

3f064e1

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

d6a9cac

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

d5ed559

feat(checkbox): add indeterminate input

749a9f9

feat(checkbox): add change output

660dd9c

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

b91f294

refactor(checkbox): use updated component properties for styles

4d37a4c

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

2e626d5

refactor(theme): simplify font variables naming

b5d89c1

docs(checkbox): add new properties

49f491d

docs(checkbox): add indeterminate example

b695f7b

docs(checkbox): add indeterminate and checked disable examples

5648de1

docs(checkbox): add examples with new statuses

e01a338

docs(checkbox): make reset button visible

9c48227

fix(theme): use proper values for typography settings

9145150

refactor(theme): move global styles to proper directory

80c08b1

refactor(theme): add statuses function

d4f3625

fix(checkbox): ignore basic status

b899234

refactor(checkbox): extract statuses into enum

db0a725

feat(theme): add new Eva theme variables

4b66e17

refactor(checkbox): remove named inputs

45bf9c7

BREAKING CHANGES: NbCheckboxComponent's '_value' property now private. Use 'value' instead.

refactor(checkbox): extract component statuses in shared type

4582518

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

3639476

refactor(checkbox): use nb-icon

e3f10b5

yggg added 12 commits March 31, 2019 10:18

docs(input): update theme variables list

fe350a1

refactor(input): define size and shape types

cfa53f8

BREAKING CHANGE: Following NbInputDirective static fields removed: SIZE_SMALL, SIZE_LARGE, STATUS_PRIMARY, STATUS_INFO, STATUS_SUCCESS, STATUS_WARNING, STATUS_DANGER, SHAPE_SEMI_ROUND, SHAPE_ROUND.

refactor(input): remove named inputs

aa11ac3

BREAKING CHANGE: NbInputDirective 'size' property and 'setSize' getter removed. Use unified 'fieldSize' property instead. NbInputDirective 'setFullWidth' replaced with read/write 'fullWidth' property.

refactor(component status): add no status value

e87b9db

refactor(input): remove unnecessary values from size and shape

dc7b06a

test(input): use updated field styles

f972eab

docs(input): remove basic example

23645fc

Merge branch 'next' into feat/eva-input

03680c4

refactor: remove mixins duplicates

d2eb9e0

feat: add shared component shape type

33ac068

feat(input): use common size and shape

788ed6d

refactor(input): move initial styling to default states

d265dc3

yggg requested a review from nnixaa April 2, 2019 18:47

yggg changed the base branch from master to next April 2, 2019 18:47

yggg added 5 commits April 2, 2019 21:49

docs(input): update theme properties list

7cdaf4a

feat(input): add border style theme property

69c3580

docs(input): add missing theme property

f86d70d

fix(bootstrap): remove bootstrap theme

c007df7

Remove bootstrap theme support until it's refactored to use updated theme properties

test(input): check if size and shape set to default if no value passed

736d965

nnixaa reviewed Apr 3, 2019

View reviewed changes

yggg added 2 commits April 3, 2019 16:01

refactor: remove empty component status

1b7213c

test: remove checks for old status behavior

829e8fd

yggg requested a review from nnixaa April 3, 2019 13:08

docs(input): put input in card

fc72946

yggg merged commit 6419ea4 into akveo:next Apr 4, 2019

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

feat(input): Eva style (akveo#1343)

3bd3fb8

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

feat(input): Eva style (akveo#1343)

722e739

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

feat(input): Eva style (#1343)

e1a0abd

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

feat(input): Eva style (#1343)

c9c288b

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(input): Eva style #1343

feat(input): Eva style #1343

yggg commented Apr 2, 2019 •

edited

Loading

codecov bot commented Apr 3, 2019 •

edited

Loading

nnixaa Apr 3, 2019

yggg Apr 3, 2019 •

edited

Loading

		@@ -1 +1 @@
		export type NbComponentSize = '' \| 'tiny' \| 'small' \| 'medium' \| 'large' \| 'giant';
		export type NbComponentSize = 'tiny' \| 'small' \| 'medium' \| 'large' \| 'giant';

feat(input): Eva style #1343

feat(input): Eva style #1343

Conversation

yggg commented Apr 2, 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 Apr 3, 2019 • edited Loading

Codecov Report

nnixaa Apr 3, 2019

Choose a reason for hiding this comment

yggg Apr 3, 2019 • edited Loading

Choose a reason for hiding this comment

yggg commented Apr 2, 2019 •

edited

Loading

codecov bot commented Apr 3, 2019 •

edited

Loading

yggg Apr 3, 2019 •

edited

Loading