@nebular/bootstrap

@nebular/bootstrap module, more details https://akveo.github.io/nebular/

Changelog

4.0.0 (2019-06-03)

Highlights

Nebular 4.0 is a significant improvement and rework of the previous versions. We believe these changes bring Nebular to the new level of quality and feature-richness with:

• Updated look&feel with Eva Design System;
• New convenient and flexible Theming system;
• Custom CSS properties support in theming;
• Unified component interfaces (@Input's and @Output's);
• New Dark theme;
• Support of SVG Eva Icons.

Steps To Update

To achieve all of this and allow Nebular to grow faster and better, we had to refactor a lot of internal implementations, as well as public APIs. We hope that next Nebular versions won't receive such significant upgrades and the amount of breaking changes will be kept as low as possible.

Migration Guide is available. We would appreciate hearing your feedback on the update steps, quality of the guide and if you have any questions or complications - please post a comment here https://github.com/akveo/nebular/issues/1524.

Bug Fixes

• accordion: fix incorrect accordion mapping (#1535) (3a0382c)
• bootstrap: button group, modal and input (#1540) (2a177c0)
• add missing public api entries (#1545) (fe56655)
• docs: change features section background (#1556) (c33442b)
• docs: disable custom outline as it breaks Eva components (#1537) (c48caaf)
• docs: example row helper (#1548) (c0d404f)
• docs: fix component styles table (#1543) (ab166fd)
• docs: fix transparent background color (#1536) (0aed7b6)
• docs: update changed component theme vars link (#1550) (ae73257)
• radio: prevent circles distraction (#1549) (abb50df)
• add missing components exports to public api (#1487) (2f551aa)
• move auth examples to base component without layout (#1479) (30e6942)
• checkbox: fix inactive background color (#1502) (48966b8)
• checkbox: fix value output (#1505) (0ea3167)
• docs: docs fixes, minimize icons, remove unused fonts (#1491) (9334d3e)
• spinner: ability to set spinner message (#1508) (64f94c1)
• theme: finalize themes with design system (#1481) (5673e98), closes #40dc7 #ebeef2 #3b5998 #55 #dd4b39 #0177b5 #6b6b6 #2f96e8 #f26798 #0093
• themes: fix get-value not working in component context (#1493) (30bc29f)
• theming: fix nb-theme not working in component mode without nb-i… (#1503) (0bc9f07)
• docs: 4.0 fixes (#1465) (46a022c)
• docs: use new popover trigger input name (#1462) (8cf7edb)
• docs: prefix root css urls with base path (#1453) (d42c896)
• docs: trigger change detection if tab updated (#1445) (9679e3a)
• docs: update examples after Eva migration (#1448) (bc2ee49)
• docs: use current tab component property (#1447) (122585a)
• schematics: fix eva-icons schematic (#1380) (0c809da)
• tabset: prevent select call if no active tab found (#1444) (f738f9d)
• checkbox: rename variables according to property where it used (#1372) (2c02daf)
• menu: add RTL chevron menu icon (#1042) (3f6ca4f)
• option group: propagate disabled state to child options (#1416) (54da610)
• add missing modules in examples (#1424) (1139848)
• remove empty component file (#1352) (e0cc301)
• overlay: set context on component portals before first cd run (#1395) (4ff3816)
• select: allow select to work with empty values in nb-option (#1282) (ca4a1ff)
• select: emit array when resetting multiple select (#1399) (526cd0e)
• select: prevent navigation to disabled option from keyboard (#1427) (657d8ae)

Features

• icons: new nb-icon component, icons library, and @nebular/eva-icons package (#1319) (621f461)
• theme: css variables support (#1257) (da136da), closes #46
• accordion: Eva styles (#1362) (98a159c)
• actions: Eva style (#1397) (6399fab)
• alert: Eva theme (#1406) (8c6c677)
• badge: Eva theme (#1407) (c5799df)
• button: Eva style (#1359) (1dbddda)
• calendar: Eva style (#1365) (c5f7ead)
• calendar: use nb-icon in navigation buttons (#1388) (ab52c0c)
• card: Eva style (#1346) (cd4972c)
• chat: Eva style (#1408) (3433164)
• checkbox: Eva style 💅 (#1311) (75498aa)
• context menu: Eva style (#1423) (ddfb2ee)
• datepicker: Eva style (#1366) (d0c28a0)
• docs: Eva update (#1433) (e4fb525)
• docs: new landing (#1412) (34166a4)
• icon: Eva theme (#1404) (16f2d19)
• icons: new nb-icon component, icons library, and @nebular/eva-icons package (#1319) (621f461)
• input: Eva style (#1343) (c9c288b)
• layout: Eva style (#1368) (c373cfc)
• list: Eva style (#1363) (b280112)
• menu: Eva style (#1421) (0e032b6)
• popover: Eva style (#1349) (6d11c95)
• progress: Eva style (#1361) (06fccf7)
• radio: Eva style (#1344) (3c9eaa2)
• search: Eva theme (#1419) (a7e582f)
• select: Eva style (#1391) (53fb3a6)
• select: keyboard support (#1417) (f8a5c9c)
• sidebar: Eva theme (#1367) (8c16fc4)
• spinner: Eva style (#1351) (da6cfee)
• stepper: Eva theme (#1405) (2d841d0)
• tabset: Eva style (#1348) (25f30c5)
• theme: cosmic update (#1420) (ee07fbc)
• theme: css variables support (#1257) (da136da), closes #46
• remove fields scheduled to be removed in 4.0 (#1439) (28778f7)
• remove Nebular 4 theme breaking notice (#1426) (be5665e)
• toastr: Eva style (#1411) (e10ab2f)
• tooltip: Eva style (#1345) (85945ac)
• tree-grid: Eva style (#1409) (5fac736)
• typography: Eva style (#1425) (66b02e6)
• user: Eva style (#1354) (2d05714)
• specify next version in install instructions (#1435) (99ca0c9)
• update corporate theme (#1434) (d564454)
• docs: add Eva section (#1552) (1209d65)
• docs: add routing loader (#1533) (dd33a22)
• schematics: add dark theme (#1534) (c5d15c6)
• typography: specify body, paragraph and list styles (#1546) (310127b)
• select: more border and icon theme properties (#1468) (9e1c604)
• bootstrap: update nebular/bootstrap to Eva (#1507) (2ff1171)
• select, input: add max width theme property (#1480) (5a6d506)
• angular package format (#1474) (bbed8c1)
• themes: add new Dark theme! (#1472) (3b5ad6c)

BREAKING CHANGES

• Angular 8+ now required
• bootstrap: Bootstrap checkbox and radio are removed now, use Nebular Checkbox and Nebular Radio with better theming support.
• theme: The following sass mixins are removed: nb-radial-gradient, nb-right-gradient.
• theme: Theme variables are refactored
• themes: - remove disabled status for card

• auth now uses giant size buttons and inputs

• themes: - nb-theme function now throws an error if an unused variable is accessed

• custom auth variables are removed and replaced with @nebular/theme variables
• nb-install function moved into @nebular/theme/styles/theming
• auth components now use nb-icon instead of icon css class
• everything not mentioned in packages public_api.ts now private so direct imports from @nebular/theme/* will stop working.
• Properties changed in Nebular 4.0.0
• Theme variables change in Nebular 4.0.0
• Components variables changes in Nebular 4.0.0

• icons: 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 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 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 } from '@nebular/eva-icons';

@NgModule({
  imports: [
  	// ...
    NbEvaIconsModule,
  ],
})

1. 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/.

2. 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.

3. Update styles if necessary.

4. 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');
  }

1. 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.

2. 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.

• theme: - 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

Code Refactoring

• themes: make map processing lazy, add variable existence check (#1471) (48d8f03)
• tabset: remove shadow (#1461) (2c11768)
• datepicker: remove primary border (#1466) (f722a48)
• overlay: use full css property name (#1403) (4133058)
• theme: remove use of scss functions (#1256) (fa8d87f), closes #1228

<a name="3.5.0"></a>