chore(TimePicker): updated size prop for v11 (#10944)

Co-authored-by: Alessandra Davila <aledavila@ibm.com>

Author: sstrubberg

packages/react/src/components/TimePicker/TimePicker.js

@@ -98,8 +98,7 @@ export default class TimePicker extends Component {
     placeholder: PropTypes.string,
 
     /**
-     * Specify the size of the Time Picker. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
-     * TODO V11: remove `xl` (replaced with lg)
+     * Specify the size of the Time Picker.
      */
     size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
 

packages/react/src/components/TimePicker/next/TimePicker.js

@@ -28,7 +28,7 @@ const TimePicker = React.forwardRef(function TimePicker(
     onBlur = () => {},
     pattern = '(1[012]|[1-9]):[0-5][0-9](\\s)?',
     placeholder = 'hh:mm',
-    size,
+    size = 'md',
     type = 'text',
     value,
     ...rest
@@ -211,7 +211,7 @@ TimePicker.propTypes = {
   placeholder: PropTypes.string,
 
   /**
-   * Specify the size of the Time Picker. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
+   * Specify the size of the Time Picker.
    */
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
 

packages/react/src/components/TimePicker/next/TimePicker.stories.js

@@ -54,15 +54,24 @@ import { Layer } from '../../Layer';
 export default {
   title: 'Components/TimePicker',
   component: TimePicker,
+  argTypes: {
+    size: {
+      options: ['sm', 'md', 'lg'],
+      control: { type: 'select' },
+    },
+  },
+  args: {
+    size: 'md',
+  },
   subcomponents: {
     TimePickerSelect,
     SelectItem,
   },
 };
 
-export const Default = () => {
+export const Default = (args) => {
   return (
-    <TimePicker id="time-picker" labelText="Select a time">
+    <TimePicker id="time-picker" labelText="Select a time" {...args}>
       <TimePickerSelect id="time-picker-select-1">
         <SelectItem value="AM" text="AM" />
         <SelectItem value="PM" text="PM" />
@@ -75,10 +84,10 @@ export const Default = () => {
   );
 };
 
-export const WithLayer = () => {
+export const WithLayer = (args) => {
   return (
     <>
-      <TimePicker id="time-picker" labelText="First layer">
+      <TimePicker id="time-picker" labelText="First layer" {...args}>
         <TimePickerSelect id="time-picker-select-1">
           <SelectItem value="AM" text="AM" />
           <SelectItem value="PM" text="PM" />
@@ -89,7 +98,7 @@ export const WithLayer = () => {
         </TimePickerSelect>
       </TimePicker>
       <Layer>
-        <TimePicker id="time-picker" labelText="Second layer">
+        <TimePicker id="time-picker" labelText="Second layer" {...args}>
           <TimePickerSelect id="time-picker-select-1">
             <SelectItem value="AM" text="AM" />
             <SelectItem value="PM" text="PM" />
@@ -100,7 +109,7 @@ export const WithLayer = () => {
           </TimePickerSelect>
         </TimePicker>
         <Layer>
-          <TimePicker id="time-picker" labelText="Third layer">
+          <TimePicker id="time-picker" labelText="Third layer" {...args}>
             <TimePickerSelect id="time-picker-select-1">
               <SelectItem value="AM" text="AM" />
               <SelectItem value="PM" text="PM" />

packages/styles/scss/components/time-picker/_time-picker.scss

@@ -83,9 +83,6 @@
     max-height: rem(32px);
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--time-picker--xl .#{$prefix}--select-input,
-  .#{$prefix}--time-picker--xl .#{$prefix}--time-picker__input-field,
   .#{$prefix}--time-picker--lg .#{$prefix}--select-input,
   .#{$prefix}--time-picker--lg .#{$prefix}--time-picker__input-field {
     height: rem(48px);