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(docs): update DatePicker docs #6689

Merged
merged 5 commits into from
Aug 20, 2020
Merged

chore(docs): update DatePicker docs #6689

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d97c2ca
chore(docs): start updating DatePicker docs
tw15egan Aug 18, 2020
451a741
chore(docs): add DatePicker prop docs
tw15egan Aug 19, 2020
9ea683c
chore(docs): add references, add list styles
tw15egan Aug 20, 2020
450bfae
Merge branch 'master' into date-picker-docs
tw15egan Aug 20, 2020
9b28f7a
Merge branch 'master' into date-picker-docs
kodiakhq[bot] Aug 20, 2020
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
4 changes: 4 additions & 0 deletions packages/react/.storybook/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,3 +99,7 @@ $prefix: 'bx';
}
}
}

.sbdocs-li {
list-style: circle;
}
156 changes: 23 additions & 133 deletions packages/react/src/components/DatePicker/DatePicker-story.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,11 @@
*/

import React from 'react';
import { action, decorateAction } from '@storybook/addon-actions';

import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
import DatePicker from '../DatePicker';
import DatePickerInput from '../DatePickerInput';
import DatePickerSkeleton from '../DatePicker/DatePicker.Skeleton';
import WithState from '../../tools/withState';

// Datepickers last argument contains an instance of flatpickr
// and will cause action logger to enter an infinite loop. Just don't log that argument
const datePickerOnChangeActions = decorateAction([
(args) => args.slice(0, args.length - 2),
]);
import mdx from './DatePicker.mdx';

const patterns = {
'Short (d{1,2}/d{4})': '\\d{1,2}/\\d{4}',
Expand All @@ -33,10 +25,9 @@ const sizes = {

const props = {
datePicker: () => ({
dateFormat: text('The date format (dateFormat in <DatePicker>)', 'm/d/Y'),
id: 'date-picker',
light: boolean('Light variant (light in <DatePicker>)', false),
onChange: datePickerOnChangeActions('onPickerChange'),
onClose: action('onClose'),
}),
datePickerInput: () => ({
id: 'date-picker-input-id',
Expand Down Expand Up @@ -68,8 +59,6 @@ const props = {
'Icon description (iconDescription in <DatePickerInput>)',
'Icon description'
),
onClick: action('onClick'),
onChange: action('onInputChange'),
}),
};

Expand All @@ -84,152 +73,53 @@ export default {
DatePickerInput,
DatePickerSkeleton,
},
docs: {
page: mdx,
},
},
};

export const Simple = () => (
<DatePicker
{...props.datePicker()}
short={boolean('Use shorter width (short in <DatePicker>)', false)}
datePickerType="simple">
<DatePickerInput {...props.datePickerInput()} />
<DatePicker datePickerType="simple">
<DatePickerInput placeholder="mm/dd/yyyy" labelText="Date Picker label" />
</DatePicker>
);

Simple.storyName = 'simple';

Simple.parameters = {
info: {
text: 'A simple Date Picker consists of an input field and no calendar.',
},
};

