chore(header): finalize collapse API (#19276)

* make requested changes

* add e2e

* add RTL support

* fix typo

* add info on how to make collapsable title

* add usage examples

* fix typo

* fix another typo

* fix typos

* update usage

* fix alpha order

* update api

* add class to collapse buttons

* merge

* update

* change back to collapse

* remove platform specific class

* update docs

* run build

* update api again

* run build

core/src/components/buttons/buttons.tsx

@@ -20,13 +20,21 @@ export class Buttons implements ComponentInterface {
    * only be shown once all toolbars have fully collapsed.
    *
    * Only applies in `ios` mode with `collapse` set to
-   * `true` on `ion-header`
+   * `true` on `ion-header`.
+   *
+   * Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)
    */
   @Prop() collapse = false;
 
   render() {
+    const mode = getIonMode(this);
     return (
-      <Host class={getIonMode(this)}>
+      <Host
+        class={{
+          [mode]: true,
+          ['buttons-collapse']: this.collapse
+        }}
+      >
       </Host>
     );
   }

core/src/components/buttons/readme.md

@@ -55,6 +55,15 @@ The `<ion-buttons>` element can be positioned inside of the toolbar using a name
     <ion-menu-button autoHide="false"></ion-menu-button>
   </ion-buttons>
 </ion-toolbar>
+
+<ion-toolbar>
+  <ion-buttons collapse="true">
+    <ion-button>
+      <ion-icon slot="icon-only" name="star"></ion-icon>
+    </ion-button>
+  </ion-buttons>
+  <ion-title>Collapsible Buttons</ion-title>
+</ion-toolbar>
 ```
 
 
@@ -100,6 +109,15 @@ The `<ion-buttons>` element can be positioned inside of the toolbar using a name
     </ion-menu-toggle>
   </ion-buttons>
 </ion-toolbar>
+
+<ion-toolbar>
+  <ion-buttons collapse="true">
+    <ion-button>
+      <ion-icon slot="icon-only" name="star"></ion-icon>
+    </ion-button>
+  </ion-buttons>
+  <ion-title>Collapsible Buttons</ion-title>
+</ion-toolbar>
 ```
 
 
@@ -155,6 +173,15 @@ export const ButtonsExample: React.FC = () => (
         <IonMenuButton autoHide={false} />
       </IonButtons>
     </IonToolbar>
+    
+    <IonToolbar>
+      <IonButtons collapse="true">
+        <IonButton>
+          <IonIcon slot="icon-only" name="star" />
+        </IonButton>
+      </IonButtons>
+      <IonTitle>Collapsible Buttons</IonTitle>
+    </IonToolbar>
   </IonContent>
 );
 ```
@@ -199,6 +226,15 @@ export const ButtonsExample: React.FC = () => (
       <ion-menu-button autoHide="false"></ion-menu-button>
     </ion-buttons>
   </ion-toolbar>
+  
+  <ion-toolbar>
+    <ion-buttons collapse="true">
+      <ion-button>
+        <ion-icon slot="icon-only" name="star"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>Collapsible Buttons</ion-title>
+  </ion-toolbar>
 </template>
 ```
 
@@ -206,9 +242,9 @@ export const ButtonsExample: React.FC = () => (
 
 ## Properties
 
-| Property   | Attribute  | Description                                                                                                                                                                                                                                                                                                                   | Type      | Default |
-| ---------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
-| `collapse` | `collapse` | If true, buttons will disappear when its parent toolbar has fully collapsed if the toolbar is not the first toolbar. If the toolbar is the first toolbar, the buttons will be hidden and will only be shown once all toolbars have fully collapsed.  Only applies in `ios` mode with `collapse` set to `true` on `ion-header` | `boolean` | `false` |
+| Property   | Attribute  | Description                                                                                                                                                                                                                                                                                                                                                                                                                                       | Type      | Default |
+| ---------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
+| `collapse` | `collapse` | If true, buttons will disappear when its parent toolbar has fully collapsed if the toolbar is not the first toolbar. If the toolbar is the first toolbar, the buttons will be hidden and will only be shown once all toolbars have fully collapsed.  Only applies in `ios` mode with `collapse` set to `true` on `ion-header`.  Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles) | `boolean` | `false` |
 
 
 ----------------------------------------------

core/src/components/buttons/usage/angular.md

@@ -34,4 +34,13 @@
     <ion-menu-button autoHide="false"></ion-menu-button>
   </ion-buttons>
 </ion-toolbar>
+
+<ion-toolbar>
+  <ion-buttons collapse="true">
+    <ion-button>
+      <ion-icon slot="icon-only" name="star"></ion-icon>
+    </ion-button>
+  </ion-buttons>
+  <ion-title>Collapsible Buttons</ion-title>
+</ion-toolbar>
 ```

core/src/components/buttons/usage/javascript.md

@@ -38,4 +38,13 @@
     </ion-menu-toggle>
   </ion-buttons>
 </ion-toolbar>
+
+<ion-toolbar>
+  <ion-buttons collapse="true">
+    <ion-button>
+      <ion-icon slot="icon-only" name="star"></ion-icon>
+    </ion-button>
+  </ion-buttons>
+  <ion-title>Collapsible Buttons</ion-title>
+</ion-toolbar>
 ```

core/src/components/buttons/usage/react.md

@@ -48,6 +48,15 @@ export const ButtonsExample: React.FC = () => (
         <IonMenuButton autoHide={false} />
       </IonButtons>
     </IonToolbar>
+    
+    <IonToolbar>
+      <IonButtons collapse="true">
+        <IonButton>
+          <IonIcon slot="icon-only" name="star" />
+        </IonButton>
+      </IonButtons>
+      <IonTitle>Collapsible Buttons</IonTitle>
+    </IonToolbar>
   </IonContent>
 );
 ```

core/src/components/buttons/usage/vue.md

@@ -35,5 +35,14 @@
       <ion-menu-button autoHide="false"></ion-menu-button>
     </ion-buttons>
   </ion-toolbar>
+  
+  <ion-toolbar>
+    <ion-buttons collapse="true">
+      <ion-button>
+        <ion-icon slot="icon-only" name="star"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>Collapsible Buttons</ion-title>
+  </ion-toolbar>
 </template>
 ```