feat(item-option): add disabled styles (#29642)
Maria Hutt
@ -63,3 +63,15 @@
|
|||||||
:host(.item-option-rectangular) {
|
:host(.item-option-rectangular) {
|
||||||
@include globals.border-radius(globals.$ionic-border-radius-0);
|
@include globals.border-radius(globals.$ionic-border-radius-0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Item Option States
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
/* Disabled */
|
||||||
|
:host(.item-option-disabled) {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host(.item-option-disabled) .button-native {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|||||||
@ -41,27 +41,6 @@
|
|||||||
</ion-item>
|
</ion-item>
|
||||||
</ion-item-sliding>
|
</ion-item-sliding>
|
||||||
|
|
||||||
<ion-item-sliding id="item100">
|
|
||||||
<ion-item href="#">
|
|
||||||
<ion-label>
|
|
||||||
<h2>Disabled Buttons</h2>
|
|
||||||
<p>Buttons should not be clickable</p>
|
|
||||||
</ion-label>
|
|
||||||
</ion-item>
|
|
||||||
|
|
||||||
<ion-item-options side="start">
|
|
||||||
<ion-item-option disabled> Disabled </ion-item-option>
|
|
||||||
</ion-item-options>
|
|
||||||
<ion-item-options side="end">
|
|
||||||
<ion-item-option color="danger" disabled>
|
|
||||||
<ion-icon slot="icon-only" name="trash"></ion-icon>
|
|
||||||
</ion-item-option>
|
|
||||||
<ion-item-option disabled>
|
|
||||||
<ion-icon slot="icon-only" name="star"></ion-icon>
|
|
||||||
</ion-item-option>
|
|
||||||
</ion-item-options>
|
|
||||||
</ion-item-sliding>
|
|
||||||
|
|
||||||
<ion-item-sliding id="item0">
|
<ion-item-sliding id="item0">
|
||||||
<ion-item>
|
<ion-item>
|
||||||
<ion-label class="ion-text-wrap">
|
<ion-label class="ion-text-wrap">
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 5.4 KiB After Width: | Height: | Size: 4.9 KiB |
|
Before Width: | Height: | Size: 6.5 KiB After Width: | Height: | Size: 6.5 KiB |
|
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 4.8 KiB |
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 4.8 KiB |
|
Before Width: | Height: | Size: 6.5 KiB After Width: | Height: | Size: 6.5 KiB |
|
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 4.7 KiB |
|
Before Width: | Height: | Size: 7.1 KiB After Width: | Height: | Size: 6.5 KiB |
|
Before Width: | Height: | Size: 8.2 KiB After Width: | Height: | Size: 8.1 KiB |
|
Before Width: | Height: | Size: 6.6 KiB After Width: | Height: | Size: 6.6 KiB |
|
Before Width: | Height: | Size: 7.3 KiB After Width: | Height: | Size: 6.6 KiB |
|
Before Width: | Height: | Size: 8.4 KiB After Width: | Height: | Size: 8.3 KiB |
|
Before Width: | Height: | Size: 6.7 KiB After Width: | Height: | Size: 6.7 KiB |
42
core/src/components/item-sliding/test/states/index.html
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" dir="ltr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<title>Item Sliding - States</title>
|
||||||
|
<meta
|
||||||
|
name="viewport"
|
||||||
|
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
|
||||||
|
/>
|
||||||
|
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
|
||||||
|
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
|
||||||
|
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||||
|
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||||
|
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<ion-app>
|
||||||
|
<ion-header>
|
||||||
|
<ion-toolbar>
|
||||||
|
<ion-title>Item Sliding - States</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
|
</ion-header>
|
||||||
|
|
||||||
|
<ion-content>
|
||||||
|
<ion-list>
|
||||||
|
<ion-item-sliding id="disabled-options">
|
||||||
|
<ion-item>
|
||||||
|
<ion-label>Disabled Options</ion-label>
|
||||||
|
</ion-item>
|
||||||
|
<ion-item-options>
|
||||||
|
<ion-item-option color="secondary" expandable disabled>
|
||||||
|
<ion-icon slot="top" name="bookmark"></ion-icon>
|
||||||
|
Label
|
||||||
|
</ion-item-option>
|
||||||
|
</ion-item-options>
|
||||||
|
</ion-item-sliding>
|
||||||
|
</ion-list>
|
||||||
|
</ion-content>
|
||||||
|
</ion-app>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
import { expect } from '@playwright/test';
|
||||||
|
import { configs, test, dragElementBy } from '@utils/test/playwright';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* This behavior does not vary across modes
|
||||||
|
*/
|
||||||
|
configs({ modes: ['ionic-md', 'md', 'ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||||
|
test.describe(title('item-sliding: states'), () => {
|
||||||
|
test.describe('state: disabled', () => {
|
||||||
|
test('should not have visual regressions for an option', async ({ page }) => {
|
||||||
|
await page.goto(`/src/components/item-sliding/test/states`, config);
|
||||||
|
|
||||||
|
const item = page.locator('#disabled-options');
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Negative dragByX value to drag element from the right to the left
|
||||||
|
* to reveal the options on the right side.
|
||||||
|
*/
|
||||||
|
const dragByX = -150;
|
||||||
|
|
||||||
|
await dragElementBy(item, page, dragByX);
|
||||||
|
await page.waitForChanges();
|
||||||
|
|
||||||
|
await expect(item).toHaveScreenshot(screenshot(`item-sliding-option-disabled`));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 2.5 KiB |