-
Notifications
You must be signed in to change notification settings - Fork 13.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(action-sheet): update Action Sheet design to match MD spec (#16135)
- Updates Action Sheet styles for Material Design - Modifies overlay background to #fff (affects alert too) - Adds a "spec" e2e test which can be used to compare against the spec
- Loading branch information
1 parent
615c518
commit 068303d
Showing
6 changed files
with
121 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import { newE2EPage } from '@stencil/core/testing'; | ||
|
|
||
| test('action-sheet: spec', async () => { | ||
| const page = await newE2EPage({ | ||
| url: `/src/components/action-sheet/test/spec?ionic:_testing=true` | ||
| }); | ||
|
|
||
| const presentBtn = await page.find('#spec'); | ||
| await presentBtn.click(); | ||
|
|
||
| let actionSheet = await page.find('ion-action-sheet'); | ||
| await actionSheet.waitForVisible(); | ||
|
|
||
| let compare = await page.compareScreenshot(); | ||
| expect(compare).toMatchScreenshot(); | ||
|
|
||
| await actionSheet.callMethod('dismiss'); | ||
|
|
||
| await actionSheet.waitForNotVisible(); | ||
|
|
||
| compare = await page.compareScreenshot(`dismissed`); | ||
| expect(compare).toMatchScreenshot(); | ||
|
|
||
| actionSheet = await page.find('ion-action-sheet'); | ||
|
|
||
| expect(actionSheet).toBe(null); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| <!DOCTYPE html> | ||
| <html dir="ltr"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <title>Action Sheet - Spec</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="../../../../../dist/ionic.js"></script> | ||
| </head> | ||
|
|
||
| <body> | ||
| <ion-app> | ||
|
|
||
| <ion-header> | ||
| <ion-toolbar> | ||
| <ion-title>Action Sheet - Spec</ion-title> | ||
| </ion-toolbar> | ||
| </ion-header> | ||
|
|
||
| <ion-content padding> | ||
| <ion-action-sheet-controller></ion-action-sheet-controller> | ||
|
|
||
| <ion-button expand="block" id="spec" onclick="presentSpec()">Spec</ion-button> | ||
| </ion-content> | ||
|
|
||
| </ion-app> | ||
|
|
||
| <script> | ||
| window.addEventListener('ionActionSheetDidDismiss', function (e) { console.log('didDismiss', e) }) | ||
|
|
||
| async function presentSpec() { | ||
| const mode = Ionic.mode; | ||
|
|
||
| const actionSheetController = document.querySelector('ion-action-sheet-controller'); | ||
| await actionSheetController.componentOnReady(); | ||
| const actionSheetElement = await actionSheetController.create({ | ||
| header: "Open in", | ||
| buttons: [{ | ||
| text: 'Item 1', | ||
| icon: 'share', | ||
| handler: () => { | ||
| console.log('Share clicked'); | ||
| } | ||
| }, { | ||
| text: 'Item 2', | ||
| icon: 'link', | ||
| handler: () => { | ||
| console.log('Play clicked'); | ||
| } | ||
| }, { | ||
| text: 'Item 3', | ||
| icon: mode === 'md' ? 'create' : null, | ||
| handler: () => { | ||
| console.log('Favorite clicked'); | ||
| } | ||
| }, { | ||
| text: 'Item 4', | ||
| icon: mode === 'md' ? 'trash' : null, | ||
| handler: () => { | ||
| console.log('Cancel clicked'); | ||
| } | ||
| }, { | ||
| text: 'Item 5', | ||
| icon: mode === 'md' ? 'copy' : null, | ||
| handler: () => { | ||
| console.log('Cancel clicked'); | ||
| } | ||
| }] | ||
| }); | ||
| await actionSheetElement.present(); | ||
| } | ||
| </script> | ||
| </body> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters