javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 15:07:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(input): add disabled state to the ionic theme (#29323)

Browse Source 
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
This commit is contained in:
Maria Hutt
2024-04-15 12:49:50 -07:00
committed by GitHub
parent 6e45fef869
commit 3b0f3af897
10 changed files with 292 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
core/src/components/input/input.ionic.outline.scss
View File

@ -119,3 +119,19 @@
:host(.input-fill-outline) ::slotted([slot="end"]) { :host(.input-fill-outline) ::slotted([slot="end"]) {
margin-inline-start: 8px; margin-inline-start: 8px;
} }
// Input - Disabled
// ----------------------------------------------------------------
:host(.input-fill-outline.input-disabled) {
// color for the text within the input
--color: #{$ionic-color-neutral-400};
--background: transparent;
}
:host(.input-fill-outline.input-disabled) .native-wrapper {
--background: #{$ionic-color-neutral-10};
border-radius: inherit;
background: var(--background);
}

38
core/src/components/input/input.ionic.scss
View File

@ -54,3 +54,41 @@
--border-color: #{tokens.$ionic-color-neutral-600}; --border-color: #{tokens.$ionic-color-neutral-600};
} }
} }
// Input - Disabled
// ----------------------------------------------------------------
:host(.input-disabled) {
// color for the text within the input
--color: #{tokens.$ionic-color-neutral-400};
--background: #{tokens.$ionic-color-neutral-10};
pointer-events: none;
}
:host(.input-disabled:not(.ion-valid)) .input-bottom .helper-text,
:host(.input-disabled) .input-bottom .counter,
:host(.input-disabled) .label-text-wrapper {
color: tokens.$ionic-color-neutral-400;
}
:host(.input-disabled.has-focus.ion-valid) {
// TODO(FW-6112): Update to use the correct color token when rgb tokens are available
--border-color: rgba(var(--ionic-color-success-400-rgb, 82, 165, 24), 0.6);
}
:host(.input-disabled.ion-touched.ion-invalid) {
// TODO(FW-6112): Update to use the correct color token when rgb tokens are available
--border-color: rgba(var(--ionic-color-error-400-rgb, 247, 44, 44), 0.6);
}
:host(.input-disabled.ion-color) {
--border-color: #{current-color(base, 0.6)};
}
:host(.input-disabled.has-focus.ion-valid) .input-bottom .helper-text,
:host(.input-disabled.ion-touched.ion-invalid) .error-text,
:host(.input-disabled.ion-color) .input-bottom .helper-text,
:host(.input-disabled.ion-color) .helper-text {
opacity: 0.6;
}

128
core/src/components/input/test/states/index.html
View File

