feat(menu-button): add variables for hover and focused states (#18434)

references #18279

core/src/components/menu-button/menu-button.ios.scss

@@ -7,6 +7,8 @@
   --color: #{ion-color(primary, base)};
   --padding-start: 5px;
   --padding-end: 5px;
+
+  height: 32px;
 }
 
 :host(.activated) {

core/src/components/menu-button/menu-button.md.scss

@@ -4,12 +4,13 @@
 // --------------------------------------------------
 
 :host {
+  --background-focused: rgba(66, 66, 66, 0.24);
+  --background-hover: rgba(66, 66, 66, 0.08);
+  --border-radius: 50%;
   --color: initial;
   --padding-start: 8px;
   --padding-end: 8px;
-}
 
-button {
   width: 48px;
   height: 48px;
 }
@@ -17,3 +18,22 @@ button {
 ion-icon {
   font-size: 24px;
 }
+
+// Menu Button Color: Hover
+// --------------------------------------------------
+
+@media (any-hover: hover) {
+  :host(.ion-color:hover) .button-native {
+    background: #{current-color(base, .08)};
+  }
+}
+
+
+// Menu Button Color: Focused
+// --------------------------------------------------
+
+
+:host(.ion-color.ion-focused) .button-native {
+  background: #{current-color(base, .24)};
+  color: #{current-color(base)};
+}

core/src/components/menu-button/menu-button.scss

@@ -5,13 +5,24 @@
 
 :host {
   /**
+   * @prop --border-radius: Border radius of the menu button
+   *
+   * @prop --background: Background of the menu button
+   * @prop --background-hover: Background of the menu button on hover
+   * @prop --background-focused: Background of the menu button when focused
+   *
    * @prop --color: Color of the menu button
+   * @prop --color-hover: Color of the menu button on hover
+   * @prop --color-focused: Color of the menu button when focused
    *
    * @prop --padding-top: Padding top of the button
    * @prop --padding-end: Padding end of the button
    * @prop --padding-bottom: Padding bottom of the button
    * @prop --padding-start: Padding start of the button
    */
+  --background: transparent;
+  --color-focused: var(--color);
+  --border-radius: initial;
   --padding-top: 0;
   --padding-bottom: 0;
 
@@ -26,7 +37,8 @@
   font-kerning: none;
 }
 
-button {
+.button-native {
+  @include border-radius(var(--border-radius));
   @include text-inherit();
   @include margin(0);
   @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
@@ -41,13 +53,14 @@ button {
   align-items: center;
   justify-content: center;
 
-  height: 32px;
+  width: 100%;
+  height: 100%;
 
   border: 0;
 
   outline: none;
 
-  background: transparent;
+  background: var(--background);
 
   line-height: 1;
 
@@ -64,14 +77,35 @@ ion-icon {
   pointer-events: none;
 }
 
+
+// Menu Button: Hover
+// --------------------------------------------------
+
+@media (any-hover: hover) {
+  :host(:hover) .button-native {
+    background: var(--background-hover);
+    color: var(--color-hover);
+  }
+}
+
+
+// Menu Button: Focused
+// --------------------------------------------------
+
+:host(.ion-focused) .button-native {
+  background: var(--background-focused);
+  color: var(--color-focused);
+}
+
+
 // Menu Button with Color
 // --------------------------------------------------
 
-// TODO this is not used
 :host(.ion-color) .button-native {
   color: current-color(base);
 }
 
+
 // Menu Button in Toolbar: Global Theming
 // --------------------------------------------------
 

core/src/components/menu-button/menu-button.tsx

@@ -1,6 +1,7 @@
 import { Component, ComponentInterface, Prop } from '@stencil/core';
 
 import { Color, Config, Mode } from '../../interface';
+import { createColorClasses } from '../../utils/theme';
 
 @Component({
   tag: 'ion-menu-button',
@@ -39,6 +40,8 @@ export class MenuButton implements ComponentInterface {
   hostData() {
     return {
       class: {
+        ...createColorClasses(this.color),
+
         [`${this.mode}`]: true,
 
         'button': true,  // ion-buttons target .button
@@ -52,9 +55,9 @@ export class MenuButton implements ComponentInterface {
     const menuIcon = this.config.get('menuIcon', 'menu');
     return (
       <ion-menu-toggle menu={this.menu} autoHide={this.autoHide}>
-        <button type="button">
+        <button type="button" class="button-native">
           <slot>
-            <ion-icon icon={menuIcon} mode={this.mode} color={this.color} lazy={false} />
+            <ion-icon icon={menuIcon} mode={this.mode} lazy={false} />
           </slot>
           {this.mode === 'md' && <ion-ripple-effect type="unbounded"></ion-ripple-effect>}
         </button>

core/src/components/menu-button/readme.md

@@ -18,13 +18,19 @@ Menu Button is component that automatically creates the icon and functionality t
 
 ## CSS Custom Properties
 
-| Name               | Description                  |
-| ------------------ | ---------------------------- |
-| `--color`          | Color of the menu button     |
-| `--padding-bottom` | Padding bottom of the button |
-| `--padding-end`    | Padding end of the button    |
-| `--padding-start`  | Padding start of the button  |
-| `--padding-top`    | Padding top of the button    |
+| Name                   | Description                                |
+| ---------------------- | ------------------------------------------ |
+| `--background`         | Background of the menu button              |
+| `--background-focused` | Background of the menu button when focused |
+| `--background-hover`   | Background of the menu button on hover     |
+| `--border-radius`      | Border radius of the menu button           |
+| `--color`              | Color of the menu button                   |
+| `--color-focused`      | Color of the menu button when focused      |
+| `--color-hover`        | Color of the menu button on hover          |
+| `--padding-bottom`     | Padding bottom of the button               |
+| `--padding-end`        | Padding end of the button                  |
+| `--padding-start`      | Padding start of the button                |
+| `--padding-top`        | Padding top of the button                  |
 
 
 ----------------------------------------------

core/src/components/menu-button/test/basic/e2e.ts

@@ -0,0 +1,10 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+test('menu-button: basic', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/menu-button/test/basic?ionic:_testing=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});

core/src/components/menu-button/test/basic/index.html

@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Menu Button - Basic</title>
+  <meta name="viewport"
+    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
+  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
+  <script src="../../../../../scripts/testing/scripts.js"></script>
+  <script src="../../../../../dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <h1>Default</h1>
+      <ion-menu-button auto-hide="false"></ion-menu-button>
+      <ion-menu-button auto-hide="false" class="ion-focused"></ion-menu-button>
+
+      <h1>Custom</h1>
+      <ion-menu-button auto-hide="false" class="custom"></ion-menu-button>
+      <ion-menu-button auto-hide="false" color="secondary" class="custom"></ion-menu-button>
+      <ion-menu-button auto-hide="false" class="custom ion-focused"></ion-menu-button>
+      <ion-menu-button auto-hide="false" color="secondary" class="custom ion-focused"></ion-menu-button>
+
+      <h1>Colors</h1>
+      <ion-menu-button auto-hide="false" color="primary"></ion-menu-button>
+      <ion-menu-button auto-hide="false" color="secondary"></ion-menu-button>
+      <ion-menu-button auto-hide="false" color="tertiary"></ion-menu-button>
+      <ion-menu-button auto-hide="false" color="success"></ion-menu-button>
+      <ion-menu-button auto-hide="false" color="warning"></ion-menu-button>
+      <ion-menu-button auto-hide="false" color="danger"></ion-menu-button>
+      <ion-menu-button auto-hide="false" color="light"></ion-menu-button>
+      <ion-menu-button auto-hide="false" color="medium"></ion-menu-button>
+      <ion-menu-button auto-hide="false" color="dark"></ion-menu-button>
+
+      <br>
+
+      <ion-menu-button auto-hide="false" color="primary" class="ion-focused"></ion-menu-button>
+      <ion-menu-button auto-hide="false" color="secondary" class="ion-focused"></ion-menu-button>
+      <ion-menu-button auto-hide="false" color="tertiary" class="ion-focused"></ion-menu-button>
+      <ion-menu-button auto-hide="false" color="success" class="ion-focused"></ion-menu-button>
+      <ion-menu-button auto-hide="false" color="warning" class="ion-focused"></ion-menu-button>
+      <ion-menu-button auto-hide="false" color="danger" class="ion-focused"></ion-menu-button>
+      <ion-menu-button auto-hide="false" color="light" class="ion-focused"></ion-menu-button>
+      <ion-menu-button auto-hide="false" color="medium" class="ion-focused"></ion-menu-button>
+      <ion-menu-button auto-hide="false" color="dark" class="ion-focused"></ion-menu-button>
+
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+          <ion-menu-button auto-hide="false" class="ion-focused"></ion-menu-button>
+        </ion-buttons>
+        <ion-title>Default</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar color="primary">
+        <ion-buttons slot="start">
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+          <ion-menu-button auto-hide="false" class="ion-focused"></ion-menu-button>
+        </ion-buttons>
+        <ion-title>Primary</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar color="light">
+        <ion-buttons slot="start">
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+          <ion-menu-button auto-hide="false" class="ion-focused"></ion-menu-button>
+        </ion-buttons>
+        <ion-title>Light</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar color="success">
+        <ion-buttons slot="start">
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+          <ion-menu-button auto-hide="false" class="ion-focused"></ion-menu-button>
+        </ion-buttons>
+        <ion-title>Success</ion-title>
+      </ion-toolbar>
+    </ion-content>
+  </ion-app>
+
+  <style>
+    h1 {
+      padding-left: 16px;
+    }
+
+    ion-menu-button {
+      display: inline-block;
+    }
+
+    .custom {
+      --color: hotpink;
+    }
+
+    .custom.md {
+      --background-hover: rgb(255, 105, 180, .08);
+      --background-focused: rgb(255, 105, 180, .24);
+    }
+
+  </style>
+</body>
+
+</html>