[EuiSuperDatePicker]Changed to EuiFlexGrid view in Recently used date ranges

CHANGELOG.md

@@ -3,6 +3,7 @@
 - Added collapsble behavior to `EuiResizableContainer` panels ([#3978](https://github.com/elastic/eui/pull/3978))
 - Updated `EuiResizablePanel` to use `EuiPanel` ([#3978](https://github.com/elastic/eui/pull/3978))
 - Changed `showTimeSelect` prop to true when `showTimeSelectOnly` prop is set to true. ([#4372](https://github.com/elastic/eui/pull/4372))
+- Updated `EuiSuperSelect` recently used list to render as `<ol>` and `<li>` elements ([#4370](https://github.com/elastic/eui/pull/4370))
 
 **Bug fixes**
 

src/components/date_picker/super_date_picker/quick_select_popover/_index.scss

@@ -1,4 +1,3 @@
 @import 'quick_select_popover';
 @import 'quick_select';
 @import 'refresh_interval';
-@import 'commonly_used_time_ranges';

src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss

@@ -8,7 +8,7 @@
   max-height: $euiSizeM * 11;
   overflow: hidden;
   overflow-y: auto;
-  padding: $euiSizeXS 0; // Offset negative margin from flex items
+  padding: $euiSizeS 0 $euiSizeXS; // Offset negative margin from flex items
 }
 
 // sass-lint:disable no-important
@@ -20,3 +20,12 @@
 .euiQuickSelectPopover__anchor {
   height: 100%;
 }
+
+.euiQuickSelectPopover__sectionItem {
+  font-size: $euiFontSizeS;
+  line-height: $euiFontSizeS;
+
+  &:not(:last-of-type) {
+    margin-bottom: $euiSizeS;
+  }
+}

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

@@ -49,7 +49,7 @@ export const EuiCommonlyUsedTimeRanges: FunctionComponent<EuiCommonlyUsedTimeRan
       <EuiFlexItem
         key={label}
         component="li"
-        className="euiCommonlyUsedTimeRanges__item">
+        className="euiQuickSelectPopover__sectionItem">
         <EuiLink onClick={applyCommonlyUsed} data-test-subj={dataTestSubj}>
           {label}
         </EuiLink>
@@ -60,7 +60,7 @@ export const EuiCommonlyUsedTimeRanges: FunctionComponent<EuiCommonlyUsedTimeRan
   return (
     <fieldset>
       <EuiTitle size="xxxs">
-        <legend id={legendId} aria-label="Commonly used time ranges">
+        <legend id={legendId}>
           <EuiI18n
             token="euiCommonlyUsedTimeRanges.legend"
             default="Commonly used"

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

@@ -17,17 +17,18 @@
  * under the License.
  */
 
-import React, { Fragment, FunctionComponent } from 'react';
+import React, { FunctionComponent } from 'react';
 import { prettyDuration } from '../pretty_duration';
 
-import { EuiFlexGroup, EuiFlexItem } from '../../../flex';
+import { EuiI18n } from '../../../i18n';
+import { htmlIdGenerator } from '../../../../services';
 import { EuiTitle } from '../../../title';
-import { EuiSpacer } from '../../../spacer';
 import { EuiLink } from '../../../link';
-import { EuiText } from '../../../text';
 import { EuiHorizontalRule } from '../../../horizontal_rule';
 import { DurationRange, ApplyTime } from '../../types';
 
+const generateId = htmlIdGenerator();
+
 export interface EuiRecentlyUsedProps {
   applyTime: ApplyTime;
   commonlyUsedRanges: DurationRange[];
@@ -41,6 +42,8 @@ export const EuiRecentlyUsed: FunctionComponent<EuiRecentlyUsedProps> = ({
   dateFormat,
   recentlyUsedRanges = [],
 }) => {
+  const legendId = generateId();
+
   if (recentlyUsedRanges.length === 0) {
     return null;
   }
@@ -50,27 +53,31 @@ export const EuiRecentlyUsed: FunctionComponent<EuiRecentlyUsedProps> = ({
       applyTime({ start, end });
     };
     return (
-      <EuiFlexItem grow={false} key={`${start}-${end}`}>
+      <li
+        className="euiQuickSelectPopover__sectionItem"
+        key={`${start}-${end}`}>
         <EuiLink onClick={applyRecentlyUsed}>
           {prettyDuration(start, end, commonlyUsedRanges, dateFormat)}
         </EuiLink>
-      </EuiFlexItem>
+      </li>
     );
   });
 
   return (
-    <Fragment>
+    <fieldset>
       <EuiTitle size="xxxs">
-        <span>Recently used date ranges</span>
+        <legend id={legendId}>
+          <EuiI18n
+            token="euiRecentlyUsed.legend"
+            default="Recently used date ranges"
+          />
+        </legend>
       </EuiTitle>
-      <EuiSpacer size="s" />
-      <EuiText size="s" className="euiQuickSelectPopover__section">
-        <EuiFlexGroup gutterSize="s" direction="column">
-          {links}
-        </EuiFlexGroup>
-      </EuiText>
+      <div className="euiQuickSelectPopover__section">
+        <ul>{links}</ul>
+      </div>
       <EuiHorizontalRule margin="s" />
-    </Fragment>
+    </fieldset>
   );
 };