[EuiSuperDatePicker] Changed to ul element in `Recently used date r…

…anges` (#4370) * changed to ul and fieldset tag * Design cleanup and CL Co-authored-by: cchaos <[email protected]>
elastic · Dec 14, 2020 · 9571192 · 9571192
1 parent c7a80bc
commit 9571192
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 23 deletions.
diff --git a/CHANGELOG.md b/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**
 

diff --git a/...onents/date_picker/super_date_picker/quick_select_popover/_commonly_used_time_ranges.scss b/...onents/date_picker/super_date_picker/quick_select_popover/_commonly_used_time_ranges.scss
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/_index.scss b/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';
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss b/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;
+ }
+}
diff --git a/...mponents/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.tsx b/...mponents/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"

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
@@ -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>
  );
 };