[EuiSuperDatePicker] Use RenderWithEuiTheme instead of misusing styles object

acstll · acstll · commit 04353effa32d · 2025-11-19T17:04:20.000+01:00
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
@@ -33,7 +33,6 @@ export const euiSuperDatePickerStyles = (euiThemeContext: UseEuiTheme) => {
   const inputWidth = euiTheme.base * 30;
   const buttonWidth = euiTheme.base * 7; // @see _button_display.styles.ts
   const gap = euiTheme.size.s;
-  const toolTipOffset = euiTheme.base * 0.5;
 
   // Default restricted width
   const restrictedWidth = mathWithUnits(
@@ -257,9 +256,6 @@ export const euiSuperDatePickerStyles = (euiThemeContext: UseEuiTheme) => {
         }
       `,
     },
-
-    // Exposing as-is because euiTheme is not available in class component
-    prettyDurationToolTipOffset: toolTipOffset,
   };
 };
 
diff --git a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.tsx b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.tsx
@@ -16,7 +16,7 @@ import classNames from 'classnames';
 import moment, { LocaleSpecifier, Moment } from 'moment'; // eslint-disable-line import/named
 import dateMath from '@elastic/datemath';
 
-import { useEuiMemoizedStyles } from '../../../services';
+import { useEuiMemoizedStyles, RenderWithEuiTheme } from '../../../services';
 import { isObject } from '../../../services/predicate';
 import { EuiI18nConsumer } from '../../context';
 import { CommonProps } from '../../common';
@@ -638,39 +638,49 @@ export class EuiSuperDatePickerInternal extends Component<
           endMoment?.format(dateFormat);
 
       return (
-        <EuiFormControlLayout {...formControlLayoutProps}>
-          {!isQuickSelectOnly && (
-            <EuiToolTip
-              css={styles.euiSuperDatePicker__prettyDurationTooltip}
-              content={formattedFullRange}
-              display="block"
-              offset={styles.prettyDurationToolTipOffset}
-            >
-              <EuiFormControlButton
-                type="button"
-                className={classNames('euiSuperDatePicker__prettyFormat', {
-                  'euiSuperDatePicker__prettyFormat--disabled': isDisabled,
-                })}
-                compressed={compressed}
-                data-test-subj="superDatePickerShowDatesButton"
-                disabled={!!isDisabled}
-                onClick={this.hidePrettyDuration}
-                onFocus={onFocus}
-              >
-                {isDisabledDisplay ? (
-                  isDisabled.display
-                ) : (
-                  <PrettyDuration
-                    timeFrom={start}
-                    timeTo={end}
-                    quickRanges={commonlyUsedRanges}
-                    dateFormat={dateFormat}
-                  />
+        <RenderWithEuiTheme>
+          {(euiTheme) => {
+            return (
+              <EuiFormControlLayout {...formControlLayoutProps}>
+                {!isQuickSelectOnly && (
+                  <EuiToolTip
+                    css={styles.euiSuperDatePicker__prettyDurationTooltip}
+                    content={formattedFullRange}
+                    display="block"
+                    offset={euiTheme.euiTheme.base * 0.5}
+                  >
+                    <EuiFormControlButton
+                      type="button"
+                      className={classNames(
+                        'euiSuperDatePicker__prettyFormat',
+                        {
+                          'euiSuperDatePicker__prettyFormat--disabled':
+                            isDisabled,
+                        }
+                      )}
+                      compressed={compressed}
+                      data-test-subj="superDatePickerShowDatesButton"
+                      disabled={!!isDisabled}
+                      onClick={this.hidePrettyDuration}
+                      onFocus={onFocus}
+                    >
+                      {isDisabledDisplay ? (
+                        isDisabled.display
+                      ) : (
+                        <PrettyDuration
+                          timeFrom={start}
+                          timeTo={end}
+                          quickRanges={commonlyUsedRanges}
+                          dateFormat={dateFormat}
+                        />
+                      )}
+                    </EuiFormControlButton>
+                  </EuiToolTip>
                 )}
-              </EuiFormControlButton>
-            </EuiToolTip>
-          )}
-        </EuiFormControlLayout>
+              </EuiFormControlLayout>
+            );
+          }}
+        </RenderWithEuiTheme>
       );
     }
 
