[EuiProvider] Add new componentDefaults configuration (#6995)

Co-authored-by: y1j2x34 <[email protected]> Co-authored-by: Tomasz Kajtoch <[email protected]> Co-authored-by: Tomasz Kajtoch <[email protected]>
elastic · Aug 4, 2023 · e9f4483 · e9f4483
1 parent b03ca9f
commit e9f4483
Show file tree

Hide file tree

Showing 76 changed files with 1,776 additions and 2,265 deletions.
diff --git a/src-docs/src/components/guide_page/_guide_page.scss b/src-docs/src/components/guide_page/_guide_page.scss
@@ -42,12 +42,9 @@
   }
 
   .guideSideNav__itemBadge {
-    margin-inline: $euiSizeXS;
-  }
-
-  // Shift the margin on the badge when selected and the dropdown arrow no longer shows
-  .euiSideNavItemButton-isSelected .guideSideNav__itemBadge {
-    margin-right: 0;
+    margin-inline-start: $euiSizeXS;
+    // Decrease distance from right side to allow for longer titles and sub-items
+    margin-inline-end: -$euiSizeS;
   }
 }
 

diff --git a/src-docs/src/components/guide_page/guide_page_chrome.js b/src-docs/src/components/guide_page/guide_page_chrome.js
@@ -41,6 +41,24 @@ export class GuidePageChrome extends Component {
     });
   };
 
