Tweaks:

- Fixed Absolute tab selection - Using bottom border to indicate which time period is selected - Added a “title” as a tab - Added title to tab aria-labels
cchaos · Jun 14, 2019 · 27d290d · 27d290d
1 parent 4b9ca7a
commit 27d290d
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 9 deletions.
diff --git a/src/components/date_picker/super_date_picker/date_modes.js b/src/components/date_picker/super_date_picker/date_modes.js
@@ -19,7 +19,7 @@ export function getDateMode(value) {
     return DATE_MODES.RELATIVE;
   }
 
-  return DATE_MODES.absolute;
+  return DATE_MODES.ABSOLUTE;
 }
 
 export function toAbsoluteString(value, roundUp) {

diff --git a/src/components/date_picker/super_date_picker/date_popover/_date_popover_button.scss b/src/components/date_picker/super_date_picker/date_popover/_date_popover_button.scss
@@ -4,26 +4,37 @@
 
 .euiDatePopoverButton {
   @include euiSuperDatePickerText;
+  background-size: 100%; // For the bottom "border" via background-image
 
-  $backgroundColor: tintOrShade($euiColorSuccess, 90%, 70%);
-  $textColor: makeHighContrastColor($euiColorSuccess, $backgroundColor);
-
-  &-isSelected,
-  &-needsUpdating,
-  &:hover,
-  &:focus {
-    background-color: $backgroundColor;
+  &:focus,
+  &-isSelected {
+    background-image: euiFormControlGradient();
   }
 
   &-needsUpdating {
+    $backgroundColor: tintOrShade($euiColorSuccess, 90%, 70%);
+    $textColor: makeHighContrastColor($euiColorSuccess, $backgroundColor);
+
+    background-color: $backgroundColor;
     color: $textColor;
+
+    &:focus,
+    &.euiDatePopoverButton-isSelected {
+      background-image: euiFormControlGradient($euiColorSuccess);
+    }
   }
 
   &-isInvalid {
     $backgroundColor: tintOrShade($euiColorDanger, 90%, 70%);
     $textColor: makeHighContrastColor($euiColorDanger, $backgroundColor);
+
     background-color: $backgroundColor;
     color: $textColor;
+
+    &:focus,
+    &.euiDatePopoverButton-isSelected {
+      background-image: euiFormControlGradient($euiColorDanger);
+    }
   }
 }
 

diff --git a/src/components/date_picker/super_date_picker/date_popover/_date_popover_content.scss b/src/components/date_picker/super_date_picker/date_popover/_date_popover_content.scss
@@ -10,3 +10,9 @@
 .euiDatePopoverContent__padded--large {
   padding: $euiSize;
 }
+
+.euiDatePopoverContent__titleTab {
+  color: $euiTextColor !important; // Override :disabled
+  font-weight: $euiFontWeightBold;
+  text-transform: uppercase;
+}
diff --git a/src/components/date_picker/super_date_picker/date_popover/date_popover_button.js b/src/components/date_picker/super_date_picker/date_popover/date_popover_button.js
@@ -67,6 +67,7 @@ export function EuiDatePopoverButton(props) {
         roundUp={roundUp}
         onChange={onChange}
         dateFormat={dateFormat}
+        position={position}
       />
     </EuiPopover>
   );

diff --git a/src/components/date_picker/super_date_picker/date_popover/date_popover_content.js b/src/components/date_picker/super_date_picker/date_popover/date_popover_content.js
@@ -20,6 +20,7 @@ export function EuiDatePopoverContent({
   roundUp,
   onChange,
   dateFormat,
+  position,
 }) {
   const onTabClick = selectedTab => {
     switch (selectedTab.id) {
@@ -32,8 +33,17 @@ export function EuiDatePopoverContent({
     }
   };
 
+  const popoverTitle = `${position === 'start' ? 'Start' : 'End'} date:`;
+
   const renderTabs = () => {
     return [
+      {
+        id: 'euiDatePopoverContentTitleTab',
+        name: popoverTitle,
+        className: 'euiDatePopoverContent__titleTab',
+        disabled: true,
+        tabIndex: 0,
+      },
       {
         id: DATE_MODES.ABSOLUTE,
         name: 'Absolute',
@@ -46,6 +56,7 @@ export function EuiDatePopoverContent({
           />
         ),
         'data-test-subj': 'superDatePickerAbsoluteTab',
+        'aria-label': `${popoverTitle} Absolute`,
       },
       {
         id: DATE_MODES.RELATIVE,
@@ -59,6 +70,7 @@ export function EuiDatePopoverContent({
           />
         ),
         'data-test-subj': 'superDatePickerRelativeTab',
+        'aria-label': `${popoverTitle} Relative`,
       },
       {
         id: DATE_MODES.NOW,
@@ -83,6 +95,7 @@ export function EuiDatePopoverContent({
           </EuiText>
         ),
         'data-test-subj': 'superDatePickerNowTab',
+        'aria-label': `${popoverTitle} Now`,
       },
     ];
   };
@@ -104,6 +117,7 @@ EuiDatePopoverContent.propTypes = {
   onChange: PropTypes.func.isRequired,
   roundUp: PropTypes.bool,
   dateFormat: PropTypes.string.isRequired,
+  position: PropTypes.oneOf(['start', 'end']),
 };
 
 EuiDatePopoverContent.defaultProps = {