[EuiProvider][EuiThemeProvider] highContrastMode set up and documen…

…tation (#8142)

.github/pull_request_template.md

@@ -12,6 +12,8 @@ Remove or strikethrough items that do not apply to your PR.
 
 - Browser QA
     - [ ] Checked in both **light and dark** modes
+    - [ ] Checked in both [MacOS](https://support.apple.com/lv-lv/guide/mac-help/unac089/mac) and [Windows](https://support.microsoft.com/en-us/windows/turn-high-contrast-mode-on-or-off-in-windows-909e9d89-a0f9-a3a9-b993-7a6dcee85025) **high contrast modes**
+      - (_[emulate forced colors](https://devtoolstips.org/tips/en/emulate-forced-colors/) if you do not have access to a Windows machine_.)
     - [ ] Checked in **mobile**
     - [ ] Checked in **Chrome**, **Safari**, **Edge**, and **Firefox**
     - [ ] Checked for **accessibility** including keyboard-only and screenreader modes

packages/eui/.storybook/decorator.tsx

@@ -86,6 +86,13 @@ const storybookToolbarColorModes: Array<
   { value: 'dark', title: 'Dark mode', icon: 'circle' },
 ];
 
+const storybookToolbarHighContrastMode: Array<
+  ToolbarDisplay & { value: boolean }
+> = [
+  { value: false, title: 'High contrast off', icon: 'circlehollow' },
+  { value: true, title: 'High contrast on', icon: 'circle' },
+];
+
 const storybookToolbarWritingModes: Array<
   ToolbarDisplay & { value: WritingModes }
 > = [
@@ -112,6 +119,17 @@ export const euiProviderDecoratorGlobals: Preview['globalTypes'] = {
       dynamicTitle: true,
     },
   },
+  highContrastMode: {
+    description: 'High contrast mode for EuiProvider theme',
+    defaultValue: window?.matchMedia?.('(prefers-contrast: more)').matches
+      ? true
+      : false,
+    toolbar: {
+      title: 'Contrast mode',
+      items: storybookToolbarHighContrastMode,
+      dynamicTitle: true,
+    },
+  },
   writingMode: {
     description: 'Writing mode for testing logical property directions',
     defaultValue: 'ltr',

packages/eui/.storybook/preview.tsx

@@ -46,6 +46,7 @@ const preview: Preview = {
     (Story, context) => (
       <EuiProviderDecorator
         colorMode={context.globals.colorMode}
+        highContrastMode={context.globals.highContrastMode}
         {...(context.componentId === 'theming-euiprovider' && context.args)}
         writingMode={context.globals.writingMode}
       >

packages/eui/changelogs/upcoming/8036.md

@@ -0,0 +1,3 @@
+- Updated `EuiProvider` `and `EuiThemeProvider` with a new `highContrastMode`
+  - This prop allows toggling a higher contrast visual style that primarily affects borders and shadows
+  - On `EuiProvider`, if the `highContrastMode` prop is not passed, this setting will inherit from the user's OS/system light/dark mode setting

packages/eui/src-docs/src/actions/action_types.js

@@ -2,7 +2,4 @@ export default {
   // Example nav actions
   REGISTER_SECTION: 'REGISTER_SECTION',
   UNREGISTER_SECTION: 'UNREGISTER_SECTION',
-
-  // Locale actions
-  TOGGLE_LOCALE: 'TOGGLE_LOCALE',
 };

packages/eui/src-docs/src/components/guide_page/guide_page_chrome.js

@@ -302,7 +302,5 @@ export class GuidePageChrome extends Component {
 
 GuidePageChrome.propTypes = {
   currentRoute: PropTypes.object.isRequired,
-  onToggleLocale: PropTypes.func.isRequired,
-  selectedLocale: PropTypes.string.isRequired,
   navigation: PropTypes.array.isRequired,
 };

packages/eui/src-docs/src/components/guide_page/guide_page_header.tsx

@@ -21,15 +21,7 @@ import { VersionSwitcher } from './version_switcher';
 
 const GITHUB_URL = 'https://github.com/elastic/eui';
 
-export type GuidePageHeaderProps = {
-  onToggleLocale: () => {};
-  selectedLocale: string;
-};
-
-export const GuidePageHeader: React.FunctionComponent<GuidePageHeaderProps> = ({
-  onToggleLocale,
-  selectedLocale,
-}) => {
+export const GuidePageHeader = () => {
   const isMobileSize = useIsWithinBreakpoints(['xs', 's']);
 
   const logo = useMemo(() => {
@@ -112,18 +104,9 @@ export const GuidePageHeader: React.FunctionComponent<GuidePageHeaderProps> = ({
   }, [codesandbox, github]);
 
   const rightSideItems = isMobileSize
-    ? [
-        <GuideThemeSelector
-          onToggleLocale={onToggleLocale}
-          selectedLocale={selectedLocale}
-        />,
-        mobileMenu,
-      ]
+    ? [<GuideThemeSelector />, mobileMenu]
     : [
-        <GuideThemeSelector
-          onToggleLocale={onToggleLocale}
-          selectedLocale={selectedLocale}
-        />,
+        <GuideThemeSelector />,
         github,
         <GuideFigmaLink key="figma" />,
         codesandbox,

packages/eui/src-docs/src/components/guide_theme_selector/guide_theme_selector.tsx

@@ -1,78 +1,32 @@
 /* eslint-disable no-restricted-globals */
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
 
-import {
-  EuiThemeProvider,
-  useEuiTheme,
-  useIsWithinBreakpoints,
-} from '../../../../src/services';
+import { EuiThemeProvider, useEuiTheme } from '../../../../src/services';
 import { EUI_THEME, EUI_THEMES } from '../../../../src/themes';
 
 import { ThemeContext } from '../with_theme';
-// @ts-ignore Not TS
-import { GuideLocaleSelector } from '../guide_locale_selector';
 import {
   EuiPopover,
   EuiHorizontalRule,
   EuiButton,
   EuiContextMenuPanel,
   EuiContextMenuItem,
+  EuiSwitch,
+  EuiSwitchEvent,
 } from '../../../../src/components';
 
-type GuideThemeSelectorProps = {
-  onToggleLocale: () => {};
-  selectedLocale: string;
-  context?: any;
-};
-
-export const GuideThemeSelector: React.FunctionComponent<
-  GuideThemeSelectorProps
-> = ({ ...rest }) => {
-  return (
-    <ThemeContext.Consumer>
-      {(context) => <GuideThemeSelectorComponent context={context} {...rest} />}
-    </ThemeContext.Consumer>
-  );
-};
-
-const GuideThemeSelectorComponent: React.FunctionComponent<
-  GuideThemeSelectorProps
-> = ({ context, onToggleLocale, selectedLocale }) => {
-  const isMobileSize = useIsWithinBreakpoints(['xs', 's']);
-  const [isPopoverOpen, setPopover] = useState(false);
-
-  const onButtonClick = () => {
-    setPopover(!isPopoverOpen);
-  };
-
-  const closePopover = () => {
-    setPopover(false);
-  };
-
-  const systemColorMode = useEuiTheme().colorMode.toLowerCase();
+export const GuideThemeSelector = () => {
+  const context = useContext(ThemeContext);
+  const euiThemeContext = useEuiTheme();
+  const colorMode = context.colorMode ?? euiThemeContext.colorMode;
+  const highContrastMode =
+    context.highContrastMode ?? euiThemeContext.highContrastMode;
   const currentTheme: EUI_THEME =
-    EUI_THEMES.find(
-      (theme) => theme.value === (context.theme ?? systemColorMode)
-    ) || EUI_THEMES[0];
-
-  const getIconType = (value: EUI_THEME['value']) => {
-    return value === currentTheme.value ? 'check' : 'empty';
-  };
+    EUI_THEMES.find((theme) => theme.value === context.theme) || EUI_THEMES[0];
 
-  const items = EUI_THEMES.map((theme) => {
-    return (
-      <EuiContextMenuItem
-        key={theme.value}
-        icon={getIconType(theme.value)}
-        onClick={() => {
-          closePopover();
-          context.changeTheme(theme.value);
-        }}
-      >
-        {theme.text}
-      </EuiContextMenuItem>
-    );
-  });
+  const [isPopoverOpen, setPopover] = useState(false);
+  const onButtonClick = () => setPopover(!isPopoverOpen);
+  const closePopover = () => setPopover(false);
 
   const button = (
     <EuiThemeProvider colorMode="dark" wrapperProps={{ cloneElement: true }}>
@@ -84,11 +38,34 @@ const GuideThemeSelectorComponent: React.FunctionComponent<
         minWidth={0}
         onClick={onButtonClick}
       >
-        {isMobileSize ? 'Theme' : currentTheme.text}
+        Theme
       </EuiButton>
     </EuiThemeProvider>
   );
 
+  const toggles = [
+    {
+      label: 'Dark mode',
+      checked: colorMode.toLowerCase() === 'dark',
+      onChange: (e: EuiSwitchEvent) =>
+        context.setContext({
+          colorMode: e.target.checked ? 'DARK' : 'LIGHT',
+        }),
+    },
+    {
+      label: 'High contrast',
+      checked: !!highContrastMode,
+      onChange: (e: EuiSwitchEvent) =>
+        context.setContext({ highContrastMode: e.target.checked }),
+    },
+    location.host.includes('803') && {
+      label: 'i18n testing',
+      checked: context.i18n === 'en-xa',
+      onChange: (e: EuiSwitchEvent) =>
+        context.setContext({ i18n: e.target.checked ? 'en-xa' : 'en' }),
+    },
+  ];
+
   return (
     <EuiPopover
       id="docsThemeSelector"
@@ -99,17 +76,35 @@ const GuideThemeSelectorComponent: React.FunctionComponent<
       panelPaddingSize="none"
       anchorPosition="downRight"
     >
-      <EuiContextMenuPanel size="s" items={items} />
-      {location.host.includes('803') && (
-        <>
-          <EuiHorizontalRule margin="none" />
-          <div style={{ padding: 8 }}>
-            <GuideLocaleSelector
-              onToggleLocale={onToggleLocale}
-              selectedLocale={selectedLocale}
+      <EuiContextMenuPanel
+        size="s"
+        items={EUI_THEMES.map((theme) => {
+          return (
+            <EuiContextMenuItem
+              key={theme.value}
+              icon={currentTheme.value === theme.value ? 'check' : 'empty'}
+              onClick={() => {
+                closePopover();
+                context.setContext({ theme: theme.value });
+              }}
+            >
+              {theme.text}
+            </EuiContextMenuItem>
+          );
+        })}
+      />
+      <EuiHorizontalRule margin="none" />
+      {toggles.map((item) =>
+        item ? (
+          <div css={({ euiTheme }) => ({ padding: euiTheme.size.s })}>
+            <EuiSwitch
+              compressed
+              label={item.label}
+              checked={item.checked}
+              onChange={item.onChange}
             />
           </div>
-        </>
+        ) : null
       )}
     </EuiPopover>
   );

packages/eui/src-docs/src/components/with_theme/index.ts

@@ -1,2 +1,6 @@
-export { ThemeProvider, ThemeContext } from './theme_context';
+export {
+  ThemeProvider,
+  ThemeContext,
+  type ThemeContextType,
+} from './theme_context';
 export { LanguageSelector } from './language_selector';