feat(input): support dynamic type (#28184)

Issue number: N/A

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?

`ion-input` does not support dynamic type.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

`ion-input` supports dynamic type. Most of the sizing was already
inherited; only the helper text needed updating.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

---------

Co-authored-by: ionitron <hi@ionicframework.com>
This commit is contained in:
Amanda Johnston
2023-09-19 09:05:43 -05:00
committed by GitHub
parent e3a6de3e32
commit 7597cce66a
8 changed files with 21 additions and 2 deletions

View File

@@ -346,7 +346,7 @@
border-top: var(--border-width) var(--border-style) var(--border-color);
font-size: 12px;
font-size: dynamic-font(12px);
}
/**

View File

@@ -2,7 +2,7 @@ import AxeBuilder from '@axe-core/playwright';
import { expect } from '@playwright/test';
import { configs, test } from '@utils/test/playwright';
configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
configs({ directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
test.describe(title('input: a11y'), () => {
test('should not have accessibility violations', async ({ page }) => {
await page.goto(`/src/components/input/test/a11y`, config);
@@ -11,4 +11,23 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
expect(results.violations).toEqual([]);
});
});
test.describe(title('input: font scaling'), () => {
test('should scale text on larger font sizes', async ({ page }) => {
await page.setContent(
`
<style>
html {
font-size: 310%;
}
</style>
<ion-input label="Email" helper-text="Enter your email"></ion-input>
`,
config
);
const input = page.locator('ion-input');
await expect(input).toHaveScreenshot(screenshot('input-scale'));
});
});
});

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.5 KiB

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.1 KiB

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 KiB

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.9 KiB

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 KiB