bug: IonListHeader and IonButton inconsistent alignment

[DunhamGitHub]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

Ionic 7:

Expected Behavior

Ionic 4:

Steps to Reproduce

                <IonItem routerLink="/main/client-list" routerDirection="back" detail={ false }>
                  <IonListHeader style={{ color: '#2A5AAD' }}>
                    <IonLabel>{ store.clientFilterName }</IonLabel>
                  </IonListHeader>
                  <IonButton fill="clear" slot="start">
                    <IonIcon slot="icon-only" icon={ arrowBack } />
                    <IonIcon slot="icon-only" icon={ personAdd } />
                  </IonButton>
                </IonItem>

Code Reproduction URL

_

Ionic Info

Ionic:

   Ionic CLI       : 7.2.0 (/opt/homebrew/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 7.8.1

Capacitor:

   Capacitor CLI      : 5.7.3
   @capacitor/android : not installed
   @capacitor/core    : 5.7.3
   @capacitor/ios     : not installed

Utility:

   cordova-res : 0.15.4
   native-run  : 2.0.1

System:

   NodeJS : v20.11.1 (/opt/homebrew/Cellar/node@20/20.11.1_1/bin/node)
   npm    : 10.2.4
   OS     : macOS Unknown

Additional Information

No response

[thetaPC]

Thank you for submitting the issue!

I was unable to replicate the issue using the provided code snippet in v7. It displays aligned for me:

Please provide a minimal repro in order for us to debug this issue.

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[DunhamGitHub]

Thank you for your reply. I have started a vanilla example and indeed it looks normal. But I noticed that when ios seems to be used for themes it does not look right... (Obviously elements look different when using ios style as opposed to md style, see the header bar as an example)

Looks ok (md style):

Does not look ok (ios style):

Question then, if I may:

1. What makes the ios or md style being applied?
2. Seems the ios styling is wrong? (I can deliver my vanilla app as soon as 1. is answered)

[DunhamGitHub]

I was able to set mode="ios" to recreate the problem, in the vanilla example I created this page:

import { IonNote, IonLabel, IonListHeader, IonList, IonItem, IonButtons, IonMenuButton, IonIcon, IonButton, useIonLoading, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import {
  power,
  personAdd,
  arrowBack
} from 'ionicons/icons';

const Test_Menu: React.FC = () => {
  const [present, dismiss] = useIonLoading();
  return (
    <IonPage id="main-page">
          <IonHeader mode="ios">
            <IonToolbar mode="ios">
              <IonButtons slot="start">
                <IonMenuButton></IonMenuButton>
              </IonButtons>
              <IonTitle>Header test</IonTitle>
              <IonButton routerLink="/login" routerDirection="back" fill="clear" slot="end">
                <IonIcon slot="icon-only" icon={ power } />
              </IonButton>
            </IonToolbar> 
          </IonHeader>

          <IonContent className="ion-padding" forceOverscroll={ true }>
                <IonItem mode="ios" routerLink="/main/client-list" routerDirection="back" detail={ false }>
                  <IonListHeader mode="ios" style={{ color: '#2A5AAD' }}>
                    <IonLabel>test</IonLabel>
                  </IonListHeader>
                  <IonButton fill="clear" slot="start" >
                    <IonIcon slot="icon-only" icon={ arrowBack } />
                  </IonButton>
                </IonItem>

            <IonList>
              <IonItem routerLink="/main/cash" detail>
                <IonLabel>Cash</IonLabel>
                <IonNote slot="end">
                  test
                </IonNote>
              </IonItem>
            </IonList>
          </IonContent>

        </IonPage>
  );
};

export default Test_Menu;

[thetaPC]

After further inspection, I was able to replicate the issue. This is due to the way the code is being structured, not the mode being used. I would recommend reviewing the ion-list-header docs page, it has a great example on how to add buttons.

This is the code snippet that will align the button and the list header:

<IonList>
  <IonListHeader style={{ color: '#2A5AAD' }}>
    <IonButton fill="clear">
      <IonIcon slot="icon-only" icon={ arrowBack } />
      <IonIcon slot="icon-only" icon={ personAdd } />
    </IonButton>
    <IonLabel>Video Games</IonLabel>
  </IonListHeader>
  <IonItem>
    <IonLabel>Pokémon Yellow</IonLabel>
  </IonItem>
  <IonItem>
    <IonLabel>Mega Man X</IonLabel>
  </IonItem>
  <IonItem>
    <IonLabel>The Legend of Zelda</IonLabel>
  </IonItem>
  <IonItem>
    <IonLabel>Pac-Man</IonLabel>
  </IonItem>
  <IonItem>
    <IonLabel>Super Mario World</IonLabel>
  </IonItem>
</IonList>

There have been a lot of changes since Ionic 4 and code structures have changed. Here's an upgrade guide that might be useful to determine what those code changes can be.

I'm closing this issue since it was due to code structuring.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.