🛶Navigation

Changelog

NavPills

Breaking changes

• tabs has a new structure:

tabs: {
  // Replaces old `tabButton` property
  label?: string | React.ReactElement
  // Replaces old `tabIcon` property
  icon?: string | React.ReactElement
  // Replaces old `tabContent` property
  content: React.ReactNode
  /** New optional property
   * Custom tab properties that apply to the current Tab element */
  props?: Omit<TabProps, 'icon' | 'label'>
}[]

• the following colors are no longer supported: danger replaced by error, theme and themeWithBackground.

• horizontal: boolean property has been replaced by orientation: 'horizontal' | 'vertical'

• alignCenter property has been removed.

• capitalize is now default false

• fullWidth is now default false, it sets the width to fit-content

Improvements

• The new NavPills component, now handles tab changes by default, it uses 0 based index values. To override the default implementation onChange and active properties must be used.

• color property overrides indicatorColor and selectedColor, and also comes with themed background colors combinations.

• gradient boolean property, applies a gradient background to the selected color.

• variant is now by default scrollable

New features

• The new tabProps property, also extends Matrial-UI TabProps and allows customizing all tabs at once (e.g. changing icon position).

• New orientation property allows switching between horizontal tabs and vertical ones.

• indicatorColor allows changing the indicator bottom line of the selected tab.

• selectedColor changes the selected tab's text color, keeping the background transparent.

• Tabs can now be individually customized using the new props property available on each tab element from the array of tabs (e.g. disabling a tab):

tabs: {
  {...}
  //Custom tab properties that apply to the current Tab element
  props?: Omit<TabProps, 'icon' | 'label'>
}[]

Pagination

• totalCount prop is now called count

SideMenu

Breaking changes

• customSideMenuClass, customButtonClass, customIconClass, customContainerClass have been removed; use buttonProps, iconProps and contentProps instead

Removed deprecations

• customSideMenuClass

• customButtonClass

• customIconClass

• customContainerClass