diff --git a/.yarn/patches/infima-npm-0.2.0-alpha.43-8d3b77b44d.patch b/.yarn/patches/infima-npm-0.2.0-alpha.43-8d3b77b44d.patch new file mode 100644 index 00000000000..31ab31f5975 --- /dev/null +++ b/.yarn/patches/infima-npm-0.2.0-alpha.43-8d3b77b44d.patch @@ -0,0 +1,599 @@ +diff --git a/.idea/.gitignore b/.idea/.gitignore +new file mode 100644 +index 0000000000000000000000000000000000000000..b58b603fea78041071d125a30db58d79b3d49217 +--- /dev/null ++++ b/.idea/.gitignore +@@ -0,0 +1,5 @@ ++# Default ignored files ++/shelf/ ++/workspace.xml ++# Editor-based HTTP Client requests ++/httpRequests/ +diff --git a/.idea/modules.xml b/.idea/modules.xml +new file mode 100644 +index 0000000000000000000000000000000000000000..d9fb14e4d06a030cba3cd105982c4f196e0718a0 +--- /dev/null ++++ b/.idea/modules.xml +@@ -0,0 +1,8 @@ ++ ++ ++ ++ ++ ++ ++ ++ +\ No newline at end of file +diff --git a/.idea/user.iml b/.idea/user.iml +new file mode 100644 +index 0000000000000000000000000000000000000000..24643cc37449b4bde54411a80b8ed61258225e34 +--- /dev/null ++++ b/.idea/user.iml +@@ -0,0 +1,12 @@ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ +\ No newline at end of file +diff --git a/.idea/workspace.xml b/.idea/workspace.xml +new file mode 100644 +index 0000000000000000000000000000000000000000..2352c65e2463e79fc46b60890a644e6bf6554faa +--- /dev/null ++++ b/.idea/workspace.xml +@@ -0,0 +1,47 @@ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ 1722330113306 ++ ++ ++ ++ ++ ++ +\ No newline at end of file +diff --git a/dist/css/default/default-rtl.css b/dist/css/default/default-rtl.css +index 77066a42e9525089e9ff4d35840be09f273720c7..20bc16c716a311dde34bb4bbaa917d9d8071a38d 100644 +--- a/dist/css/default/default-rtl.css ++++ b/dist/css/default/default-rtl.css +@@ -927,102 +927,6 @@ iframe { + padding-left: 5rem !important; + } + +-/* Content */ +- +-/** +- * Copyright (c) Facebook, Inc. and its affiliates. +- * +- * This source code is licensed under the MIT license found in the +- * LICENSE file in the root directory of this source tree. +- */ +- +-code { +- background-color: var(--ifm-code-background); +- border: 0.1rem solid rgba(0, 0, 0, 0.1); +- border-radius: var(--ifm-code-border-radius); +- font-family: var(--ifm-font-family-monospace); +- font-size: var(--ifm-code-font-size); +- padding: var(--ifm-code-padding-vertical) var(--ifm-code-padding-horizontal); +- vertical-align: middle; +-} +- +-a code { +- color: inherit; +-} +- +-pre { +- background-color: var(--ifm-pre-background); +- border-radius: var(--ifm-pre-border-radius); +- color: var(--ifm-pre-color); +- font: var(--ifm-code-font-size) / var(--ifm-pre-line-height) +- var(--ifm-font-family-monospace); +- margin: 0 0 var(--ifm-spacing-vertical); +- overflow: auto; +- padding: var(--ifm-pre-padding); +-} +- +-pre code { +- background-color: transparent; +- border: none; +- font-size: 100%; +- line-height: inherit; +- padding: 0; +- } +- +-kbd { +- background-color: var(--ifm-color-emphasis-0); +- border: 1px solid var(--ifm-color-emphasis-400); +- border-radius: 0.2rem; +- box-shadow: inset 0 -1px 0 var(--ifm-color-emphasis-400); +- color: var(--ifm-color-emphasis-800); +- font: 80% var(--ifm-font-family-monospace); +- padding: 0.15rem 0.3rem; +-} +- +-/** +- * Copyright (c) Facebook, Inc. and its affiliates. +- * +- * This source code is licensed under the MIT license found in the +- * LICENSE file in the root directory of this source tree. +- */ +- +-h1, +-h2, +-h3, +-h4, +-h5, +-h6 { +- color: var(--ifm-heading-color); +- font-family: var(--ifm-heading-font-family); +- font-weight: var(--ifm-heading-font-weight); +- line-height: var(--ifm-heading-line-height); +- margin: var(--ifm-heading-margin-top) 0 var(--ifm-heading-margin-bottom) 0; +-} +- +-h1 { +- font-size: var(--ifm-h1-font-size); +- } +- +-h2 { +- font-size: var(--ifm-h2-font-size); +- } +- +-h3 { +- font-size: var(--ifm-h3-font-size); +- } +- +-h4 { +- font-size: var(--ifm-h4-font-size); +- } +- +-h5 { +- font-size: var(--ifm-h5-font-size); +- } +- +-h6 { +- font-size: var(--ifm-h6-font-size); +- } +- + /** + * Copyright (c) Facebook, Inc. and its affiliates. + * +@@ -1131,99 +1035,6 @@ img[align='left'] { + margin-top: var(--ifm-list-item-margin); + } + +-/** +- * Copyright (c) Facebook, Inc. and its affiliates. +- * +- * This source code is licensed under the MIT license found in the +- * LICENSE file in the root directory of this source tree. +- */ +- +-/* Lists */ +- +-ul, +-ol { +- margin: 0 0 var(--ifm-list-margin); +- padding-right: var(--ifm-list-left-padding); +-} +- +-ol ol, +-ul ol { +- list-style-type: lower-roman; +-} +- +-ul ul, +-ul ol, +-ol ol, +-ol ul { +- margin: 0; +-} +- +-ul ul ol, +-ul ol ol, +-ol ul ol, +-ol ol ol { +- list-style-type: lower-alpha; +-} +- +-/** +- * Copyright (c) Facebook, Inc. and its affiliates. +- * +- * This source code is licensed under the MIT license found in the +- * LICENSE file in the root directory of this source tree. +- */ +- +-table { +- border-collapse: collapse; +- display: block; +- margin-bottom: var(--ifm-spacing-vertical); +- overflow: auto; +-} +- +-table thead tr { +- border-bottom: 2px solid var(--ifm-table-border-color); +- } +- +-table thead { +- background-color: var(--ifm-table-stripe-background); +- } +- +-table tr { +- background-color: var(--ifm-table-background); +- border-top: var(--ifm-table-border-width) solid +- var(--ifm-table-border-color); +- } +- +-table tr:nth-child(2n) { +- background-color: var(--ifm-table-stripe-background); +- } +- +-table th, +- table td { +- border: var(--ifm-table-border-width) solid var(--ifm-table-border-color); +- padding: var(--ifm-table-cell-padding); +- } +- +-table th { +- background-color: var(--ifm-table-head-background); +- color: var(--ifm-table-head-color); +- font-weight: var(--ifm-table-head-font-weight); +- } +- +-table td { +- color: var(--ifm-table-cell-color); +- } +- +-/** +- * Copyright (c) Facebook, Inc. and its affiliates. +- * +- * This source code is licensed under the MIT license found in the +- * LICENSE file in the root directory of this source tree. +- */ +- +-strong { +- font-weight: var(--ifm-font-weight-bold); +-} +- + /* Links */ + + a { +@@ -1243,42 +1054,6 @@ a:not([href]) { + text-decoration: none; + } + +-/* Paragraphs */ +- +-p { +- margin: 0 0 var(--ifm-paragraph-margin-bottom); +-} +- +-/* Blockquotes */ +- +-blockquote { +- border-right: var(--ifm-blockquote-border-left-width) solid +- var(--ifm-blockquote-border-color); +- box-shadow: var(--ifm-blockquote-shadow); +- color: var(--ifm-blockquote-color); +- font-size: var(--ifm-blockquote-font-size); +- margin: 0 0 var(--ifm-spacing-vertical); +- padding: var(--ifm-blockquote-padding-vertical) +- var(--ifm-blockquote-padding-horizontal); +-} +- +-blockquote > :first-child { +- margin-top: 0; +- } +- +-blockquote > :last-child { +- margin-bottom: 0; +- } +- +-/* Horizontal Rules */ +- +-hr { +- background-color: var(--ifm-hr-background-color); +- border: 0; +- height: var(--ifm-hr-height); +- margin: var(--ifm-hr-margin-vertical) 0; +-} +- + /* Utilities */ + + /** +diff --git a/dist/css/default/default.css b/dist/css/default/default.css +index 3ffe4021fab8b19d27bc228ee041ecdff120c1f0..5bac5312f702bf4fe5d629f6b8351c27c6c7feae 100644 +--- a/dist/css/default/default.css ++++ b/dist/css/default/default.css +@@ -927,102 +927,6 @@ iframe { + padding-right: 5rem !important; + } + +-/* Content */ +- +-/** +- * Copyright (c) Facebook, Inc. and its affiliates. +- * +- * This source code is licensed under the MIT license found in the +- * LICENSE file in the root directory of this source tree. +- */ +- +-code { +- background-color: var(--ifm-code-background); +- border: 0.1rem solid rgba(0, 0, 0, 0.1); +- border-radius: var(--ifm-code-border-radius); +- font-family: var(--ifm-font-family-monospace); +- font-size: var(--ifm-code-font-size); +- padding: var(--ifm-code-padding-vertical) var(--ifm-code-padding-horizontal); +- vertical-align: middle; +-} +- +-a code { +- color: inherit; +-} +- +-pre { +- background-color: var(--ifm-pre-background); +- border-radius: var(--ifm-pre-border-radius); +- color: var(--ifm-pre-color); +- font: var(--ifm-code-font-size) / var(--ifm-pre-line-height) +- var(--ifm-font-family-monospace); +- margin: 0 0 var(--ifm-spacing-vertical); +- overflow: auto; +- padding: var(--ifm-pre-padding); +-} +- +-pre code { +- background-color: transparent; +- border: none; +- font-size: 100%; +- line-height: inherit; +- padding: 0; +- } +- +-kbd { +- background-color: var(--ifm-color-emphasis-0); +- border: 1px solid var(--ifm-color-emphasis-400); +- border-radius: 0.2rem; +- box-shadow: inset 0 -1px 0 var(--ifm-color-emphasis-400); +- color: var(--ifm-color-emphasis-800); +- font: 80% var(--ifm-font-family-monospace); +- padding: 0.15rem 0.3rem; +-} +- +-/** +- * Copyright (c) Facebook, Inc. and its affiliates. +- * +- * This source code is licensed under the MIT license found in the +- * LICENSE file in the root directory of this source tree. +- */ +- +-h1, +-h2, +-h3, +-h4, +-h5, +-h6 { +- color: var(--ifm-heading-color); +- font-family: var(--ifm-heading-font-family); +- font-weight: var(--ifm-heading-font-weight); +- line-height: var(--ifm-heading-line-height); +- margin: var(--ifm-heading-margin-top) 0 var(--ifm-heading-margin-bottom) 0; +-} +- +-h1 { +- font-size: var(--ifm-h1-font-size); +- } +- +-h2 { +- font-size: var(--ifm-h2-font-size); +- } +- +-h3 { +- font-size: var(--ifm-h3-font-size); +- } +- +-h4 { +- font-size: var(--ifm-h4-font-size); +- } +- +-h5 { +- font-size: var(--ifm-h5-font-size); +- } +- +-h6 { +- font-size: var(--ifm-h6-font-size); +- } +- + /** + * Copyright (c) Facebook, Inc. and its affiliates. + * +@@ -1131,99 +1035,6 @@ img[align='left'] { + margin-top: var(--ifm-list-item-margin); + } + +-/** +- * Copyright (c) Facebook, Inc. and its affiliates. +- * +- * This source code is licensed under the MIT license found in the +- * LICENSE file in the root directory of this source tree. +- */ +- +-/* Lists */ +- +-ul, +-ol { +- margin: 0 0 var(--ifm-list-margin); +- padding-left: var(--ifm-list-left-padding); +-} +- +-ol ol, +-ul ol { +- list-style-type: lower-roman; +-} +- +-ul ul, +-ul ol, +-ol ol, +-ol ul { +- margin: 0; +-} +- +-ul ul ol, +-ul ol ol, +-ol ul ol, +-ol ol ol { +- list-style-type: lower-alpha; +-} +- +-/** +- * Copyright (c) Facebook, Inc. and its affiliates. +- * +- * This source code is licensed under the MIT license found in the +- * LICENSE file in the root directory of this source tree. +- */ +- +-table { +- border-collapse: collapse; +- display: block; +- margin-bottom: var(--ifm-spacing-vertical); +- overflow: auto; +-} +- +-table thead tr { +- border-bottom: 2px solid var(--ifm-table-border-color); +- } +- +-table thead { +- background-color: var(--ifm-table-stripe-background); +- } +- +-table tr { +- background-color: var(--ifm-table-background); +- border-top: var(--ifm-table-border-width) solid +- var(--ifm-table-border-color); +- } +- +-table tr:nth-child(2n) { +- background-color: var(--ifm-table-stripe-background); +- } +- +-table th, +- table td { +- border: var(--ifm-table-border-width) solid var(--ifm-table-border-color); +- padding: var(--ifm-table-cell-padding); +- } +- +-table th { +- background-color: var(--ifm-table-head-background); +- color: var(--ifm-table-head-color); +- font-weight: var(--ifm-table-head-font-weight); +- } +- +-table td { +- color: var(--ifm-table-cell-color); +- } +- +-/** +- * Copyright (c) Facebook, Inc. and its affiliates. +- * +- * This source code is licensed under the MIT license found in the +- * LICENSE file in the root directory of this source tree. +- */ +- +-strong { +- font-weight: var(--ifm-font-weight-bold); +-} +- + /* Links */ + + a { +@@ -1243,42 +1054,6 @@ a:not([href]) { + text-decoration: none; + } + +-/* Paragraphs */ +- +-p { +- margin: 0 0 var(--ifm-paragraph-margin-bottom); +-} +- +-/* Blockquotes */ +- +-blockquote { +- border-left: var(--ifm-blockquote-border-left-width) solid +- var(--ifm-blockquote-border-color); +- box-shadow: var(--ifm-blockquote-shadow); +- color: var(--ifm-blockquote-color); +- font-size: var(--ifm-blockquote-font-size); +- margin: 0 0 var(--ifm-spacing-vertical); +- padding: var(--ifm-blockquote-padding-vertical) +- var(--ifm-blockquote-padding-horizontal); +-} +- +-blockquote > :first-child { +- margin-top: 0; +- } +- +-blockquote > :last-child { +- margin-bottom: 0; +- } +- +-/* Horizontal Rules */ +- +-hr { +- background-color: var(--ifm-hr-background-color); +- border: 0; +- height: var(--ifm-hr-height); +- margin: var(--ifm-hr-margin-vertical) 0; +-} +- + /* Utilities */ + + /** diff --git a/package.json b/package.json index 0810473c434..5dbceed52ec 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,8 @@ "react-focus-lock": "2.9.5", "@babel/core": "^7.21.8", "jsdom": "24.1.0", - "@types/jsdom@npm:^20.0.0": "patch:@types/jsdom@npm%3A20.0.1#~/.yarn/patches/@types-jsdom-npm-20.0.1-5bb899e006.patch" + "@types/jsdom@npm:^20.0.0": "patch:@types/jsdom@npm%3A20.0.1#~/.yarn/patches/@types-jsdom-npm-20.0.1-5bb899e006.patch", + "infima@npm:0.2.0-alpha.43": "patch:infima@npm%3A0.2.0-alpha.43#~/.yarn/patches/infima-npm-0.2.0-alpha.43-8d3b77b44d.patch" }, "packageManager": "yarn@4.2.2" } diff --git a/packages/docusaurus-theme/src/components/prop_table/extended_types.tsx b/packages/docusaurus-theme/src/components/prop_table/extended_types.tsx new file mode 100644 index 00000000000..a52c1102d6e --- /dev/null +++ b/packages/docusaurus-theme/src/components/prop_table/extended_types.tsx @@ -0,0 +1,43 @@ +import { Fragment, useMemo } from 'react'; +import { EuiLink, EuiText } from '@elastic/eui'; +import { ProcessedComponent } from '@elastic/eui-docgen'; +import { extendedTypesInfo } from './extended_types_info'; + +export interface PropTableExtendedTypesProps { + definition: ProcessedComponent; +} + +export const PropTableExtendedTypes = ({ definition }: PropTableExtendedTypesProps) => { + const extendedTypes = useMemo(() => { + const types = definition.extends.filter( + (type) => extendedTypesInfo.hasOwnProperty(type.displayName), + ); + + if (types.every((type) => type.displayName.indexOf('HTMLAttributes') > -1)) { + const htmlAttributesIndex = types.findIndex((type) => type.displayName === 'HTMLAttributes'); + if (htmlAttributesIndex > -1 && types.length > 1) { + types.splice(htmlAttributesIndex, 1); + } + } + + return types; + }, [definition.extends]); + + if (!extendedTypes.length) { + return null; + } + + return ( + + Extends{' '} + {extendedTypes.map((type, index) => ( + + + {type.displayName} + + {extendedTypes.length - 1 > index && ', '} + + ))} + + ); +}; diff --git a/packages/docusaurus-theme/src/components/prop_table/extended_types_info.ts b/packages/docusaurus-theme/src/components/prop_table/extended_types_info.ts new file mode 100644 index 00000000000..694b95a98c7 --- /dev/null +++ b/packages/docusaurus-theme/src/components/prop_table/extended_types_info.ts @@ -0,0 +1,27 @@ +export const extendedTypesInfo = { + // HTMLAttributes is removed from display if any of the following elements also exist + HTMLAttributes: { + name: 'HTMLElement', + url: 'https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement', + }, + SelectHTMLAttributes: { + name: 'HTMLSelectElement', + url: 'https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement', + }, + TextareaHTMLAttributes: { + name: 'HTMLTextAreaElement', + url: 'https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement', + }, + InputHTMLAttributes: { + name: 'HTMLInputElement', + url: 'https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement', + }, + AnchorHTMLAttributes: { + name: 'HTMLAnchorElement', + url: 'https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement', + }, + ButtonHTMLAttributes: { + name: 'HTMLButtonElement', + url: 'https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement', + }, +}; diff --git a/packages/docusaurus-theme/src/components/prop_table/prop_table.tsx b/packages/docusaurus-theme/src/components/prop_table/prop_table.tsx index d8b73504d80..9c83d5b23b3 100644 --- a/packages/docusaurus-theme/src/components/prop_table/prop_table.tsx +++ b/packages/docusaurus-theme/src/components/prop_table/prop_table.tsx @@ -1,18 +1,86 @@ -import { EuiBasicTable, EuiMarkdownFormat, EuiBasicTableColumn, EuiTextColor, EuiCode } from '@elastic/eui'; +import { + EuiBasicTable, + EuiMarkdownFormat, + EuiBasicTableColumn, + EuiTextColor, + EuiFlexGroup, + EuiCode, + UseEuiTheme, + EuiTitle, + useEuiMemoizedStyles, EuiLink, +} from '@elastic/eui'; import { ProcessedComponent, ProcessedComponentProp } from '@elastic/eui-docgen'; -import { useMemo } from 'react'; +import { useCallback, useMemo } from 'react'; +import { css } from '@emotion/react'; +import { PropTableExtendedTypes } from './extended_types'; export interface PropTableProps { definition: ProcessedComponent; - propHeadingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; + headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; } +const getPropId = (prop: ProcessedComponentProp, componentName: string) => ( + `${encodeURIComponent(componentName)}-prop-${prop.name}` +); + +const getPropTableStyles = ({ euiTheme }: UseEuiTheme) => ({ + propTable: css` + margin-block: ${euiTheme.size.xl}; + `, + header: css` + // Increased specificity is needed here to override default + // content heading styles + && h1, + && h2, + && h3, + && h4, + && h5, + && h6 { + margin-block: 0; + } + `, + table: css` + vertical-align: top; + `, + propName: css` + font-family: ${euiTheme.font.familyCode}; + font-weight: ${euiTheme.font.weight.semiBold}; + `, + description: css` + p:first-child { + margin-block-start: 0; + } + `, + required: css` + font-family: ${euiTheme.font.familyCode}; + color: ${euiTheme.colors.dangerText}; + `, + type: css` + font-weight: ${euiTheme.font.weight.semiBold}; + `, + tableNameLink: css` + display: none; + margin-inline-start: ${euiTheme.size.xs}; + `, + tableRow: css` + scroll-margin-block-start: calc(var(--ifm-navbar-height) + 0.5rem); + + &:hover .propLink { + display: inline-block; + } + `, +}); + export const PropTable = ({ definition, - propHeadingLevel: PropHeadingLevel = 'h3', + headingLevel: HeadingLevel = 'h3', }: PropTableProps) => { + const styles = useEuiMemoizedStyles(getPropTableStyles); + const tableItems = useMemo>( - () => Object.values(definition.props), + () => Object.values(definition.props).sort( + (a, b) => +b.isRequired - +a.isRequired + ), [definition.props], ); @@ -21,53 +89,86 @@ export const PropTable = ({ { field: 'name', name: 'Prop', - render(value: ProcessedComponentProp['name']) { + width: "150", + render(value: ProcessedComponentProp['name'], prop: ProcessedComponentProp) { return ( - {value} + + {value} + + # + + ); }, }, { field: 'description', - name: 'Description and Type', + name: 'Description and type', render(value: ProcessedComponentProp['description'], prop: ProcessedComponentProp) { return ( -
+ {value?.trim() && ( - {value} + {value} )} {prop.type && ( - <> - Type: {prop.type.name} - + + Type: {' '} + + {prop.type.raw || prop.type.name} + + )} -
+ ); } }, { field: 'defaultValue', name: 'Default value', + width: "120", render(value: ProcessedComponentProp['defaultValue'], prop: ProcessedComponentProp) { - if (prop.isRequired) { - return Required + if (prop.isRequired && !value?.trim().length) { + return Required } - const finalValue = (!!value && typeof value === 'object' && - (value as object).hasOwnProperty('value')) - ? (value as { value: string; }).value - : ''; - - return !!finalValue && {finalValue}; + return value && {value}; }, } ]), [], ); + const rowProps = useCallback((item: ProcessedComponentProp) => ({ + id: getPropId(item, definition.displayName), + css: styles.tableRow, + }), [definition.displayName]); + return ( -
- -
+ +
+ + {definition.displayName} + + +
+ + ); }; diff --git a/packages/docusaurus-theme/src/theme/DocRoot/Layout/index.tsx b/packages/docusaurus-theme/src/theme/DocRoot/Layout/index.tsx index 36966c1efdc..4529f8a2a6e 100644 --- a/packages/docusaurus-theme/src/theme/DocRoot/Layout/index.tsx +++ b/packages/docusaurus-theme/src/theme/DocRoot/Layout/index.tsx @@ -1,6 +1,7 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { css } from '@emotion/react'; import { useDocsSidebar } from '@docusaurus/theme-common/internal'; +import useIsBrowser from '@docusaurus/useIsBrowser'; import BackToTopButton from '@theme-original/BackToTopButton'; import type { Props } from '@theme-original/DocRoot/Layout'; import DocRootLayoutSidebar from '@theme-original/DocRoot/Layout/Sidebar'; @@ -20,8 +21,29 @@ const styles = { }; export default function DocRootLayout({ children }: Props): JSX.Element { + const isBrowser = useIsBrowser(); const sidebar = useDocsSidebar(); const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false); + + // Replicate browser hash scroll behavior to trigger it after the MDX content + // is rendered. Timeout = 0 should do the job here just fine as the effect + // will get executed at next render cycle when all elements are (hopefully) + // already in the DOM. + useEffect(() => { + if (!isBrowser) { + return; + } + + if (window.location.hash) { + setTimeout(() => { + const element = document.getElementById( + window.location.hash.substring(1), + ); + element?.scrollIntoView(true); + }, 0); + } + }, [isBrowser]); + return (
diff --git a/packages/eui-docgen/src/process_component.ts b/packages/eui-docgen/src/process_component.ts index cb986795430..0879e17b6c2 100644 --- a/packages/eui-docgen/src/process_component.ts +++ b/packages/eui-docgen/src/process_component.ts @@ -50,7 +50,7 @@ export interface ProcessedComponent { /** * Component props */ - props: Record; + props: Record; /** * A list of all types the props type is extending from */ diff --git a/packages/website/README.md b/packages/website/README.md index a2736e61320..a474577b61b 100644 --- a/packages/website/README.md +++ b/packages/website/README.md @@ -27,7 +27,7 @@ yarn Before you run scripts, it's mandatory to build all local dependency packages: ```shell -yarn workspaces foreach -Rpt --from @elastic/eui-website run build +yarn workspaces foreach -Rpti --from @elastic/eui-website run build ``` ### Running the development server diff --git a/packages/website/docs/docgen_demo.mdx b/packages/website/docs/docgen_demo.mdx index 2870647439a..f5b366ca20c 100644 --- a/packages/website/docs/docgen_demo.mdx +++ b/packages/website/docs/docgen_demo.mdx @@ -2,6 +2,8 @@ import ButtonDocgen from '@elastic/eui-docgen/dist/components/button/button.json'; -## EuiButton props +import BasicTableDocgen from '@elastic/eui-docgen/dist/components/basic_table/basic_table.json'; + + diff --git a/yarn.lock b/yarn.lock index 60c9ede655e..6e1e23d507f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -22082,6 +22082,13 @@ __metadata: languageName: node linkType: hard +"infima@patch:infima@npm%3A0.2.0-alpha.43#~/.yarn/patches/infima-npm-0.2.0-alpha.43-8d3b77b44d.patch": + version: 0.2.0-alpha.43 + resolution: "infima@patch:infima@npm%3A0.2.0-alpha.43#~/.yarn/patches/infima-npm-0.2.0-alpha.43-8d3b77b44d.patch::version=0.2.0-alpha.43&hash=4d36f6" + checksum: 10c0/e1f7599330df8fc7d3eca0605eda161c31891dc2260247b852eee031f2f005d392e50041f307a5910188e7528beacc7a2be9bfa434516ec5d095d338f1cd69ad + languageName: node + linkType: hard + "inflight@npm:^1.0.4": version: 1.0.6 resolution: "inflight@npm:1.0.6"