mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
Compare commits
9 Commits
shane-patc
...
FW-4398
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
735d276bf9 | ||
|
|
71f7d536b7 | ||
|
|
da02130b58 | ||
|
|
8e80779b01 | ||
|
|
21eecf06de | ||
|
|
55be77bf38 | ||
|
|
75cc691497 | ||
|
|
e282058e23 | ||
|
|
99f08a9578 |
@@ -66,15 +66,20 @@
|
||||
|
||||
:host(.input-fill-outline.input-label-placement-stacked) .label-text-wrapper,
|
||||
:host(.input-fill-outline.input-label-placement-floating) .label-text-wrapper {
|
||||
@include transform(translateY(-50%), scale(1));
|
||||
@include transform-origin(start, top);
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
|
||||
/**
|
||||
* Label text should not extend
|
||||
* beyond the bounds of the input.
|
||||
*/
|
||||
max-width: calc(100% - var(--padding-start) - var(--padding-end));
|
||||
|
||||
transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
|
||||
top 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -94,6 +99,7 @@
|
||||
:host(.input-fill-outline.input-label-placement-stacked) .label-text-wrapper {
|
||||
@include transform(translateY(-32%), scale(#{$form-control-label-stacked-scale}));
|
||||
@include margin(0);
|
||||
top: 0;
|
||||
|
||||
/**
|
||||
* Label text should not extend
|
||||
|
||||
@@ -231,4 +231,28 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
|
||||
await expect(input).toHaveScreenshot(screenshot(`input-label-layering`));
|
||||
});
|
||||
});
|
||||
|
||||
test.describe(title('input: floating label custom font size'), () => {
|
||||
test('large label should be centered when field is not focused', async ({ page }, testInfo) => {
|
||||
testInfo.annotations.push({
|
||||
type: 'issue',
|
||||
description: 'https://github.com/ionic-team/ionic-framework/issues/27194',
|
||||
});
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-input
|
||||
style="font-size: 30px"
|
||||
fill="outline"
|
||||
label="Large floating label"
|
||||
label-placement="floating"
|
||||
></ion-input>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const input = page.locator('ion-input');
|
||||
|
||||
await expect(input).toHaveScreenshot(screenshot('input-large-floating-label'));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
@@ -79,13 +79,18 @@
|
||||
|
||||
:host(.select-fill-outline.select-label-placement-stacked) .label-text-wrapper,
|
||||
:host(.select-fill-outline.select-label-placement-floating) .label-text-wrapper {
|
||||
@include transform(translateY(-50%), scale(1));
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
|
||||
/**
|
||||
* Label text should not extend
|
||||
* beyond the bounds of the select.
|
||||
*/
|
||||
max-width: calc(100% - var(--padding-start) - var(--padding-end));
|
||||
|
||||
transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
|
||||
top 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -108,6 +113,7 @@
|
||||
:host(.select-fill-outline.select-label-placement-stacked) .label-text-wrapper {
|
||||
@include transform(translateY(-32%), scale(#{$form-control-label-stacked-scale}));
|
||||
@include margin(0);
|
||||
top: 0;
|
||||
|
||||
/**
|
||||
* Label text should not extend
|
||||
|
||||
@@ -284,7 +284,32 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
|
||||
await expect(select).toHaveScreenshot(screenshot(`select-label-slot-truncate`));
|
||||
});
|
||||
});
|
||||
|
||||
test.describe(title('select: floating label custom font size'), () => {
|
||||
test('large label should be centered when field is not focused', async ({ page }, testInfo) => {
|
||||
testInfo.annotations.push({
|
||||
type: 'issue',
|
||||
description: 'https://github.com/ionic-team/ionic-framework/issues/27194',
|
||||
});
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-select
|
||||
style="font-size: 30px"
|
||||
fill="outline"
|
||||
label="Large floating label"
|
||||
label-placement="floating"
|
||||
></ion-select>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const input = page.locator('ion-select');
|
||||
|
||||
await expect(input).toHaveScreenshot(screenshot('select-label-large-floating'));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
test.describe(title('select: alert label'), () => {
|
||||
test('should use the label prop to set the default header in an alert', async ({ page }) => {
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Reference in New Issue
Block a user