+  renderSideNavBadge = ({ isBeta, isNew }) => {
+    if (isBeta) {
+      return (
+        <EuiBadge color="warning" className="guideSideNav__itemBadge">
+          BETA
+        </EuiBadge>
+      );
+    }
+    if (isNew) {
+      return (
+        <EuiBadge color="accent" className="guideSideNav__itemBadge">
+          NEW
+        </EuiBadge>
+      );
+    }
+    return undefined;
+  };
+
   scrollNavSectionIntoView = () => {
     // wait a bit for react to blow away and re-create the DOM
     // then scroll the selected nav section into view
@@ -80,7 +98,7 @@ export class GuidePageChrome extends Component {
       return;
     }
 
-    return subSectionsWithTitles.map(({ title, sections }) => {
+    return subSectionsWithTitles.map(({ title, isBeta, isNew, sections }) => {
       const id = slugify(title);
 
       const subSectionHref = `${href}/${id}`;
@@ -115,6 +133,7 @@ export class GuidePageChrome extends Component {
           : '',
         items: subItems,
         forceOpen: !!searchTerm || isCurrentlyOpenSubSection,
+        icon: this.renderSideNavBadge({ isBeta, isNew }),
       };
     });
   };
@@ -146,16 +165,6 @@ export class GuidePageChrome extends Component {
 
         const href = `#/${path}`;
 
-        const badge = isBeta ? (
-          <EuiBadge color="warning" className="guideSideNav__itemBadge">
-            BETA
-          </EuiBadge>
-        ) : isNew ? (
-          <EuiBadge color="accent" className="guideSideNav__itemBadge">
-            NEW
-          </EuiBadge>
-        ) : undefined;
-
         let visibleName = name;
         if (searchTerm) {
           visibleName = (
@@ -176,7 +185,7 @@ export class GuidePageChrome extends Component {
           isSelected: item.path === this.props.currentRoute.path,
           forceOpen: !!(searchTerm && hasMatchingSubItem),
           className: 'guideSideNav__item',
-          icon: badge,
+          icon: this.renderSideNavBadge({ isBeta, isNew }),
         };
       });
 

diff --git a/src-docs/src/components/guide_section/guide_section.tsx b/src-docs/src/components/guide_section/guide_section.tsx
@@ -35,6 +35,8 @@ export interface GuideSectionProps
     > {
   id?: string;
   title?: string;
+  isBeta?: boolean;
+  isNew?: boolean;
   text?: ReactNode;
   source?: any[];
   demo?: ReactNode;
@@ -83,6 +85,8 @@ export const GuideSectionCodeTypesMap = {
 export const GuideSection: FunctionComponent<GuideSectionProps> = ({
   id,
   title,
+  isBeta,
+  isNew,
   text,
   demo,
   fullScreen,
@@ -210,7 +214,13 @@ export const GuideSection: FunctionComponent<GuideSectionProps> = ({
       className={classNames('guideSection', className)}
     >
       <EuiSpacer size={(color || title) && isLargeBreakpoint ? 'xxl' : 'xs'} />
-      <GuideSectionExampleText title={title} id={id} wrapText={wrapText}>
+      <GuideSectionExampleText
+        title={title}
+        id={id}
+        isBeta={isBeta}
+        isNew={isNew}
+        wrapText={wrapText}
+      >
         {text}
       </GuideSectionExampleText>
 

diff --git a/src-docs/src/components/guide_section/guide_section_parts/guide_section_text.tsx b/src-docs/src/components/guide_section/guide_section_parts/guide_section_text.tsx
@@ -1,27 +1,40 @@
 import React, { FunctionComponent, ReactNode } from 'react';
-import { EuiSpacer } from '../../../../../src/components/spacer';
-import { EuiTitle } from '../../../../../src/components/title';
-import { EuiText } from '../../../../../src/components/text';
+
+import {
+  EuiSpacer,
+  EuiTitle,
+  EuiText,
+  EuiBetaBadge,
+} from '../../../../../src/components';
 
 export const LANGUAGES = ['javascript', 'html'] as const;
 
 type GuideSectionExampleText = {
   title?: ReactNode;
   id?: string;
+  isBeta?: boolean;
+  isNew?: boolean;
   children?: ReactNode;
   wrapText?: boolean;
 };
 
 export const GuideSectionExampleText: FunctionComponent<
   GuideSectionExampleText
-> = ({ title, id, children, wrapText = true }) => {
+> = ({ title, id, isBeta, isNew, children, wrapText = true }) => {
   let titleNode;
 
   if (title) {
+    const badge = (isBeta || isNew) && (
+      <EuiBetaBadge label={isBeta ? 'Beta' : 'New'} color="accent" size="s" />
+    );
+
     titleNode = (
       <>
         <EuiTitle>
-          <h2 id={id}>{title}</h2>
+          <h2 id={id}>
+            {title}
+            {badge && <>&emsp;{badge}</>}
+          </h2>
         </EuiTitle>
         <EuiSpacer size="m" />
       </>

diff --git a/src-docs/src/views/datagrid/_snippets.tsx b/src-docs/src/views/datagrid/_snippets.tsx
@@ -69,8 +69,8 @@ renderCustomDataGridBody={({ visibleColumns, visibleRowData, Cell }) => (
 )}`,
   pagination: `pagination={{
   pageIndex: 1,
-  pageSize: 100,
-  pageSizeOptions: [50, 100, 200],
+  pageSize: 100, // If not specified, defaults to EuiTablePagination.itemsPerPage
+  pageSizeOptions: [50, 100, 200], // If not specified, defaults to EuiTablePagination.itemsPerPageOptions
   onChangePage: () => {},
   onChangeItemsPerPage: () => {},
 }}`,

diff --git a/src-docs/src/views/datagrid/advanced/custom_renderer.tsx b/src-docs/src/views/datagrid/advanced/custom_renderer.tsx
@@ -168,7 +168,7 @@ export default () => {
   );
 
   // Pagination
-  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
+  const [pagination, setPagination] = useState({ pageIndex: 0 });
   const onChangePage = useCallback<EuiDataGridPaginationProps['onChangePage']>(
     (pageIndex) => {
       setPagination((pagination) => ({ ...pagination, pageIndex }));
@@ -294,7 +294,6 @@ export default () => {
         inMemory={{ level: 'sorting' }}
         pagination={{
           ...pagination,
-          pageSizeOptions: [10, 25, 50],
           onChangePage: onChangePage,
           onChangeItemsPerPage: onChangePageSize,
         }}

diff --git a/src-docs/src/views/datagrid/advanced/datagrid_memory_example.js b/src-docs/src/views/datagrid/advanced/datagrid_memory_example.js
@@ -23,7 +23,6 @@ const inMemorySortingDataGridSource = require('!!raw-loader!./in_memory_sorting'
 
 import {
   EuiDataGridColumn,
-  EuiDataGridPaginationProps,
   EuiDataGridSorting,
   EuiDataGridInMemory,
   EuiDataGridStyle,
@@ -32,6 +31,7 @@ import {
   EuiDataGridCellValueElementProps,
   EuiDataGridSchemaDetector,
 } from '!!prop-loader!../../../../../src/components/datagrid/data_grid_types';
+import { EuiDataGridPaginationProps } from '../basics/_props';
 
 export const DataGridMemoryExample = {
   sections: [

diff --git a/src-docs/src/views/datagrid/advanced/in_memory.js b/src-docs/src/views/datagrid/advanced/in_memory.js
@@ -130,7 +130,6 @@ export default () => {
       sorting={{ columns: sortingColumns, onSort }}
       pagination={{
         ...pagination,
-        pageSizeOptions: [10, 50, 100],
         onChangeItemsPerPage: onChangeItemsPerPage,
         onChangePage: onChangePage,
       }}

diff --git a/src-docs/src/views/datagrid/advanced/in_memory_enhancements.js b/src-docs/src/views/datagrid/advanced/in_memory_enhancements.js
@@ -131,7 +131,6 @@ export default () => {
         sorting={{ columns: sortingColumns, onSort }}
         pagination={{
           ...pagination,
-          pageSizeOptions: [10, 50, 100],
           onChangeItemsPerPage: onChangeItemsPerPage,
           onChangePage: onChangePage,
         }}

diff --git a/src-docs/src/views/datagrid/advanced/in_memory_pagination.js b/src-docs/src/views/datagrid/advanced/in_memory_pagination.js
@@ -52,7 +52,7 @@ for (let i = 1; i < 100; i++) {
 
 export default () => {
   // Pagination
-  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
+  const [pagination, setPagination] = useState({ pageIndex: 0 });
   const onChangeItemsPerPage = useCallback(
     (pageSize) =>
       setPagination((pagination) => ({
@@ -115,7 +115,6 @@ export default () => {
       sorting={{ columns: sortingColumns, onSort }}
       pagination={{
         ...pagination,
-        pageSizeOptions: [10, 50, 0],
         onChangeItemsPerPage: onChangeItemsPerPage,
         onChangePage: onChangePage,
       }}

diff --git a/src-docs/src/views/datagrid/advanced/in_memory_sorting.js b/src-docs/src/views/datagrid/advanced/in_memory_sorting.js
@@ -52,7 +52,7 @@ for (let i = 1; i < 100; i++) {
 
 export default () => {
   // Pagination
-  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
+  const [pagination, setPagination] = useState({ pageIndex: 0 });
   const onChangeItemsPerPage = useCallback(
     (pageSize) =>
       setPagination((pagination) => ({
@@ -101,7 +101,6 @@ export default () => {
       sorting={{ columns: sortingColumns, onSort }}
       pagination={{
         ...pagination,
-        pageSizeOptions: [10, 50, 100],
         onChangeItemsPerPage: onChangeItemsPerPage,
         onChangePage: onChangePage,
       }}

diff --git a/src-docs/src/views/datagrid/advanced/ref.tsx b/src-docs/src/views/datagrid/advanced/ref.tsx
@@ -111,7 +111,7 @@ export default () => {
   );
 
   // Pagination
-  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 25 });
+  const [pagination, setPagination] = useState({ pageIndex: 0 });
   const onChangePage = useCallback<EuiDataGridPaginationProps['onChangePage']>(
     (pageIndex) => {
       setPagination((pagination) => ({ ...pagination, pageIndex }));
@@ -224,7 +224,6 @@ export default () => {
         }
         pagination={{
           ...pagination,
-          pageSizeOptions: [25, 50],
           onChangePage: onChangePage,
           onChangeItemsPerPage: onChangePageSize,
         }}

diff --git a/src-docs/src/views/datagrid/basics/_props.tsx b/src-docs/src/views/datagrid/basics/_props.tsx
@@ -1,5 +1,8 @@
-import React from 'react';
-import { EuiDataGrid } from '../../../../../src/components';
+import React, { FunctionComponent } from 'react';
+import {
+  EuiDataGrid,
+  EuiDataGridPaginationProps as _EuiDataGridPaginationProps,
+} from '../../../../../src/components';
 
 import { DataGridPropsTable } from '../_props_table';
 import { gridSnippets } from '../_snippets';
@@ -41,3 +44,8 @@ export const DataGridTopProps = () => {
     />
   );
 };
+
+// Loading `EuiDataGridPaginationProps` via !prop-loader doesn't correctly inherit @defaults
+export const EuiDataGridPaginationProps: FunctionComponent<
+  _EuiDataGridPaginationProps
+> = () => <div />;
diff --git a/src-docs/src/views/datagrid/basics/container.js b/src-docs/src/views/datagrid/basics/container.js
@@ -34,7 +34,7 @@ for (let i = 1; i < 20; i++) {
 }
 
 export default () => {
-  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
+  const [pagination, setPagination] = useState({ pageIndex: 0 });
 
   const [visibleColumns, setVisibleColumns] = useState(
     columns.map(({ id }) => id)
@@ -74,7 +74,6 @@ export default () => {
         renderCellValue={({ rowIndex, columnId }) => data[rowIndex][columnId]}
         pagination={{
           ...pagination,
-          pageSizeOptions: [5, 10, 25],
           onChangeItemsPerPage: setPageSize,
           onChangePage: setPageIndex,
         }}

diff --git a/src-docs/src/views/datagrid/basics/datagrid.js b/src-docs/src/views/datagrid/basics/datagrid.js
@@ -372,7 +372,7 @@ const trailingControlColumns = [
 
 export default () => {
   // Pagination
-  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
+  const [pagination, setPagination] = useState({ pageIndex: 0 });
   const onChangeItemsPerPage = useCallback(
     (pageSize) =>
       setPagination((pagination) => ({
@@ -419,7 +419,6 @@ export default () => {
         sorting={{ columns: sortingColumns, onSort }}
         pagination={{
           ...pagination,
-          pageSizeOptions: [10, 50, 100],
           onChangeItemsPerPage: onChangeItemsPerPage,
           onChangePage: onChangePage,
         }}

diff --git a/src-docs/src/views/datagrid/basics/datagrid_example.js b/src-docs/src/views/datagrid/basics/datagrid_example.js
@@ -12,7 +12,7 @@ import {
 } from '../../../../../src/components';
 
 import DataGrid from './datagrid';
-import { DataGridTopProps } from './_props';
+import { DataGridTopProps, EuiDataGridPaginationProps } from './_props';
 const dataGridSource = require('!!raw-loader!./datagrid');
 
 import DataGridContainer from './container';
@@ -28,7 +28,6 @@ const dataGridVirtualizationConstrainedSource = require('!!raw-loader!./virtuali
 import {
   EuiDataGridColumn,
   EuiDataGridColumnCellAction,
-  EuiDataGridPaginationProps,
   EuiDataGridSorting,
   EuiDataGridInMemory,
   EuiDataGridStyle,

diff --git a/src-docs/src/views/datagrid/basics/flex.js b/src-docs/src/views/datagrid/basics/flex.js
@@ -40,7 +40,7 @@ for (let i = 1; i < 20; i++) {
 }
 
 export default () => {
-  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
+  const [pagination, setPagination] = useState({ pageIndex: 0 });
 
   const [visibleColumns, setVisibleColumns] = useState(
     columns.map(({ id }) => id)
@@ -89,7 +89,6 @@ export default () => {
             }
             pagination={{
               ...pagination,
-              pageSizeOptions: [5, 10, 25],
               onChangeItemsPerPage: setPageSize,
               onChangePage: setPageIndex,
             }}

diff --git a/src-docs/src/views/datagrid/cells_popovers/column_cell_actions.js b/src-docs/src/views/datagrid/cells_popovers/column_cell_actions.js
@@ -120,7 +120,7 @@ for (let i = 1; i < 5; i++) {
 }
 
 export default () => {
-  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
+  const [pagination, setPagination] = useState({ pageIndex: 0 });
 
   const [visibleColumns, setVisibleColumns] = useState(
     columns.map(({ id }) => id)
@@ -153,7 +153,6 @@ export default () => {
       renderCellValue={({ rowIndex, columnId }) => data[rowIndex][columnId]}
       pagination={{
         ...pagination,
-        pageSizeOptions: [5, 10, 25],
         onChangeItemsPerPage: setPageSize,
         onChangePage: setPageIndex,
       }}

diff --git a/src-docs/src/views/datagrid/schema_columns/column_actions.js b/src-docs/src/views/datagrid/schema_columns/column_actions.js
@@ -69,7 +69,7 @@ for (let i = 1; i < 5; i++) {
 }
 
 export default () => {
-  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 5 });
+  const [pagination, setPagination] = useState({ pageIndex: 0 });
 
   const [visibleColumns, setVisibleColumns] = useState(
     columns.map(({ id }) => id)
@@ -102,7 +102,6 @@ export default () => {
       renderCellValue={({ rowIndex, columnId }) => data[rowIndex][columnId]}
       pagination={{
         ...pagination,
-        pageSizeOptions: [5, 10, 25],
         onChangeItemsPerPage: setPageSize,
         onChangePage: setPageIndex,
       }}