-
Notifications
You must be signed in to change notification settings - Fork 1.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
next #1437
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
Disable e2e on next branch. Will be enabled after updating tests to new colors, etc.
…-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 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
BREAKING CHANGE: Following tooltip theme properties were renamed: tooltip-bg -> tooltip-background-color tooltip-fg -> tooltip-text-color tooltip-font-size -> tooltip-text-font-size tooltip-status-fg -> tooltip-[status]-text-color tooltip-primary-bg -> tooltip-primary-background-color tooltip-info-bg -> tooltip-info-background-color tooltip-success-bg -> tooltip-success-background-color tooltip-warning-bg -> tooltip-warning-background-color tooltip-danger-bg -> tooltip-danger-background-color Tooltip status class renamed from [status-name]-tooltip to status-[status-name].
BREAKING CHANGE: Following properties where renamed: popover-fg -> popover-text-color popover-bg -> popover-background-color popover-border -> popover-border-color
BREAKING CHANGE: 'isMenuShown' property removed from NbUserComponent. 'inverse' input removed from NbUserComponent. 'background' class renamed to 'initials'. NbUserComponent SIZE_SMALL, SIZE_MEDIUM, SIZE_LARGE, SIZE_XLARGE size static properties were removed. Use NbComponentSize instead. Size class names were prefixed with 'size-'. small -> size-small medium -> size-medium large -> size-large xlarge -> size-giant Following properties were renamed: user-font-size -> user-[size]-initials-text-font-size, user-[size]-name-text-font-size, user-[size]-title-text-font-size user-line-height -> user-[size]-initials-text-line-height, user-[size]-name-text-line-height, user-[size]-title-text-line-height user-bg -> user-picture-box-background-color user-fg -> user-initials-text-color user-fg-highlight -> user-picture-box-border-color user-font-family-secondary -> user-name-text-font-family user-size-small -> user-small-height, user-small-width user-size-medium -> user-medium-height, user-medium-width user-size-large -> user-large-height, user-large-width user-size-xlarge -> user-giant-height, user-giant-width NbUserComponent 'showNameValue', 'showTitleValue', 'showInitialsValue' properties removed. Use 'showName', 'showTitle', 'showInitials' instead.
BREAKING CHANGE: NbTabset theme properties prefix changed to 'tabset'. Following properties were renamed: tabs-font-family -> tabset-tab-text-font-family tabs-font-size -> tabset-tab-text-font-size tabs-content-font-family -> tabset-content-text-font-family tabs-content-font-size -> tabset-content-text-font-size tabs-active-bg -> tabset-tab-selected-background-color tabs-padding -> tabset-tab-padding tabs-content-padding -> tabset-content-padding tabs-header-bg -> tabset-tab-background-color tabs-separator -> tabset-divider-color tabs-fg -> tabset-tab-text-color tabs-fg-disabled -> tabset-tab-disabled-text-color tabs-fg-text -> tabset-content-text-color tabs-fg-heading -> tabset-tab-selected-text-color, tabset-tab-focus-text-color, tabset-tab-hover-text-color tabs-bg -> tabset-content-background-color tabs-selected -> tabset-tab-underline-color tabs-icon-only-max-width -> tabset-tab-text-hide-breakpoint Following properties were removed: tabs-active-font-weight tabs-selected-second-color tabs-selected-degrees NbRouteTabset theme properties prefix changed to 'route-tabset'. Following properties were renamed: route-tabs-font-family -> route-tabset-tab-text-font-family route-tabs-font-size -> route-tabset-tab-text-font-size route-tabs-active-bg -> route-tabset-tab-selected-background-color route-tabs-active-font-weight -> route-tabs-padding -> route-tabset-tab-padding route-tabs-header-bg -> route-tabset-tab-background-color route-tabs-separator -> route-tabset-divider-color route-tabs-fg -> route-tabset-tab-text-color route-tabs-fg-disabled -> route-tabset-tab-disabled-text-color route-tabs-fg-heading -> route-tabset-tab-selected-text-color, route-tabset-tab-focus-text-color, route-tabset-tab-hover-text-color route-tabs-selected -> route-tabset-tab-underline-color route-tabs-icon-only-max-width -> route-tabset-tab-text-hide-breakpoint 'route-tabs-bg' property was unused and removed.
BREAKING CHANGE: Following properties were renamed: card-font-size -> card-text-font-size card-font-weight -> card-text-font-weight card-line-height -> card-text-line-height card-bg -> card-background-color card-border-type -> card-border-style card-separator -> card-divider-color card-header-fg -> card-header-text-color card-header-primary-bg -> card-header-primary-background-color card-header-info-bg -> card-header-info-background-color card-header-success-bg -> card-header-success-background-color card-header-warning-bg -> card-header-warning-background-color card-header-danger-bg -> card-header-danger-background-color card-header-disabled-bg -> card-header-disabled-background-color card-margin -> card-margin-bottom card-height-xxsmall -> card-height-tiny card-height-small -> card-height-small card-height-medium -> card-height-medium card-height-large -> card-height-large card-height-xlarge -> card-height-giant Following properties were removed: card-fg card-fg-text card-fg-heading card-header-fg-heading card-header-active-bg card-header-active-fg card-header-border-width card-header-border-type card-header-border-color card-height-xsmall card-height-xxlarge All NbCardComponent static fields were removed. Removed fields: SIZE_XXSMALL, SIZE_XSMALL, SIZE_SMALL, SIZE_MEDIUM, SIZE_LARGE, SIZE_XLARGE, SIZE_XXLARGE, STATUS_PRIMARY, STATUS_INFO, STATUS_SUCCESS, STATUS_WARNING, STATUS_DANGER, ACCENT_PRIMARY, ACCENT_INFO, ACCENT_SUCCESS, ACCENT_WARNING, ACCENT_DANGER. Use NbComponentStatus, NbComponentSize instead. 'disabled' status replaced with disabled input. 'active' status removed. Card size class renamed from 'card-[size-name]' to 'size-[size-name]'. Card status classes were renamed from '[status-name]-card' to 'status-[status-name]'. NbCardComponent 'xsmall' and 'xxlarge' getters along with 'size-xsmall' and 'size-xxlarge' removed. NbCardComponent 'xxsmall', 'small', 'medium', 'large', 'xlarge' getters renamed to 'tiny', 'small', 'medium', 'large', 'giant' accordingly.
BREAKING CHANGE: Following spinner theme properties were renamed: spinner-bg -> spinner-background-color spinner-circle-bg -> spinner-circle-filled-color spinner-fg -> spinner-text-color spinner-primary-bg -> spinner-primary-circle-filled-color spinner-info-bg -> spinner-info-circle-filled-color spinner-success-bg -> spinner-success-circle-filled-color spinner-warning-bg -> spinner-warning-circle-filled-color spinner-danger-bg -> spinner-danger-circle-filled-color spinner-xsmall -> spinner-height-tiny spinner-small -> spinner-height-small spinner-medium -> spinner-height-medium spinner-large -> spinner-height-large spinner-xlarge -> spinner-height-giant Following properties were removed: spinner-xxsmall spinner-xxlarge spinner-disabled-bg spinner-disabled-fg spinner-active-bg 'active' and 'disabled' along with NbSpinnerComponent STATUS_ACTIVE, STATUS_DISABLED static properties statuses were removed. Following NbSpinnerComponent static properties were removed: SIZE_XXSMALL, SIZE_XSMALL, SIZE_SMALL, SIZE_MEDIUM, SIZE_LARGE, SIZE_XLARGE, SIZE_XXLARGE, STATUS_PRIMARY, STATUS_INFO, STATUS_SUCCESS, STATUS_WARNING, STATUS_DANGER. Classes '[size-name]-spinner' changed to 'size-[size-name]'. Classes '[status-name]-spinner' changed to 'status-[status-name]'. NbSpinnerComponent 'xxsmall' and 'xxlarge' getters removed.
BREAKING CHANGE: 'accent' property removed. Static properties removed. Removed properties: SIZE_XSMALL, SIZE_SMALL, SIZE_MEDIUM, SIZE_LARGE, STATUS_PRIMARY, STATUS_INFO, STATUS_SUCCESS, STATUS_WARNING, STATUS_DANGER, SHAPE_RECTANGLE, SHAPE_ROUND, SHAPE_SEMI_ROUND. Use NbComponentSize, NbComponentStatus, NbComponentShape. Size classes were renamed: btn-xsmall -> size-tiny btn-small -> size-small btn-medium -> size-medium btn-large -> size-large Size getter 'xsmall' renamed to tiny. Status classes were renamed: btn-primary -> status-primary btn-info -> status-info btn-success -> status-success btn-warning -> status-warning btn-danger -> status-danger Shape classes were renamed: btn-rectangle -> shape-rectangle btn-round -> shape-round btn-semi-round -> shape-semi-round 'btn-outline' class renamed to 'appearance-outline'. 'btn-hero' class renamed to 'appearance-hero'. Button theme properties prefix changed to 'button' (was 'btn'). Following theme properties were renamed: btn-fg -> button-filled-[status]-text-color, button-outline-[status]-[state?]-text-color, button-ghost-[status]-[state?]-text-color, button-hero-[status]-text-color btn-font-family -> button-text-font-family btn-line-height -> button-[size]-text-line-height btn-cursor -> button-cursor btn-[status]-bg -> button-filled-[status]-background-color btn-[status]-hover-bg -> button-filled-[status]-hover-background-color btn-[status]-active-bg -> button-filled-[status]-active-background-color btn-padding-y-[size], btn-padding-x-[size] -> button-[appearance]-[size]-padding btn-font-size-[size] -> button-[size]-text-font-size btn-rectangle-border-radius -> button-rectangle-border-radius btn-semi-round-border-radius -> button-semi-round-border-radius btn-round-border-radius -> button-round-border-radius btn-hero-shadow -> button-hero-shadow btn-hero-text-shadow -> button-hero-text-shadow btn-hero-bevel-size -> button-hero-bevel-size btn-hero-glow-size -> button-hero-glow-size btn-hero-[status]-bevel-color -> button-hero-[status]-bevel-color btn-hero-[status]-glow-color -> button-hero-[status]-glow-color btn-hero-[status]-left-bg -> button-hero-[status]-left-background-color btn-hero-[status]-right-bg -> button-hero-[status]-right-background-color btn-hero-[status]-left-hover-bg -> button-hero-[status]-hover-left-background-color btn-hero-[status]-right-hover-bg -> button-hero-[status]-hover-right-background-color btn-hero-[status]-left-active-bg -> button-hero-[status]-active-left-background-color btn-hero-[status]-right-active-bg -> button-hero-[status]-active-right-background-color btn-outline-fg -> button-outline-[status]-border-color btn-outline-hover-fg -> button-outline-[status]-hover-border-color btn-outline-focus-fg -> button-outline-[status]-focus-border-color Following theme properties were removed: btn-group-bg btn-group-fg btn-group-separator btn-disabled-opacity btn-secondary-bg btn-secondary-hover-bg btn-secondary-active-bg btn-secondary-border btn-secondary-border-width btn-hero-secondary-bevel-color btn-hero-secondary-glow-color btn-hero-border-radius 'btn-pulse' status renamed to 'button-pulse'. 'btn-full-width' renamed to 'full-width'.
BREAKING CHANGE: Following progress theme variables were renamed: progress-bar-height-xlg -> progress-bar-giant-height progress-bar-height-lg -> progress-bar-large-height progress-bar-height -> progress-bar-medium-height progress-bar-height-sm -> progress-bar-small-height progress-bar-height-xs -> progress-bar-tiny-height progress-bar-font-size-xlg -> progress-bar-giant-text-font-size progress-bar-font-size-lg -> progress-bar-large-text-font-size progress-bar-font-size -> progress-bar-medium-text-font-size progress-bar-font-size-sm -> progress-bar-small-text-font-size progress-bar-font-size-xs -> progress-bar-tiny-text-font-size progress-bar-radius -> progress-bar-border-radius progress-bar-bg -> progress-bar-[status]-background-color progress-bar-font-color -> progress-bar-[status]-background-color progress-bar-font-weight -> progress-bar-[size]-text-font-weight progress-bar-primary-bg -> progress-bar-[status]-background-color progress-bar-success-bg -> progress-bar-[status]-background-color progress-bar-info-bg -> progress-bar-[status]-background-color progress-bar-warning-bg -> progress-bar-[status]-background-color progress-bar-danger-bg -> progress-bar-[status]-background-color 'progress-bar-default-bg' removed. Size values changed from 'xs', 'sm', 'lg', 'xlg' changed to 'tiny', 'small', 'medium', 'large', 'giant'. Size classes now set on nb-progress-bar element. Also class naming changed to 'size-[size-name]', 'status-[status-name]'.
BREAKING CHANGE: NbAccordionComponent static properties were unused and removed. STATUS_ACTIVE, STATUS_DISABLED, STATUS_PRIMARY, STATUS_INFO, STATUS_SUCCESS, STATUS_WARNING,STATUS_DANGER. Following theme properties were renamed: accordion-header-font-family -> accordion-header-text-font-family accordion-header-font-size -> accordion-header-text-font-size accordion-header-font-weight -> accordion-header-text-font-weight accordion-header-fg-heading -> accordion-header-text-color accordion-header-disabled-fg -> accordion-header-disabled-text-color accordion-header-border-type -> accordion-header-border-style accordion-item-bg -> accordion-item-background-color accordion-item-font-size -> accordion-item-text-font-size accordion-item-font-weight -> accordion-item-text-font-weight accordion-item-font-family -> accordion-item-text-font-family accordion-item-fg-text -> accordion-item-text-color accordion-item-shadow -> accordion-shadow 'accordion-separator' removed.
BREAKING CHANGE: Following theme properties were renamed: calendar-header-title-font-size -> calendar-header-title-text-font-size calendar-header-title-font-weight -> calendar-header-title-text-font-weight calendar-header-sub-title-font-size -> calendar-header-sub-title-text-font-size calendar-header-sub-title-font-weight -> calendar-header-sub-title-text-font-weight calendar-selected-item-bg -> calendar-cell-selected-background-color calendar-hover-item-bg -> calendar-cell-hover-background-color calendar-today-item-bg -> calendar-cell-today-background-color calendar-active-item-bg -> calendar-cell-active-background-color calendar-fg -> calendar-text-color calendar-selected-fg -> calendar-cell-selected-text-color calendar-today-fg -> calendar-cell-today-text-color calendar-weekday-font-size -> calendar-weekday-text-font-size calendar-weekday-font-weight -> calendar-weekday-text-font-weight calendar-weekday-fg -> calendar-weekday-text-color calendar-weekday-holiday-fg -> calendar-weekday-holiday-text-color calendar-range-bg-in-range -> calendar-in-range-background-color 'calendar-inactive-opacity' and 'calendar-disabled-opacity' removed.
BREAKING CHANGE: Following theme properties were renamed: sidebar-fg -> sidebar-text-color sidebar-bg -> sidebar-background-color
BREAKING CHANGE: Following theme properties were renamed: datepicker-fg -> datepicker-text-color datepicker-bg -> datepicker-background-color datepicker-border -> datepicker-border-color datepicker-border-radius -> datepicker-border-radius
BREAKING CHANGE: Following theme properties were renamed: header-font-family -> header-text-font-family header-font-size -> header-text-font-size header-line-height -> header-text-line-height header-fg -> header-text-color header-bg -> header-background-color layout-font-family -> layout-text-font-family layout-font-size -> layout-text-font-size layout-line-height -> layout-text-line-height layout-fg -> layout-text-color layout-bg -> layout-background-color layout-window-mode-bg -> layout-window-mode-background-color footer-fg -> footer-text-color footer-fg-highlight -> footer-text-highlight-color footer-bg -> footer-background-color footer-separator -> footer-divider-color
BREAKING CHANGE: Only 'null' and 'undefined' option values now considered as reset. false and falsy values such as 0, '', NaN don't reset select value anymore.
BREAKING CHANGE: Collapsed menu icon changes direction based on current layout direction.
BREAKING CHANGE: Theme property 'overlay-backdrop-bg' renamed to 'overlay-backdrop-background-color'.
BREAKING CHANGE: NbActionsComponent 'inverseValue' field and 'inverse' setter removed. NbActionsComponent 'fullWidthValue' field replaced with 'fullWidth'. NbActionsComponent size class named renamed to 'size-[size-name]'. NbActionsComponent static fields SIZE_SMALL, SIZE_MEDIUM, SIZE_LARGE removed. NbActionComponent 'disabledValue' field replaced with 'disabled'. Following theme variables name were renamed: actions-font-size -> actions-[size]-text-font-size actions-font-family -> actions-text-font-family actions-line-height -> actions-text-line-height actions-fg -> actions-text-color actions-bg -> actions-background-color actions-separator -> actions-divider-color actions-padding -> actions-[size]-padding actions-size-small -> actions-small-height actions-size-medium -> actions-medium-height actions-size-large -> actions-large-height
BREAKING CHANGE: Following theme properties were renamed: stepper-index-size -> stepper-step-index-width stepper-label-font-size -> stepper-step-text-font-size stepper-label-font-weight -> stepper-step-text-font-weight stepper-completed-fg -> stepper-step-completed-text-color stepper-fg -> stepper-step-text-color stepper-step-padding -> stepper-step-content-padding Following theme properties were removed: stepper-accent-color stepper-completed-icon-size stepper-completed-icon-weight NbStepperOrientation changed to type. NbStepperComponent 'disableStepNavigationValue' property removed. Use 'disableStepNavigation' instead.
BREAKING CHANGE: NbAlertComponent 'closableValue' replaced with 'closable'. All NbAlertComponent static fields removed. SIZE_XXSMALL, SIZE_XSMALL, SIZE_SMALL, SIZE_MEDIUM, SIZE_LARGE, SIZE_XLARGE, SIZE_XXLARGE, STATUS_ACTIVE, STATUS_DISABLED, STATUS_PRIMARY, STATUS_INFO, STATUS_SUCCESS, STATUS_WARNING, STATUS_DANGER, ACCENT_ACTIVE, ACCENT_DISABLED, ACCENT_PRIMARY, ACCENT_INFO, ACCENT_SUCCESS, ACCENT_WARNING, ACCENT_DANGER, OUTLINE_ACTIVE, OUTLINE_DISABLED, OUTLINE_PRIMARY, OUTLINE_INFO, OUTLINE_SUCCESS, OUTLINE_WARNING, OUTLINE_DANGE. Active status removed. Disabled become input instead of status value. Disabled class renamed to 'disabled'. NbAlertComponent 'hasAccent', 'hasStatus', 'hasOutline' getters removed. Status class names changed to 'status-[status-name]'. Outline class names changed to 'outline-[status-name]'. Accent class names changed to 'accent-[status-name]'. Following theme properties were renamed: alert-font-size -> alert-text-font-size alert-line-height -> alert-text-line-height alert-font-weight -> alert-text-font-weight alert-fg -> alert-text-color alert-bg -> alert-background-color alert-disabled-bg -> alert-disabled-background-color alert-disabled-fg -> alert-disabled-text-color alert-primary-bg -> alert-primary-background-color alert-info-bg -> alert-info-background-color alert-success-bg -> alert-success-background-color alert-warning-bg -> alert-warning-background-color alert-danger-bg -> alert-danger-background-color alert-height-xsmall -> alert-tiny-height alert-height-small -> alert-small-height alert-height-medium -> alert-medium-height alert-height-large -> alert-medium-padding alert-height-xlarge -> alert-large-height alert-closable-padding -> alert-closable-start-padding alert-margin -> alert-bottom-margin Following theme properties removed: alert-outline-fg alert-active-bg alert-height-xxsmall alert-height-xxlarge alert-button-padding
BREAKING CHANGE: NbBadgeComponent status static fields removed. STATUS_PRIMARY, STATUS_INFO, STATUS_SUCCESS, STATUS_WARNING, STATUS_DANGER. NbBadgeComponent position static fields replaced with NbBadgePosition type. Removed properties: TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT, TOP_START, TOP_END, BOTTOM_START, BOTTOM_END. Badge status class now set on host element NbBadgeComponent 'positionClass' getter removed. Badge position class set on host element. Position class names prefixed with 'position-'. Following theme properties were renamed: badge-fg-text -> badge-[status]-text-color badge-primary-bg-color -> badge-primary-background-color badge-success-bg-color -> badge-success-background-color badge-info-bg-color -> badge-info-background-color badge-warning-bg-color -> badge-warning-background-color badge-danger-bg-color -> badge-danger-background-color
BREAKING CHANGE: Following theme properties were renamed: tree-grid-header-bg -> tree-grid-header-background tree-grid-footer-bg -> tree-grid-footer-background tree-grid-row-bg -> tree-grid-row-background tree-grid-row-bg-even -> tree-grid-row-even-background tree-grid-row-hover-bg -> tree-grid-row-hover-background Following theme properties were removed: tree-grid-sort-header-button-font-weight tree-grid-sort-header-button-color tree-grid-icon-color
BREAKING CHANGE: Arrow selector and element changed to svg icon. NbSelectComponent 'isOpened' getter renamed to 'isOpen'. NbOptionComponent and NbOptionGroupComponent 'disabledClass' getter renamed to 'disabledAttribute'. Following theme properties were renamed: select-border-width -> select-[appearance]-border-width select-max-height -> select-options-list-max-height select-bg -> select-[appearance]-background-color select-option-disabled-bg -> select-option-[appearance]-disabled-background-color select-option-padding -> select-option-[appearance]-[size]-padding Following theme properties removed: select-checkmark-color select-checkbox-color select-option-disabled-opacity
BREAKING CHANGE: NbChatComponent 'accent' field removed. NbChatComponent sizes 'xxsmall' and 'xxlarge' removed. 'xsmall' size changed to 'tiny', 'xlarge' changed to 'giant'. Size class changed to 'size-[size-name]'. All size static fields removed (SIZE_XXSMALL, SIZE_XSMALL, SIZE_SMALL, SIZE_MEDIUM, SIZE_LARGE, SIZE_XLARGE, SIZE_XXLARGE). NbChatComponent 'active' status removed. Disabled status removed. Use disabled input instead. Status class names changed to 'status-[status-name]'. NbChatMessageComponent 'replyValue' changed to 'reply'. Following theme properties removed: chat-font-size -> chat-text-font-size chat-fg -> chat-text-color chat-bg -> chat-background-color chat-height-xsmall -> chat-tiny-height chat-height-small -> chat-small-height chat-height-medium -> chat-medium-height chat-height-large -> chat-large-height chat-height-xlarge -> chat-giant-height chat-separator -> chat-divider-color chat-message-fg -> chat-message-text-color chat-message-bg -> chat-message-background chat-message-reply-bg -> chat-message-reply-background-color chat-message-reply-fg -> chat-message-reply-text-color chat-message-avatar-bg -> chat-message-avatar-background-color chat-message-sender-fg -> chat-message-sender-text-color chat-message-quote-fg -> chat-message-quote-background-color chat-message-quote-bg -> chat-message-quote-text-color chat-message-file-fg -> chat-message-file-text-color chat-message-file-bg -> chat-message-file-background-color chat-primary-bg -> chat-primary-background-color chat-success-bg -> chat-success-background-color chat-info-bg -> chat-info-background-color chat-warning-bg -> chat-warning-background-color chat-danger-bg -> chat-danger-background-color Following theme properties removed: chat-fg-text chat-height-xxsmall chat-height-xxlarge chat-form-bg chat-form-fg chat-form-border chat-form-placeholder-fg chat-form-active-border chat-disabled-bg chat-disabled-fg chat-active-bg
BREAKING CHANGE: NbToastStatus enum removed. Toastr now uses common NbComponentstatus type. NbToastComponent status class names changed to 'status-[status-name]'. 'default' class removed. Following theme properties were renamed: toastr-bg -> toastr-background toastr-fg -> toastr-text-color toastr-border -> toastr-border-style, toastr-border-width 'toastr-icon-radius' removed.
BREAKING CHANGE: Following theme properties renamed: search-bg -> search-background-color search-bg-secondary -> search-extra-background-color search-text -> search-text-color search-info -> search-info-text-color search-dash -> search-divider-color search-placeholder -> search-placeholder-text-color Following theme properties removed: search-btn-open-fg search-btn-close-fg
BREAKING CHANGE: Removed inverse mode. NbMenuComponent 'autoCollapseValue' property changed to 'autoCollapse'. Following theme variables were removed: menu-font-family -> menu-text-font-family menu-font-size -> menu-text-font-size menu-font-weight -> menu-text-font-weight menu-fg -> menu-text-color menu-bg -> menu-background-color menu-active-fg -> menu-item-active-text-color menu-active-bg -> menu-item-active-background-color menu-submenu-bg -> menu-submenu-background-color menu-submenu-fg -> menu-submenu-text-color menu-submenu-active-fg -> menu-submenu-item-active-text-color menu-submenu-active-bg -> menu-submenu-item-active-background-color menu-submenu-active-border-color -> menu-submenu-item-active-border-color menu-submenu-hover-fg -> menu-item-hover-text-color menu-submenu-hover-bg -> menu-item-hover-background-color menu-group-fg -> menu-group-text-color menu-item-separator -> menu-item-divider-color menu-icon-font-size -> menu-item-icon-width menu-icon-margin -> menu-item-icon-margin menu-icon-color -> menu-item-icon-color menu-icon-active-color -> menu-item-icon-active-color Following theme properties were removed: menu-submenu-active-shadow menu-active-font-weight menu-submenu-item-container-padding menu-group-font-weight menu-group-font-size menu-group-padding
BREAKING CHANGE: 'context-menu-border' split into 'context-menu-border-color', 'context-menu-border-style' and 'context-menu-border-width'. Following theme properties were removed: context-menu-fg context-menu-bg context-menu-active-fg context-menu-active-bg context-menu-arrow-size
BREAKING CHANGE: 'alert', 'alert-success', 'alert-info', 'alert-warning', 'alert-danger', 'alert-primary', 'alert-hint', 'font-secondary', 'font-main', 'font-w-light', 'font-w-regular', 'font-w-bold', 'text-primary', 'text-warning', 'text-success', 'text-info', 'text-danger', 'text-heading', 'text-body', 'text-hint', 'text-white', 'bg-primary', 'bg-warning', 'bg-success', 'bg-info', 'bg-danger', 'bg-heading', 'bg-body', 'bg-hint', 'bg-white', 'text-indent', 'blockquote', 'blockquote-reverse', 'blockquote-footer', 'small', 'mark'.
Codecov Report
@@ Coverage Diff @@
## master #1437 +/- ##
==========================================
+ Coverage 81.84% 82.57% +0.72%
==========================================
Files 232 240 +8
Lines 7067 7327 +260
Branches 601 656 +55
==========================================
+ Hits 5784 6050 +266
+ Misses 1104 1088 -16
- Partials 179 189 +10
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Please read and mark the following check list before creating a pull request:
Short description of what this resolves:
BREAKING CHANGE:
opacity
instead oflightning
calc
instead ofround
and scss calculationsopacity
for placeholder instead oflightning
background-color
instead of the gradient in cosmic themeprimary
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 automaticallyCloses #1228
Closes #46
Starting from version 4.0, Nebular introduces new
nb-icon
component andNbIconLibraries
service to host SVG and Font icon packs. As a breaking change, Nebular moves fromnebular-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):
npm i @nebular/eva-icons
NbEvaIconsModule
in theapp.module.ts
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 akveo.github.io/eva-icons.Search for
icon: 'nb-*'
references in properties for such components as Menu, Actions, Tabs, etc. Replace those withicon: 'icon-name'
. Please note, there is no need to specify any icon prefix (such aseva-
ornb-
) since prefix is specified when the icon package is registered in Nebular.Update styles if necessary.
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.app.component.ts
Search for all usages of
<span icon="nb-*"
or<i icon="nb-*"
and replace with<nb-icon icon="icon-name"></nb-icon>
without thenb-
prefix since prefix is specified when the icon package is registered in Nebular.Search for
icon: 'nb-*'
references in properties for such components as Menu, Actions, Tabs, etc. Replace those withicon: 'icon-name'
withoutnb-
prefix since it is unnecessary and covered under the hood.Please open an issue if you have any questions or having difficulties to migrate.
d0e528b
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.
Following map keys were removed:
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:
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):
Property 'checkbox-border-size' replaced with 'checkbox-border-width'.
Properties 'checkbox-border-color', 'checkbox-checked-border-color', 'checkbox-disabled-border-color'
replaced with:
Properties 'checkbox-checkmark', 'checkbox-checked-checkmark', 'checkbox-disabled-checkmark'
replaced with:
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.
Following tooltip theme properties were renamed:
tooltip-bg -> tooltip-background-color
tooltip-fg -> tooltip-text-color
tooltip-font-size -> tooltip-text-font-size
tooltip-status-fg -> tooltip-[status]-text-color
tooltip-primary-bg -> tooltip-primary-background-color
tooltip-info-bg -> tooltip-info-background-color
tooltip-success-bg -> tooltip-success-background-color
tooltip-warning-bg -> tooltip-warning-background-color
tooltip-danger-bg -> tooltip-danger-background-color
Tooltip status class renamed from [status-name]-tooltip to
status-[status-name].
Following properties where renamed:
popover-fg -> popover-text-color
popover-bg -> popover-background-color
popover-border -> popover-border-color
'isMenuShown' property removed from NbUserComponent.
'inverse' input removed from NbUserComponent.
'background' class renamed to 'initials'.
NbUserComponent SIZE_SMALL, SIZE_MEDIUM, SIZE_LARGE, SIZE_XLARGE
size static properties were removed. Use NbComponentSize instead.
Size class names were prefixed with 'size-'.
small -> size-small
medium -> size-medium
large -> size-large
xlarge -> size-giant
Following properties were renamed:
user-font-size -> user-[size]-initials-text-font-size, user-[size]-name-text-font-size, user-[size]-title-text-font-size
user-line-height -> user-[size]-initials-text-line-height, user-[size]-name-text-line-height, user-[size]-title-text-line-height
user-bg -> user-picture-box-background-color
user-fg -> user-initials-text-color
user-fg-highlight -> user-picture-box-border-color
user-font-family-secondary -> user-name-text-font-family
user-size-small -> user-small-height, user-small-width
user-size-medium -> user-medium-height, user-medium-width
user-size-large -> user-large-height, user-large-width
user-size-xlarge -> user-giant-height, user-giant-width
NbUserComponent 'showNameValue', 'showTitleValue', 'showInitialsValue'
properties removed. Use 'showName', 'showTitle', 'showInitials' instead.
NbTabset theme properties prefix changed to 'tabset'.
Following properties were renamed:
tabs-font-family -> tabset-tab-text-font-family
tabs-font-size -> tabset-tab-text-font-size
tabs-content-font-family -> tabset-content-text-font-family
tabs-content-font-size -> tabset-content-text-font-size
tabs-active-bg -> tabset-tab-selected-background-color
tabs-padding -> tabset-tab-padding
tabs-content-padding -> tabset-content-padding
tabs-header-bg -> tabset-tab-background-color
tabs-separator -> tabset-divider-color
tabs-fg -> tabset-tab-text-color
tabs-fg-disabled -> tabset-tab-disabled-text-color
tabs-fg-text -> tabset-content-text-color
tabs-fg-heading -> tabset-tab-selected-text-color, tabset-tab-focus-text-color, tabset-tab-hover-text-color
tabs-bg -> tabset-content-background-color
tabs-selected -> tabset-tab-underline-color
tabs-icon-only-max-width -> tabset-tab-text-hide-breakpoint
Following properties were removed:
tabs-active-font-weight
tabs-selected-second-color
tabs-selected-degrees
NbRouteTabset theme properties prefix changed to 'route-tabset'.
Following properties were renamed:
route-tabs-font-family -> route-tabset-tab-text-font-family
route-tabs-font-size -> route-tabset-tab-text-font-size
route-tabs-active-bg -> route-tabset-tab-selected-background-color
route-tabs-active-font-weight ->
route-tabs-padding -> route-tabset-tab-padding
route-tabs-header-bg -> route-tabset-tab-background-color
route-tabs-separator -> route-tabset-divider-color
route-tabs-fg -> route-tabset-tab-text-color
route-tabs-fg-disabled -> route-tabset-tab-disabled-text-color
route-tabs-fg-heading -> route-tabset-tab-selected-text-color, route-tabset-tab-focus-text-color,
route-tabset-tab-hover-text-color
route-tabs-selected -> route-tabset-tab-underline-color
route-tabs-icon-only-max-width -> route-tabset-tab-text-hide-breakpoint
'route-tabs-bg' property was unused and removed.
Following properties were renamed:
card-font-size -> card-text-font-size
card-font-weight -> card-text-font-weight
card-line-height -> card-text-line-height
card-bg -> card-background-color
card-border-type -> card-border-style
card-separator -> card-divider-color
card-header-fg -> card-header-text-color
card-header-primary-bg -> card-header-primary-background-color
card-header-info-bg -> card-header-info-background-color
card-header-success-bg -> card-header-success-background-color
card-header-warning-bg -> card-header-warning-background-color
card-header-danger-bg -> card-header-danger-background-color
card-header-disabled-bg -> card-header-disabled-background-color
card-margin -> card-margin-bottom
card-height-xxsmall -> card-height-tiny
card-height-small -> card-height-small
card-height-medium -> card-height-medium
card-height-large -> card-height-large
card-height-xlarge -> card-height-giant
Following properties were removed:
card-fg
card-fg-text
card-fg-heading
card-header-fg-heading
card-header-active-bg
card-header-active-fg
card-header-border-width
card-header-border-type
card-header-border-color
card-height-xsmall
card-height-xxlarge
All NbCardComponent static fields were removed. Removed fields:
SIZE_XXSMALL, SIZE_XSMALL, SIZE_SMALL, SIZE_MEDIUM, SIZE_LARGE, SIZE_XLARGE, SIZE_XXLARGE, STATUS_PRIMARY, STATUS_INFO, STATUS_SUCCESS, STATUS_WARNING, STATUS_DANGER, ACCENT_PRIMARY, ACCENT_INFO, ACCENT_SUCCESS, ACCENT_WARNING, ACCENT_DANGER.
Use NbComponentStatus, NbComponentSize instead.
'disabled' status replaced with disabled input. 'active' status removed.
Card size class renamed from 'card-[size-name]' to 'size-[size-name]'.
Card status classes were renamed from '[status-name]-card' to
'status-[status-name]'.
NbCardComponent 'xsmall' and 'xxlarge' getters along with 'size-xsmall'
and 'size-xxlarge' removed.
NbCardComponent 'xxsmall', 'small', 'medium', 'large', 'xlarge' getters
renamed to 'tiny', 'small', 'medium', 'large', 'giant' accordingly.
Following spinner theme properties were renamed:
spinner-bg -> spinner-background-color
spinner-circle-bg -> spinner-circle-filled-color
spinner-fg -> spinner-text-color
spinner-primary-bg -> spinner-primary-circle-filled-color
spinner-info-bg -> spinner-info-circle-filled-color
spinner-success-bg -> spinner-success-circle-filled-color
spinner-warning-bg -> spinner-warning-circle-filled-color
spinner-danger-bg -> spinner-danger-circle-filled-color
spinner-xsmall -> spinner-height-tiny
spinner-small -> spinner-height-small
spinner-medium -> spinner-height-medium
spinner-large -> spinner-height-large
spinner-xlarge -> spinner-height-giant
Following properties were removed:
spinner-xxsmall
spinner-xxlarge
spinner-disabled-bg
spinner-disabled-fg
spinner-active-bg
'active' and 'disabled' along with NbSpinnerComponent STATUS_ACTIVE, STATUS_DISABLED static properties statuses were removed.
Following NbSpinnerComponent static properties were removed:
SIZE_XXSMALL, SIZE_XSMALL, SIZE_SMALL, SIZE_MEDIUM, SIZE_LARGE, SIZE_XLARGE, SIZE_XXLARGE, STATUS_PRIMARY, STATUS_INFO, STATUS_SUCCESS, STATUS_WARNING, STATUS_DANGER.
Classes '[size-name]-spinner' changed to 'size-[size-name]'.
Classes '[status-name]-spinner' changed to 'status-[status-name]'.
NbSpinnerComponent 'xxsmall' and 'xxlarge' getters removed.
Button
'accent' property removed.
Static properties removed. Removed properties:
SIZE_XSMALL, SIZE_SMALL, SIZE_MEDIUM, SIZE_LARGE, STATUS_PRIMARY,
STATUS_INFO, STATUS_SUCCESS, STATUS_WARNING, STATUS_DANGER,
SHAPE_RECTANGLE, SHAPE_ROUND, SHAPE_SEMI_ROUND.
Use NbComponentSize, NbComponentStatus, NbComponentShape.
Size classes were renamed:
btn-xsmall -> size-tiny
btn-small -> size-small
btn-medium -> size-medium
btn-large -> size-large
Size getter 'xsmall' renamed to tiny.
Status classes were renamed:
btn-primary -> status-primary
btn-info -> status-info
btn-success -> status-success
btn-warning -> status-warning
btn-danger -> status-danger
Shape classes were renamed:
btn-rectangle -> shape-rectangle
btn-round -> shape-round
btn-semi-round -> shape-semi-round
'btn-outline' class renamed to 'appearance-outline'.
'btn-hero' class renamed to 'appearance-hero'.
Button theme properties prefix changed to 'button' (was 'btn').
Following theme properties were renamed:
btn-fg -> button-filled-[status]-text-color,
button-outline-[status]-[state?]-text-color,
button-ghost-[status]-[state?]-text-color,
button-hero-[status]-text-color
btn-font-family -> button-text-font-family
btn-line-height -> button-[size]-text-line-height
btn-cursor -> button-cursor
btn-[status]-bg -> button-filled-[status]-background-color
btn-[status]-hover-bg -> button-filled-[status]-hover-background-color
btn-[status]-active-bg -> button-filled-[status]-active-background-color
btn-padding-y-[size], btn-padding-x-[size] -> button-[appearance]-[size]-padding
btn-font-size-[size] -> button-[size]-text-font-size
btn-rectangle-border-radius -> button-rectangle-border-radius
btn-semi-round-border-radius -> button-semi-round-border-radius
btn-round-border-radius -> button-round-border-radius
btn-hero-shadow -> button-hero-shadow
btn-hero-text-shadow -> button-hero-text-shadow
btn-hero-bevel-size -> button-hero-bevel-size
btn-hero-glow-size -> button-hero-glow-size
btn-hero-[status]-bevel-color -> button-hero-[status]-bevel-color
btn-hero-[status]-glow-color -> button-hero-[status]-glow-color
btn-hero-[status]-left-bg -> button-hero-[status]-left-background-color
btn-hero-[status]-right-bg -> button-hero-[status]-right-background-color
btn-hero-[status]-left-hover-bg -> button-hero-[status]-hover-left-background-color
btn-hero-[status]-right-hover-bg -> button-hero-[status]-hover-right-background-color
btn-hero-[status]-left-active-bg -> button-hero-[status]-active-left-background-color
btn-hero-[status]-right-active-bg -> button-hero-[status]-active-right-background-color
btn-outline-fg -> button-outline-[status]-border-color
btn-outline-hover-fg -> button-outline-[status]-hover-border-color
btn-outline-focus-fg -> button-outline-[status]-focus-border-color
Following theme properties were removed:
btn-group-bg
btn-group-fg
btn-group-separator
btn-disabled-opacity
btn-secondary-bg
btn-secondary-hover-bg
btn-secondary-active-bg
btn-secondary-border
btn-secondary-border-width
btn-hero-secondary-bevel-color
btn-hero-secondary-glow-color
btn-hero-border-radius
'btn-pulse' status renamed to 'button-pulse'.
'btn-full-width' renamed to 'full-width'.
Progress
Following progress theme variables were renamed:
progress-bar-height-xlg -> progress-bar-giant-height
progress-bar-height-lg -> progress-bar-large-height
progress-bar-height -> progress-bar-medium-height
progress-bar-height-sm -> progress-bar-small-height
progress-bar-height-xs -> progress-bar-tiny-height
progress-bar-font-size-xlg -> progress-bar-giant-text-font-size
progress-bar-font-size-lg -> progress-bar-large-text-font-size
progress-bar-font-size -> progress-bar-medium-text-font-size
progress-bar-font-size-sm -> progress-bar-small-text-font-size
progress-bar-font-size-xs -> progress-bar-tiny-text-font-size
progress-bar-radius -> progress-bar-border-radius
progress-bar-bg -> progress-bar-[status]-background-color
progress-bar-font-color -> progress-bar-[status]-background-color
progress-bar-font-weight -> progress-bar-[size]-text-font-weight
progress-bar-primary-bg -> progress-bar-[status]-background-color
progress-bar-success-bg -> progress-bar-[status]-background-color
progress-bar-info-bg -> progress-bar-[status]-background-color
progress-bar-warning-bg -> progress-bar-[status]-background-color
progress-bar-danger-bg -> progress-bar-[status]-background-color
'progress-bar-default-bg' removed.
Size values changed from 'xs', 'sm', 'lg', 'xlg' changed to 'tiny',
'small', 'medium', 'large', 'giant'.
Size classes now set on nb-progress-bar element. Also class naming
changed to 'size-[size-name]', 'status-[status-name]'.
Accordion
NbAccordionComponent static properties were unused and removed.
STATUS_ACTIVE, STATUS_DISABLED, STATUS_PRIMARY, STATUS_INFO,
STATUS_SUCCESS, STATUS_WARNING,STATUS_DANGER.
Following theme properties were renamed:
accordion-header-font-family -> accordion-header-text-font-family
accordion-header-font-size -> accordion-header-text-font-size
accordion-header-font-weight -> accordion-header-text-font-weight
accordion-header-fg-heading -> accordion-header-text-color
accordion-header-disabled-fg -> accordion-header-disabled-text-color
accordion-header-border-type -> accordion-header-border-style
accordion-item-bg -> accordion-item-background-color
accordion-item-font-size -> accordion-item-text-font-size
accordion-item-font-weight -> accordion-item-text-font-weight
accordion-item-font-family -> accordion-item-text-font-family
accordion-item-fg-text -> accordion-item-text-color
accordion-item-shadow -> accordion-shadow
'accordion-separator' removed.
Calendar
Following theme properties were renamed:
calendar-header-title-font-size -> calendar-header-title-text-font-size
calendar-header-title-font-weight -> calendar-header-title-text-font-weight
calendar-header-sub-title-font-size -> calendar-header-sub-title-text-font-size
calendar-header-sub-title-font-weight -> calendar-header-sub-title-text-font-weight
calendar-selected-item-bg -> calendar-cell-selected-background-color
calendar-hover-item-bg -> calendar-cell-hover-background-color
calendar-today-item-bg -> calendar-cell-today-background-color
calendar-active-item-bg -> calendar-cell-active-background-color
calendar-fg -> calendar-text-color
calendar-selected-fg -> calendar-cell-selected-text-color
calendar-today-fg -> calendar-cell-today-text-color
calendar-weekday-font-size -> calendar-weekday-text-font-size
calendar-weekday-font-weight -> calendar-weekday-text-font-weight
calendar-weekday-fg -> calendar-weekday-text-color
calendar-weekday-holiday-fg -> calendar-weekday-holiday-text-color
calendar-range-bg-in-range -> calendar-in-range-background-color
'calendar-inactive-opacity' and 'calendar-disabled-opacity' removed.
Sidebar
Following theme properties were renamed:
sidebar-fg -> sidebar-text-color
sidebar-bg -> sidebar-background-color
Datepicker
Following theme properties were renamed:
datepicker-fg -> datepicker-text-color
datepicker-bg -> datepicker-background-color
datepicker-border -> datepicker-border-color
datepicker-border-radius -> datepicker-border-radius
Layout
Following theme properties were renamed:
header-font-family -> header-text-font-family
header-font-size -> header-text-font-size
header-line-height -> header-text-line-height
header-fg -> header-text-color
header-bg -> header-background-color
layout-font-family -> layout-text-font-family
layout-font-size -> layout-text-font-size
layout-line-height -> layout-text-line-height
layout-fg -> layout-text-color
layout-bg -> layout-background-color
layout-window-mode-bg -> layout-window-mode-background-color
footer-fg -> footer-text-color
footer-fg-highlight -> footer-text-highlight-color
footer-bg -> footer-background-color
footer-separator -> footer-divider-color
Select
Only 'null' and 'undefined' option values now considered as reset. false and falsy values such as 0, '', NaN don't reset select value anymore.
Menu
Collapsed menu icon changes direction based on current layout direction.
Overlay
Theme property 'overlay-backdrop-bg' renamed to 'overlay-backdrop-background-color'.
Icon
NbIconComponent status static fields removed.
STATUS_PRIMARY, STATUS_INFO, STATUS_SUCCESS, STATUS_WARNING, STATUS_DANGER.
'status' field now uses common NbComponentStatus type.
NbIconComponent static class names renamed to 'status-[status-name]'.
Following theme properties were renamed:
icon-primary-fg -> icon-primary-color
icon-info-fg -> icon-info-color
icon-success-fg -> icon-success-color
icon-warning-fg -> icon-warning-color
icon-danger-fg -> icon-danger-color
Actions
NbActionsComponent 'inverseValue' field and 'inverse' setter removed.
NbActionsComponent 'fullWidthValue' field replaced with 'fullWidth'.
NbActionsComponent size class named renamed to 'size-[size-name]'.
NbActionsComponent static fields SIZE_SMALL, SIZE_MEDIUM, SIZE_LARGE removed.
NbActionComponent 'disabledValue' field replaced with 'disabled'.
Following theme variables name were renamed:
actions-font-size -> actions-[size]-text-font-size
actions-font-family -> actions-text-font-family
actions-line-height -> actions-text-line-height
actions-fg -> actions-text-color
actions-bg -> actions-background-color
actions-separator -> actions-divider-color
actions-padding -> actions-[size]-padding
actions-size-small -> actions-small-height
actions-size-medium -> actions-medium-height
actions-size-large -> actions-large-height
Stepper
Following theme properties were renamed:
stepper-index-size -> stepper-step-index-width
stepper-label-font-size -> stepper-step-text-font-size
stepper-label-font-weight -> stepper-step-text-font-weight
stepper-completed-fg -> stepper-step-completed-text-color
stepper-fg -> stepper-step-text-color
stepper-step-padding -> stepper-step-content-padding
Following theme properties were removed:
stepper-accent-color
stepper-completed-icon-size
stepper-completed-icon-weight
NbStepperOrientation changed to type.
NbStepperComponent 'disableStepNavigationValue' property removed. Use
'disableStepNavigation' instead.
Alert
NbAlertComponent 'closableValue' replaced with 'closable'.
All NbAlertComponent static fields removed.
SIZE_XXSMALL, SIZE_XSMALL, SIZE_SMALL, SIZE_MEDIUM, SIZE_LARGE,
SIZE_XLARGE, SIZE_XXLARGE, STATUS_ACTIVE, STATUS_DISABLED,
STATUS_PRIMARY, STATUS_INFO, STATUS_SUCCESS, STATUS_WARNING,
STATUS_DANGER, ACCENT_ACTIVE, ACCENT_DISABLED, ACCENT_PRIMARY,
ACCENT_INFO, ACCENT_SUCCESS, ACCENT_WARNING, ACCENT_DANGER,
OUTLINE_ACTIVE, OUTLINE_DISABLED, OUTLINE_PRIMARY, OUTLINE_INFO,
OUTLINE_SUCCESS, OUTLINE_WARNING, OUTLINE_DANGE.
Active status removed.
Disabled become input instead of status value. Disabled class renamed to
'disabled'.
NbAlertComponent 'hasAccent', 'hasStatus', 'hasOutline' getters removed.
Status class names changed to 'status-[status-name]'.
Outline class names changed to 'outline-[status-name]'.
Accent class names changed to 'accent-[status-name]'.
Following theme properties were renamed:
alert-font-size -> alert-text-font-size
alert-line-height -> alert-text-line-height
alert-font-weight -> alert-text-font-weight
alert-fg -> alert-text-color
alert-bg -> alert-background-color
alert-disabled-bg -> alert-disabled-background-color
alert-disabled-fg -> alert-disabled-text-color
alert-primary-bg -> alert-primary-background-color
alert-info-bg -> alert-info-background-color
alert-success-bg -> alert-success-background-color
alert-warning-bg -> alert-warning-background-color
alert-danger-bg -> alert-danger-background-color
alert-height-xsmall -> alert-tiny-height
alert-height-small -> alert-small-height
alert-height-medium -> alert-medium-height
alert-height-large -> alert-medium-padding
alert-height-xlarge -> alert-large-height
alert-closable-padding -> alert-closable-start-padding
alert-margin -> alert-bottom-margin
Following theme properties removed:
alert-outline-fg
alert-active-bg
alert-height-xxsmall
alert-height-xxlarge
alert-button-padding
Badge
NbBadgeComponent status static fields removed.
STATUS_PRIMARY, STATUS_INFO, STATUS_SUCCESS, STATUS_WARNING,
STATUS_DANGER.
NbBadgeComponent position static fields replaced with NbBadgePosition type.
Removed properties: TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT,
TOP_START, TOP_END, BOTTOM_START, BOTTOM_END.
Badge status class now set on host element
NbBadgeComponent 'positionClass' getter removed.
Badge position class set on host element.
Position class names prefixed with 'position-'.
Following theme properties were renamed:
badge-fg-text -> badge-[status]-text-color
badge-primary-bg-color -> badge-primary-background-color
badge-success-bg-color -> badge-success-background-color
badge-info-bg-color -> badge-info-background-color
badge-warning-bg-color -> badge-warning-background-color
badge-danger-bg-color -> badge-danger-background-color
Tree-grid
Following theme properties were renamed:
tree-grid-header-bg -> tree-grid-header-background
tree-grid-footer-bg -> tree-grid-footer-background
tree-grid-row-bg -> tree-grid-row-background
tree-grid-row-bg-even -> tree-grid-row-even-background
tree-grid-row-hover-bg -> tree-grid-row-hover-background
Following theme properties were removed:
tree-grid-sort-header-button-font-weight
tree-grid-sort-header-button-color
tree-grid-icon-color
Select
Arrow selector and element changed to svg icon.
NbSelectComponent 'isOpened' getter renamed to 'isOpen'.
NbOptionComponent and NbOptionGroupComponent 'disabledClass' getter
renamed to 'disabledAttribute'.
Following theme properties were renamed:
select-border-width -> select-[appearance]-border-width
select-max-height -> select-options-list-max-height
select-bg -> select-[appearance]-background-color
select-option-disabled-bg -> select-option-[appearance]-disabled-background-color
select-option-padding -> select-option-[appearance]-[size]-padding
Following theme properties removed:
select-checkmark-color
select-checkbox-color
select-option-disabled-opacity
Chat
NbChatComponent 'accent' field removed.
NbChatComponent sizes 'xxsmall' and 'xxlarge' removed.
'xsmall' size changed to 'tiny', 'xlarge' changed to 'giant'.
Size class changed to 'size-[size-name]'.
All size static fields removed (SIZE_XXSMALL, SIZE_XSMALL, SIZE_SMALL,
SIZE_MEDIUM, SIZE_LARGE, SIZE_XLARGE, SIZE_XXLARGE).
NbChatComponent 'active' status removed.
Disabled status removed. Use disabled input instead.
Status class names changed to 'status-[status-name]'.
NbChatMessageComponent 'replyValue' changed to 'reply'.
Following theme properties removed:
chat-font-size -> chat-text-font-size
chat-fg -> chat-text-color
chat-bg -> chat-background-color
chat-height-xsmall -> chat-tiny-height
chat-height-small -> chat-small-height
chat-height-medium -> chat-medium-height
chat-height-large -> chat-large-height
chat-height-xlarge -> chat-giant-height
chat-separator -> chat-divider-color
chat-message-fg -> chat-message-text-color
chat-message-bg -> chat-message-background
chat-message-reply-bg -> chat-message-reply-background-color
chat-message-reply-fg -> chat-message-reply-text-color
chat-message-avatar-bg -> chat-message-avatar-background-color
chat-message-sender-fg -> chat-message-sender-text-color
chat-message-quote-fg -> chat-message-quote-background-color
chat-message-quote-bg -> chat-message-quote-text-color
chat-message-file-fg -> chat-message-file-text-color
chat-message-file-bg -> chat-message-file-background-color
chat-primary-bg -> chat-primary-background-color
chat-success-bg -> chat-success-background-color
chat-info-bg -> chat-info-background-color
chat-warning-bg -> chat-warning-background-color
chat-danger-bg -> chat-danger-background-color
Following theme properties removed:
chat-fg-text
chat-height-xxsmall
chat-height-xxlarge
chat-form-bg
chat-form-fg
chat-form-border
chat-form-placeholder-fg
chat-form-active-border
chat-disabled-bg
chat-disabled-fg
chat-active-bg
Toastr
NbToastStatus enum removed. Toastr now uses common NbComponentstatus type.
NbToastComponent status class names changed to 'status-[status-name]'.
'default' class removed.
Following theme properties were renamed:
toastr-bg -> toastr-background
toastr-fg -> toastr-text-color
toastr-border -> toastr-border-style, toastr-border-width
'toastr-icon-radius' removed.
Search
Following theme properties renamed:
search-bg -> search-background-color
search-bg-secondary -> search-extra-background-color
search-text -> search-text-color
search-info -> search-info-text-color
search-dash -> search-divider-color
search-placeholder -> search-placeholder-text-color
Following theme properties removed:
search-btn-open-fg
search-btn-close-fg
Menu
Removed inverse mode.
NbMenuComponent 'autoCollapseValue' property changed to 'autoCollapse'.
Following theme variables were removed:
menu-font-family -> menu-text-font-family
menu-font-size -> menu-text-font-size
menu-font-weight -> menu-text-font-weight
menu-fg -> menu-text-color
menu-bg -> menu-background-color
menu-active-fg -> menu-item-active-text-color
menu-active-bg -> menu-item-active-background-color
menu-submenu-bg -> menu-submenu-background-color
menu-submenu-fg -> menu-submenu-text-color
menu-submenu-active-fg -> menu-submenu-item-active-text-color
menu-submenu-active-bg -> menu-submenu-item-active-background-color
menu-submenu-active-border-color -> menu-submenu-item-active-border-color
menu-submenu-hover-fg -> menu-item-hover-text-color
menu-submenu-hover-bg -> menu-item-hover-background-color
menu-group-fg -> menu-group-text-color
menu-item-separator -> menu-item-divider-color
menu-icon-font-size -> menu-item-icon-width
menu-icon-margin -> menu-item-icon-margin
menu-icon-color -> menu-item-icon-color
menu-icon-active-color -> menu-item-icon-active-color
Following theme properties were removed:
menu-submenu-active-shadow
menu-active-font-weight
menu-submenu-item-container-padding
menu-group-font-weight
menu-group-font-size
menu-group-padding
Context menu
'context-menu-border' split into 'context-menu-border-color',
'context-menu-border-style' and 'context-menu-border-width'.
Following theme properties were removed:
context-menu-fg
context-menu-bg
context-menu-active-fg
context-menu-active-bg
context-menu-arrow-size
Typography
'alert', 'alert-success', 'alert-info', 'alert-warning', 'alert-danger',
'alert-primary', 'alert-hint', 'font-secondary', 'font-main',
'font-w-light', 'font-w-regular', 'font-w-bold', 'text-primary',
'text-warning', 'text-success', 'text-info', 'text-danger',
'text-heading', 'text-body', 'text-hint', 'text-white', 'bg-primary',
'bg-warning', 'bg-success', 'bg-info', 'bg-danger', 'bg-heading',
'bg-body', 'bg-hint', 'bg-white', 'text-indent', 'blockquote',
'blockquote-reverse', 'blockquote-footer', 'small', 'mark'.