From e25a74b69aaa1cf0553abd78f9cff03285df5061 Mon Sep 17 00:00:00 2001
From: Dishebh Bhayana <dishebh27@gmail.com>
Date: Fri, 11 Dec 2020 01:13:48 +0530
Subject: [PATCH] changed EuiFlexGrid to ul tag and fixed sizing issue of link
 items

---
 src-docs/src/views/tables/props/props.tsx     |  6 ++---
 .../color_palette_picker.tsx                  |  6 ++---
 src/components/datagrid/data_grid.test.tsx    |  8 ++++---
 src/components/datagrid/data_grid_cell.tsx    |  4 +---
 .../datagrid/data_grid_cell_buttons.tsx       |  4 +---
 .../datagrid/data_grid_cell_popover.tsx       |  8 ++-----
 .../datagrid/data_grid_inmemory_renderer.tsx  |  4 +---
 src/components/datagrid/data_grid_types.ts    |  4 +---
 .../quick_select_popover/recently_used.tsx    | 22 ++++++++-----------
 src/components/expression/expression.tsx      |  7 +++---
 .../form_control_layout_delimited.tsx         |  4 +---
 .../form_control_layout_icons.tsx             |  4 +---
 .../markdown_editor_text_area.tsx             |  4 +---
 .../resize_observer/resize_observer.test.tsx  |  7 +++---
 .../pagination/pagination_button.tsx          |  8 ++-----
 src/components/progress/progress.tsx          |  7 +++---
 .../filters/field_value_toggle_filter.tsx     |  4 +---
 .../field_value_toggle_group_filter.tsx       |  4 +---
 .../selectable_list/selectable_list_item.tsx  |  4 +---
 src/services/hooks/useIsWithinBreakpoints.ts  |  7 +++---
 20 files changed, 48 insertions(+), 78 deletions(-)

diff --git a/src-docs/src/views/tables/props/props.tsx b/src-docs/src/views/tables/props/props.tsx
index 6224d24c9c70..3547392a99a5 100644
--- a/src-docs/src/views/tables/props/props.tsx
+++ b/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 />;
 
diff --git a/src/components/color_picker/color_palette_picker/color_palette_picker.tsx b/src/components/color_picker/color_palette_picker/color_palette_picker.tsx
index 86b2d3f77cac..4d6132750c56 100644
--- a/src/components/color_picker/color_palette_picker/color_palette_picker.tsx
+++ b/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,
diff --git a/src/components/datagrid/data_grid.test.tsx b/src/components/datagrid/data_grid.test.tsx
index c75ecd7fd523..c7003fa443e0 100644
--- a/src/components/datagrid/data_grid.test.tsx
+++ b/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-(.*)/);
diff --git a/src/components/datagrid/data_grid_cell.tsx b/src/components/datagrid/data_grid_cell.tsx
index aaf3a41a50f5..892902dd665a 100644
--- a/src/components/datagrid/data_grid_cell.tsx
+++ b/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} />
diff --git a/src/components/datagrid/data_grid_cell_buttons.tsx b/src/components/datagrid/data_grid_cell_buttons.tsx
index ee01e8fe6a96..1a546f6fd39f 100644
--- a/src/components/datagrid/data_grid_cell_buttons.tsx
+++ b/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}
diff --git a/src/components/datagrid/data_grid_cell_popover.tsx b/src/components/datagrid/data_grid_cell_popover.tsx
index 5f421a5e08be..e5c48e863fac 100644
--- a/src/components/datagrid/data_grid_cell_popover.tsx
+++ b/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
diff --git a/src/components/datagrid/data_grid_inmemory_renderer.tsx b/src/components/datagrid/data_grid_inmemory_renderer.tsx
index 2a792db82afb..bd143a2ba770 100644
--- a/src/components/datagrid/data_grid_inmemory_renderer.tsx
+++ b/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 = [];
 
diff --git a/src/components/datagrid/data_grid_types.ts b/src/components/datagrid/data_grid_types.ts
index 11ee88fdd170..34dc5cdd4d25 100644
--- a/src/components/datagrid/data_grid_types.ts
+++ b/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;
 }
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/recently_used.tsx b/src/components/date_picker/super_date_picker/quick_select_popover/recently_used.tsx
index 52c555c3d693..28e2726ff822 100644
--- a/src/components/date_picker/super_date_picker/quick_select_popover/recently_used.tsx
+++ b/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>
diff --git a/src/components/expression/expression.tsx b/src/components/expression/expression.tsx
index 14e4e2a17d3d..882683fd4ff6 100644
--- a/src/components/expression/expression.tsx
+++ b/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,
diff --git a/src/components/form/form_control_layout/form_control_layout_delimited.tsx b/src/components/form/form_control_layout/form_control_layout_delimited.tsx
index 21e8baa4564a..089037a294df 100644
--- a/src/components/form/form_control_layout/form_control_layout_delimited.tsx
+++ b/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
    */
diff --git a/src/components/form/form_control_layout/form_control_layout_icons.tsx b/src/components/form/form_control_layout/form_control_layout_icons.tsx
index a4dcd5d74331..604cea58f986 100644
--- a/src/components/form/form_control_layout/form_control_layout_icons.tsx
+++ b/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;
 
diff --git a/src/components/markdown_editor/markdown_editor_text_area.tsx b/src/components/markdown_editor/markdown_editor_text_area.tsx
index a9576c90467a..ccee437f2309 100644
--- a/src/components/markdown_editor/markdown_editor_text_area.tsx
+++ b/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;
diff --git a/src/components/observer/resize_observer/resize_observer.test.tsx b/src/components/observer/resize_observer/resize_observer.test.tsx
index 71886ed1a6b3..e121a6cd5304 100644
--- a/src/components/observer/resize_observer/resize_observer.test.tsx
+++ b/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(() => {
diff --git a/src/components/pagination/pagination_button.tsx b/src/components/pagination/pagination_button.tsx
index a25ae8c7a260..a3cce3251f05 100644
--- a/src/components/pagination/pagination_button.tsx
+++ b/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,
diff --git a/src/components/progress/progress.tsx b/src/components/progress/progress.tsx
index 11da93b2f0cf..5d6b1d007e78 100644
--- a/src/components/progress/progress.tsx
+++ b/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',
diff --git a/src/components/search_bar/filters/field_value_toggle_filter.tsx b/src/components/search_bar/filters/field_value_toggle_filter.tsx
index 9f51b41f3fbb..71d413cf8ebf 100644
--- a/src/components/search_bar/filters/field_value_toggle_filter.tsx
+++ b/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)) {
diff --git a/src/components/search_bar/filters/field_value_toggle_group_filter.tsx b/src/components/search_bar/filters/field_value_toggle_group_filter.tsx
index 2060d7ba138a..9f51fa1298da 100644
--- a/src/components/search_bar/filters/field_value_toggle_group_filter.tsx
+++ b/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,
diff --git a/src/components/selectable/selectable_list/selectable_list_item.tsx b/src/components/selectable/selectable_list/selectable_list_item.tsx
index b195e210a550..c1b4fbe76140 100644
--- a/src/components/selectable/selectable_list/selectable_list_item.tsx
+++ b/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,
diff --git a/src/services/hooks/useIsWithinBreakpoints.ts b/src/services/hooks/useIsWithinBreakpoints.ts
index 0bdef3562fbd..f33e5fea07b2 100644
--- a/src/services/hooks/useIsWithinBreakpoints.ts
+++ b/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() {