feat(menu-button): add css variables for padding (#18188)

fixes #18187

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

@@ -5,16 +5,14 @@
 
 :host {
   --color: #{ion-color(primary, base)};
+  --padding-start: 5px;
+  --padding-end: 5px;
 }
 
 :host(.activated) {
   opacity: 0.4;
 }
 
-button {
-  @include padding(0, 5px);
-}
-
 ion-icon {
   font-size: 31px;
 }

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

@@ -5,10 +5,8 @@
 
 :host {
   --color: initial;
-}
-
-button {
-  @include padding(0, 8px);
+  --padding-start: 8px;
+  --padding-end: 8px;
 }
 
 ion-icon {

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

@@ -6,7 +6,14 @@
 :host {
   /**
    * @prop --color: Color of the menu button
+   *
+   * @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
    */
+  --padding-top: 0;
+  --padding-bottom: 0;
 
   color: var(--color);
 
@@ -22,7 +29,7 @@
 button {
   @include text-inherit();
   @include margin(0);
-  @include padding(0);
+  @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
   @include font-smoothing();
 
   display: flex;

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

@@ -18,9 +18,13 @@ Menu Button is component that automatically creates the icon and functionality t
 
 ## CSS Custom Properties
 
-| Name      | Description              |
-| --------- | ------------------------ |
-| `--color` | Color of the menu button |
+| 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    |
 
 
 ----------------------------------------------