fix(react): update list starter for correct styles and back button text

ionic-team · Sep 12, 2024 · d5ed8ca · d5ed8ca
1 parent 4f4b246
commit d5ed8ca
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 21 deletions.
diff --git a/react-vite/official/list/src/components/MessageListItem.css b/react-vite/official/list/src/components/MessageListItem.css
@@ -1,17 +1,19 @@
-ion-item {
+#message-list-item {
   --padding-start: 0;
   --inner-padding-end: 0;
 }
 
-ion-label {
+#message-list-item ion-label {
   margin-top: 12px;
   margin-bottom: 12px;
+
+  overflow: hidden;
 }
 
-ion-item h2 {
+#message-list-item ion-label h2 {
   font-weight: 600;
   margin: 0;
-  
+
   /**
    * With larger font scales
    * the date/time should wrap to the next
@@ -24,33 +26,31 @@ ion-item h2 {
   justify-content: space-between;
 }
 
-ion-item p {
-  text-overflow: ellipsis;
-  overflow: hidden;
+#message-list-item p {
   white-space: nowrap;
   width: 95%;
 }
 
-ion-item .date {
+#message-list-item .date {
   align-items: center;
   display: flex;
 }
 
-ion-item ion-icon {
+#message-list-item ion-icon {
   color: #c9c9ca;
 }
 
-ion-item ion-note {
+#message-list-item ion-note {
   font-size: 0.9375rem;
   margin-right: 8px;
   font-weight: normal;
 }
 
-ion-item ion-note.md {
+#message-list-item ion-note.md {
   margin-right: 14px;
 }
 
-.dot {
+#message-list-item .dot {
   display: block;
   height: 12px;
   width: 12px;
@@ -59,11 +59,6 @@ ion-item ion-note.md {
   margin: 16px 10px 16px 16px;
 }
 
-.dot-unread {
+#message-list-item .dot-unread {
   background: var(--ion-color-primary);
 }
-
-ion-footer ion-title {
-  font-size: 11px;
-  font-weight: normal;
-}
diff --git a/react-vite/official/list/src/components/MessageListItem.tsx b/react-vite/official/list/src/components/MessageListItem.tsx
@@ -12,7 +12,7 @@ interface MessageListItemProps {
 
 const MessageListItem: React.FC<MessageListItemProps> = ({ message }) => {
   return (
-    <IonItem routerLink={`/message/${message.id}`} detail={false}>
+    <IonItem id="message-list-item" routerLink={`/message/${message.id}`} detail={false}>
       <div slot="start" className="dot dot-unread"></div>
       <IonLabel className="ion-text-wrap">
         <h2>

diff --git a/react/official/list/src/pages/ViewMessage.tsx b/react/official/list/src/pages/ViewMessage.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { useState } from 'react';
 import { Message, getMessage } from '../data/messages';
 import {
@@ -13,6 +12,7 @@ import {
   IonPage,
   IonToolbar,
   useIonViewWillEnter,
+  isPlatform
 } from '@ionic/react';
 import { personCircle } from 'ionicons/icons';
 import { useParams } from 'react-router';
@@ -27,12 +27,17 @@ function ViewMessage() {
     setMessage(msg);
   });
 
+  const getBackButtonText = () => {
+    const isIos = isPlatform('ios')
+    return isIos ? 'Inbox' : '';
+  };
+
   return (
     <IonPage id="view-message-page">
       <IonHeader translucent>
         <IonToolbar>
           <IonButtons slot="start">
-            <IonBackButton text="Inbox" defaultHref="/home"></IonBackButton>
+            <IonBackButton text={getBackButtonText()} defaultHref="/home"></IonBackButton>
           </IonButtons>
         </IonToolbar>
       </IonHeader>