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

core/src/components/action-sheet/action-sheet.md.scss

@@ -7,6 +7,8 @@
 .action-sheet-title {
   @include padding($action-sheet-md-title-padding-top, $action-sheet-md-title-padding-end, $action-sheet-md-title-padding-bottom, $action-sheet-md-title-padding-start);
 
+  height: $action-sheet-md-title-height;
+
   color: $action-sheet-md-title-color;
 
   font-size: $action-sheet-md-title-font-size;
@@ -63,8 +65,11 @@
 }
 
 .action-sheet-icon {
+  @include padding(null, null, 4px, null);
   @include margin($action-sheet-md-icon-margin-top, $action-sheet-md-icon-margin-end, $action-sheet-md-icon-margin-bottom, $action-sheet-md-icon-margin-start);
 
+  color: $action-sheet-md-icon-color;
+
   font-size: $action-sheet-md-icon-font-size;
 }
 

core/src/components/action-sheet/action-sheet.md.vars.scss

@@ -10,19 +10,22 @@ $action-sheet-md-text-align:                            start !default;
 $action-sheet-md-background-color:                      $overlay-md-background-color !default;
 
 /// @prop - Padding top of the action sheet
-$action-sheet-md-padding-top:                           8px !default;
+$action-sheet-md-padding-top:                           0 !default;
 
 /// @prop - Padding bottom of the action sheet
-$action-sheet-md-padding-bottom:                        8px !default;
+$action-sheet-md-padding-bottom:                        0 !default;
+
+/// @prop - Height of the action sheet title
+$action-sheet-md-title-height:                          60px !default;
 
 /// @prop - Color of the action sheet title
-$action-sheet-md-title-color:                           $text-color-step-400 !default;
+$action-sheet-md-title-color:                           rgba(var(--ion-text-color-rgb, $text-color-rgb), 0.54) !default;
 
 /// @prop - Font size of the action sheet title
 $action-sheet-md-title-font-size:                       16px !default;
 
 /// @prop - Padding top of the action sheet title
-$action-sheet-md-title-padding-top:                     11px !default;
+$action-sheet-md-title-padding-top:                     20px !default;
 
 /// @prop - Padding end of the action sheet title
 $action-sheet-md-title-padding-end:                     16px !default;
@@ -49,7 +52,7 @@ $action-sheet-md-sub-title-padding-bottom:              0 !default;
 $action-sheet-md-sub-title-padding-start:               $action-sheet-md-sub-title-padding-end !default;
 
 /// @prop - Minimum height of the action sheet button
-$action-sheet-md-button-height:                         48px !default;
+$action-sheet-md-button-height:                         52px !default;
 
 /// @prop - Text color of the action sheet button
 $action-sheet-md-button-text-color:                     $text-color-step-150 !default;
@@ -92,3 +95,6 @@ $action-sheet-md-icon-margin-bottom:                    0 !default;
 
 /// @prop - Margin start of the icon in the action sheet button
 $action-sheet-md-icon-margin-start:                     0 !default;
+
+/// @prop - Color of the icon in the action sheet button
+$action-sheet-md-icon-color:                            $action-sheet-md-title-color !default;

core/src/components/action-sheet/test/spec/e2e.ts

@@ -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);
+});

core/src/components/action-sheet/test/spec/index.html

@@ -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>

core/src/themes/ionic.theme.default.md.scss

@@ -10,7 +10,7 @@
 $backdrop-md-color:                         var(--ion-backdrop-color, #000) !default;
 $border-md-color:                           var(--ion-border-color, #c1c4cd) !default;
 $box-shadow-md-color:                       var(--ion-box-shadow-color, #000) !default;
-$overlay-md-background-color:               var(--ion-overlay-background-color, #fafafa) !default;
+$overlay-md-background-color:               var(--ion-overlay-background-color, #fff) !default;
 
 // Material Design Tabs & Tab bar
 // --------------------------------------------------

core/src/themes/ionic.theme.default.scss

@@ -141,7 +141,6 @@ $text-color-step-900:               var(--ion-text-color-step-900, mix($backgrou
 $text-color-step-950:               var(--ion-text-color-step-950, mix($background-color-value, $text-color-value, 95%)) !default;
 $text-color-step-1000:              var(--ion-text-color-step-1000, mix($background-color-value, $text-color-value, 100%)) !default;
 
-
 // Default General Colors
 // --------------------------------------------------
 $overlay-background-color:          var(--ion-overlay-background-color, #fafafa) !default;