chore(ion-navbar): remove ion-navbar

packages/core/src/components/navbar/navbar.tsx

@@ -1,71 +0,0 @@
-import { Component, Element, Prop } from '@stencil/core';
-import { createThemedClasses } from '../../utils/theme';
-import { Config } from '../../index';
-
-
-@Component({
-  tag: 'ion-navbar',
-  host: {
-    theme: 'toolbar'
-  }
-})
-export class Navbar {
-  @Element() private el: HTMLElement;
-  mode: string;
-  color: string;
-
-  @Prop({ context: 'config' }) config: Config;
-  @Prop() hideBackButton = false;
-  @Prop() backButtonText: string;
-  @Prop() backButtonIcon: string;
-  @Prop() hidden = false;
-
-  backButtonClick(ev: UIEvent) {
-    ev.preventDefault();
-    ev.stopPropagation();
-  }
-
-  componentDidLoad() {
-    const buttons = this.el.querySelectorAll('ion-button');
-    for (let i = 0; i < buttons.length; i++) {
-      buttons[i].setAttribute('button-type', 'bar-button');
-    }
-  }
-
-  hostData() {
-    return {
-      class: {
-        'statusbar-padding': this.config.getBoolean('statusbarPadding')
-      }
-    };
-  }
-
-  render() {
-    const backButtonIcon = this.backButtonIcon || this.config.get('backButtonText', 'Back');
-    const backButtonText = this.backButtonText || this.config.get('backButtonIcon', 'Back');
-
-    const backgroundCss = createThemedClasses(this.mode, this.color, 'toolbar-background');
-    const contentCss = createThemedClasses(this.mode, this.color, 'toolbar-content');
-    const backButtonCss = createThemedClasses(this.mode, this.color, 'back-button');
-    const backButtonIconCss = createThemedClasses(this.mode, this.color, 'back-button-icon');
-    const backButtonTextCss = createThemedClasses(this.mode, this.color, 'back-button-text');
-
-    return [
-      <div class={backgroundCss}></div>,
-      <button onClick={this.backButtonClick.bind(this)} class={backButtonCss} hidden={this.hideBackButton}>
-        { backButtonIcon
-          ? <ion-icon class={backButtonIconCss} name={backButtonIcon}></ion-icon>
-          : null
-        }
-        <span class={backButtonTextCss}>{backButtonText}</span>
-      </button>,
-      <slot name='start'></slot>,
-      <slot name='mode-start'></slot>,
-      <slot name='mode-end'></slot>,
-      <slot name='end'></slot>,
-      <div class={contentCss}>
-        <slot></slot>
-      </div>
-    ];
-  }
-}

packages/core/src/components/navbar/readme.md

@@ -1,83 +0,0 @@
-# ion-navbar
-
-Navbar acts as the navigational toolbar, which also comes with a back
-button. A navbar can contain a `ion-title`, any number of buttons,
-a segment, or a searchbar. Navbars must be placed within an
-`<ion-header>` in order for them to be placed above the content.
-It's important to note that navbar's are part of the dynamic navigation
-stack. If you need a static toolbar, use ion-toolbar.
-
-```html
-<ion-header>
-
-  <ion-navbar>
-    <ion-button menuToggle>
-      <ion-icon slot="icon-only" name="menu"></ion-icon>
-    </ion-button>
-
-    <ion-title>
-      Page Title
-    </ion-title>
-
-    <ion-buttons end>
-      <ion-button (click)="openModal()">
-        <ion-icon slot="icon-only" name="options"></ion-icon>
-      </ion-button>
-    </ion-buttons>
-  </ion-navbar>
-
-</ion-header>
-```
-
-
-<!-- Auto Generated Below -->
-
-
-## Properties
-
-#### backButtonIcon
-
-string
-
-
-#### backButtonText
-
-string
-
-
-#### hidden
-
-boolean
-
-
-#### hideBackButton
-
-boolean
-
-
-## Attributes
-
-#### backButtonIcon
-
-string
-
-
-#### backButtonText
-
-string
-
-
-#### hidden
-
-boolean
-
-
-#### hideBackButton
-
-boolean
-
-
-
-----------------------------------------------
-
-*Built by [StencilJS](https://stenciljs.com/)*

packages/core/src/components/toolbar/readme.md

@@ -1,13 +1,13 @@
-# ion-navbar
+# ion-toolbar
 
 A Toolbar is a generic bar that is positioned above or below content.
-Unlike a [Navbar](../../navbar/Navbar), a toolbar can be used as a subheader.
 When toolbars are placed within an `<ion-header>` or `<ion-footer>`,
 the toolbars stay fixed in their respective location. When placed within
 `<ion-content>`, toolbars will scroll with the content.
 
 
 ### Buttons in a Toolbar
+
 Buttons placed in a toolbar should be placed inside of the `<ion-buttons>`
 element. An exception to this is a [menuToggle](../../menu/MenuToggle) button.
 It should not be placed inside of the `<ion-buttons>` element. Both the

packages/core/src/components/toolbar/toolbar.scss

@@ -81,16 +81,6 @@ ion-buttons,
 }
 
 
-// Navbar
-// --------------------------------------------------
-
-ion-navbar.toolbar {
-  display: flex;
-
-  transform: translateZ(0);
-}
-
-
 // Toolbar Buttons
 // --------------------------------------------------
 

packages/core/stencil.config.js

@@ -4,7 +4,7 @@ exports.config = {
   generateWWW: false,
   bundles: [
     { components: ['ion-animation-controller'] },
-    { components: ['ion-app', 'ion-content', 'ion-scroll', 'ion-footer', 'ion-header', 'ion-navbar', 'ion-title', 'ion-toolbar'] },
+    { components: ['ion-app', 'ion-content', 'ion-scroll', 'ion-footer', 'ion-header', 'ion-title', 'ion-toolbar'] },
     { components: ['ion-action-sheet', 'ion-action-sheet-controller'] },
     { components: ['ion-alert', 'ion-alert-controller'] },
     { components: ['ion-avatar', 'ion-badge', 'ion-thumbnail'] },