From b8f22b51eb6610b2135390d2ef52060f9802e74d Mon Sep 17 00:00:00 2001
From: amandaesmith3 <amanda.s@ionic.io>
Date: Fri, 1 Dec 2023 12:21:10 -0600
Subject: [PATCH 1/5] update Ionic to support dynamic font scaling

---
 package-lock.json | 77 ++++++++++++++++++++++++++++++-----------------
 package.json      |  2 +-
 2 files changed, 50 insertions(+), 29 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e8006e3..dfbae8e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.0.1",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^7.0.0"
+        "@ionic/core": "^7.5.0"
       },
       "devDependencies": {
         "@stencil/core": "^2.22.2",
@@ -674,25 +674,25 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.0.tgz",
-      "integrity": "sha512-pM8qOaea9ZbqZbGnoIswaeeTiHJKNQ9ziSNHSILDpdd4FjpxZjOeMgNUdvYzh5rX9fA6hEM2wodg7McIWHgvZQ==",
+      "version": "7.5.7",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.5.7.tgz",
+      "integrity": "sha512-BVoKckmcC1kgRW5+ZGmzZMCXOjjaxq6D5lp0XzOpqUKBfyr8b39nkdJL2odQY2F1+jScChxk7wB5nubx4i3lUw==",
       "dependencies": {
-        "@stencil/core": "^3.1.0",
-        "ionicons": "^7.1.0",
+        "@stencil/core": "^4.7.2",
+        "ionicons": "^7.2.1",
         "tslib": "^2.1.0"
       }
     },
     "node_modules/@ionic/core/node_modules/@stencil/core": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.0.tgz",
-      "integrity": "sha512-vAZiHg4h6hZn4GP6P4w/d7qJwovW0xroitVAn/Ay0rUOeMHqMDYTX5jq0Vy/bgKactKam5WL/to50esGe6lDUQ==",
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.8.0.tgz",
+      "integrity": "sha512-iNEaMiEt9oFZXSjZ7qkdlBpPTzWzBgWM7go8nI8a7V6ZOkmdVhhT0xGQD7OY13v5ZuDoIw5IsGvbIAGefhIhhQ==",
       "bin": {
         "stencil": "bin/stencil"
       },
       "engines": {
-        "node": ">=14.10.0",
-        "npm": ">=6.0.0"
+        "node": ">=16.0.0",
+        "npm": ">=7.10.0"
       }
     },
     "node_modules/@ionic/core/node_modules/tslib": {
@@ -1018,6 +1018,7 @@
       "version": "2.22.2",
       "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.22.2.tgz",
       "integrity": "sha512-r+vbxsGNcBaV1VDOYW25lv4QfXTlNoIb5GpUX7rZ+cr59yqYCZC5tlV+IzX6YgHKW62ulCc9M3RYtTfHtNbNNw==",
+      "dev": true,
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -3714,11 +3715,23 @@
       "dev": true
     },
     "node_modules/ionicons": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.1.0.tgz",
