[EuiSuperDatePicker] Emotion conversion button fixes (#7911)

elastic · Jul 25, 2024 · 28a82ac · 28a82ac
1 parent 3fec66b
commit 28a82ac
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 8 deletions.
diff --git a/...sktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png b/...sktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png
diff --git a/...rence/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png b/...rence/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png
diff --git a/...obile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png b/...obile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png
diff --git a/...erence/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png b/...erence/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png
diff --git a/...i/src/components/date_picker/super_date_picker/date_popover/date_popover_button.styles.ts b/...i/src/components/date_picker/super_date_picker/date_popover/date_popover_button.styles.ts
@@ -14,7 +14,6 @@ export const euiDatePopoverButtonStyles = (euiThemeContext: UseEuiTheme) => {
   return {
     euiDatePopoverButton: css`
       ${_buttonStyles(euiThemeContext)}
-      justify-content: center;
     `,
   };
 };
diff --git a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.styles.ts b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.styles.ts
@@ -125,6 +125,7 @@ export const euiSuperDatePickerStyles = (euiThemeContext: UseEuiTheme) => {
 
     euiSuperDatePicker__range: css`
       flex-grow: 1;
+      overflow: hidden;
     `,
     euiSuperDatePicker__rangeInput: css`
       flex-grow: 1;
@@ -133,6 +134,7 @@ export const euiSuperDatePickerStyles = (euiThemeContext: UseEuiTheme) => {
     `,
     euiSuperDatePicker__prettyFormat: css`
       ${_buttonStyles(euiThemeContext)}
+      text-align: start;
     `,
 
     // Form states
@@ -176,15 +178,26 @@ export const euiSuperDatePickerStyles = (euiThemeContext: UseEuiTheme) => {
       needsUpdating: css`
         /* Extra specificity needed to override default delimited styles */
         .euiFormControlLayoutDelimited .euiFormControlLayout__childrenWrapper {
-          --euiFormControlStateColor: ${euiTheme.colors.success};
           color: ${needsUpdatingTextColor};
           background-color: ${needsUpdatingBackgroundColor};
-          background-size: 100% 100%;
         }
 
         .euiFormControlLayoutDelimited__delimiter {
           color: inherit;
         }
+
+        /* Focus/selection underline per-button */
+        .euiDatePopoverButton {
+          ${euiFormControlDefaultShadow(euiThemeContext)}
+          background-color: inherit;
+          box-shadow: none;
+        }
+
+        .euiDatePopoverButton:focus,
+        .euiPopover-isOpen .euiDatePopoverButton {
+          --euiFormControlStateColor: ${euiTheme.colors.success};
+          background-size: 100% 100%;
+        }
       `,
     },
   };
@@ -198,12 +211,10 @@ export const _buttonStyles = (euiThemeContext: UseEuiTheme) => {
     ${logicalCSS('width', '100%')}
     ${logicalCSS('padding-horizontal', euiTheme.size.s)}
 
-    /* Align content automatically for compressed heights */
-    display: flex;
-    align-items: center;
-
     font-size: ${euiFontSize(euiThemeContext, 's').fontSize};
-    word-break: break-all;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
     color: inherit;
     background-color: inherit;