[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,66 +249,84 @@ export class EuiRefreshInterval extends Component<
     const { value, units, min } = this.state;
 
     return (
-      <RenderI18nTimeOptions>
-        {({ refreshUnitsOptions }) => (
-          <fieldset className="euiQuickSelectPopover__panel">
-            <EuiFlexGroup
-              alignItems="center"
-              gutterSize="s"
-              responsive={false}
-              wrap
-            >
-              <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>
-                  }
-                />
-              </EuiFlexItem>
-              <EuiFlexItem style={{ minWidth: 60 }}>
-                <EuiFieldNumber
-                  compressed
-                  fullWidth
-                  value={value}
-                  min={min}
-                  onChange={this.onValueChange}
-                  onKeyDown={this.handleKeyDown}
-                  isInvalid={!isPaused && (value === '' || value <= 0)}
-                  disabled={isPaused}
-                  aria-label="Refresh interval value"
-                  aria-describedby={`${this.refreshSelectionId} ${this.legendId}`}
-                  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}`}
-                  value={units}
-                  disabled={isPaused}
-                  options={refreshUnitsOptions}
-                  onChange={this.onUnitsChange}
-                  onKeyDown={this.handleKeyDown}
-                  data-test-subj="superDatePickerRefreshIntervalUnitsSelect"
-                />
-              </EuiFlexItem>
-            </EuiFlexGroup>
-            {this.renderScreenReaderText(refreshUnitsOptions)}
-          </fieldset>
+      <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 }) => (
+              <EuiQuickSelectPanel>
+                <EuiFlexGroup
+                  alignItems="center"
+                  gutterSize="s"
+                  responsive={false}
+                  wrap
+                >
+                  <EuiFlexItem grow={false}>
+                    <EuiSwitch
+                      data-test-subj="superDatePickerToggleRefreshButton"
+                      checked={!isPaused}
+                      onChange={this.toggleRefresh}
+                      compressed
+                      // 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 }}>
+                    <EuiFieldNumber
+                      compressed
+                      fullWidth
+                      value={value}
+                      min={min}
+                      onChange={this.onValueChange}
+                      onKeyDown={this.handleKeyDown}
+                      isInvalid={!isPaused && (value === '' || value <= 0)}
+                      disabled={isPaused}
+                      aria-label={valueAriaLabel}
+                      aria-describedby={this.refreshSelectionId}
+                      data-test-subj="superDatePickerRefreshIntervalInput"
+                    />
+                  </EuiFlexItem>
+                  <EuiFlexItem style={{ minWidth: 100 }} grow={2}>
+                    <EuiSelect
+                      compressed
+                      fullWidth
+                      aria-label={unitsAriaLabel}
+                      aria-describedby={this.refreshSelectionId}
+                      value={units}
+                      disabled={isPaused}
+                      options={refreshUnitsOptions}
+                      onChange={this.onUnitsChange}
+                      onKeyDown={this.handleKeyDown}
+                      data-test-subj="superDatePickerRefreshIntervalUnitsSelect"
+                    />
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+                {this.renderScreenReaderText(refreshUnitsOptions)}
+              </EuiQuickSelectPanel>
+            )}
+          </RenderI18nTimeOptions>
         )}
-      </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"