Improve visual balance for shorter "now" values

- other values are significantly longer and don't have the same visual imbalance
elastic · Oct 31, 2024 · cc95efe · cc95efe
1 parent 8a3d1b0
commit cc95efe
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 1 deletion.
diff --git a/...nce/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Range_Inputs.png b/...nce/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Range_Inputs.png
diff --git a/...ence/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Range_Inputs.png b/...ence/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Range_Inputs.png
diff --git a/...rc/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap b/...rc/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap
@@ -826,7 +826,7 @@ exports[`EuiSuperDatePicker renders an EuiDatePickerRange 1`] = `
           </span>
         </div>
         <div
-          class="euiPopover euiFormControlLayoutDelimited__input emotion-euiPopover-block-euiFormControlLayoutDelimited__input-euiSuperDatePicker__rangeInput"
+          class="euiPopover euiFormControlLayoutDelimited__input emotion-euiPopover-block-now-euiFormControlLayoutDelimited__input-euiSuperDatePicker__rangeInput"
         >
           <button
             class="euiDatePopoverButton euiDatePopoverButton--end emotion-euiDatePopoverButton"

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
@@ -15,5 +15,9 @@ export const euiDatePopoverButtonStyles = (euiThemeContext: UseEuiTheme) => {
     euiDatePopoverButton: css`
       ${_buttonStyles(euiThemeContext)}
     `,
+    now: css`
+      /* !important needed to override date range picker nested styles */
+      flex-grow: 0.5 !important; /* stylelint-disable-line declaration-no-important */
+    `,
   };
 };
diff --git a/...ges/eui/src/components/date_picker/super_date_picker/date_popover/date_popover_button.tsx b/...ges/eui/src/components/date_picker/super_date_picker/date_popover/date_popover_button.tsx
@@ -142,6 +142,7 @@ export const EuiDatePopoverButton: FunctionComponent<
       display="block"
       panelPaddingSize="none"
       {...rest}
+      css={value === 'now' && styles.now}
     >
       <EuiDatePopoverContent
         value={value}

diff --git a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.stories.tsx b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.stories.tsx
@@ -127,6 +127,19 @@ function CustomPanel({ applyTime }: { applyTime?: ApplyTime }) {
 /**
  * VRT only
  */
+export const RangeInputs: Story = {
+  tags: ['vrt-only'],
+  args: {
+    start: 'now-15s',
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await fireEvent.click(
+      canvas.getByTestSubject('superDatePickerShowDatesButton')
+    );
+  },
+};
+
 export const OverflowingChildren: Story = {
   tags: ['vrt-only'],
   args: {