Skip to content

Commit e03b1fb

Browse files
liamdebeasiliamdebeasi
authored
feat(input): add disabled state (#26227)
1 parent 74f31ee commit e03b1fb

15 files changed

+102
-13
lines changed

‎core/src/components/input/input.scss‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -127,10 +127,11 @@
127127
}
128128
}
129129

130-
.native-input[disabled] {
131-
opacity: .4;
132-
}
133130

131+
:host(.legacy-input) .native-input[disabled],
132+
:host([disabled]) {
133+
opacity: 0.4;
134+
}
134135

135136

136137
// Input Cover: Unfocused
@@ -295,12 +296,11 @@
295296

296297
.input-wrapper label {
297298
/**
298-
* The padding on the label adds visual
299-
* space between the label and the input.
300-
* We use padding so that this space can still
301-
* be clicked to focus the input.
299+
* The margin between the label and
300+
* the input should be on the end
301+
* when the label sits at the start.
302302
*/
303-
@include padding(0, 8px, 0, 0);
303+
@include margin(0, 8px, 0, 0);
304304

305305
/**
306306
* This causes the label to take up
@@ -343,13 +343,12 @@
343343
}
344344

345345
/**
346-
* The padding on the label adds visual
347-
* space between the label and the input.
348-
* We use padding so that this space can still
349-
* be clicked to focus the input.
346+
* The margin between the label and
347+
* the input should be on the start
348+
* when the label sits at the end.
350349
*/
351350
:host(.input-label-placement-end) label {
352-
@include padding(0, 0, 0, 8px);
351+
@include margin(0, 0, 0, 8px);
353352
}
354353

355354
/**

‎core/src/components/input/test/states/index.html‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Input - Disabled</title>
6+
<meta
7+
name="viewport"
8+
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
9+
/>
10+
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
11+
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
12+
<script src="../../../../../scripts/testing/scripts.js"></script>
13+
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
14+
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
15+
<style>
16+
.grid {
17+
display: grid;
18+
grid-template-columns: repeat(3, minmax(250px, 1fr));
19+
grid-row-gap: 20px;
20+
grid-column-gap: 20px;
21+
}
22+
h2 {
23+
font-size: 12px;
24+
font-weight: normal;
25+
26+
color: #6f7378;
27+
28+
margin-top: 10px;
29+
}
30+
@media screen and (max-width: 800px) {
31+
.grid {
32+
grid-template-columns: 1fr;
33+
padding: 0;
34+
}
35+
}
36+
</style>
37+
</head>
38+
39+
<body>
40+
<ion-app>
41+
<ion-header>
42+
<ion-toolbar>
43+
<ion-title>Input - Disabled</ion-title>
44+
</ion-toolbar>
45+
</ion-header>
46+
47+
<ion-content id="content" class="ion-padding">
48+
<div class="grid">
49+
<div class="grid-item">
50+
<h2>Readonly</h2>
51+
52+
<ion-input label="Email" value="[email protected]" readonly="true"></ion-input>
53+
</div>
54+
55+
<div class="grid-item">
56+
<h2>Disabled</h2>
57+
58+
<ion-input label="Email" value="[email protected]" disabled="true"></ion-input>
59+
</div>
60+
</div>
61+
</ion-content>
62+
</ion-app>
63+
</body>
64+
</html>

‎core/src/components/input/test/states/input.e2e.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { expect } from '@playwright/test';
2+
import { test } from '@utils/test/playwright';
3+
4+
test.describe('input: states', () => {
5+
test.beforeEach(({ skip }) => {
6+
skip.rtl();
7+
});
8+
9+
test('should render readonly input correctly', async ({ page }) => {
10+
await page.setContent(`
11+
<ion-input label="Email" value="[email protected]" readonly="true"></ion-input>
12+
`);
13+
14+
const input = page.locator('ion-input');
15+
expect(await input.screenshot()).toMatchSnapshot(`input-readonly-${page.getSnapshotSettings()}.png`);
16+
});
17+
18+
test('should render disabled input correctly', async ({ page }) => {
19+
await page.setContent(`
20+
<ion-input label="Email" value="[email protected]" disabled="true"></ion-input>
21+
`);
22+
23+
const input = page.locator('ion-input');
24+
expect(await input.screenshot()).toMatchSnapshot(`input-disabled-${page.getSnapshotSettings()}.png`);
25+
});
26+
});

‎core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-ios-ltr-Mobile-Chrome-linux.png‎

6.46 KB
Loading

‎core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-ios-ltr-Mobile-Firefox-linux.png‎

2.36 KB
Loading

‎core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-ios-ltr-Mobile-Safari-linux.png‎

6.23 KB
Loading

‎core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Chrome-linux.png‎

6.64 KB
Loading

‎core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Firefox-linux.png‎

2.49 KB
Loading

‎core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Safari-linux.png‎

6.28 KB
Loading

‎core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-ios-ltr-Mobile-Chrome-linux.png‎

7.11 KB
Loading

0 commit comments

Comments
 (0)