chore(date_picker_range): add a VRT for the full width variant

elastic · Nov 28, 2024 · 456735c · 456735c
1 parent b937ece
commit 456735c
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 32 deletions.
diff --git a/...ages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Full_Width.png b/...ages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Full_Width.png
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Full_Width.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Full_Width.png
diff --git a/packages/eui/src/components/date_picker/date_picker_range.stories.tsx b/packages/eui/src/components/date_picker/date_picker_range.stories.tsx
@@ -40,6 +40,41 @@ const meta: Meta<EuiDatePickerRangeProps> = {
 export default meta;
 type Story = StoryObj<EuiDatePickerRangeProps>;
 
+const StatefulPlayground = ({
+  startDateControl,
+  endDateControl,
+  ...rest
+}: EuiDatePickerRangeProps) => {
+  const [selectedStartDate, setSelectedStartDate] = useState<moment.Moment>(
+    startDateControl.props.selected
+  );
+  const [selectedEndDate, setSelectedEndDate] = useState<moment.Moment>(
+    endDateControl.props.selected
+  );
+
+  const startControl = React.cloneElement(startDateControl, {
+    selected: selectedStartDate,
+    onChange: setSelectedStartDate,
+    startDate: selectedStartDate,
+    endDate: selectedEndDate,
+  });
+
+  const endControl = React.cloneElement(endDateControl, {
+    selected: selectedEndDate,
+    onChange: setSelectedEndDate,
+    startDate: selectedStartDate,
+    endDate: selectedEndDate,
+  });
+
+  return (
+    <EuiDatePickerRange
+      startDateControl={startControl}
+      endDateControl={endControl}
+      {...rest}
+    />
+  );
+};
+
 export const Playground: Story = {
   parameters: {
     controls: {
@@ -104,37 +139,16 @@ export const RestrictedSelection: Story = {
   render: (args) => <StatefulPlayground {...args} />,
 };
 
-const StatefulPlayground = ({
-  startDateControl,
-  endDateControl,
-  ...rest
-}: EuiDatePickerRangeProps) => {
-  const [selectedStartDate, setSelectedStartDate] = useState<moment.Moment>(
-    startDateControl.props.selected
-  );
-  const [selectedEndDate, setSelectedEndDate] = useState<moment.Moment>(
-    endDateControl.props.selected
-  );
-
-  const startControl = React.cloneElement(startDateControl, {
-    selected: selectedStartDate,
-    onChange: setSelectedStartDate,
-    startDate: selectedStartDate,
-    endDate: selectedEndDate,
-  });
-
-  const endControl = React.cloneElement(endDateControl, {
-    selected: selectedEndDate,
-    onChange: setSelectedEndDate,
-    startDate: selectedStartDate,
-    endDate: selectedEndDate,
-  });
+/**
+ * VRT only stories
+ */
 
-  return (
-    <EuiDatePickerRange
-      startDateControl={startControl}
-      endDateControl={endControl}
-      {...rest}
-    />
-  );
+export const FullWidth: Story = {
+  tags: ['vrt-only'],
+  args: {
+    startDateControl: <EuiDatePicker />,
+    endDateControl: <EuiDatePicker />,
+    fullWidth: true,
+  },
+  render: (args) => <StatefulPlayground {...args} />,
 };