Merge pull request #34 from ionic-team/FW-5346

feat(): enable dynamic font scaling

Author: averyjohnston

package-lock.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",

package.json

@@ -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>
     ];

src/components/action-sheet/action-sheet.tsx

@@ -1,7 +0,0 @@
-ion-tab-bar {
-  position: fixed;
-
-  right: 0;
-  bottom: 0;
-  left: 0;
-}

src/components/badge/badge.css

@@ -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>
     ];
   }
 }

src/components/badge/badge.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>
     ];

src/components/button/button.tsx

@@ -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 {

src/components/card/card.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;
 }

src/components/component-details/component-details.css

@@ -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>
     ];

src/components/content/content.tsx

@@ -1,5 +1,5 @@
 component-icons ion-icon {
-  font-size: 36px;
+  font-size: 2.25rem;
   margin: 3px;
 
   color: var(--ion-color-step-650, #444);