@ -2,7 +2,7 @@
<html lang="en" dir="ltr"> <html lang="en" dir="ltr">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>Input - Disabled</title> <title>Input - States</title>
<meta <meta
name="viewport" name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
@ -19,7 +19,7 @@
grid-row-gap: 20px; grid-row-gap: 20px;
grid-column-gap: 20px; grid-column-gap: 20px;
} }
h2 { h3 {
font-size: 12px; font-size: 12px;
font-weight: normal; font-weight: normal;
@ -40,22 +40,138 @@
<ion-app> <ion-app>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Input - Disabled</ion-title> <ion-title>Input - States</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content id="content" class="ion-padding"> <ion-content id="content" class="ion-padding">
<h1>Readonly</h1>
<h2>No Fill</h2>
<div class="grid"> <div class="grid">
<div class="grid-item"> <div class="grid-item">
<h2>Readonly</h2> <h3>Default</h3>
<ion-input label="Email" value="hi@ionic.io" readonly="true"></ion-input> <ion-input label="Email" value="hi@ionic.io" readonly="true"></ion-input>
</div> </div>
</div>
<h1>Disabled</h1>
<h2>No Fill</h2>
<div class="grid">
<div class="grid-item">
<h3>Default</h3>
<ion-input
label="Email"
value="hi@ionic.io"
helper-text="Enter an email"
counter="true"
maxlength="20"
disabled="true"
></ion-input>
</div>
<div class="grid-item"> <div class="grid-item">
<h2>Disabled</h2> <h3>Valid</h3>
<ion-input label="Email" value="hi@ionic.io" disabled="true"></ion-input> <ion-input
label="Email"
value="hi@ionic.io"
helper-text="Enter an email"
counter="true"
maxlength="20"
class="ion-valid has-focus"
disabled="true"
></ion-input>
</div>
<div class="grid-item">
<h3>Invalid</h3>
<ion-input
label="Email"
value="hi@ionic.io"
error-text="Please enter a valid email"
counter="true"
maxlength="20"
class="ion-touched ion-invalid"
disabled="true"
></ion-input>
</div>
<div class="grid-item">
<h3>Color (ionic theme only)</h3>
<ion-input
label="Email"
value="hi@ionic.io"
helper-text="Enter an email"
counter="true"
maxlength="20"
disabled="true"
color="warning"
></ion-input>
</div>
</div>
<h2>Outline</h2>
<div class="grid">
<div class="grid-item">
<h3>Default</h3>
<ion-input
fill="outline"
label="Email"
value="hi@ionic.io"
helper-text="Enter an email"
counter="true"
maxlength="20"
disabled="true"
></ion-input>
</div>
<div class="grid-item">
<h3>Valid</h3>
<ion-input
fill="outline"
label="Email"
value="hi@ionic.io"
helper-text="Enter an email"
counter="true"
maxlength="20"
class="ion-valid has-focus"
disabled="true"
></ion-input>
</div>
<div class="grid-item">
<h3>Invalid</h3>
<ion-input
fill="outline"
label="Email"
value="hi@ionic.io"
error-text="Please enter a valid email"
counter="true"
maxlength="20"
class="ion-touched ion-invalid"
disabled="true"
></ion-input>
</div>
<div class="grid-item">
<h3>Color (ionic theme only)</h3>
<ion-input
fill="outline"
label="Email"
value="hi@ionic.io"
helper-text="Enter an email"
counter="true"
maxlength="20"
disabled="true"
color="warning"
></ion-input>
</div> </div>
</div> </div>
</ion-content> </ion-content>

116
core/src/components/input/test/states/input.e2e.ts
View File

@ -28,3 +28,119 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
}); });
}); });
}); });
configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
test.describe(title('input: states'), () => {
test.describe(title('disabled'), () => {
test.describe(title('no fill'), () => {
test('should render disabled input correctly', async ({ page }) => {
await page.setContent(
`
<div class="container">
<ion-input
label="Email"
value="hi@ionic.io"
helper-text="Enter an email"
counter="true"
maxlength="20"
disabled="true"
></ion-input>
<ion-input
label="Email"
value="hi@ionic.io"
helper-text="Enter an email"
counter="true"
maxlength="20"
class="ion-valid has-focus"
disabled="true"
></ion-input>
<ion-input
label="Email"
value="hi@ionic.io"
error-text="Please enter a valid email"
counter="true"
maxlength="20"
class="ion-touched ion-invalid"
disabled="true"
></ion-input>
<ion-input
label="Email"
value="hi@ionic.io"
helper-text="Enter an email"
counter="true"
maxlength="20"
disabled="true"
color="warning"
></ion-input>
</div>
`,
config
);
const container = page.locator('.container');
await expect(container).toHaveScreenshot(screenshot(`input-disabled-no-fill`));
});
});
test.describe(title('outline'), () => {
test('should render disabled input correctly', async ({ page }) => {
await page.setContent(
`
<div class="container">
<ion-input
fill="outline"
label="Email"
value="hi@ionic.io"
helper-text="Enter an email"
counter="true"
maxlength="20"
disabled="true"
></ion-input>
<ion-input
fill="outline"
label="Email"
value="hi@ionic.io"
helper-text="Enter an email"
counter="true"
maxlength="20"
class="ion-valid has-focus"
disabled="true"
></ion-input>
<ion-input
fill="outline"
label="Email"
value="hi@ionic.io"
error-text="Please enter a valid email"
counter="true"
maxlength="20"
class="ion-touched ion-invalid"
disabled="true"
></ion-input>
<ion-input
fill="outline"
label="Email"
value="hi@ionic.io"
helper-text="Enter an email"
counter="true"
maxlength="20"
disabled="true"
color="warning"
></ion-input>
</div>
`,
config
);
const container = page.locator('.container');
await expect(container).toHaveScreenshot(screenshot(`input-disabled-outline`));
});
});
});
});
});

BIN
core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB