docs(components): update property docs and styling to match guide

packages/core/scripts/theme-builder/src/components/variable-selector/variable-selector.tsx

@@ -17,7 +17,7 @@ export class VariableSelector {
   @Prop() property: string;
   @Prop() type: 'color' | 'percent';
   @Prop() usedWith: string[];
-  @Prop({mutable: true}) value: Color | string | number;
+  @Prop({ mutable: true }) value: Color | string | number;
 
   @Method()
   getProperty () {

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

@@ -12,18 +12,13 @@ Badges are inline block elements that usually appear near another element. Typic
 <ion-badge color="danger">44</ion-badge>
 <ion-badge color="light">55</ion-badge>
 <ion-badge color="dark">66</ion-badge>
-```
 
-```html
+<!-- Item with badge on left and right -->
-<ion-content>
+<ion-item>
-  <ion-list>
+  <ion-badge slot="start">11</ion-badge>
-    <ion-item>
+  <ion-label>My Item</ion-label>
-      <ion-badge slot="start">11</ion-badge>
+  <ion-badge slot="end">22</ion-badge>
-      <ion-label>My Item</ion-label>
+</ion-item>
-      <ion-badge slot="end">22</ion-badge>
-    </ion-item>
-  </ion-list>
-</ion-content>
 ```
 
 

packages/core/src/components/card-header/card-header.tsx

@@ -26,8 +26,7 @@ export class CardHeader {
   @Prop() mode: 'ios' | 'md';
 
   /**
-   * If true, adds transparency to the card header.
+   * If true, the card header will be translucent. Defaults to `false`.
-   * Only affects `ios` mode. Defaults to `false`.
    */
   @Prop() translucent = false;
 

packages/core/src/components/card-header/readme.md

@@ -27,8 +27,7 @@ Possible values are: `"ios"` or `"md"`.
 
 boolean
 
-If true, adds transparency to the card header.
+If true, the card header will be translucent. Defaults to `false`.
-Only affects `ios` mode. Defaults to `false`.
 
 
 ## Attributes
@@ -53,8 +52,7 @@ Possible values are: `"ios"` or `"md"`.
 
 boolean
 
-If true, adds transparency to the card header.
+If true, the card header will be translucent. Defaults to `false`.
-Only affects `ios` mode. Defaults to `false`.
 
 
 

packages/core/src/components/fab-button/fab-button.tsx

@@ -33,8 +33,7 @@ export class FabButton {
   @Prop() href: string;
 
   /**
-   * If true, adds transparency to the fab.
+   * If true, the fab button will be translucent. Defaults to `false`.
-   * Only affects `ios` mode. Defaults to `false`.
    */
   @Prop() translucent = false;
 

packages/core/src/components/fab-button/readme.md

@@ -90,8 +90,7 @@ boolean
 
 boolean
 
-If true, adds transparency to the fab.
+If true, the fab button will be translucent. Defaults to `false`.
-Only affects `ios` mode. Defaults to `false`.
 
 
 ## Attributes
@@ -148,8 +147,7 @@ boolean
 
 boolean
 
-If true, adds transparency to the fab.
+If true, the fab button will be translucent. Defaults to `false`.
-Only affects `ios` mode. Defaults to `false`.
 
 
 

packages/core/src/components/footer/footer.tsx

@@ -17,10 +17,10 @@ export class Footer {
   color: string;
 
   /**
-   * If true, adds transparency to the footer.
+   * If true, the footer will be translucent.
    * Note: In order to scroll content behind the footer, the `fullscreen`
    * attribute needs to be set on the content.
-   * Only affects `ios` mode. Defaults to `false`.
+   * Defaults to `false`.
    */
   @Prop() translucent = false;
 

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

@@ -11,10 +11,10 @@
 
 boolean
 
-If true, adds transparency to the footer.
+If true, the footer will be translucent.
 Note: In order to scroll content behind the footer, the `fullscreen`
 attribute needs to be set on the content.
-Only affects `ios` mode. Defaults to `false`.
+Defaults to `false`.
 
 
 ## Attributes
@@ -23,10 +23,10 @@ Only affects `ios` mode. Defaults to `false`.
 
 boolean
 
-If true, adds transparency to the footer.
+If true, the footer will be translucent.
 Note: In order to scroll content behind the footer, the `fullscreen`
 attribute needs to be set on the content.
-Only affects `ios` mode. Defaults to `false`.
+Defaults to `false`.
 
 
 

packages/core/src/components/header/header.tsx

@@ -17,10 +17,10 @@ export class Header {
   color: string;
 
   /**
-   * If true, adds transparency to the header.
+   * If true, the header will be translucent.
    * Note: In order to scroll content behind the header, the `fullscreen`
    * attribute needs to be set on the content.
-   * Only affects `ios` mode. Defaults to `false`.
+   * Defaults to `false`.
    */
   @Prop() translucent = false;
 

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

@@ -11,10 +11,10 @@
 
 boolean
 
-If true, adds transparency to the header.
+If true, the header will be translucent.
 Note: In order to scroll content behind the header, the `fullscreen`
 attribute needs to be set on the content.
-Only affects `ios` mode. Defaults to `false`.
+Defaults to `false`.
 
 
 ## Attributes
@@ -23,10 +23,10 @@ Only affects `ios` mode. Defaults to `false`.
 
 boolean
 
-If true, adds transparency to the header.
+If true, the header will be translucent.
 Note: In order to scroll content behind the header, the `fullscreen`
 attribute needs to be set on the content.
-Only affects `ios` mode. Defaults to `false`.
+Defaults to `false`.
 
 
 

packages/core/src/components/ripple-effect/ripple-effect.tsx

@@ -20,7 +20,7 @@ export class RippleEffect {
   @Prop({context: 'dom'}) dom: DomController;
   @Prop({context: 'enableListener'}) enableListener: EventListenerEnable;
 
-  @Prop({mutable: true}) useTapClick: boolean;
+  @Prop({ mutable: true }) useTapClick: boolean;
   @Watch('useTapClick')
   tapClickChanged(useTapClick: boolean) {
     this.enableListener(this, 'parent:ionActivated', useTapClick);

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

@@ -49,7 +49,7 @@ For more information, see [Theming your App](/docs/theming/theming-your-app).
 
 number
 
-Duration of the spinner animation in milliseconds. Default varies based on the spinner name.
+Duration of the spinner animation in milliseconds. The default varies based on the spinner.
 
 
 #### mode
@@ -92,7 +92,7 @@ For more information, see [Theming your App](/docs/theming/theming-your-app).
 
 number
 
-Duration of the spinner animation in milliseconds. Default varies based on the spinner name.
+Duration of the spinner animation in milliseconds. The default varies based on the spinner.
 
 
 #### mode

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

@@ -59,7 +59,7 @@ boolean
 
 string
 
-The badge for the tab button.
+The badge for the tab.
 
 
 #### badgeStyle
@@ -73,14 +73,12 @@ The badge color for the tab button.
 
 string
 
-Set the root page for this tab.
-
 
 #### component
 
 any
 
-The badge for the tab button.
+The component to display inside of the tab.
 
 
 #### delegate
@@ -99,25 +97,28 @@ If true, the user cannot interact with the tab. Defaults to `false`.
 
 string
 
-The icon for the tab button.
+The icon for the tab.
 
 
 #### name
 
 string
 
+The name of the tab.
+
 
 #### selected
 
 boolean
 
+If true, the tab will be selected. Defaults to `false`.
+
 
 #### show
 
 boolean
 
-If true, the tab button is visible within the
+If true, the tab button is visible within the tabbar. Defaults to `true`.
-tabbar. Default: `true`.
 
 
 #### tabsHideOnSubPages
@@ -131,7 +132,7 @@ If true, hide the tabs on child pages.
 
 string
 
-The title of the tab button.
+The title of the tab.
 
 
 ## Attributes
@@ -145,7 +146,7 @@ boolean
 
 string
 
-The badge for the tab button.
+The badge for the tab.
 
 
 #### badge-style
@@ -159,14 +160,12 @@ The badge color for the tab button.
 
 string
 
-Set the root page for this tab.
-
 
 #### component
 
 any
 
-The badge for the tab button.
+The component to display inside of the tab.
 
 
 #### delegate
@@ -185,25 +184,28 @@ If true, the user cannot interact with the tab. Defaults to `false`.
 
 string
 
-The icon for the tab button.
+The icon for the tab.
 
 
 #### name
 
 string
 
+The name of the tab.
+
 
 #### selected
 
 boolean
 
+If true, the tab will be selected. Defaults to `false`.
+
 
 #### show
 
 boolean
 
-If true, the tab button is visible within the
+If true, the tab button is visible within the tabbar. Defaults to `true`.
-tabbar. Default: `true`.
 
 
 #### tabs-hide-on-sub-pages
@@ -217,7 +219,7 @@ If true, hide the tabs on child pages.
 
 string
 
-The title of the tab button.
+The title of the tab.
 
 
 ## Events

packages/core/src/components/tab/tab.tsx

@@ -14,47 +14,62 @@ export class Tab {
   @Element() el: HTMLElement;
 
   @State() init = false;
-  @Prop({mutable: true}) active = false;
 
-  /**
+  @Prop() delegate: FrameworkDelegate;
-   * Set the root page for this tab.
+
-   */
+  @Prop({ mutable: true }) active = false;
+
   @Prop() btnId: string;
 
   /**
-   * The title of the tab button.
+   * The title of the tab.
    */
   @Prop() title: string;
 
   /**
-   * The icon for the tab button.
+   * The icon for the tab.
    */
   @Prop() icon: string;
 
   /**
-   * The badge for the tab button.
+   * The badge for the tab.
    */
   @Prop() badge: string;
 
-  /**
-   * The badge for the tab button.
-   */
-  @Prop() component: any;
-  @Prop() name: string;
-
   /**
    * The badge color for the tab button.
    */
   @Prop() badgeStyle = 'default';
 
+  /**
+   * The component to display inside of the tab.
+   */
+  @Prop() component: any;
+
+  /**
+   * The name of the tab.
+   */
+  @Prop() name: string;
+
   /**
    * If true, the user cannot interact with the tab. Defaults to `false`.
    */
   @Prop() disabled = false;
 
   /**
-   * If true, the tab button is visible within the
+   * If true, the tab will be selected. Defaults to `false`.
-   * tabbar. Default: `true`.
+   */
+  @Prop({ mutable: true }) selected = false;
+
+  @Watch('selected')
+  selectedChanged(selected: boolean) {
+    if (selected) {
+      this.ionSelect.emit();
+    }
+  }
+
+  /**
+   * If true, the tab button is visible within the tabbar. Defaults to `true`.
    */
   @Prop() show = true;
 
@@ -63,17 +78,6 @@ export class Tab {
    */
   @Prop() tabsHideOnSubPages = false;
 
-  @Prop() delegate: FrameworkDelegate;
-
-  @Prop({ mutable: true }) selected = false;
-
-
-  @Watch('selected')
-  selectedChanged(selected: boolean) {
-    if (selected) {
-      this.ionSelect.emit();
-    }
-  }
 
   /**
    * Emitted when the current tab is selected.

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

@@ -41,6 +41,8 @@ string
 
 boolean
 
+If true, the tabbar will be translucent. Defaults to `false`.
+
 
 ## Attributes
 
@@ -78,6 +80,8 @@ string
 
 boolean
 
+If true, the tabbar will be translucent. Defaults to `false`.
+
 
 
 ----------------------------------------------

packages/core/src/components/tabbar/tabbar.tsx

@@ -39,6 +39,10 @@ export class Tabbar {
 
   @Prop() layout = 'icon-top';
   @Prop() highlight = false;
+
+  /**
+   * If true, the tabbar will be translucent. Defaults to `false`.
+   */
   @Prop() translucent = false;
 
   @Listen('body:keyboardWillHide')

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

@@ -143,10 +143,10 @@ Set position of the tabbar: `top`, `bottom`.
 
 boolean
 
-If true, adds transparency to the tabbar.
+If true, the tabs will be translucent.
-Note: In order to scroll content behind the tabbar, the `fullscreen`
+Note: In order to scroll content behind the tabs, the `fullscreen`
 attribute needs to be set on the content.
-Only affects `ios` mode. Defaults to `false`.
+Defaults to `false`.
 
 
 ## Attributes
@@ -204,10 +204,10 @@ Set position of the tabbar: `top`, `bottom`.
 
 boolean
 
-If true, adds transparency to the tabbar.
+If true, the tabs will be translucent.
-Note: In order to scroll content behind the tabbar, the `fullscreen`
+Note: In order to scroll content behind the tabs, the `fullscreen`
 attribute needs to be set on the content.
-Only affects `ios` mode. Defaults to `false`.
+Defaults to `false`.
 
 
 ## Events

packages/core/src/components/tabs/tabs.tsx

@@ -54,10 +54,10 @@ export class Tabs implements NavOutlet {
   @Prop({ mutable: true }) tabbarHighlight: boolean;
 
   /**
-   * If true, adds transparency to the tabbar.
+   * If true, the tabs will be translucent.
-   * Note: In order to scroll content behind the tabbar, the `fullscreen`
+   * Note: In order to scroll content behind the tabs, the `fullscreen`
    * attribute needs to be set on the content.
-   * Only affects `ios` mode. Defaults to `false`.
+   * Defaults to `false`.
    */
   @Prop() translucent = false;
 

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

@@ -109,10 +109,10 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl
 
 boolean
 
-If true, adds transparency to the header.
+If true, the toolbar will be translucent.
-Note: In order to scroll content behind the header, the `fullscreen`
+Note: In order to scroll content behind the toolbar, the `fullscreen`
 attribute needs to be set on the content.
-Only affects `ios` mode. Defaults to `false`.
+Defaults to `false`.
 
 
 ## Attributes
@@ -139,10 +139,10 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl
 
 boolean
 
-If true, adds transparency to the header.
+If true, the toolbar will be translucent.
-Note: In order to scroll content behind the header, the `fullscreen`
+Note: In order to scroll content behind the toolbar, the `fullscreen`
 attribute needs to be set on the content.
-Only affects `ios` mode. Defaults to `false`.
+Defaults to `false`.
 
 
 

packages/core/src/components/toolbar/toolbar.tsx

@@ -33,10 +33,10 @@ export class Toolbar {
   @Prop() mode: 'ios' | 'md';
 
   /**
-   * If true, adds transparency to the header.
+   * If true, the toolbar will be translucent.
-   * Note: In order to scroll content behind the header, the `fullscreen`
+   * Note: In order to scroll content behind the toolbar, the `fullscreen`
    * attribute needs to be set on the content.
-   * Only affects `ios` mode. Defaults to `false`.
+   * Defaults to `false`.
    */
   @Prop() translucent = false;