test(ac): float

Author: thetaPC

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

@@ -50,8 +50,11 @@
   @include font-smoothing();
   @include position(0, 0, 0, 0);
 
-  display: block;
-  position: fixed;
+  display: flex;
+  position: absolute;
+
+  align-items: center;
+  justify-content: center;
 
   outline: none;
 
@@ -67,11 +70,9 @@
 }
 
 .action-sheet-wrapper {
-  @include position(null, 0, 0, 0);
-  @include transform(translate3d(0, 100%, 0));
+  display: flex;
 
-  display: block;
-  position: absolute;
+  flex-direction: column;
 
   width: var(--width);
   min-width: var(--min-width);
@@ -96,7 +97,6 @@
   outline: none;
 
   background: var(--button-background);
-
   color: var(--button-color);
 
   font-family: inherit;
@@ -178,9 +178,9 @@
 // Action Sheet: States
 // --------------------------------------------------
 
-// .action-sheet-button::after {
-//   @include button-state();
-// }
+.action-sheet-button::after {
+  @include button-state();
+}
 
 
 // Action Sheet: Selected
@@ -215,11 +215,8 @@
 // --------------------------------------------------
 
 .action-sheet-button.ion-focused {
-  background-color: var(--button-background-focused);
   color: var(--button-color-focused);
 
-  opacity: var(--button-background-focused-opacity);
-
   &::after {
     background: var(--button-background-focused);
 

core/src/components/action-sheet/action-sheet.tsx

@@ -361,7 +361,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
     const mode = getIonMode(this);
     const allButtons = this.getButtons();
     const cancelButton = allButtons.find((b) => b.role === 'cancel');
-    // const buttons = allButtons.filter((b) => b.role !== 'cancel');
+    const buttons = allButtons.filter((b) => b.role !== 'cancel');
     const headerID = `action-sheet-${overlayIndex}-header`;
 
     return (
@@ -389,12 +389,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
 
         <div class="action-sheet-wrapper ion-overlay-wrapper" ref={(el) => (this.wrapperEl = el)}>
           <div class="action-sheet-container">
-            {header && (
-              <h2 id={headerID} class="action-sheet-title">
-                {header}
-              </h2>
-            )}
-            {/* <div class="action-sheet-group" ref={(el) => (this.groupEl = el)}>
+            <div class="action-sheet-group" ref={(el) => (this.groupEl = el)}>
               {header !== undefined && (
                 <div
                   id={headerID}
@@ -423,7 +418,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
                   {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
                 </button>
               ))}
-            </div> */}
+            </div>
 
             {cancelButton && (
               <div class="action-sheet-group action-sheet-group-cancel">