Skip to content

Commit

Permalink
chore(DatePickerInput): updated size prop
Browse files Browse the repository at this point in the history
  • Loading branch information
@sstrubberg
sstrubberg committed Mar 4, 2022
1 parent 911c50c commit 56c029e
Show file tree
Hide file tree
Showing 3 changed files with 55 additions and 55 deletions.
93 changes: 52 additions & 41 deletions packages/react/src/components/DatePicker/next/DatePicker.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
15 changes: 3 additions & 12 deletions packages/react/src/components/DatePickerInput/next/DatePickerInput.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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>`
*/
Expand Down Expand Up @@ -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>`
Expand Down
2 changes: 0 additions & 2 deletions packages/styles/scss/components/date-picker/_date-picker.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down

0 comments on commit 56c029e

Please sign in to comment.