Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
Mar 15, 2022
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a1434cf
chore(TimePicker): updated size prop for v11
sstrubberg Mar 9, 2022
1dc3969
Merge branch 'main' into timepicker-size-audit
Mar 11, 2022
12e2271
Merge branch 'main' into timepicker-size-audit
sstrubberg Mar 15, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions packages/react/src/components/TimePicker/TimePicker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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']),

Expand Down
4 changes: 2 additions & 2 deletions packages/react/src/components/TimePicker/next/TimePicker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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']),

Expand Down
21 changes: 15 additions & 6 deletions packages/react/src/components/TimePicker/next/TimePicker.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand All @@ -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" />
Expand All @@ -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" />
Expand All @@ -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" />
Expand Down
3 changes: 0 additions & 3 deletions packages/styles/scss/components/time-picker/_time-picker.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down