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

Jump to bottom

added support for date and date time for input #404

Merged
merged 5 commits into from
Dec 29, 2021
Merged

added support for date and date time for input #404

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f98d40a
added support for date and date time for input
etaylib Dec 24, 2021
2cb4660
moved to text field
etaylib Dec 27, 2021
fc76919
id fix
etaylib Dec 27, 2021
8137c63
fixes
etaylib Dec 28, 2021
eee57d2
fix props validation + added snapshot test
etaylib Dec 29, 2021
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
2 changes: 1 addition & 1 deletion src/components/TextField/TextField.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -270,7 +270,7 @@ TextField.propTypes = {
secondary: PropTypes.string
}),
/** TEXT_TYPES is exposed on the component itself */
type: PropTypes.oneOf([TextField.types.TEXT, TextField.types.PASSWORD, TextField.types.SEARCH]),
type: PropTypes.oneOf([TextField.types.TEXT, TextField.types.PASSWORD, TextField.types.SEARCH, TextField.types.DATE, TextField.types.DATE_TIME]),
maxLength: PropTypes.number,
trim: PropTypes.bool,
/** ARIA role for container landmark */
Expand Down
4 changes: 3 additions & 1 deletion src/components/TextField/TextFieldConstants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,5 +14,7 @@ export const getActualSize = size => {
export const TEXT_TYPES = {
TEXT: "text",
PASSWORD: "password",
SEARCH: "search"
SEARCH: "search",
DATE: "date",
DATE_TIME: "datetime-local"
};
26 changes: 26 additions & 0 deletions src/components/TextField/__stories__/TextField.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { ArgsTable, Story, Canvas, Meta } from "@storybook/addon-docs";
import TextField from "../TextField";
import { TEXT_TYPES } from "../TextFieldConstants";
import { createComponentTemplate, createStoryMetaSettings } from "../../../storybook/functions/create-component-story";
import { Email, CloseSmall, Check } from "../../Icon/Icons";
import { DROPDOWN, SEARCH, COMBOBOX } from "../../../storybook/components/related-components/component-description-map";
Expand Down Expand Up @@ -159,5 +160,30 @@ Users can insert text.
</Story>
</Canvas>


### Input field with date
<Canvas>
<Story name="Input field with date">
<div className="monday-storybook-text-field_size">
<TextField
size={TextField.sizes.MEDIUM}
type={TEXT_TYPES.DATE}
/>
</div>
</Story>
</Canvas>

### Input field with datetime
<Canvas>
<Story name="Input field with date and time">
<div className="monday-storybook-text-field_size">
<TextField
size={TextField.sizes.MEDIUM}
type={TEXT_TYPES.DATE_TIME}
/>
</div>
</Story>
</Canvas>

## Related components
<RelatedComponents componentsNames={[DROPDOWN, SEARCH, COMBOBOX]} />
144 changes: 144 additions & 0 deletions src/components/TextField/__tests__/__snapshots__/textField-snapshot-tests.jest.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -531,6 +531,150 @@ exports[`TextField renders correctly with className 2`] = `
</div>
`;

exports[`TextField renders correctly with date type 1`] = `
<div
aria-busy={false}
className="input-component"
role=""
>
<div
className="input-component__label--wrapper"
>
<div
className="input-component__input-wrapper input-component__input-wrapper--size-small"
>
<input
aria-activedescendant=""
aria-invalid={null}
aria-label=""
aria-owns=""
autoComplete="off"
className="input-component__input"
disabled={false}
id="input"
maxLength={null}
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
placeholder=""
readOnly={false}
required={false}
role=""
type="date"
value=""
/>
<div
className="input-component__icon--container input-component__icon--container-active"
onClick={[Function]}
onDragStart={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
onMouseDown={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
onMouseUp={[Function]}
onTouchCancel={[Function]}
onTouchEnd={[Function]}
onTouchMove={[Function]}
onTouchStart={[Function]}
role="button"
tabIndex="-1"
/>
<div
className="input-component__icon--container input-component__icon--container-active"
onClick={[Function]}
onDragStart={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
onMouseDown={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
onMouseUp={[Function]}
onTouchCancel={[Function]}
onTouchEnd={[Function]}
onTouchMove={[Function]}
onTouchStart={[Function]}
role="button"
tabIndex="-1"
/>
</div>
</div>
</div>
`;

exports[`TextField renders correctly with date-time type 1`] = `
<div
aria-busy={false}
className="input-component"
role=""
>
<div
className="input-component__label--wrapper"
>
<div
className="input-component__input-wrapper input-component__input-wrapper--size-small"
>
<input
aria-activedescendant=""
aria-invalid={null}
aria-label=""
aria-owns=""
autoComplete="off"
className="input-component__input"
disabled={false}
id="input"
maxLength={null}
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
placeholder=""
readOnly={false}
required={false}
role=""
type="datetime-local"
value=""
/>
<div
className="input-component__icon--container input-component__icon--container-active"
onClick={[Function]}
onDragStart={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
onMouseDown={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
onMouseUp={[Function]}
onTouchCancel={[Function]}
onTouchEnd={[Function]}
onTouchMove={[Function]}
onTouchStart={[Function]}
role="button"
tabIndex="-1"
/>
<div
className="input-component__icon--container input-component__icon--container-active"
onClick={[Function]}
onDragStart={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
onMouseDown={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
onMouseUp={[Function]}
onTouchCancel={[Function]}
onTouchEnd={[Function]}
onTouchMove={[Function]}
onTouchStart={[Function]}
role="button"
tabIndex="-1"
/>
</div>
</div>
</div>
`;

exports[`TextField renders correctly with icon 1`] = `
<div
aria-busy={false}
Expand Down
10 changes: 10 additions & 0 deletions src/components/TextField/__tests__/textField-snapshot-tests.jest.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,4 +97,14 @@ describe("TextField renders correctly", () => {
const tree = renderer.create(<TextField iconsNames={{ primary: "primary-label", secondary: "secondary-label", layout: "test" }} />).toJSON();
expect(tree).toMatchSnapshot();
});

it("with date type", () => {
const tree = renderer.create(<TextField type={TextField.types.DATE} />).toJSON();
expect(tree).toMatchSnapshot();
});

it("with date-time type", () => {
const tree = renderer.create(<TextField type={TextField.types.DATE_TIME} />).toJSON();
expect(tree).toMatchSnapshot();
});
});