Update color of delimiter arrow during needs update state to match …

…Figma
elastic · Apr 12, 2023 · a324802 · a324802
1 parent ea6619f
commit a324802
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 5 deletions.
diff --git a/src/components/date_picker/super_date_picker/_super_date_picker.scss b/src/components/date_picker/super_date_picker/_super_date_picker.scss
@@ -70,3 +70,21 @@
     cursor: not-allowed;
   }
 }
+
+/**
+* Make the arrow delimiter match the colors of `.euiDatePopoverButton-needsUpdating`
+*/
+.euiSuperDatePicker--needsUpdating.euiFormControlLayoutDelimited { // Extra specificity needed to override default delimited styles
+  .euiFormControlLayoutDelimited__delimiter {
+    background-color: $euiSuperDatePickerNeedsUpdatingBackgroundColor;
+    color: $euiSuperDatePickerNeedsUpdatingTextColor;
+
+    .euiIcon {
+      color: currentcolor;
+    }
+  }
+}
+
+.euiSuperDatePicker .euiFormControlLayoutDelimited__delimiter {
+  transition: background $euiAnimSpeedFast ease-in; // Match @mixin euiSuperDatePickerText / .euiDatePopoverButton
+}
diff --git a/src/components/date_picker/super_date_picker/_variables.scss b/src/components/date_picker/super_date_picker/_variables.scss
@@ -1,2 +1,5 @@
 $euiSuperDatePickerWidth: $euiSize * 30;
 $euiSuperDatePickerButtonWidth: $euiButtonMinWidth + ($euiSizeXS * 1.5);
+
+$euiSuperDatePickerNeedsUpdatingBackgroundColor: tintOrShade($euiColorSuccess, 90%, 70%);
+$euiSuperDatePickerNeedsUpdatingTextColor: makeHighContrastColor($euiColorSuccess, $euiSuperDatePickerNeedsUpdatingBackgroundColor);
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
@@ -13,11 +13,8 @@
   }
 
   &-needsUpdating {
-    $backgroundColor: tintOrShade($euiColorSuccess, 90%, 70%);
-    $textColor: makeHighContrastColor($euiColorSuccess, $backgroundColor);
-
-    background-color: $backgroundColor;
-    color: $textColor;
+    background-color: $euiSuperDatePickerNeedsUpdatingBackgroundColor;
+    color: $euiSuperDatePickerNeedsUpdatingTextColor;
 
     &:focus,
     &.euiDatePopoverButton-isSelected {

diff --git a/src/components/date_picker/super_date_picker/super_date_picker.tsx b/src/components/date_picker/super_date_picker/super_date_picker.tsx
@@ -524,6 +524,9 @@ export class EuiSuperDatePickerInternal extends Component<
         {({ locale: contextLocale }) => (
           <EuiDatePickerRange
             {...formControlLayoutProps}
+            className={classNames(formControlLayoutProps.className, {
+              'euiSuperDatePicker--needsUpdating': hasChanged && !isDisabled,
+            })}
             isCustom={true}
             iconType={false}
             startDateControl={