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

fixes #18187
ionic-team · May 7, 2019 · ef98977 · ef98977
1 parent f912206
commit ef98977
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 12 deletions.
diff --git a/core/api.txt b/core/api.txt
@@ -574,6 +574,10 @@ ion-menu-button,prop,color,string | undefined,undefined,false,false
 ion-menu-button,prop,menu,string | undefined,undefined,false,false
 ion-menu-button,prop,mode,"ios" | "md",undefined,false,false
 ion-menu-button,css-prop,--color
+ion-menu-button,css-prop,--padding-bottom
+ion-menu-button,css-prop,--padding-end
+ion-menu-button,css-prop,--padding-start
+ion-menu-button,css-prop,--padding-top
 
 ion-menu-controller,none
 ion-menu-controller,method,close,close(menu?: string | null | undefined) => Promise<boolean>

diff --git a/core/src/components/menu-button/menu-button.ios.scss b/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;
 }
diff --git a/core/src/components/menu-button/menu-button.md.scss b/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 {

diff --git a/core/src/components/menu-button/menu-button.scss b/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;

diff --git a/core/src/components/menu-button/readme.md b/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    |
 
 
 ----------------------------------------------