export const SingleWithCalendar = () => (
<DatePicker
{...props.datePicker()}
datePickerType="single"
dateFormat={text('The date format (dateFormat in <DatePicker>)', 'm/d/Y')}>
<DatePickerInput
openCalendar={() => console.log('click')}
{...props.datePickerInput()}
/>
export const Single = () => (
<DatePicker datePickerType="single">
<DatePickerInput placeholder="mm/dd/yyyy" labelText="Date Picker label" />
</DatePicker>
);

SingleWithCalendar.storyName = 'single with calendar';

SingleWithCalendar.parameters = {
info: {
text: `
A single Date Picker consists of an input field and a calendar.
`,
},
};
Single.storyName = 'single with calendar';

export const RangeWithCalendar = () => {
const datePickerInputProps = props.datePickerInput();
export const Range = () => {
return (
<DatePicker
{...props.datePicker()}
datePickerType="range"
dateFormat={text(
'The date format (dateFormat in <DatePicker>)',
'm/d/Y'
)}>
<DatePicker datePickerType="range">
<DatePickerInput
{...datePickerInputProps}
id="date-picker-input-id-start"
placeholder="mm/dd/yyyy"
labelText="Start date"
/>
<DatePickerInput
{...datePickerInputProps}
id="date-picker-input-id-end"
id="date-picker-input-id-finish"
placeholder="mm/dd/yyyy"
labelText="End date"
/>
</DatePicker>
);
};

RangeWithCalendar.storyName = 'range with calendar';

RangeWithCalendar.parameters = {
info: {
text: `
A range Date Picker consists of two input fields and a calendar.
`,
},
};
Range.storyName = 'range with calendar';

export const RangeWithCalendarAndMinMaxDates = () => {
const datePickerInputProps = props.datePickerInput();
return (
<DatePicker
{...props.datePicker()}
minDate="1/10/2020"
maxDate="1/20/2020"
datePickerType="range"
dateFormat="m/d/Y">
<DatePickerInput {...datePickerInputProps} id="date-picker-input-id" />
<DatePickerInput {...datePickerInputProps} id="date-picker-input-id-2" />
</DatePicker>
);
};

RangeWithCalendarAndMinMaxDates.storyName =
'range with calendar and min/max dates';

RangeWithCalendarAndMinMaxDates.parameters = {
info: {
text: `
A range Date Picker consists of two input fields and a calendar, and optionally, the minDate and maxDate fields.
`,
},
};

export const FullyControlled = () => (
<WithState initialState={{ date: '' }}>
{({ state, setState }) => (
<>
<DatePicker
datePickerType="single"
dateFormat="m/d/Y"
value={state.date}
onChange={(eventOrDates) => {
const value = eventOrDates.target
? eventOrDates.target.value
: eventOrDates[0];
setState({ date: value });
}}>
<DatePickerInput
{...props.datePickerInput()}
id="date-picker-input-id"
/>
</DatePicker>
<button type="button" onClick={() => setState({ date: '01/01/2011' })}>
Click me to set to 01/01/2011
</button>
</>
)}
</WithState>
export const DatePickerPlayground = () => (
<DatePicker {...props.datePicker()} datePickerType="single">
<DatePickerInput {...props.datePickerInput()} />
</DatePicker>
);

FullyControlled.storyName = 'fully controlled';

FullyControlled.parameters = {
info: {
text: `
If your application needs to control the value of the date picker and
be notified of any changes.
`,
},
};

export const Skeleton = () => <DatePickerSkeleton range />;

Skeleton.storyName = 'skeleton';

Skeleton.parameters = {
info: {
text: `
Placeholder skeleton state to use when content is loading.
`,
},
};
108 changes: 55 additions & 53 deletions packages/react/src/components/DatePicker/DatePicker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,58 +151,58 @@ export default class DatePicker extends Component {
light: PropTypes.bool,

/**
* The language locale used to format the days of the week, months, and numbers.
*
* * `ar` - Arabic
* * `at` - Austria
* * `be` - Belarusian
* * `bg` - Bulgarian
* * `bn` - Bangla
* * `cat` - Catalan
* * `cs` - Czech
* * `cy` - Welsh
* * `da` - Danish
* * `de` - German
* * `en` - English
* * `eo` - Esperanto
* * `es` - Spanish
* * `et` - Estonian
* * `fa` - Persian
* * `fi` - Finnish
* * `fr` - French
* * `gr` - Greek
* * `he` - Hebrew
* * `hi` - Hindi
* * `hr` - Croatian
* * `hu` - Hungarian
* * `id` - Indonesian
* * `it` - Italian
* * `ja` - Japanese
* * `ko` - Korean
* * `lt` - Lithuanian
* * `lv` - Latvian
* * `mk` - Macedonian
* * `mn` - Mongolian
* * `ms` - Malaysian
* * `my` - Burmese
* * `nl` - Dutch
* * `no` - Norwegian
* * `pa` - Punjabi
* * `pl` - Polish
* * `pt` - Portuguese
* * `ro` - Romanian
* * `si` - Sinhala
* * `sk` - Slovak
* * `sl` - Slovenian
* * `sq` - Albanian
* * `sr` - Serbian
* * `sv` - Swedish
* * `th` - Thai
* * `tr` - Turkish
* * `uk` - Ukrainian
* * `vn` - Vietnamese
* * `zh` - Mandarin
*/
* The language locale used to format the days of the week, months, and numbers. The full list of supported locales can be found here https://github.com/flatpickr/flatpickr/tree/master/src/l10n
tw15egan marked this conversation as resolved.
Show resolved Hide resolved
*
* `ar` - Arabic
`at` - Austria
`be` - Belarusian
`bg` - Bulgarian
`bn` - Bangla
`cat` - Catalan
`cs` - Czech
`cy` - Welsh
`da` - Danish
`de` - German
`en` - English
`eo` - Esperanto
`es` - Spanish
`et` - Estonian
`fa` - Persian
`fi` - Finnish
`fr` - French
`gr` - Greek
`he` - Hebrew
`hi` - Hindi
`hr` - Croatian
`hu` - Hungarian
`id` - Indonesian
`it` - Italian
`ja` - Japanese
`ko` - Korean
`lt` - Lithuanian
`lv` - Latvian
`mk` - Macedonian
`mn` - Mongolian
`ms` - Malaysian
`my` - Burmese
`nl` - Dutch
`no` - Norwegian
`pa` - Punjabi
`pl` - Polish
`pt` - Portuguese
`ro` - Romanian
`si` - Sinhala
`sk` - Slovak
`sl` - Slovenian
`sq` - Albanian
`sr` - Serbian
`sv` - Swedish
`th` - Thai
`tr` - Turkish
`uk` - Ukrainian
`vn` - Vietnamese
`zh` - Mandarin
*/
locale: PropTypes.oneOf([
'ar',
'at',
Expand Down Expand Up @@ -336,7 +336,9 @@ export default class DatePicker extends Component {
maxDate: maxDate,
plugins: [
datePickerType === 'range'
? new carbonFlatpickrRangePlugin({ input: this.toInputField })
? new carbonFlatpickrRangePlugin({
input: this.toInputField,
})
: () => {},
appendTo
? carbonFlatpickrAppendToPlugin({
Expand Down
Loading