Add menuUp and menuDown glyph icons (#4244)

elastic · Nov 10, 2020 · ed34e86 · ed34e86
1 parent ba42331
commit ed34e86
Show file tree

Hide file tree

Showing 10 changed files with 79 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@
 - Added `EuiColorPaletteDisplay` component ([#3865](https://github.com/elastic/eui/pull/3865))
 - Added `initialFocusedItemIndex` support to `EuiContextMenuPanelDescriptor` ([#4223](https://github.com/elastic/eui/pull/4223))
 - Added `role="alert"` and `aria-live="assertive"` to `EuiForm`'s `EuiCallOut` for the errors ([#4238](https://github.com/elastic/eui/pull/4238))
+- Added `menuDown` and `menuUp` glyphs to `EuiIcon` ([#4244](https://github.com/elastic/eui/pull/4244))
 
 **Bug fixes**
 

diff --git a/src-docs/src/views/icon/icons.js b/src-docs/src/views/icon/icons.js
@@ -134,8 +134,10 @@ export const iconTypes = [
   'memory',
   'merge',
   'menu',
+  'menuDown',
   'menuLeft',
   'menuRight',
+  'menuUp',
   'minimize',
   'minus',
   'minusInCircle',

diff --git a/src/components/icon/__snapshots__/icon.test.tsx.snap b/src/components/icon/__snapshots__/icon.test.tsx.snap
@@ -6039,6 +6039,23 @@ exports[`EuiIcon props type menu is rendered 1`] = `
 </svg>
 `;
 
+exports[`EuiIcon props type menuDown is rendered 1`] = `
+<svg
+  aria-hidden="true"
+  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  focusable="false"
+  height="16"
+  role="img"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M6 7.5c0 .276-.216.5-.495.5h-2.01a.503.503 0 01-.487-.412L3 7.5c0-.276.216-.5.495-.5h2.01c.243 0 .445.183.487.412L6 7.5zM3.51 4a.513.513 0 01-.502-.412L3 3.5c0-.276.228-.5.51-.5h8.98c.25 0 .459.183.502.412L13 3.5c0 .276-.228.5-.51.5H8.493v7.792l2.06-2.06a.5.5 0 11.707.707L9.14 12.56A1.496 1.496 0 018.026 13L7.993 13a.501.501 0 01-.118-.014 1.493 1.493 0 01-.857-.426l-2.122-2.12a.5.5 0 01.708-.708l1.889 1.89V4H3.51zM13 7.5c0 .276-.216.5-.495.5h-2.01a.503.503 0 01-.487-.412L10 7.5c0-.276.216-.5.495-.5h2.01c.243 0 .445.183.487.412L13 7.5z"
+  />
+</svg>
+`;
+
 exports[`EuiIcon props type menuLeft is rendered 1`] = `
 <svg
   aria-hidden="true"
@@ -6052,7 +6069,6 @@ exports[`EuiIcon props type menuLeft is rendered 1`] = `
 >
   <path
     d="M1.014 7.382a.501.501 0 00-.013.152c-.014.4.133.806.439 1.112l2.12 2.122a.5.5 0 10.708-.708L2.208 8H14.5a.5.5 0 000-1H2.379l1.889-1.89a.5.5 0 00-.707-.706L1.44 6.524c-.241.242-.383.544-.426.858zM14.5 3h-7a.5.5 0 000 1h7a.5.5 0 000-1zm0 8h-7a.5.5 0 100 1h7a.5.5 0 100-1z"
-    fill-rule="evenodd"
   />
 </svg>
 `;
@@ -6074,6 +6090,23 @@ exports[`EuiIcon props type menuRight is rendered 1`] = `
 </svg>
 `;
 
+exports[`EuiIcon props type menuUp is rendered 1`] = `
+<svg
+  aria-hidden="true"
+  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  focusable="false"
+  height="16"
+  role="img"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M10.01 8.5c0-.276.216-.5.495-.5h2.01c.243 0 .445.183.487.412l.008.088c0 .276-.216.5-.495.5h-2.01a.503.503 0 01-.487-.412L10.01 8.5zM12.5 12c.25 0 .459.183.502.412l.008.088c0 .276-.228.5-.51.5H3.52a.513.513 0 01-.502-.412L3.01 12.5c0-.276.228-.5.51-.5h3.987V4.208l-2.06 2.06a.5.5 0 11-.707-.707L6.86 3.44A1.496 1.496 0 017.974 3L8.007 3c.04 0 .08.005.118.014.314.043.616.185.857.426l2.122 2.12a.5.5 0 01-.708.708l-1.889-1.89V12H12.5zM3 8.5c0-.276.216-.5.495-.5h2.01c.243 0 .445.183.487.412L6 8.5c0 .276-.216.5-.495.5h-2.01a.503.503 0 01-.487-.412L3 8.5z"
+  />
+</svg>
+`;
+
 exports[`EuiIcon props type merge is rendered 1`] = `
 <svg
   aria-hidden="true"

diff --git a/src/components/icon/assets/menuDown.js b/src/components/icon/assets/menuDown.js
@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+const EuiIconMenuDown = ({ title, titleId, ...props }) => (
+  <svg
+    width={16}
+    height={16}
+    viewBox="0 0 16 16"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}>
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path d="M6 7.5c0 .276-.216.5-.495.5h-2.01a.503.503 0 01-.487-.412L3 7.5c0-.276.216-.5.495-.5h2.01c.243 0 .445.183.487.412L6 7.5zM3.51 4a.513.513 0 01-.502-.412L3 3.5c0-.276.228-.5.51-.5h8.98c.25 0 .459.183.502.412L13 3.5c0 .276-.228.5-.51.5H8.493v7.792l2.06-2.06a.5.5 0 11.707.707L9.14 12.56A1.496 1.496 0 018.026 13L7.993 13a.501.501 0 01-.118-.014 1.493 1.493 0 01-.857-.426l-2.122-2.12a.5.5 0 01.708-.708l1.889 1.89V4H3.51zM13 7.5c0 .276-.216.5-.495.5h-2.01a.503.503 0 01-.487-.412L10 7.5c0-.276.216-.5.495-.5h2.01c.243 0 .445.183.487.412L13 7.5z" />
+  </svg>
+);
+
+export const icon = EuiIconMenuDown;
diff --git a/src/components/icon/assets/menuDown.svg b/src/components/icon/assets/menuDown.svg
diff --git a/src/components/icon/assets/menuLeft.js b/src/components/icon/assets/menuLeft.js
@@ -9,10 +9,7 @@ const EuiIconMenuLeft = ({ title, titleId, ...props }) => (
     aria-labelledby={titleId}
     {...props}>
     {title ? <title id={titleId}>{title}</title> : null}
-    <path
-      fillRule="evenodd"
-      d="M1.014 7.382a.501.501 0 00-.013.152c-.014.4.133.806.439 1.112l2.12 2.122a.5.5 0 10.708-.708L2.208 8H14.5a.5.5 0 000-1H2.379l1.889-1.89a.5.5 0 00-.707-.706L1.44 6.524c-.241.242-.383.544-.426.858zM14.5 3h-7a.5.5 0 000 1h7a.5.5 0 000-1zm0 8h-7a.5.5 0 100 1h7a.5.5 0 100-1z"
-    />
+    <path d="M1.014 7.382a.501.501 0 00-.013.152c-.014.4.133.806.439 1.112l2.12 2.122a.5.5 0 10.708-.708L2.208 8H14.5a.5.5 0 000-1H2.379l1.889-1.89a.5.5 0 00-.707-.706L1.44 6.524c-.241.242-.383.544-.426.858zM14.5 3h-7a.5.5 0 000 1h7a.5.5 0 000-1zm0 8h-7a.5.5 0 100 1h7a.5.5 0 100-1z" />
   </svg>
 );
 

diff --git a/src/components/icon/assets/menuLeft.svg b/src/components/icon/assets/menuLeft.svg
diff --git a/src/components/icon/assets/menuUp.js b/src/components/icon/assets/menuUp.js
@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+const EuiIconMenuUp = ({ title, titleId, ...props }) => (
+  <svg
+    width={16}
+    height={16}
+    viewBox="0 0 16 16"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}>
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path d="M10.01 8.5c0-.276.216-.5.495-.5h2.01c.243 0 .445.183.487.412l.008.088c0 .276-.216.5-.495.5h-2.01a.503.503 0 01-.487-.412L10.01 8.5zM12.5 12c.25 0 .459.183.502.412l.008.088c0 .276-.228.5-.51.5H3.52a.513.513 0 01-.502-.412L3.01 12.5c0-.276.228-.5.51-.5h3.987V4.208l-2.06 2.06a.5.5 0 11-.707-.707L6.86 3.44A1.496 1.496 0 017.974 3L8.007 3c.04 0 .08.005.118.014.314.043.616.185.857.426l2.122 2.12a.5.5 0 01-.708.708l-1.889-1.89V12H12.5zM3 8.5c0-.276.216-.5.495-.5h2.01c.243 0 .445.183.487.412L6 8.5c0 .276-.216.5-.495.5h-2.01a.503.503 0 01-.487-.412L3 8.5z" />
+  </svg>
+);
+
+export const icon = EuiIconMenuUp;
diff --git a/src/components/icon/assets/menuUp.svg b/src/components/icon/assets/menuUp.svg
diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
@@ -265,8 +265,10 @@ const typeToPathMap = {
   mapMarker: 'map_marker',
   memory: 'memory',
   menu: 'menu',
+  menuDown: 'menuDown',
   menuLeft: 'menuLeft',
   menuRight: 'menuRight',
+  menuUp: 'menuUp',
   merge: 'merge',
   metricbeatApp: 'app_metricbeat',
   metricsApp: 'app_metrics',