Merge branch 'main' into new-cases-icon

packages/docusaurus-theme/.gitignore

@@ -0,0 +1,8 @@
+# Dependencies
+/node_modules
+
+# Production
+/lib
+
+yarn-debug.log*
+yarn-error.log*

packages/docusaurus-theme/README.md

@@ -0,0 +1,42 @@
+# EUI Docusaurus theme
+
+`@elastic/eui-docusaurus-theme`
+
+EUI theme for [Docusaurus](https://docusaurus.io/) made for the new EUI [documentation website](https://eui.elastic.co).
+
+## Installation and usage
+
+This package is not yet published to npm.
+
+## Local development
+
+### Prerequisites
+
+This package requires Node.js (check current version in [.nvmrc](/.nvmrc)) to be installed
+and [corepack](https://nodejs.org/api/corepack.html) to be enabled.
+
+### Installing dependencies
+
+Please run `yarn` to install dependencies:
+
+```shell
+yarn
+```
+
+### Building the package
+
+```shell
+yarn build
+```
+
+### Building in watch mode
+
+Run the following command to build this package whenever a file is edited:
+
+```shell
+yarn start
+```
+
+Please note that this package is configured to do incremental builds and sometimes `tsc` may not update
+the `lib` directory with your latest changes if you rename or delete files.
+If that's the case please run `yarn build`.

packages/docusaurus-theme/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@elastic/eui-docusaurus-theme",
+  "version": "0.1.0",
+  "description": "EUI theme for Docusaurus",
+  "private": true,
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "tsc --build",
+    "start": "tsc --watch"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tkajtoch/eui.git",
+    "directory": "packages/docusaurus-theme"
+  },
+  "devDependencies": {
+    "@docusaurus/types": "^3.4.0",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "typescript": "~5.4.5"
+  },
+  "main": "lib/index.js",
+  "exports": {
+    "./lib/*": "./lib/*",
+    "./src/*": "./src/*",
+    ".": {
+      "default": "./lib/index.js"
+    }
+  },
+  "dependencies": {
+    "@docusaurus/core": "^3.4.0",
+    "@docusaurus/module-type-aliases": "^3.4.0",
+    "@docusaurus/utils-validation": "^3.4.0",
+    "@elastic/datemath": "^5.0.3",
+    "@elastic/eui": "94.5.0",
+    "@emotion/css": "^11.11.2",
+    "@emotion/react": "^11.11.4",
+    "moment": "^2.30.1"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  }
+}

packages/docusaurus-theme/src/index.ts

@@ -0,0 +1,13 @@
+import type { Plugin } from '@docusaurus/types';
+
+export default function euiDocusaurusTheme(): Plugin<void> {
+  return {
+    name: 'eui-docusaurus-theme',
+    getThemePath() {
+      return '../lib/theme';
+    },
+    getTypeScriptThemePath() {
+      return '../src/theme';
+    },
+  };
+}

packages/docusaurus-theme/src/theme/Footer/index.tsx

@@ -0,0 +1,47 @@
+import { css } from '@emotion/react';
+import { EuiText, EuiLink, UseEuiTheme, EuiThemeProvider, useEuiMemoizedStyles } from '@elastic/eui';
+
+const ELASTIC_LICENSE_URL = "https://github.com/elastic/eui/blob/main/licenses/ELASTIC-LICENSE-2.0.md";
+const SSPL_LICENSE_URL = "https://github.com/elastic/eui/blob/main/licenses/SSPL-LICENSE.md";
+
+const getFooterStyles = ({ euiTheme }: UseEuiTheme) => {
+  return {
+    root: css`
+      background: #1C1E23; // Color not available in EUI
+      border-radius: ${euiTheme.size.s} ${euiTheme.size.s} 0 0;
+      padding: ${euiTheme.size.l};
+      text-align: center;
+    `,
+    heart: css`
+      color: ${euiTheme.colors.accent};
+    `,
+  };
+};
+
+const Footer = () => {
+  const styles = useEuiMemoizedStyles(getFooterStyles);
+
+  return (
+    <EuiThemeProvider colorMode="inverse">
+      <footer css={styles.root}>
+        <EuiText textAlign="center" size="s">
+          EUI is dual-licensed under {' '}
+          <EuiLink href={ELASTIC_LICENSE_URL}>
+            Elastic License 2.0
+          </EuiLink>
+          {' and '}
+          <EuiLink href={SSPL_LICENSE_URL}>
+            Server Side Public License, v 1
+          </EuiLink>
+          {' | '}
+          Crafted with <span role="img" aria-label="love" css={styles.heart}>❤</span> by{' '}
+          <EuiLink href="https://elastic.co">
+            Elastic
+          </EuiLink>
+        </EuiText>
+      </footer>
+    </EuiThemeProvider>
+  );
+};
+
+export default Footer;

packages/website/src/theme/MDXComponents/index.js → packages/docusaurus-theme/src/theme/MDXComponents/index.ts

@@ -6,8 +6,8 @@
  * Side Public License, v 1.
  */
 