-      "integrity": "sha512-iE4GuEdEHARJpp0sWL7WJZCzNCf5VxpNRhAjW0fLnZPnNL5qZOJUcfup2Z2Ty7Jk8Q5hacrHfGEB1lCwOdXqGg==",
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.1.tgz",
+      "integrity": "sha512-2pvCM7DGVEtbbj48PJzQrCADCQrqjU1nUYX9l9PyEWz3ZfdnLdAouqwPxLdl8tbaF9cE7OZRSlyQD7oLOLnGoQ==",
       "dependencies": {
-        "@stencil/core": "^2.18.0"
+        "@stencil/core": "^4.0.3"
+      }
+    },
+    "node_modules/ionicons/node_modules/@stencil/core": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.8.0.tgz",
+      "integrity": "sha512-iNEaMiEt9oFZXSjZ7qkdlBpPTzWzBgWM7go8nI8a7V6ZOkmdVhhT0xGQD7OY13v5ZuDoIw5IsGvbIAGefhIhhQ==",
+      "bin": {
+        "stencil": "bin/stencil"
+      },
+      "engines": {
+        "node": ">=16.0.0",
+        "npm": ">=7.10.0"
       }
     },
     "node_modules/is-accessor-descriptor": {
@@ -7911,19 +7924,19 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.0.tgz",
-      "integrity": "sha512-pM8qOaea9ZbqZbGnoIswaeeTiHJKNQ9ziSNHSILDpdd4FjpxZjOeMgNUdvYzh5rX9fA6hEM2wodg7McIWHgvZQ==",
+      "version": "7.5.7",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.5.7.tgz",
+      "integrity": "sha512-BVoKckmcC1kgRW5+ZGmzZMCXOjjaxq6D5lp0XzOpqUKBfyr8b39nkdJL2odQY2F1+jScChxk7wB5nubx4i3lUw==",
       "requires": {
-        "@stencil/core": "^3.1.0",
-        "ionicons": "^7.1.0",
+        "@stencil/core": "^4.7.2",
+        "ionicons": "^7.2.1",
         "tslib": "^2.1.0"
       },
       "dependencies": {
         "@stencil/core": {
-          "version": "3.2.0",
-          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.0.tgz",
-          "integrity": "sha512-vAZiHg4h6hZn4GP6P4w/d7qJwovW0xroitVAn/Ay0rUOeMHqMDYTX5jq0Vy/bgKactKam5WL/to50esGe6lDUQ=="
+          "version": "4.8.0",
+          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.8.0.tgz",
+          "integrity": "sha512-iNEaMiEt9oFZXSjZ7qkdlBpPTzWzBgWM7go8nI8a7V6ZOkmdVhhT0xGQD7OY13v5ZuDoIw5IsGvbIAGefhIhhQ=="
         },
         "tslib": {
           "version": "2.3.0",
@@ -8198,7 +8211,8 @@
     "@stencil/core": {
       "version": "2.22.2",
       "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.22.2.tgz",
-      "integrity": "sha512-r+vbxsGNcBaV1VDOYW25lv4QfXTlNoIb5GpUX7rZ+cr59yqYCZC5tlV+IzX6YgHKW62ulCc9M3RYtTfHtNbNNw=="
+      "integrity": "sha512-r+vbxsGNcBaV1VDOYW25lv4QfXTlNoIb5GpUX7rZ+cr59yqYCZC5tlV+IzX6YgHKW62ulCc9M3RYtTfHtNbNNw==",
+      "dev": true
     },
     "@tootallnate/once": {
       "version": "1.1.2",
@@ -10241,11 +10255,18 @@
       "dev": true
     },
     "ionicons": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.1.0.tgz",
-      "integrity": "sha512-iE4GuEdEHARJpp0sWL7WJZCzNCf5VxpNRhAjW0fLnZPnNL5qZOJUcfup2Z2Ty7Jk8Q5hacrHfGEB1lCwOdXqGg==",
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.1.tgz",
+      "integrity": "sha512-2pvCM7DGVEtbbj48PJzQrCADCQrqjU1nUYX9l9PyEWz3ZfdnLdAouqwPxLdl8tbaF9cE7OZRSlyQD7oLOLnGoQ==",
       "requires": {
-        "@stencil/core": "^2.18.0"
+        "@stencil/core": "^4.0.3"
+      },
+      "dependencies": {
+        "@stencil/core": {
+          "version": "4.8.0",
+          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.8.0.tgz",
+          "integrity": "sha512-iNEaMiEt9oFZXSjZ7qkdlBpPTzWzBgWM7go8nI8a7V6ZOkmdVhhT0xGQD7OY13v5ZuDoIw5IsGvbIAGefhIhhQ=="
+        }
       }
     },
     "is-accessor-descriptor": {
diff --git a/package.json b/package.json
index c4cd0cd..0c324ed 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
     "generate": "stencil generate"
   },
   "dependencies": {
-    "@ionic/core": "^7.0.0"
+    "@ionic/core": "^7.5.0"
   },
   "devDependencies": {
     "@stencil/core": "^2.22.2",

From c3348aa1d538d93f27ac48644ca3049058708903 Mon Sep 17 00:00:00 2001
From: amandaesmith3 <amanda.s@ionic.io>
Date: Fri, 1 Dec 2023 12:26:24 -0600
Subject: [PATCH 2/5] enable dynamic font scaling

---
 src/global/app.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/global/app.css b/src/global/app.css
index 1679b1c..da5db4d 100644
--- a/src/global/app.css
+++ b/src/global/app.css
@@ -52,6 +52,11 @@
   font-weight: 450 500;
 }
 
+/* Enable dynamic font scaling */
+html {
+  --ion-dynamic-font: var(--ion-default-dynamic-font);
+}
+
 .component-content {
   --background: var(--ion-color-step-50, #f2f2f7);
 }

From 560829a11d80e1450fb337a8e5a024d8b450523f Mon Sep 17 00:00:00 2001
From: amandaesmith3 <amanda.s@ionic.io>
Date: Fri, 1 Dec 2023 12:38:57 -0600
Subject: [PATCH 3/5] change font sizes to rem

---
 src/components/card/card.css                           | 6 +++---
 src/components/component-details/component-details.css | 4 ++--
 src/components/icons/icons.css                         | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/card/card.css b/src/components/card/card.css
index a65f1b6..d4352b5 100644
--- a/src/components/card/card.css
+++ b/src/components/card/card.css
@@ -82,7 +82,7 @@ component-card .coworker-card .header-img {
 
 component-card .coworker-card h1 {
   font-weight: 600;
-  font-size: 18px;
+  font-size: 1.125rem;
 }
 
 component-card .coworker-card p {
@@ -115,7 +115,7 @@ component-card .music-card img {
 
 component-card .music-card h2 {
   font-weight: 600;
-  font-size: 16px;
+  font-size: 1rem;
 
   color: var(--text-darker);
 }
@@ -132,7 +132,7 @@ component-card .music-card ion-button {
 }
 
 component-card .music-card .button-largest {
-  font-size: 28px;
+  font-size: 1.75rem;
 }
 
 component-card .music-card ion-progress-bar {
diff --git a/src/components/component-details/component-details.css b/src/components/component-details/component-details.css
index f5aedf0..3293ad3 100644
--- a/src/components/component-details/component-details.css
+++ b/src/components/component-details/component-details.css
@@ -5,7 +5,7 @@ component-details ion-list {
 
 component-details .item .component-description {
  color: var(--ion-color-step-800, #3e4a58);
- font-size: 18px;
+ font-size: 1.125rem;
  line-height: 1.4;
  white-space: normal;
  padding-bottom: 16px;
@@ -19,5 +19,5 @@ component-details .item .component-description b {
 component-details .component-link {
   text-transform: capitalize;
 
-  font-size: 16px;
+  font-size: 1rem;
 }
\ No newline at end of file
diff --git a/src/components/icons/icons.css b/src/components/icons/icons.css
index c4e5d4c..701f065 100644
--- a/src/components/icons/icons.css
+++ b/src/components/icons/icons.css
@@ -1,5 +1,5 @@
 component-icons ion-icon {
-  font-size: 36px;
+  font-size: 2.25rem;
   margin: 3px;
 
   color: var(--ion-color-step-650, #444);

From 1298f1498638eaf19aed48d199f6bda16ce3fee8 Mon Sep 17 00:00:00 2001
From: amandaesmith3 <amanda.s@ionic.io>
Date: Fri, 1 Dec 2023 12:59:50 -0600
Subject: [PATCH 4/5] move tab bar in badge page to footer so content can
 scroll all the way down

---
 src/components/badge/badge.css | 7 -------
 src/components/badge/badge.tsx | 4 +++-
 2 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/components/badge/badge.css b/src/components/badge/badge.css
index bdaba8f..e69de29 100644
--- a/src/components/badge/badge.css
+++ b/src/components/badge/badge.css
@@ -1,7 +0,0 @@
-ion-tab-bar {
-  position: fixed;
-
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
\ No newline at end of file
diff --git a/src/components/badge/badge.tsx b/src/components/badge/badge.tsx
index eb5d2bf..f92ecba 100644
--- a/src/components/badge/badge.tsx
+++ b/src/components/badge/badge.tsx
@@ -60,7 +60,9 @@ export class Badge {
             <ion-badge color="dark" slot="end">4</ion-badge>
           </ion-item>
         </ion-list>
+      </ion-content>,
 
+      <ion-footer>
         <ion-tab-bar>
           <ion-tab-button selected>
             <ion-icon name="globe"></ion-icon>
@@ -75,7 +77,7 @@ export class Badge {
             <ion-badge>2.3k</ion-badge>
           </ion-tab-button>
         </ion-tab-bar>
-      </ion-content>
+      </ion-footer>
     ];
   }
 }

From 0f4cfc4ea4b4a3be64b1baa9e0b2298e1d687fe3 Mon Sep 17 00:00:00 2001
From: amandaesmith3 <amanda.s@ionic.io>
Date: Fri, 1 Dec 2023 13:06:36 -0600
Subject: [PATCH 5/5] add ion-text-wrap to buttons with longer text

---
 src/components/action-sheet/action-sheet.tsx | 2 +-
 src/components/button/button.tsx             | 4 ++--
 src/components/content/content.tsx           | 4 ++--
 src/components/input/input.tsx               | 2 +-
 src/components/modal/modal.tsx               | 4 ++--
 src/components/picker/picker.tsx             | 4 ++--
 src/components/popover/popover.tsx           | 2 +-
 7 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/action-sheet/action-sheet.tsx b/src/components/action-sheet/action-sheet.tsx
index 92aaaf8..26a913f 100644
--- a/src/components/action-sheet/action-sheet.tsx
+++ b/src/components/action-sheet/action-sheet.tsx
@@ -72,7 +72,7 @@ export class ActionSheet {
         <component-details description={description} url={url}></component-details>
 
         <div class="ion-padding-start ion-padding-end">
-          <ion-button expand="block" onClick={this.open}>Open Action Sheet</ion-button>
+          <ion-button class="ion-text-wrap" expand="block" onClick={this.open}>Open Action Sheet</ion-button>
         </div>
       </ion-content>
     ];
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index 00e32e5..683a8b8 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -56,7 +56,7 @@ export class Button {
               Block Width
             </ion-label>
           </ion-list-header>
-          <ion-button expand="block">A block button</ion-button>
+          <ion-button class="ion-text-wrap" expand="block">A block button</ion-button>
         </section>
 
         <section>
@@ -65,7 +65,7 @@ export class Button {
               Full Width
             </ion-label>
           </ion-list-header>
-          <ion-button expand="full" color="secondary">A full-width button</ion-button>
+          <ion-button class="ion-text-wrap" expand="full" color="secondary">A full-width button</ion-button>
         </section>
       </ion-content>
     ];
diff --git a/src/components/content/content.tsx b/src/components/content/content.tsx
index 781043c..e8af41c 100644
--- a/src/components/content/content.tsx
+++ b/src/components/content/content.tsx
@@ -32,7 +32,7 @@ export class Content {
 
       <ion-content fullscreen={true}>
         <p class="ion-padding-start ion-padding-end">
-          <ion-button onClick={this.scrollToBottom} expand="block" fill="outline">Scroll To Bottom</ion-button>
+          <ion-button class="ion-text-wrap" onClick={this.scrollToBottom} expand="block" fill="outline">Scroll To Bottom</ion-button>
         </p>
         {new Array(30).fill(0).map((_, i) => {
           return (
@@ -42,7 +42,7 @@ export class Content {
           );
         })}
         <p class="ion-padding-start ion-padding-end">
-          <ion-button onClick={this.scrollToTop} expand="block" fill="outline">Scroll To Top</ion-button>
+          <ion-button class="ion-text-wrap" onClick={this.scrollToTop} expand="block" fill="outline">Scroll To Top</ion-button>
         </p>
       </ion-content>
     ];
diff --git a/src/components/input/input.tsx b/src/components/input/input.tsx
index 362dc45..5d14e71 100644
--- a/src/components/input/input.tsx
+++ b/src/components/input/input.tsx
@@ -65,7 +65,7 @@ export class Input {
           </ion-list>
 
           <div class="ion-padding">
-            <ion-button expand="block" type="submit" class="ion-no-margin">Create account</ion-button>
+            <ion-button expand="block" type="submit" class="ion-text-wrap ion-no-margin">Create account</ion-button>
           </div>
         </form>
       </ion-content>,
diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx
index 4999632..db5b27d 100644
--- a/src/components/modal/modal.tsx
+++ b/src/components/modal/modal.tsx
@@ -58,8 +58,8 @@ export class Modal {
 
         <div class="ion-padding-start ion-padding-end">
           <ion-button expand="block" onClick={this.openDefaultModal}>Open Modal</ion-button>
-          <ion-button expand="block" onClick={this.openCardModal}>Open Card Modal</ion-button>
-          <ion-button expand="block" onClick={this.openSheetModal}>Open Sheet Modal</ion-button>
+          <ion-button class="ion-text-wrap" expand="block" onClick={this.openCardModal}>Open Card Modal</ion-button>
+          <ion-button class="ion-text-wrap" expand="block" onClick={this.openSheetModal}>Open Sheet Modal</ion-button>
         </div>
       </ion-content>
     ];
diff --git a/src/components/picker/picker.tsx b/src/components/picker/picker.tsx
index ffacc49..802d355 100644
--- a/src/components/picker/picker.tsx
+++ b/src/components/picker/picker.tsx
@@ -100,8 +100,8 @@ export class Picker {
         <component-details description={description} url={url}></component-details>
 
         <div class="ion-padding-start ion-padding-end">
-          <ion-button expand="block" onClick={_ => this.openPicker()}>Open Single Column Picker</ion-button>
-          <ion-button expand="block" onClick={_ => this.openPicker(2, 5, this.multiColumnOptions)}>Open Multiple Column Picker</ion-button>
+          <ion-button class="ion-text-wrap" expand="block" onClick={_ => this.openPicker()}>Open Single Column Picker</ion-button>
+          <ion-button class="ion-text-wrap" expand="block" onClick={_ => this.openPicker(2, 5, this.multiColumnOptions)}>Open Multiple Column Picker</ion-button>
         </div>
       </ion-content>
     ];
diff --git a/src/components/popover/popover.tsx b/src/components/popover/popover.tsx
index d9b91ee..6543b78 100644
--- a/src/components/popover/popover.tsx
+++ b/src/components/popover/popover.tsx
@@ -43,7 +43,7 @@ export class Popover {
         <component-details description={description} url={url}></component-details>
 
         <div class="ion-padding-start ion-padding-end">
-          <ion-button expand="block" onClick={this.showPopover}>Open Popover</ion-button>
+          <ion-button class="ion-text-wrap" expand="block" onClick={this.showPopover}>Open Popover</ion-button>
         </div>
       </ion-content>
     ];