fix(action-sheet): remove the height shift on press and update iOS design (#16862)

This changes the border into a linear gradient background image which allows us to avoid the height decrease on press and have the same border as the background color when pressed.

- merges all action sheet tests to the basic directory (except standalone, translucent), references #16715
- removes the height shift on press, fixes #16790
- fixes the cancel button on iOS so it is `#ffffff` by default
- gets the look of the action sheet closer to native for iOS
- only applies the translucent and backdrop filter if it is supported by the browser (chrome will not show transparent anymore)
- updates documentation to describe when translucent will show up
- adds documentation on how to use screenshot tests

Author: brandyscarney

.github/CONTRIBUTING.md

@@ -86,9 +86,19 @@ Please see our [Contributor Code of Conduct](https://github.com/ionic-team/ionic
 
 1. Locate the test to modify inside the `test/` folder in the component's directory.
 2. If a test exists, modify the test by adding an example to reproduce the problem fixed or feature added.
-3. If a new test is needed, the easiest way is to copy the `basic/` directory from the component's `test/` directory, rename it, and edit the content in both the `index.html` and `e2e.ts` file (if it exists).
+3. If a new test is needed, the easiest way is to copy the `basic/` directory from the component's `test/` directory, rename it, and edit the content in both the `index.html` and `e2e.ts` file (see [Screenshot Tests](#screenshot-tests) for more information on this file).
 4. The `preview/` directory is used in the documentation as a demo. Only update this test if there is a bug in the test or if the API has a change that hasn't been updated in the test.
 
+##### Screenshot Tests
+
+1. If the test exists in screenshot, there will be a file named `e2e.ts` in the directory of the test.
+2. A screenshot test can be added by including this file and adding one or more `test()` calls that include a call to `page.compareScreenshot()`. See [Stencil end-to-end testing](https://stenciljs.com/docs/end-to-end-testing) and existing tests in `core/` for examples.
+3. **Important:** each `test()` should have only one screenshot (`page.compareScreenshot()`) call **or** it should check the expect at the end of each test. If there is a mismatch it will fail the test which will prevent the rest of the test from running, i.e. if the first screenshot fails the remaining screenshot calls would not be called _unless_ they are in a separate test or all of the expects are called at the end.
+4. To run screenshot locally, use the following command: `npm run test.screenshot`.
+    - To run screenshot for a specific test, pass the path to the test or a string to search for.
+    - For example, running all `alert` tests: `npm run test.screenshot alert`.
+    - Or, running the basic `alert` tests: `npm run test.screenshot src/components/alert/test/basic/e2e.ts`.
+
 
 #### Building Changes
 

core/src/components.d.ts

@@ -156,7 +156,7 @@ export namespace Components {
     */
     'subHeader'?: string;
     /**
-    * If `true`, the action sheet will be translucent.
+    * If `true`, the action sheet will be translucent. Only applies when the mode is `"ios"` and the device supports backdrop-filter.
     */
     'translucent': boolean;
   }
@@ -218,7 +218,7 @@ export namespace Components {
     */
     'subHeader'?: string;
     /**
-    * If `true`, the action sheet will be translucent.
+    * If `true`, the action sheet will be translucent. Only applies when the mode is `"ios"` and the device supports backdrop-filter.
     */
     'translucent'?: boolean;
   }

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

@@ -2,11 +2,11 @@
 @import "./action-sheet.ios.vars";
 
 // iOS Action Sheet
-// --------------------------------------------------
+// ---------------------------------------------------
 
 :host {
   --background: #{$action-sheet-ios-background-color};
-  --background-selected: #{var(--background, $action-sheet-ios-button-background-selected)};
+  --background-selected: #{$action-sheet-ios-button-background-selected)};
   --background-activated: #{$action-sheet-ios-button-background-activated};
 
   text-align: $action-sheet-ios-text-align;
@@ -18,19 +18,21 @@
 
 
 // iOS Action Sheet Container
-// -----------------------------------------
+// ---------------------------------------------------
 
 .action-sheet-container {
   @include padding($action-sheet-ios-padding-top, $action-sheet-ios-padding-end, $action-sheet-ios-padding-bottom, $action-sheet-ios-padding-start);
 }
 
 
 // iOS Action Sheet Group
-// -----------------------------------------
+// ---------------------------------------------------
 
 .action-sheet-group {
   @include border-radius($action-sheet-ios-border-radius);
   @include margin(null, null, $action-sheet-ios-group-margin-bottom - 2, null);
+
+  overflow: hidden;
 }
 
 .action-sheet-group:first-child {
@@ -43,22 +45,63 @@
 
 
 // iOS Translucent Action Sheet
-// -----------------------------------------
+// ---------------------------------------------------
+
+@supports (backdrop-filter: blur(0)) {
+  :host(.action-sheet-translucent) .action-sheet-group {
+    background-color: transparent;
+    backdrop-filter: $action-sheet-ios-group-translucent-filter;
+  }
+
+  :host(.action-sheet-translucent) .action-sheet-title,
+  :host(.action-sheet-translucent) .action-sheet-button {
+    background-color: transparent;
+    background-image:
+      linear-gradient(0deg, $action-sheet-ios-translucent-background-color, $action-sheet-ios-translucent-background-color 100%),
+      linear-gradient(0deg, $action-sheet-ios-translucent-border-color, $action-sheet-ios-translucent-border-color 50%, $action-sheet-ios-translucent-background-color 50%);
+    background-repeat: no-repeat;
+
+    /* stylelint-disable-next-line all */
+    background-position: top, bottom;
+
+    background-size: 100% calc(100% - 1px), 100% 1px;
+    backdrop-filter: $action-sheet-ios-button-translucent-filter;
+  }
 
-:host(.action-sheet-translucent) .action-sheet-group {
-  background: $action-sheet-ios-translucent-background-color;
-  backdrop-filter: $action-sheet-ios-translucent-filter;
+  :host(.action-sheet-translucent) .action-sheet-button.activated {
+    background-color: $action-sheet-ios-translucent-background-color-activated;
+    background-image: none;
+  }
+
+  :host(.action-sheet-translucent) .action-sheet-cancel {
+    background: var(--background-selected);
+  }
+}
+
+// iOS Action Sheet Border
+// ---------------------------------------------------
+// Border is made with a linear gradient in order
+// to get the proper color and iOS blur effect
+
+.action-sheet-title,
+.action-sheet-button {
+  background-color: transparent;
+  background-image: linear-gradient(0deg, $action-sheet-ios-button-border-color, $action-sheet-ios-button-border-color 50%, transparent 50%);
+  background-repeat: no-repeat;
+
+  /* stylelint-disable-next-line all */
+  background-position: bottom;
+
+  background-size: 100% 1px;
 }
 
 
 // iOS Action Sheet Title
-// -----------------------------------------
+// ---------------------------------------------------
 
 .action-sheet-title {
   @include padding($action-sheet-ios-title-padding-top, $action-sheet-ios-title-padding-end, $action-sheet-ios-title-padding-bottom, $action-sheet-ios-title-padding-start);
 
-  border-bottom: $action-sheet-ios-title-border-width $action-sheet-ios-title-border-style $action-sheet-ios-title-border-color;
-
   color: var(--color, $action-sheet-ios-title-color);
 
   font-size: $action-sheet-ios-title-font-size;
@@ -75,17 +118,13 @@
 
 
 // iOS Action Sheet Buttons
-// -----------------------------------------
+// ---------------------------------------------------
 
 .action-sheet-button {
-  @include margin(0);
   @include padding($action-sheet-ios-button-padding);
 
   height: $action-sheet-ios-button-height;
 
-  border-bottom: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-button-border-color;
-
-  background: transparent;
   color: var(--color, $action-sheet-ios-button-text-color);
 
   font-size: $action-sheet-ios-button-font-size;
@@ -100,17 +139,12 @@
 }
 
 .action-sheet-button:last-child {
-  border-bottom-color: transparent;
-}
-
-.action-sheet-button.activated {
-  @include margin(-$action-sheet-ios-button-border-width, null, null, null);
-
-  border-top: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style var(--background-activated);
-  border-bottom-color: var(--background-activated);
+  background-image: none;
 }
 
 .action-sheet-selected {
+  background: var(--background-selected);
+
   font-weight: bold;
 }