fix(tabs): update the tabbar placement value to match the property it applies to

Author: brandyscarney

core/src/components/tabbar/tabbar-interface.ts

@@ -1,2 +1,2 @@
-export type TabbarLayout = 'icon-top' | 'icon-start' | 'icon-end' | 'icon-bottom' | 'icon-hide' | 'title-hide';
+export type TabbarLayout = 'icon-top' | 'icon-start' | 'icon-end' | 'icon-bottom' | 'icon-hide' | 'label-hide';
 export type TabbarPlacement = 'top' | 'bottom';

core/src/components/tabbar/tabbar.tsx

@@ -26,16 +26,22 @@ export class Tabbar {
   @State() canScrollRight = false;
   @State() hidden = false;
 
-  /** The layout of the title and icons */
+  /**
+   * Set the layout of the text and icon in the tabbar. Available options: `"icon-top"`, `"icon-start"`, `"icon-end"`, `"icon-bottom"`, `"icon-hide"`, `"label-hide"`.
+   */
   @Prop() layout: TabbarLayout = 'icon-top';
 
-  /** The placement of the tabbar in the app */
+  /**
+   * Set the position of the tabbar, relative to the content. Available options: `"top"`, `"bottom"`.
+   */
   @Prop() placement: TabbarPlacement = 'bottom';
 
   /** The selected tab component */
   @Prop() selectedTab?: HTMLIonTabElement;
 
-  /** If the tabbar is scrollable or not */
+  /**
+   * If true, the tabs will be scrollable when there are enough tabs to overflow the width of the screen.
+   */
   @Prop() scrollable = false;
 
   /** The tabs to render */
@@ -47,8 +53,9 @@ export class Tabbar {
     this.highlight && this.updateHighlight();
   }
 
-
-  /** If the tabbar should include the highlight on the active tab */
+  /**
+   * If true, show the tab highlight bar under the selected tab.
+   */
   @Prop() highlight = false;
 
   /**

core/src/components/tabs/tabs.tsx

@@ -20,6 +20,7 @@ export class Tabs implements NavOutlet {
   @State() selectedTab?: HTMLIonTabElement;
 
   @Prop({ context: 'config' }) config!: Config;
+
   @Prop({ context: 'document' }) doc!: Document;
 
   /**
@@ -29,29 +30,29 @@ export class Tabs implements NavOutlet {
   @Prop() color?: Color;
 
   /**
-   * A unique name for the tabs
+   * A unique name for the tabs.
    */
   @Prop() name?: string;
 
   /**
-   * If true, the tabbar
+   * If true, the tabbar will be hidden. Defaults to `false`.
    */
   @Prop() tabbarHidden = false;
 
   /**
-   * Set the tabbar layout: `icon-top`, `icon-start`, `icon-end`, `icon-bottom`, `icon-hide`, `title-hide`.
+   * If true, show the tab highlight bar under the selected tab.
    */
-  @Prop({ mutable: true }) tabbarLayout?: TabbarLayout;
+  @Prop({ mutable: true }) tabbarHighlight?: boolean;
 
   /**
-   * Set position of the tabbar: `top`, `bottom`.
+   * Set the layout of the text and icon in the tabbar. Available options: `"icon-top"`, `"icon-start"`, `"icon-end"`, `"icon-bottom"`, `"icon-hide"`, `"label-hide"`.
    */
-  @Prop({ mutable: true }) tabbarPlacement?: TabbarPlacement;
+  @Prop({ mutable: true }) tabbarLayout?: TabbarLayout;
 
   /**
-   * If true, show the tab highlight bar under the selected tab.
+   * Set the position of the tabbar, relative to the content. Available options: `"top"`, `"bottom"`.
    */
-  @Prop({ mutable: true }) tabbarHighlight?: boolean;
+  @Prop({ mutable: true }) tabbarPlacement?: TabbarPlacement;
 
   /**
    * If true, the tabs will be translucent.
@@ -61,21 +62,34 @@ export class Tabs implements NavOutlet {
    */
   @Prop() translucent = false;
 
-  /** If the tabs should be scrollable */
+  /**
+   * If true, the tabs will be scrollable when there are enough tabs to overflow the width of the screen.
+   */
   @Prop() scrollable = false;
 
   /**
-   * If the tabs should use the router or not.
-   * If true, `selectedTab` does nothing.
+   * If true, the tabs will use the router and `selectedTab` will not do anything.
    */
   @Prop({ mutable: true }) useRouter = false;
 
   /**
    * Emitted when the tab changes.
    */
   @Event() ionChange!: EventEmitter<{tab: HTMLIonTabElement}>;
+
+  /**
+   * Emitted when the navigation will load a component.
+   */
   @Event() ionNavWillLoad!: EventEmitter<void>;
+
+  /**
+   * Emitted when the navigation is about to transition to a new component.
+   */
   @Event() ionNavWillChange!: EventEmitter<void>;
+
+  /**
+   * Emitted when the navigation has finished transitioning to a new component.
+   */
   @Event() ionNavDidChange!: EventEmitter<void>;
 
   componentWillLoad() {