From 56c029e63ea69715fa9d4b3643922db6be7208e6 Mon Sep 17 00:00:00 2001
From: Scott Strubberg <sstrubberg@us.ibm.com>
Date: Fri, 4 Mar 2022 10:36:16 -0600
Subject: [PATCH] chore(DatePickerInput): updated size prop

---
 .../DatePicker/next/DatePicker.stories.js     | 93 +++++++++++--------
 .../DatePickerInput/next/DatePickerInput.js   | 15 +--
 .../components/date-picker/_date-picker.scss  |  2 -
 3 files changed, 55 insertions(+), 55 deletions(-)

diff --git a/packages/react/src/components/DatePicker/next/DatePicker.stories.js b/packages/react/src/components/DatePicker/next/DatePicker.stories.js
index 017ce468f972..235a28b15722 100644
--- a/packages/react/src/components/DatePicker/next/DatePicker.stories.js
+++ b/packages/react/src/components/DatePicker/next/DatePicker.stories.js
@@ -12,23 +12,6 @@ import DatePickerSkeleton from '../DatePicker.Skeleton';
 import DatePickerInput from '../../DatePickerInput';
 import { Layer } from '../../Layer';
 
-// const patterns = {
-//   'Short (d{1,2}/d{4})': '\\d{1,2}/\\d{4}',
-//   'Regular (d{1,2}/d{1,2}/d{4})': '\\d{1,2}/\\d{1,2}/\\d{4}',
-// };
-
-// const sizes = {
-//   'Small  (sm)': 'sm',
-//   'Medium (md) - default': undefined,
-//   'Large  (lg)': 'lg',
-// };
-
-// const types = {
-//   Simple: 'simple',
-//   Single: 'single',
-//   Range: 'range',
-// };
-
 const props = {
   datePicker: () => ({
     dateFormat: 'm/d/Y',
@@ -60,73 +43,92 @@ const props = {
 export default {
   title: 'Components/DatePicker',
   component: DatePicker,
+  argTypes: {
+    size: {
+      options: ['sm', 'md', 'lg'],
+      control: { type: 'select' },
+      table: {
+        category: 'DatePickerInput',
+      },
+    },
+  },
+  args: {
+    size: 'md',
+  },
   subcomponents: {
     DatePickerInput,
     DatePickerSkeleton,
   },
 };
 
-export const Simple = () => (
-  <DatePicker datePickerType="simple">
+export const Simple = (args) => (
+  <DatePicker datePickerType="simple" {...args}>
     <DatePickerInput
       placeholder="mm/dd/yyyy"
       labelText="Date Picker label"
       id="date-picker-simple"
+      {...args}
     />
   </DatePicker>
 );
 
-export const SingleWithCalendar = () => (
-  <DatePicker datePickerType="single">
+export const SingleWithCalendar = (args) => (
+  <DatePicker datePickerType="single" {...args}>
     <DatePickerInput
       placeholder="mm/dd/yyyy"
       labelText="Date Picker label"
       id="date-picker-single"
+      {...args}
     />
   </DatePicker>
 );
 
-export const RangeWithCalendar = () => {
+export const RangeWithCalendar = (args) => {
   return (
-    <DatePicker datePickerType="range">
+    <DatePicker datePickerType="range" {...args}>
       <DatePickerInput
         id="date-picker-input-id-start"
         placeholder="mm/dd/yyyy"
         labelText="Start date"
+        {...args}
       />
       <DatePickerInput
         id="date-picker-input-id-finish"
         placeholder="mm/dd/yyyy"
         labelText="End date"
+        {...args}
       />
     </DatePicker>
   );
 };
 
-export const SimpleWithLayer = () => {
+export const SimpleWithLayer = (args) => {
   return (
     <>
-      <DatePicker datePickerType="simple">
+      <DatePicker datePickerType="simple" {...args}>
         <DatePickerInput
           placeholder="mm/dd/yyyy"
           labelText="Date Picker label"
           id="date-picker-simple"
+          {...args}
         />
       </DatePicker>
-      <Layer>
-        <DatePicker datePickerType="simple">
+      <Layer {...args}>
+        <DatePicker datePickerType="simple" {...args}>
           <DatePickerInput
             placeholder="mm/dd/yyyy"
             labelText="Date Picker label"
             id="date-picker-simple"
+            {...args}
           />
         </DatePicker>
-        <Layer>
-          <DatePicker datePickerType="simple">
+        <Layer {...args}>
+          <DatePicker datePickerType="simple" {...args}>
             <DatePickerInput
               placeholder="mm/dd/yyyy"
               labelText="Date Picker label"
               id="date-picker-simple"
+              {...args}
             />
           </DatePicker>
         </Layer>
@@ -135,30 +137,33 @@ export const SimpleWithLayer = () => {
   );
 };
 
-export const SingleWithCalendarWithLayer = () => {
+export const SingleWithCalendarWithLayer = (args) => {
   return (
     <>
-      <DatePicker datePickerType="single">
+      <DatePicker datePickerType="single" {...args}>
         <DatePickerInput
           placeholder="mm/dd/yyyy"
           labelText="Date Picker label"
           id="date-picker-single"
+          {...args}
         />
       </DatePicker>
-      <Layer>
-        <DatePicker datePickerType="single">
+      <Layer {...args}>
+        <DatePicker datePickerType="single" {...args}>
           <DatePickerInput
             placeholder="mm/dd/yyyy"
             labelText="Date Picker label"
             id="date-picker-single"
+            {...args}
           />
         </DatePicker>
-        <Layer>
-          <DatePicker datePickerType="single">
+        <Layer {...args}>
+          <DatePicker datePickerType="single" {...args}>
             <DatePickerInput
               placeholder="mm/dd/yyyy"
               labelText="Date Picker label"
               id="date-picker-single"
+              {...args}
             />
           </DatePicker>
         </Layer>
@@ -167,45 +172,51 @@ export const SingleWithCalendarWithLayer = () => {
   );
 };
 
-export const RangeWithCalendarWithLayer = () => {
+export const RangeWithCalendarWithLayer = (args) => {
   return (
     <>
-      <DatePicker datePickerType="range">
+      <DatePicker datePickerType="range" {...args}>
         <DatePickerInput
           id="date-picker-input-id-start"
           placeholder="mm/dd/yyyy"
           labelText="Start date"
+          {...args}
         />
         <DatePickerInput
           id="date-picker-input-id-finish"
           placeholder="mm/dd/yyyy"
           labelText="End date"
+          {...args}
         />
       </DatePicker>
-      <Layer>
-        <DatePicker datePickerType="range">
+      <Layer {...args}>
+        <DatePicker datePickerType="range" {...args}>
           <DatePickerInput
             id="date-picker-input-id-start"
             placeholder="mm/dd/yyyy"
             labelText="Start date"
+            {...args}
           />
           <DatePickerInput
             id="date-picker-input-id-finish"
             placeholder="mm/dd/yyyy"
             labelText="End date"
+            {...args}
           />
         </DatePicker>
-        <Layer>
-          <DatePicker datePickerType="range">
+        <Layer {...args}>
+          <DatePicker datePickerType="range" {...args}>
             <DatePickerInput
               id="date-picker-input-id-start"
               placeholder="mm/dd/yyyy"
               labelText="Start date"
+              {...args}
             />
             <DatePickerInput
               id="date-picker-input-id-finish"
               placeholder="mm/dd/yyyy"
               labelText="End date"
+              {...args}
             />
           </DatePicker>
         </Layer>
diff --git a/packages/react/src/components/DatePickerInput/next/DatePickerInput.js b/packages/react/src/components/DatePickerInput/next/DatePickerInput.js
index e09797489051..fe89eb581502 100644
--- a/packages/react/src/components/DatePickerInput/next/DatePickerInput.js
+++ b/packages/react/src/components/DatePickerInput/next/DatePickerInput.js
@@ -30,7 +30,7 @@ const DatePickerInput = React.forwardRef(function DatePickerInput(props, ref) {
     onChange = () => {},
     pattern = '\\d{1,2}\\/\\d{1,2}\\/\\d{4}',
     placeholder,
-    size,
+    size = 'md',
     type = 'text',
     warn,
     warnText,
@@ -144,14 +144,6 @@ DatePickerInput.propTypes = {
    */
   hideLabel: PropTypes.bool,
 
-  /**
-   * The description of the calendar icon.
-   */
-  iconDescription: deprecate(
-    PropTypes.string,
-    `\nThe prop \`iconDescriptionInput\` for DatePickerInput has been deprecated and is no longer used`
-  ),
-
   /**
    * Specify an id that uniquely identifies the `<input>`
    */
@@ -214,10 +206,9 @@ DatePickerInput.propTypes = {
   placeholder: PropTypes.string,
 
   /**
-   * Specify the size of the Date Picker Input. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
-   * TODO V11: remove `xl` (replaced with lg)
+   * Specify the size of the Date Picker Input. Currently supports either `sm`, `md`, or `lg` as an option.
    */
-  size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
 
   /**
    * Specify the type of the `<input>`
diff --git a/packages/styles/scss/components/date-picker/_date-picker.scss b/packages/styles/scss/components/date-picker/_date-picker.scss
index 597f55c3b7c3..6e889bcf5c86 100644
--- a/packages/styles/scss/components/date-picker/_date-picker.scss
+++ b/packages/styles/scss/components/date-picker/_date-picker.scss
@@ -125,8 +125,6 @@
   }
 
   // Size variant styles
-  // TODO V11: Remove xl selector
-  .#{$prefix}--date-picker__input--xl,
   .#{$prefix}--date-picker__input--lg {
     height: rem(48px);
   }