[EuiSuperDatePicker] Convert quick select styles to Emotion

packages/eui/changelogs/upcoming/7909.md

@@ -0,0 +1,3 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiSuperDatePicker`'s quick select to Emotion

packages/eui/src/components/date_picker/_index.scss

@@ -1,3 +1,2 @@
 // The react-date-picker overrides exists in the global_styling folder
 // to easily style differently between default and Amsterdam theme
-@import 'super_date_picker/index';

packages/eui/src/components/date_picker/auto_refresh/refresh_interval.tsx

@@ -11,15 +11,18 @@ import React, {
   ChangeEventHandler,
   KeyboardEventHandler,
 } from 'react';
+
+import { htmlIdGenerator } from '../../../services';
 import { EuiI18n } from '../../i18n';
 import { EuiFlexGroup, EuiFlexItem } from '../../flex';
 import { EuiSelect, EuiFieldNumber, EuiFormLabel, EuiSwitch } from '../../form';
-import { htmlIdGenerator } from '../../../services';
 import { EuiScreenReaderOnly } from '../../accessibility';
+
 import {
   RenderI18nTimeOptions,
   TimeOptions,
 } from '../super_date_picker/time_options';
+import { EuiQuickSelectPanel } from '../super_date_picker/quick_select_popover/quick_select_panel';
 import {
   Milliseconds,
   RefreshUnitsOptions,
@@ -127,7 +130,6 @@ export class EuiRefreshInterval extends Component<
   };
 
   generateId = htmlIdGenerator();
-  legendId = this.generateId();
   refreshSelectionId = this.generateId();
 
   onValueChange: ChangeEventHandler<HTMLInputElement> = (event) => {
@@ -247,9 +249,29 @@ export class EuiRefreshInterval extends Component<
     const { value, units, min } = this.state;
 
     return (
+      <EuiI18n
+        tokens={[
+          'euiRefreshInterval.toggleLabel',
+          'euiRefreshInterval.toggleAriaLabel',
+          'euiRefreshInterval.valueAriaLabel',
+          'euiRefreshInterval.unitsAriaLabel',
+        ]}
+        defaults={[
+          'Refresh every',
+          'Toggle refresh',
+          'Refresh interval value',
+          'Refresh interval units',
+        ]}
+      >
+        {([
+          toggleLabel,
+          toggleAriaLabel,
+          valueAriaLabel,
+          unitsAriaLabel,
+        ]: string[]) => (
           <RenderI18nTimeOptions>
             {({ refreshUnitsOptions }) => (
-          <fieldset className="euiQuickSelectPopover__panel">
+              <EuiQuickSelectPanel>
                 <EuiFlexGroup
                   alignItems="center"
                   gutterSize="s"
@@ -259,18 +281,14 @@ export class EuiRefreshInterval extends Component<
                   <EuiFlexItem grow={false}>
                     <EuiSwitch
                       data-test-subj="superDatePickerToggleRefreshButton"
-                  aria-describedby={this.refreshSelectionId}
                       checked={!isPaused}
                       onChange={this.toggleRefresh}
                       compressed
-                  label={
-                    <EuiFormLabel type="legend" id={this.legendId}>
-                      <EuiI18n
-                        token="euiRefreshInterval.legend"
-                        default="Refresh every"
-                      />
-                    </EuiFormLabel>
-                  }
+                      // The IDs attached to this visible label are unused - we override with our own aria-label
+                      label={<EuiFormLabel>{toggleLabel}</EuiFormLabel>}
+                      aria-label={toggleAriaLabel}
+                      aria-labelledby={undefined}
+                      aria-describedby={this.refreshSelectionId}
                     />
                   </EuiFlexItem>
                   <EuiFlexItem style={{ minWidth: 60 }}>
@@ -283,17 +301,17 @@ export class EuiRefreshInterval extends Component<
                       onKeyDown={this.handleKeyDown}
                       isInvalid={!isPaused && (value === '' || value <= 0)}
                       disabled={isPaused}
-                  aria-label="Refresh interval value"
-                  aria-describedby={`${this.refreshSelectionId} ${this.legendId}`}
+                      aria-label={valueAriaLabel}
+                      aria-describedby={this.refreshSelectionId}
                       data-test-subj="superDatePickerRefreshIntervalInput"
                     />
                   </EuiFlexItem>
                   <EuiFlexItem style={{ minWidth: 100 }} grow={2}>
                     <EuiSelect
                       compressed
                       fullWidth
-                  aria-label="Refresh interval units"
-                  aria-describedby={`${this.refreshSelectionId} ${this.legendId}`}
+                      aria-label={unitsAriaLabel}
+                      aria-describedby={this.refreshSelectionId}
                       value={units}
                       disabled={isPaused}
                       options={refreshUnitsOptions}
@@ -304,9 +322,11 @@ export class EuiRefreshInterval extends Component<
                   </EuiFlexItem>
                 </EuiFlexGroup>
                 {this.renderScreenReaderText(refreshUnitsOptions)}
-          </fieldset>
+              </EuiQuickSelectPanel>
             )}
           </RenderI18nTimeOptions>
+        )}
+      </EuiI18n>
     );
   }
 }

packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap

@@ -13,13 +13,13 @@ exports[`EuiSuperDatePicker props accepts data-test-subj and passes to EuiFormCo
     >
       <button
         aria-label="Date quick select"
