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

CHANGELOG.md

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