changed EuiFlexGrid to ul tag and fixed sizing issue of link items

src-docs/src/views/tables/props/props.tsx

@@ -6,9 +6,9 @@ import { SearchFilterConfig } from '../../../../../src/components/search_bar/fil
 // Simulating the `item` generic
 type T = {};
 
-export const DefaultItemActionProps: FunctionComponent<DefaultItemAction<
-  T
->> = () => <div />;
+export const DefaultItemActionProps: FunctionComponent<
+  DefaultItemAction<T>
+> = () => <div />;
 
 export const SearchProps: FunctionComponent<Search> = () => <div />;
 

src/components/color_picker/color_palette_picker/color_palette_picker.tsx

@@ -106,9 +106,9 @@ export type EuiColorPalettePickerProps<T extends string> = CommonProps &
     palettes: EuiColorPalettePickerPaletteProps[];
   };
 
-export const EuiColorPalettePicker: FunctionComponent<EuiColorPalettePickerProps<
-  string
->> = ({
+export const EuiColorPalettePicker: FunctionComponent<
+  EuiColorPalettePickerProps<string>
+> = ({
   className,
   compressed = false,
   disabled,

src/components/datagrid/data_grid.test.tsx

@@ -60,9 +60,11 @@ function extractGridData(datagrid: ReactWrapper) {
 }
 
 function extractColumnWidths(datagrid: ReactWrapper) {
-  return (findTestSubject(datagrid, 'dataGridHeaderCell', '|=') as ReactWrapper<
-    any
-  >).reduce((widths: { [key: string]: number }, cell) => {
+  return (findTestSubject(
+    datagrid,
+    'dataGridHeaderCell',
+    '|='
+  ) as ReactWrapper<any>).reduce((widths: { [key: string]: number }, cell) => {
     const [, columnId] = cell
       .props()
       ['data-test-subj'].match(/dataGridHeaderCell-(.*)/);

src/components/datagrid/data_grid_cell.tsx

@@ -116,9 +116,7 @@ const EuiDataGridCellContent: FunctionComponent<
   const { renderCellValue, ...rest } = props;
 
   // React is more permissible than the TS types indicate
-  const CellElement = renderCellValue as JSXElementConstructor<
-    EuiDataGridCellValueElementProps
-  >;
+  const CellElement = renderCellValue as JSXElementConstructor<EuiDataGridCellValueElementProps>;
 
   return (
     <CellElement isDetails={false} data-test-subj="cell-content" {...rest} />

src/components/datagrid/data_grid_cell_buttons.tsx

@@ -76,9 +76,7 @@ export const EuiDataGridCellButtons = ({
       ? column.cellActions.map(
           (Action: EuiDataGridColumnCellAction, idx: number) => {
             // React is more permissible than the TS types indicate
-            const CellButtonElement = Action as JSXElementConstructor<
-              EuiDataGridColumnCellActionProps
-            >;
+            const CellButtonElement = Action as JSXElementConstructor<EuiDataGridColumnCellActionProps>;
             return (
               <CellButtonElement
                 key={idx}

src/components/datagrid/data_grid_cell_popover.tsx

@@ -58,9 +58,7 @@ export function EuiDataGridCellPopover({
   rowIndex,
   updateFocus,
 }: EuiDataGridCellPopoverProps) {
-  const CellElement = renderCellValue as JSXElementConstructor<
-    EuiDataGridCellValueElementProps
-  >;
+  const CellElement = renderCellValue as JSXElementConstructor<EuiDataGridCellValueElementProps>;
   return (
     <EuiPopover
       hasArrow={false}
@@ -92,9 +90,7 @@ export function EuiDataGridCellPopover({
               <EuiFlexGroup gutterSize="s">
                 {column.cellActions.map(
                   (Action: EuiDataGridColumnCellAction, idx: number) => {
-                    const CellButtonElement = Action as JSXElementConstructor<
-                      EuiDataGridColumnCellActionProps
-                    >;
+                    const CellButtonElement = Action as JSXElementConstructor<EuiDataGridColumnCellActionProps>;
                     return (
                       <EuiFlexItem key={idx}>
                         <CellButtonElement

src/components/datagrid/data_grid_inmemory_renderer.tsx

@@ -62,9 +62,7 @@ export const EuiDataGridInMemoryRenderer: FunctionComponent<EuiDataGridInMemoryR
   const [documentFragment] = useState(() => document.createDocumentFragment());
 
   const cells = useMemo(() => {
-    const CellElement = renderCellValue as JSXElementConstructor<
-      EuiDataGridCellValueElementProps
-    >;
+    const CellElement = renderCellValue as JSXElementConstructor<EuiDataGridCellValueElementProps>;
 
     const cells = [];
 

src/components/datagrid/data_grid_types.ts

@@ -313,9 +313,7 @@ export interface EuiDataGridPopoverContentProps {
    */
   cellContentsElement: HTMLDivElement;
 }
-export type EuiDataGridPopoverContent = ComponentType<
-  EuiDataGridPopoverContentProps
->;
+export type EuiDataGridPopoverContent = ComponentType<EuiDataGridPopoverContentProps>;
 export interface EuiDataGridPopoverContents {
   [key: string]: EuiDataGridPopoverContent;
 }

src/components/date_picker/super_date_picker/quick_select_popover/recently_used.tsx

@@ -21,7 +21,7 @@ import React, { FunctionComponent } from 'react';
 import { prettyDuration } from '../pretty_duration';
 
 import { EuiI18n } from '../../../i18n';
-import { EuiFlexGrid, EuiFlexItem } from '../../../flex';
+import { EuiFlexItem } from '../../../flex';
 import { EuiTitle } from '../../../title';
 import { EuiSpacer } from '../../../spacer';
 import { EuiLink } from '../../../link';
@@ -55,7 +55,11 @@ export const EuiRecentlyUsed: FunctionComponent<EuiRecentlyUsedProps> = ({
       applyTime({ start, end });
     };
     return (
-      <EuiFlexItem component="li" grow={false} key={`${start}-${end}`}>
+      <EuiFlexItem
+        className="euiCommonlyUsedTimeRanges__item"
+        component="li"
+        grow={false}
+        key={`${start}-${end}`}>
         <EuiLink onClick={applyRecentlyUsed}>
           {prettyDuration(start, end, commonlyUsedRanges, dateFormat)}
         </EuiLink>
@@ -66,24 +70,16 @@ export const EuiRecentlyUsed: FunctionComponent<EuiRecentlyUsedProps> = ({
   return (
     <fieldset>
       <EuiTitle size="xxxs">
-      <legend id={legendId} aria-label="Recently used date ranges">
+        <legend id={legendId}>
           <EuiI18n
-            token="euiRecentlyUsedDateRanges.legend"
+            token="euiRecentlyUsed.legend"
             default="Recently used date ranges"
           />
         </legend>
       </EuiTitle>
       <EuiSpacer size="s" />
       <div className="euiQuickSelectPopover__section">
-        <EuiFlexGrid
-            aria-labelledby={legendId}
-            gutterSize="s"
-            columns={2}
-            direction="column"
-            responsive={false}
-            component="ul">
-            {links}
-          </EuiFlexGrid>
+        <ul>{links}</ul>
       </div>
       <EuiHorizontalRule margin="s" />
     </fieldset>

src/components/expression/expression.tsx

@@ -107,10 +107,9 @@ type Buttonlike = EuiExpressionProps &
 type Spanlike = EuiExpressionProps &
   Omit<HTMLAttributes<HTMLSpanElement>, 'value'>;
 
-export const EuiExpression: FunctionComponent<ExclusiveUnion<
-  Buttonlike,
-  Spanlike
->> = ({
+export const EuiExpression: FunctionComponent<
+  ExclusiveUnion<Buttonlike, Spanlike>
+> = ({
   className,
   description,
   descriptionProps,

src/components/form/form_control_layout/form_control_layout_delimited.tsx

@@ -31,9 +31,7 @@ import {
   EuiFormControlLayoutProps,
 } from './form_control_layout';
 
-export type EuiFormControlLayoutDelimitedProps = Partial<
-  EuiFormControlLayoutProps
-> & {
+export type EuiFormControlLayoutDelimitedProps = Partial<EuiFormControlLayoutProps> & {
   /**
    * Left side control
    */

src/components/form/form_control_layout/form_control_layout_icons.tsx

@@ -54,9 +54,7 @@ export interface EuiFormControlLayoutIconsProps {
   isLoading?: boolean;
 }
 
-export class EuiFormControlLayoutIcons extends Component<
-  EuiFormControlLayoutIconsProps
-> {
+export class EuiFormControlLayoutIcons extends Component<EuiFormControlLayoutIconsProps> {
   render() {
     const { icon } = this.props;
 

src/components/markdown_editor/markdown_editor_text_area.tsx

@@ -20,9 +20,7 @@
 import React, { TextareaHTMLAttributes, forwardRef } from 'react';
 import { CommonProps } from '../common';
 
-export type EuiMarkdownEditorTextAreaProps = TextareaHTMLAttributes<
-  HTMLTextAreaElement
-> &
+export type EuiMarkdownEditorTextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement> &
   CommonProps & {
     isInvalid?: boolean;
     fullWidth?: boolean;

src/components/observer/resize_observer/resize_observer.test.tsx

@@ -38,9 +38,10 @@ describe('testResizeObservers', () => {
       HTMLElement.prototype.getBoundingClientRect;
     HTMLElement.prototype.getBoundingClientRect = function () {
       // use the length of the element's HTML to represent its height
-      return { width: 100, height: this.innerHTML.length } as ReturnType<
-        GetBoundingClientRect
-      >;
+      return {
+        width: 100,
+        height: this.innerHTML.length,
+      } as ReturnType<GetBoundingClientRect>;
     };
   });
   afterAll(() => {

src/components/pagination/pagination_button.tsx

@@ -35,13 +35,9 @@ export type EuiPaginationButtonProps = EuiButtonEmptyProps & {
   totalPages?: number;
 };
 
-type EuiPaginationButtonPropsForAnchor = PropsForAnchor<
-  EuiPaginationButtonProps
->;
+type EuiPaginationButtonPropsForAnchor = PropsForAnchor<EuiPaginationButtonProps>;
 
-type EuiPaginationButtonPropsForButton = PropsForButton<
-  EuiPaginationButtonProps
->;
+type EuiPaginationButtonPropsForButton = PropsForButton<EuiPaginationButtonProps>;
 
 type Props = ExclusiveUnion<
   EuiPaginationButtonPropsForAnchor,

src/components/progress/progress.tsx

@@ -146,10 +146,9 @@ type Determinate = EuiProgressProps &
     labelProps?: HTMLAttributes<HTMLSpanElement>;
   };
 
-export const EuiProgress: FunctionComponent<ExclusiveUnion<
-  Determinate,
-  Indeterminate
->> = ({
+export const EuiProgress: FunctionComponent<
+  ExclusiveUnion<Determinate, Indeterminate>
+> = ({
   className,
   color = 'secondary',
   size = 'm',

src/components/search_bar/filters/field_value_toggle_filter.tsx

@@ -40,9 +40,7 @@ export interface FieldValueToggleFilterProps {
   onChange: (value: Query) => void;
 }
 
-export class FieldValueToggleFilter extends Component<
-  FieldValueToggleFilterProps
-> {
+export class FieldValueToggleFilter extends Component<FieldValueToggleFilterProps> {
   resolveDisplay(clause: Clause | undefined) {
     const { name, negatedName } = this.props.config;
     if (isNil(clause)) {

src/components/search_bar/filters/field_value_toggle_group_filter.tsx

@@ -46,9 +46,7 @@ export interface FieldValueToggleGroupFilterProps {
   onChange: (value: Query) => void;
 }
 
-export class FieldValueToggleGroupFilter extends Component<
-  FieldValueToggleGroupFilterProps
-> {
+export class FieldValueToggleGroupFilter extends Component<FieldValueToggleGroupFilterProps> {
   resolveDisplay(
     config: FieldValueToggleGroupFilterConfigType,
     query: Query,

src/components/selectable/selectable_list/selectable_list_item.tsx

@@ -65,9 +65,7 @@ export type EuiSelectableListItemProps = LiHTMLAttributes<HTMLLIElement> &
   };
 
 // eslint-disable-next-line react/prefer-stateless-function
-export class EuiSelectableListItem extends Component<
-  EuiSelectableListItemProps
-> {
+export class EuiSelectableListItem extends Component<EuiSelectableListItemProps> {
   static defaultProps = {
     showIcons: true,
     onFocusBadge: true,

src/services/hooks/useIsWithinBreakpoints.ts

@@ -30,9 +30,10 @@ import { isWithinBreakpoints, EuiBreakpointSize } from '../breakpoint';
  * @returns {boolean} Returns `true` if current breakpoint name is included in `sizes`
  */
 export function useIsWithinBreakpoints(sizes: EuiBreakpointSize[]) {
-  const [isWithinBreakpointsValue, setIsWithinBreakpointsValue] = useState<
-    boolean
-  >(false);
+  const [
+    isWithinBreakpointsValue,
+    setIsWithinBreakpointsValue,
+  ] = useState<boolean>(false);
 
   useEffect(() => {
     function handleResize() {