Adding contrast and contrastHigh icons for the upcoming high contrast mode functionality (elastic#8216)

ek-so · mgadewoll · web-flow · commit 73460528a070 · 2024-12-11T16:33:27.000+01:00
Co-authored-by: Lene Gadewoll &lt;lene.gadewoll@elastic.co&gt;
diff --git a/packages/eui/changelogs/upcoming/8216.md b/packages/eui/changelogs/upcoming/8216.md
@@ -0,0 +1,2 @@
+- Added two new icons: `contrast` and `contrastHigh`
+
diff --git a/packages/eui/src-docs/src/views/icon/icons.js b/packages/eui/src-docs/src/views/icon/icons.js
@@ -62,6 +62,8 @@ export const iconTypes = [
   'continuityAboveBelow',
   'continuityBelow',
   'continuityWithin',
+  'contrast',
+  'contrastHigh',
   'controlsHorizontal',
   'controlsVertical',
   'copy',
diff --git a/packages/eui/src/components/icon/__snapshots__/icon.test.tsx.snap b/packages/eui/src/components/icon/__snapshots__/icon.test.tsx.snap
@@ -1781,6 +1781,45 @@ exports[`EuiIcon props type continuityWithin is rendered 1`] = `
 </svg>
 `;
 
+exports[`EuiIcon props type contrast is rendered 1`] = `
+<svg
+  aria-hidden="true"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
+  data-icon-type="contrast"
+  data-is-loaded="true"
+  height="16"
+  role="img"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    clip-rule="evenodd"
+    d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm.5-1.5h1.902a6.004 6.004 0 0 0 1.567-1H8.5v1Zm0-2h4.374c.225-.312.42-.647.582-1H8.5v1Zm0-2h5.311c.083-.324.14-.658.168-1H8.5v1Zm0-2h5.48a5.988 5.988 0 0 0-.169-1H8.5v1Zm0-2h4.956a5.996 5.996 0 0 0-.582-1H8.5v1Zm0-2h3.469a6.004 6.004 0 0 0-1.567-1H8.5v1ZM2 8a6 6 0 0 1 5.5-5.98v11.96A6 6 0 0 1 2 8Z"
+    fill-rule="evenodd"
+  />
+</svg>
+`;
+
+exports[`EuiIcon props type contrastHigh is rendered 1`] = `
+<svg
+  aria-hidden="true"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
+  data-icon-type="contrastHigh"
+  data-is-loaded="true"
+  height="16"
+  role="img"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    clip-rule="evenodd"
+    d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0Zm-7 6V2a6 6 0 1 0 0 12Z"
+  />
+</svg>
+`;
+
 exports[`EuiIcon props type controlsHorizontal is rendered 1`] = `
 <svg
   aria-hidden="true"
diff --git a/packages/eui/src/components/icon/assets/contrast.tsx b/packages/eui/src/components/icon/assets/contrast.tsx
@@ -0,0 +1,38 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+
+import * as React from 'react';
+import type { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const EuiIconContrast = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={16}
+    height={16}
+    viewBox="0 0 16 16"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      fillRule="evenodd"
+      d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm.5-1.5h1.902a6.004 6.004 0 0 0 1.567-1H8.5v1Zm0-2h4.374c.225-.312.42-.647.582-1H8.5v1Zm0-2h5.311c.083-.324.14-.658.168-1H8.5v1Zm0-2h5.48a5.988 5.988 0 0 0-.169-1H8.5v1Zm0-2h4.956a5.996 5.996 0 0 0-.582-1H8.5v1Zm0-2h3.469a6.004 6.004 0 0 0-1.567-1H8.5v1ZM2 8a6 6 0 0 1 5.5-5.98v11.96A6 6 0 0 1 2 8Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export const icon = EuiIconContrast;
diff --git a/packages/eui/src/components/icon/assets/contrastHigh.tsx b/packages/eui/src/components/icon/assets/contrastHigh.tsx
@@ -0,0 +1,37 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+
+import * as React from 'react';
+import type { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const EuiIconContrastHigh = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={16}
+    height={16}
+    viewBox="0 0 16 16"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0Zm-7 6V2a6 6 0 1 0 0 12Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export const icon = EuiIconContrastHigh;
diff --git a/packages/eui/src/components/icon/icon_map.ts b/packages/eui/src/components/icon/icon_map.ts
@@ -69,6 +69,8 @@ export const typeToPathMap = {
   continuityAboveBelow: 'continuityAboveBelow',
   continuityBelow: 'continuityBelow',
   continuityWithin: 'continuityWithin',
+  contrast: 'contrast',
+  contrastHigh: 'contrastHigh',
   controlsHorizontal: 'controls_horizontal',
   controlsVertical: 'controls_vertical',
   copy: 'copy',
diff --git a/packages/eui/src/components/icon/svgs/contrast.svg b/packages/eui/src/components/icon/svgs/contrast.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM8.5 13.5H10.4017C10.9767 13.2486 11.5046 12.9096 11.9687 12.5H8.5V13.5ZM8.5 11.5H12.874C13.0986 11.1878 13.2939 10.8531 13.456 10.5H8.5V11.5ZM8.5 9.5H13.811C13.8943 9.17642 13.9512 8.84229 13.9795 8.5H8.5V9.5ZM8.5 7.5H13.9795C13.9512 7.15771 13.8943 6.82358 13.811 6.5H8.5V7.5ZM8.5 5.5H13.456C13.2939 5.14689 13.0986 4.81221 12.874 4.5H8.5V5.5ZM8.5 3.5H11.9687C11.5046 3.09038 10.9767 2.75143 10.4017 2.5H8.5V3.5ZM2 8C2 4.85467 4.42023 2.27461 7.5 2.02054L7.5 13.9795C4.42023 13.7254 2 11.1453 2 8Z"/>
+</svg>
diff --git a/packages/eui/src/components/icon/svgs/contrastHigh.svg b/packages/eui/src/components/icon/svgs/contrastHigh.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path clip-rule="evenodd" d="M15 8C15 11.866 11.866 15 8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1C11.866 1 15 4.13401 15 8ZM8 14V2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14Z"/>
+</svg>
diff --git a/packages/website/docs/components/display/icons/icon_types.ts b/packages/website/docs/components/display/icons/icon_types.ts
@@ -52,6 +52,8 @@ export const iconTypes: Array<IconType> = [
   'continuityAboveBelow',
   'continuityBelow',
   'continuityWithin',
+  'contrast',
+  'contrastHigh',
   'controlsHorizontal',
   'controlsVertical',
   'copy',
diff --git a/wiki/contributing-to-eui/developing/creating-icons.md b/wiki/contributing-to-eui/developing/creating-icons.md
@@ -66,6 +66,7 @@ _1. Add your glyph to the `EuiIcon` component_
 
 _2. Display the icon in the docs_
 - Add the icon name to `/packages/eui/src-docs/src/views/icon/icons.js` *
+- Add the icon name to `/packages/website/docs/components/display/icons/icon_types.ts` *
 
 _3. Compile and test_
 - Go to the `packages/eui` directory

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	+- Added two new icons: `contrast` and `contrastHigh`
	`2`	`+`