-        class="euiButtonEmpty euiFormControlLayout__prepend emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary"
+        class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-euiQuickSelectPopoverButton"
         data-test-subj="superDatePickerToggleQuickMenuButton"
         title="Date quick select"
         type="button"
       >
         <span
-          class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
+          class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiQuickSelectPopoverButton__content"
         >
           <span
             class="eui-textTruncate euiButtonEmpty__text"
@@ -82,13 +82,13 @@ exports[`EuiSuperDatePicker props compressed is rendered 1`] = `
     >
       <button
         aria-label="Date quick select"
-        class="euiButtonEmpty euiFormControlLayout__prepend emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary"
+        class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-euiQuickSelectPopoverButton"
         data-test-subj="superDatePickerToggleQuickMenuButton"
         title="Date quick select"
         type="button"
       >
         <span
-          class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
+          class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiQuickSelectPopoverButton__content"
         >
           <span
             class="eui-textTruncate euiButtonEmpty__text"
@@ -266,14 +266,14 @@ exports[`EuiSuperDatePicker props isDisabled true 1`] = `
     >
       <button
         aria-label="Date quick select"
-        class="euiButtonEmpty euiFormControlLayout__prepend emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-disabled-isDisabled"
+        class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-disabled-isDisabled-euiQuickSelectPopoverButton"
         data-test-subj="superDatePickerToggleQuickMenuButton"
         disabled=""
         title="Date quick select"
         type="button"
       >
         <span
-          class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
+          class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiQuickSelectPopoverButton__content"
         >
           <span
             class="eui-textTruncate euiButtonEmpty__text"
@@ -338,13 +338,13 @@ exports[`EuiSuperDatePicker props isQuickSelectOnly is rendered 1`] = `
     >
       <button
         aria-label="Date quick select"
-        class="euiButtonEmpty euiFormControlLayout__prepend emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary"
+        class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-euiQuickSelectPopoverButton"
         data-test-subj="superDatePickerToggleQuickMenuButton"
         title="Date quick select"
         type="button"
       >
         <span
-          class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
+          class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiQuickSelectPopoverButton__content"
         >
           <span
             class="eui-textTruncate euiButtonEmpty__text"
@@ -399,13 +399,13 @@ exports[`EuiSuperDatePicker props showUpdateButton can be false 1`] = `
     >
       <button
         aria-label="Date quick select"
-        class="euiButtonEmpty euiFormControlLayout__prepend emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary"
+        class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-euiQuickSelectPopoverButton"
         data-test-subj="superDatePickerToggleQuickMenuButton"
         title="Date quick select"
         type="button"
       >
         <span
-          class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
+          class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiQuickSelectPopoverButton__content"
         >
           <span
             class="eui-textTruncate euiButtonEmpty__text"
@@ -448,13 +448,13 @@ exports[`EuiSuperDatePicker props showUpdateButton can be iconOnly 1`] = `
     >
       <button
         aria-label="Date quick select"
-        class="euiButtonEmpty euiFormControlLayout__prepend emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary"
+        class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-euiQuickSelectPopoverButton"
         data-test-subj="superDatePickerToggleQuickMenuButton"
         title="Date quick select"
         type="button"
       >
         <span
-          class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
+          class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiQuickSelectPopoverButton__content"
         >
           <span
             class="eui-textTruncate euiButtonEmpty__text"
@@ -520,13 +520,13 @@ exports[`EuiSuperDatePicker props width can be auto 1`] = `
     >
       <button
         aria-label="Date quick select"
-        class="euiButtonEmpty euiFormControlLayout__prepend emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary"
+        class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-euiQuickSelectPopoverButton"
         data-test-subj="superDatePickerToggleQuickMenuButton"
         title="Date quick select"
         type="button"
       >
         <span
-          class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
+          class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiQuickSelectPopoverButton__content"
         >
           <span
             class="eui-textTruncate euiButtonEmpty__text"
@@ -589,13 +589,13 @@ exports[`EuiSuperDatePicker props width can be full 1`] = `
     >
       <button
         aria-label="Date quick select"
-        class="euiButtonEmpty euiFormControlLayout__prepend emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary"
+        class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-euiQuickSelectPopoverButton"
         data-test-subj="superDatePickerToggleQuickMenuButton"
         title="Date quick select"
         type="button"
       >
         <span
-          class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
+          class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiQuickSelectPopoverButton__content"
         >
           <span
             class="eui-textTruncate euiButtonEmpty__text"
@@ -659,13 +659,13 @@ exports[`EuiSuperDatePicker renders 1`] = `
     >
       <button
         aria-label="Date quick select"
-        class="euiButtonEmpty euiFormControlLayout__prepend emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary"
+        class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-euiQuickSelectPopoverButton"
         data-test-subj="superDatePickerToggleQuickMenuButton"
         title="Date quick select"
         type="button"
       >
         <span
-          class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
+          class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiQuickSelectPopoverButton__content"
         >
           <span
             class="eui-textTruncate euiButtonEmpty__text"
@@ -732,13 +732,13 @@ exports[`EuiSuperDatePicker renders an EuiDatePickerRange 1`] = `
       >
         <button
           aria-label="Date quick select"
-          class="euiButtonEmpty euiFormControlLayout__prepend emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary"
+          class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-euiQuickSelectPopoverButton"
           data-test-subj="superDatePickerToggleQuickMenuButton"
           title="Date quick select"
           type="button"
         >
           <span
-            class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
+            class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiQuickSelectPopoverButton__content"
           >
             <span
               class="eui-textTruncate euiButtonEmpty__text"