Made EuiKeyPadMenuItem beta badge smaller

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 - Migrate `EuiEmptyPrompt`and `EuiCard` to TS ([#2387](https://github.com/elastic/eui/pull/2387))
 - Added Lens app `lensApp` icon ([#2389](https://github.com/elastic/eui/pull/2389))
+- Made `EuiKeyPadMenuItem` beta badge smaller ([#2388](https://github.com/elastic/eui/pull/2388))
 
 ## [`14.3.0`](https://github.com/elastic/eui/tree/v14.3.0)
 

src/components/badge/beta_badge/_beta_badge.scss

@@ -14,15 +14,15 @@
   white-space: nowrap;
 
   cursor: default;
+}
 
-  // When it's just an icon, make it a circle
-  &.euiBetaBadge--iconOnly {
-    padding: 0;
-    width: $euiSizeL;
+// When it's just an icon, make it a circle
+.euiBetaBadge--iconOnly {
+  padding: 0;
+  width: $euiSizeL;
 
-    .euiBetaBadge__icon {
-      position: relative;
-      margin-top: -1px;
-    }
+  .euiBetaBadge__icon {
+    position: relative;
+    margin-top: -1px;
   }
 }

src/components/key_pad_menu/_index.scss

@@ -1,5 +1,5 @@
 // Key padis a phone like nav comprised of an svg icon and a title.
 
-$euiKeyPadMenuSize: $euiSize * 6;
+@import 'variables';
 
 @import 'key_pad_menu';

src/components/key_pad_menu/_key_pad_menu.scss

@@ -1,7 +1,3 @@
-/**
- * Dial menu is a phone like dial comprised of an svg icon and a title.
- */
-
 /**
  * 1. Default to grid of 3
  */
@@ -73,14 +69,13 @@
 
     .euiKeyPadMenuItem__betaBadgeWrapper {
       position: absolute;
-      top: $euiSizeS;
+      top: $euiSizeXS;
       right: $euiSizeS;
       z-index: 3;
 
       // sass-lint:disable-block nesting-depth
       .euiKeyPadMenuItem__betaBadge:not(.euiBetaBadge--iconOnly) {
-        width: $euiSizeL;
-        padding: 0 (($euiSizeL - $euiFontSizeXS) / 1.5);  /* 2 */
+        padding: 0 ($euiSizeM / 2);  /* 2 */
         overflow: hidden;  /* 2 */
         letter-spacing: 3rem;  /* 2 */
       }
@@ -89,9 +84,15 @@
 }
 
 .euiKeyPadMenuItem__betaBadge {
-  color: $euiTextColor;
+  @include size($euiKeyPadMenuItemBetaBadgeSize);
+  line-height: $euiKeyPadMenuItemBetaBadgeSize;
+  color: $euiColorFullShade;
   background-color: tintOrShade($euiColorLightShade, 50%, 0%);
   box-shadow: none;
+
+  .euiBetaBadge__icon {
+    @include size($euiSizeM);
+  }
 }
 
 .euiKeyPadMenuItem__icon {

src/components/key_pad_menu/_variables.scss

@@ -0,0 +1,2 @@
+$euiKeyPadMenuSize: $euiSize * 6 !default;
+$euiKeyPadMenuItemBetaBadgeSize: $euiSize + $euiSizeXS !default;