Skip to content

Commit

Permalink
Merge pull request #34 from ionic-team/FW-5346
Browse files Browse the repository at this point in the history 
feat(): enable dynamic font scaling
  • Loading branch information
@averyjohnston
averyjohnston authored Dec 5, 2023
2 parents f8125bd + 0f4cfc4 commit ba8fa3d
Show file tree
Hide file tree
Showing 15 changed files with 75 additions and 54 deletions.
77 changes: 49 additions & 28 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
"generate": "stencil generate"
},
"dependencies": {
"@ionic/core": "^7.0.0"
"@ionic/core": "^7.5.0"
},
"devDependencies": {
"@stencil/core": "^2.22.2",
Expand Down
2 changes: 1 addition & 1 deletion src/components/action-sheet/action-sheet.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
];
Expand Down
7 changes: 0 additions & 7 deletions src/components/badge/badge.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +0,0 @@
ion-tab-bar {
position: fixed;

right: 0;
bottom: 0;
left: 0;
}
4 changes: 3 additions & 1 deletion src/components/badge/badge.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -75,7 +77,7 @@ export class Badge {
<ion-badge>2.3k</ion-badge>
</ion-tab-button>
</ion-tab-bar>
</ion-content>
</ion-footer>
];
}
}
4 changes: 2 additions & 2 deletions src/components/button/button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
];
Expand Down
6 changes: 3 additions & 3 deletions src/components/card/card.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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);
}
Expand All @@ -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 {
Expand Down
4 changes: 2 additions & 2 deletions src/components/component-details/component-details.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -19,5 +19,5 @@ component-details .item .component-description b {
component-details .component-link {
text-transform: capitalize;

font-size: 16px;
font-size: 1rem;
}
4 changes: 2 additions & 2 deletions src/components/content/content.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand All @@ -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>
];
Expand Down
2 changes: 1 addition & 1 deletion src/components/icons/icons.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
component-icons ion-icon {
font-size: 36px;
font-size: 2.25rem;
margin: 3px;

color: var(--ion-color-step-650, #444);
Expand Down
2 changes: 1 addition & 1 deletion src/components/input/input.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>,
Expand Down
4 changes: 2 additions & 2 deletions src/components/modal/modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
];
Expand Down
4 changes: 2 additions & 2 deletions src/components/picker/picker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
];
Expand Down
2 changes: 1 addition & 1 deletion src/components/popover/popover.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
];
Expand Down
5 changes: 5 additions & 0 deletions src/global/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down

1 comment on commit ba8fa3d

@vercel
Copy link

@vercel vercel bot commented on ba8fa3d Dec 5, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

docs-demo – ./

ionic-docs-demo.vercel.app
docs-demo-ionic1.vercel.app
docs-demo-git-main-ionic1.vercel.app
docs-demo.ionic.io

Please sign in to comment.