Initial DateRangeInput

Author: connor-baer

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

@@ -85,7 +85,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);
 }
 
@@ -168,10 +175,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',
@@ -127,3 +128,12 @@ export const Locales = (args: DateInputProps) => (
 );
 
 Locales.args = baseArgs;
+
+export const Range = (args: DateRangeInputProps) => (
+  <DateRangeInput {...args} />
+);
+
+Range.args = {
+  ...baseArgs,
+  label: 'Trip dates',
+};

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

@@ -459,14 +459,16 @@ export const DateInput = forwardRef<HTMLInputElement, DateInputProps>(
                       {clearDateButtonLabel}
                     </Button>
                   )}
-                  <Button
-                    type="button"
-                    variant="primary"
-                    onClick={handleApply}
-                    className={classes.apply}
-                  >
-                    {applyDateButtonLabel}
-                  </Button>
+                  {isMobile && (
+                    <Button
+                      type="button"
+                      variant="primary"
+                      onClick={handleApply}
+                      className={classes.apply}
+                    >
+                      {applyDateButtonLabel}
+                    </Button>
+                  )}
                 </div>
               )}
             </div>