[EuiKeyPadMenuItem] Added checkable option & style updates

CHANGELOG.md

@@ -3,12 +3,17 @@
 - Refactored `EuiFlyout` types ([#4940](https://github.com/elastic/eui/pull/4940))
 - Updated `pause` icon ([#4947](https://github.com/elastic/eui/pull/4947))
 - Changed multi-line `EuiDataGrid` cells to `break-word` instead of `break-all` ([#4955](https://github.com/elastic/eui/pull/4955))
+- Added `checkable` options to `EuiKeyPadMenu` and `EuiKeyPadMenuItem` ([#4950](https://github.com/elastic/eui/pull/4950))
 
 **Bug fixes**
 
 - Fixed render-blocking error when `EuiCodeBlock` is configured with an unsupported language ([#4943](https://github.com/elastic/eui/pull/4943))
 - Fixed initial alignment of `EuiDataGrid` cells and the expand button on multi-line cells ([#4955](https://github.com/elastic/eui/pull/4955))
 
+**Theme: Amsterdam**
+
+- Updated styles for `EuiKeyPadMenuItem` ([#4950](https://github.com/elastic/eui/pull/4950)
+
 ## [`35.1.0`](https://github.com/elastic/eui/tree/v35.1.0)
 
 - Improved keyboard and screen reader experience for `EuiColorPicker` ([#4886](https://github.com/elastic/eui/pull/4886))

src-docs/src/views/key_pad_menu/key_pad_beta.js

@@ -8,25 +8,23 @@ import {
 
 export default () => (
   <EuiKeyPadMenu>
-    <EuiKeyPadMenuItem label="Dashboard" href="#">
-      <EuiIcon type="dashboardApp" size="l" />
+    <EuiKeyPadMenuItem label="No beta">
+      <EuiIcon type="editorStrike" size="l" />
     </EuiKeyPadMenuItem>
 
     <EuiKeyPadMenuItem
-      label="Dashboard"
-      href="#"
+      label="Single letter"
       betaBadgeLabel="Beta"
       betaBadgeTooltipContent="This module is not GA. Please help us by reporting any bugs.">
-      <EuiIcon type="dashboardApp" size="l" />
+      <EuiIcon type="editorBold" size="l" />
     </EuiKeyPadMenuItem>
 
     <EuiKeyPadMenuItem
-      label="Dashboard"
-      href="#"
+      label="Icon"
       betaBadgeLabel="External"
       betaBadgeTooltipContent="This module is an external app."
       betaBadgeIconType="popout">
-      <EuiIcon type="dashboardApp" size="l" />
+      <EuiIcon type="editorCodeBlock" size="l" />
     </EuiKeyPadMenuItem>
   </EuiKeyPadMenu>
 );

src-docs/src/views/key_pad_menu/key_pad_menu.js

@@ -7,21 +7,31 @@ import {
 } from '../../../../src/components';
 
 export default () => (
-  <EuiKeyPadMenu>
-    <EuiKeyPadMenuItem label="Dashboard" href="#">
-      <EuiIcon type="dashboardApp" size="l" />
-    </EuiKeyPadMenuItem>
+  <nav aria-label="Nav title">
+    <EuiKeyPadMenu>
+      <EuiKeyPadMenuItem label="Dashboard">
+        <EuiIcon type="dashboardApp" size="l" />
+      </EuiKeyPadMenuItem>
 
-    <EuiKeyPadMenuItem label="Dashboard" href="#">
-      <EuiIcon type="dashboardApp" size="l" />
-    </EuiKeyPadMenuItem>
+      <EuiKeyPadMenuItem label="Canvas">
+        <EuiIcon type="canvasApp" size="l" />
+      </EuiKeyPadMenuItem>
 
-    <EuiKeyPadMenuItem label="Dashboard" href="#">
-      <EuiIcon type="dashboardApp" size="l" />
-    </EuiKeyPadMenuItem>
+      <EuiKeyPadMenuItem isSelected label="Lens">
+        <EuiIcon type="lensApp" size="l" />
+      </EuiKeyPadMenuItem>
 
-    <EuiKeyPadMenuItem isDisabled label="Dashboard" href="#">
-      <EuiIcon type="dashboardApp" size="l" />
-    </EuiKeyPadMenuItem>
-  </EuiKeyPadMenu>
+      <EuiKeyPadMenuItem isDisabled label="Visualize">
+        <EuiIcon type="visualizeApp" size="l" />
+      </EuiKeyPadMenuItem>
+
+      <EuiKeyPadMenuItem label="Graph">
+        <EuiIcon type="graphApp" size="l" />
+      </EuiKeyPadMenuItem>
+
+      <EuiKeyPadMenuItem label="Advanced Settings">
+        <EuiIcon type="advancedSettingsApp" size="l" />
+      </EuiKeyPadMenuItem>
+    </EuiKeyPadMenu>
+  </nav>
 );

src-docs/src/views/key_pad_menu/key_pad_menu_checkable.js

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+
+import {
+  EuiIcon,
+  EuiKeyPadMenu,
+  EuiKeyPadMenuItem,
+} from '../../../../src/components';
+
+export default () => {
+  const radioGroupName = 'singleKeypadSelect';
+  const [singleSelectedID, setSingleSelectedID] = useState(
+    'singleKeypadSelect1'
+  );
+
+  return (
+    <EuiKeyPadMenu checkable={{ ariaLegend: 'Single select as radios' }}>
+      <EuiKeyPadMenuItem
+        checkable="single"
+        name={radioGroupName}
+        id="singleKeypadSelect1"
+        label="Radio one"
+        onChange={(id) => {
+          setSingleSelectedID(id);
+        }}
+        isSelected={singleSelectedID === 'singleKeypadSelect1'}>
+        <EuiIcon type="faceHappy" size="l" />
+      </EuiKeyPadMenuItem>
+      <EuiKeyPadMenuItem
+        checkable="single"
+        name={radioGroupName}
+        id="singleKeypadSelect2"
+        label="Radio two"
+        onChange={(id) => {
+          setSingleSelectedID(id);
+        }}
+        isSelected={singleSelectedID === 'singleKeypadSelect2'}>
+        <EuiIcon type="faceNeutral" size="l" />
+      </EuiKeyPadMenuItem>
+      <EuiKeyPadMenuItem
+        checkable="single"
+        name={radioGroupName}
+        id="singleKeypadSelect3"
+        label="Disabled"
+        isDisabled>
+        <EuiIcon type="faceSad" size="l" />
+      </EuiKeyPadMenuItem>
+    </EuiKeyPadMenu>
+  );
+};

src-docs/src/views/key_pad_menu/key_pad_menu_checkable_multi.js

@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+
+import {
+  EuiIcon,
+  EuiKeyPadMenu,
+  EuiKeyPadMenuItem,
+} from '../../../../src/components';
+
+export default () => {
+  const [multiSelect1isSelected, setmultiSelect1isSelected] = useState(true);
+  const [multiSelect3isSelected, setmultiSelect2isSelected] = useState(false);
+
+  return (
+    <EuiKeyPadMenu checkable={{ legend: 'Multi select as checkboxes' }}>
+      <EuiKeyPadMenuItem
+        checkable="multi"
+        isSelected={multiSelect1isSelected}
+        label="Check one"
+        onChange={() => {
+          setmultiSelect1isSelected((selected) => !selected);
+        }}>
+        <EuiIcon type="faceHappy" size="l" />
+      </EuiKeyPadMenuItem>
+      <EuiKeyPadMenuItem
+        checkable="multi"
+        isSelected={multiSelect3isSelected}
+        id="multiKeypadSelect2a"
+        label="Check two"
+        onChange={() => {
+          setmultiSelect2isSelected((selected) => !selected);
+        }}>
+        <EuiIcon type="faceNeutral" size="l" />
+      </EuiKeyPadMenuItem>
+      <EuiKeyPadMenuItem
+        checkable="multi"
+        id="multiKeypadSelect3a"
+        label="Disabled"
+        isDisabled>
+        <EuiIcon type="faceSad" size="l" />
+      </EuiKeyPadMenuItem>
+    </EuiKeyPadMenu>
+  );
+};