Initial DateRangeInput

Author: connor-baer

packages/circuit-ui/components/DateInput/DateInput.module.css

@@ -80,7 +80,14 @@
   line-height: var(--cui-body-m-line-height);
 }
 
-.readonly .literal {
+.divider {
+  padding: var(--cui-spacings-bit);
+  font-size: var(--cui-body-m-font-size);
+  line-height: var(--cui-body-m-line-height);
+}
+
+.readonly .literal,
+.readonly .divider {
   color: var(--cui-fg-subtle);
 }
 
@@ -163,10 +170,6 @@
 }
 
 @media (min-width: 480px) {
-  .apply {
-    display: none;
-  }
-
   .presets {
     position: sticky;
     bottom: 0;

packages/circuit-ui/components/DateInput/DateInput.stories.tsx

@@ -18,6 +18,7 @@ import { useState } from 'react';
 import { Stack } from '../../../../.storybook/components/index.js';
 
 import { DateInput, type DateInputProps } from './DateInput.js';
+import { DateRangeInput, type DateRangeInputProps } from './DateRangeInput.js';
 
 export default {
   title: 'Forms/DateInput',
@@ -168,3 +169,12 @@ export const Locales = (args: DateInputProps) => (
 );
 
 Locales.args = baseArgs;
+
+export const Range = (args: DateRangeInputProps) => (
+  <DateRangeInput {...args} />
+);
+
+Range.args = {
+  ...baseArgs,
+  label: 'Trip dates',
+};