diff --git a/packages/react/src/components/TimePicker/TimePicker.js b/packages/react/src/components/TimePicker/TimePicker.js index 774e9c90f8b1..504d664c7dc1 100644 --- a/packages/react/src/components/TimePicker/TimePicker.js +++ b/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']), diff --git a/packages/react/src/components/TimePicker/next/TimePicker.js b/packages/react/src/components/TimePicker/next/TimePicker.js index a341df154bbf..810b5d2b0a59 100644 --- a/packages/react/src/components/TimePicker/next/TimePicker.js +++ b/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']), diff --git a/packages/react/src/components/TimePicker/next/TimePicker.stories.js b/packages/react/src/components/TimePicker/next/TimePicker.stories.js index c27532ec2bec..a6aad6b034b1 100644 --- a/packages/react/src/components/TimePicker/next/TimePicker.stories.js +++ b/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 ( - + @@ -75,10 +84,10 @@ export const Default = () => { ); }; -export const WithLayer = () => { +export const WithLayer = (args) => { return ( <> - + @@ -89,7 +98,7 @@ export const WithLayer = () => { - + @@ -100,7 +109,7 @@ export const WithLayer = () => { - + diff --git a/packages/styles/scss/components/time-picker/_time-picker.scss b/packages/styles/scss/components/time-picker/_time-picker.scss index 2cfee6c8bae1..7f57be067669 100644 --- a/packages/styles/scss/components/time-picker/_time-picker.scss +++ b/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);