-import OriginalMDXComponents from '@theme-original/MDXComponents';
-import { Badge } from '@site/src/components/badge';
+import OriginalMDXComponents from '@theme-init/MDXComponents';
+import { Badge } from '../../components/badge';
 
 const MDXComponents = {
   ...OriginalMDXComponents,

packages/website/src/theme/Root.tsx → packages/docusaurus-theme/src/theme/Root.tsx

@@ -8,6 +8,7 @@
 
 import { EuiProvider } from '@elastic/eui';
 import { Props } from '@theme/Root';
+import '@elastic/eui/dist/eui_theme_light.css';
 
 // Wrap docusaurus root component with <EuiProvider>
 // See https://docusaurus.io/docs/swizzling#wrapper-your-site-with-root

packages/docusaurus-theme/tsconfig.base.json

@@ -0,0 +1,68 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    /* Emit */
+    "target": "ES2020",
+    "lib": ["ESNext", "DOM"],
+    "declaration": true,
+    // These two options will be selectively overridden in each project.
+    // Utility libraries will have source maps on, but plugins will not.
+    "declarationMap": false,
+    "sourceMap": false,
+    "jsx": "react-jsx",
+    "jsxImportSource": "@emotion/react",
+    "importHelpers": true,
+    "noEmitHelpers": true,
+    // Avoid accidentally using this config to build
+    "noEmit": true,
+
+    /* Strict Type-Checking Options */
+    "allowUnreachableCode": false,
+    // Too hard to turn on
+    "exactOptionalPropertyTypes": false,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitOverride": true,
+    "noImplicitReturns": true,
+    // `process.env` is usually accessed as property
+    "noPropertyAccessFromIndexSignature": false,
+    "noUncheckedIndexedAccess": true,
+    /* strict family */
+    "strict": true,
+    "alwaysStrict": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "strictBindCallApply": true,
+    "strictFunctionTypes": true,
+    "strictNullChecks": true,
+    "strictPropertyInitialization": true,
+    "useUnknownInCatchVariables": true,
+    /* Handled by ESLint */
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "importsNotUsedAsValues": "remove",
+
+    /* Module Resolution */
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "allowJs": true,
+    "skipLibCheck": true, // @types/webpack and webpack/types.d.ts are not the same thing
+    "types": [
+      "@docusaurus/module-type-aliases"
+    ]
+  },
+  "include": ["./**/*", "./**/.eslintrc.js"],
+  "exclude": [
+    "node_modules",
+    "coverage/**",
+    "**/lib/**/*",
+    "website/**",
+    "**/__mocks__/**/*",
+    "**/__fixtures__/**/*",
+    "examples/**",
+    "packages/create-docusaurus/templates/**"
+  ]
+}

packages/docusaurus-theme/tsconfig.client.json

@@ -0,0 +1,17 @@
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "incremental": true,
+    "moduleResolution": "bundler",
+    "module": "esnext",
+    "target": "esnext",
+    "esModuleInterop": true,
+    "composite": true,
+    "rootDir": "src",
+    "outDir": "lib",
+    "tsBuildInfoFile": "lib/.tsbuildinfo-client"
+  },
+  "include": ["src/client", "src/components", "src/theme", "src/*.d.ts"],
+  "exclude": ["**/__tests__/**"]
+}

packages/docusaurus-theme/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "references": [{"path": "./tsconfig.client.json"}],
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ESNext"],
+    "declaration": true,
+    "sourceMap": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "@emotion/react",
+    "noEmitHelpers": true,
+    "incremental": true,
+    "tsBuildInfoFile": "lib/.tsbuildinfo",
+    "rootDir": "src",
+    "outDir": "lib",
+    "esModuleInterop": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "moduleResolution": "Node",
+    "types": [
+      "@docusaurus/module-type-aliases"
+    ]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["src/client", "src/theme", "**/__tests__/**"]
+}

packages/eui/changelogs/upcoming/7833.md

@@ -0,0 +1,3 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiFilePicker` to Emotion; Removed `$euiFilePickerTallHeight`

packages/eui/changelogs/upcoming/7838.md

@@ -0,0 +1 @@
+- Updated `EuiIcon` to feature updated `logoElasticStack` logo for referencing Elastic Stack platform

packages/eui/src/components/form/_index.scss

@@ -1,6 +1,5 @@
 @import 'checkbox/index';
 @import 'described_form_group/index';
-@import 'file_picker/index';
 @import 'form';
 @import 'form_control_layout/index';
 @import 'form_error_text/index';

packages/eui/src/components/form/file_picker/__snapshots__/file_picker.test.tsx.snap

@@ -2,34 +2,30 @@
 
 exports[`EuiFilePicker is rendered 1`] = `
 <div
-  class="euiFilePicker euiFilePicker--large testClass1 testClass2 emotion-euiTestCss"
+  class="euiFilePicker testClass1 testClass2 emotion-euiFilePicker-euiTestCss"
 >
+  <input
+    aria-describedby="generated-id-filePicker__prompt"
+    aria-label="aria-label"
+    class="euiFilePicker__input emotion-euiFilePicker__input-largeInteractive"
+    data-test-subj="test subject string"
+    type="file"
+  />
   <div
-    class="euiFilePicker__wrap"
+    class="euiFilePicker__prompt emotion-euiFilePicker__prompt-large"
+    id="generated-id-filePicker__prompt"
   >
-    <input
-      aria-describedby="generated-id-filePicker__prompt"
-      aria-label="aria-label"
-      class="euiFilePicker__input"
-      data-test-subj="test subject string"
-      type="file"
+    <span
+      aria-hidden="true"
+      class="euiFilePicker__icon emotion-euiFilePicker__icon-large"
+      color="primary"
+      data-euiicon-type="importAction"
     />
-    <div
-      class="euiFilePicker__prompt"
-      id="generated-id-filePicker__prompt"
+    <span
+      class="euiFilePicker__promptText"
     >
-      <span
-        aria-hidden="true"
-        class="euiFilePicker__icon"
-        color="primary"
-        data-euiicon-type="importAction"
-      />
-      <div
-        class="euiFilePicker__promptText"
-      >
-        Select or drag and drop a file
-      </div>
-    </div>
+      Select or drag and drop a file
+    </span>
   </div>
 </div>
 `;