Skip to content

Commit

Permalink
Integration: Date Picker [LG-3152] (#1951)
Browse files Browse the repository at this point in the history
  • Loading branch information
@TheSonOfThomp
TheSonOfThomp authored Jan 11, 2024
1 parent 7f38e78 commit ffd11f2
Show file tree
Hide file tree
Showing 345 changed files with 18,170 additions and 141 deletions.
6 changes: 6 additions & 0 deletions .changeset/big-carpets-sleep.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@lg-tools/meta': minor
---

- Adds `exitWithErrorMessage` util
- Fixes recursion in `findPackageJson`
5 changes: 5 additions & 0 deletions .changeset/eighty-kings-mix.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@leafygreen-ui/date-picker': minor
---

Initial pre-release of `date-picker`. Use DatePicker to allow users to input a date
5 changes: 5 additions & 0 deletions .changeset/eleven-donkeys-tickle.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@lg-tools/test': minor
---

Adds coverage reporting for untested sub-modules
8 changes: 8 additions & 0 deletions .changeset/famous-timers-eat.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
'@leafygreen-ui/select': patch
---

- Passes `onEnter*` and `onExit*` props to internal `Popover` component
- Adds tests to test `onEnter*` and `onExit*` callbacks
- Adds tests to test `PopoverContext`

5 changes: 5 additions & 0 deletions .changeset/great-avocados-battle.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@lg-tools/test': minor
---

Updates to jest 29 for React 17 testing
5 changes: 5 additions & 0 deletions .changeset/little-melons-beam.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@leafygreen-ui/lib': minor
---

Updates Typescript signature of `createSyntheticEvent`
5 changes: 5 additions & 0 deletions .changeset/old-numbers-serve.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@lg-tools/storybook-decorators': patch
---

Adds Null check for args
9 changes: 9 additions & 0 deletions .changeset/proud-doors-smoke.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
'@leafygreen-ui/lib': minor
---
- Creates new utility functions
- `rollover`
- `truncateStart`
- `cloneReverse`
- `isDefined`
- `isZeroLike` & `isNotZeroLike`
5 changes: 5 additions & 0 deletions .changeset/rare-apples-deny.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@leafygreen-ui/form-field': patch
---

Updates disabled icon colors
5 changes: 5 additions & 0 deletions .changeset/rude-tomatoes-hang.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@leafygreen-ui/input-option': minor
---

Renders `aria-disabled` attribute when `disabled` is provided
5 changes: 5 additions & 0 deletions .changeset/seven-stingrays-bake.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@leafygreen-ui/popover': patch
---

Exports `ChildrenFunctionParameters` type
5 changes: 5 additions & 0 deletions .changeset/shaggy-falcons-invite.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@leafygreen-ui/form-field': minor
---

Adds `data-testid` to Label, Description & Error elements
5 changes: 5 additions & 0 deletions .changeset/smart-steaks-care.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@leafygreen-ui/date-utils': minor
---

Initial pre-release of `date-utils`. DateUtils contains utility functions for managing and manipulating JS Date objects
8 changes: 8 additions & 0 deletions .changeset/soft-berries-obey.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
'@leafygreen-ui/hooks': minor
---

- Extends `useControlledValue` to accept any type.
- Adds `updateValue` function in return value. This method triggers a synthetic event to update the value of a controlled or uncontrolled component.
- Adds `initialValue` argument. Used for setting the initial value for uncontrolled components. Without this we may encounter a React error for switching between controlled/uncontrolled inputs
- The value of `isControlled` is now immutable after the first render
5 changes: 5 additions & 0 deletions .changeset/spotty-wombats-end.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@lg-tools/validate': patch
---

Updates dev file pattern to include entire `testutils/` directories
5 changes: 5 additions & 0 deletions .changeset/stale-jeans-travel.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@leafygreen-ui/a11y': patch
---

Update `AriaLabelProps` `label` type from `string` to `ReactNode`
5 changes: 5 additions & 0 deletions .changeset/tall-mice-ring.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@leafygreen-ui/lib': patch
---

Updates `target` type in `createSyntheticEvent` to extend `EventTarget`
5 changes: 5 additions & 0 deletions .changeset/tidy-lemons-drop.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@leafygreen-ui/typography': minor
---

Allows `Link` component to accept a ref
6 changes: 4 additions & 2 deletions packages/a11y/src/AriaLabelProps.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { ReactNode } from 'react';

/**
* A union interface requiring _either_ `aria-label` or `aria-labelledby`
*/
Expand Down Expand Up @@ -43,13 +45,13 @@ export type AriaLabelPropsWithLabel =
*
* Optional if `aria-labelledby` or `aria-label` is provided
*/
label?: string;
label?: ReactNode;
} & AriaLabelProps)
| ({
/**
* Text shown in bold above the input element.
*
* Optional if `aria-labelledby` or `aria-label` is provided
*/
label: string;
label: ReactNode;
} & Partial<AriaLabelProps>);
100 changes: 100 additions & 0 deletions packages/date-picker/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
# Date Picker

![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/date-picker.svg)

#### [View on MongoDB.design](https://www.mongodb.design/component/date-picker/example/)

## Installation

### Yarn

```shell
yarn add @leafygreen-ui/date-picker
```

### NPM

```shell
npm install @leafygreen-ui/date-picker
```

## Example

```js
import { DatePicker } from '@leafygreen-ui/date-picker';

const [date, setDate] = useState<Date>();

<DatePicker
label="Pick a date"
value={date}
max={new Date("2026-12-26")}
onDateChange={setDate}
locale="iso8601"
timeZone="utc"
/>;
```

## Properties

| Prop | Type | Description | Default |
| ------------------ | --------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
| `label` | `ReactNode` | Label shown above the date picker. | |
| `description` | `ReactNode` | A description for the date picker. It's recommended to set a meaningful time zone representation as the description. (e.g. "Coordinated Universal Time") | |
| `locale` | `'iso8601'`\| `'string'` | Sets the _presentation format_ for the displayed date, and localizes month & weekday labels. Defaults to the user’s browser preference (if available), otherwise ISO-8601. | `iso8601` |
| `timeZone` | `string` | A valid IANA timezone string, or UTC offset, used to calculate initial values. Defaults to the user’s browser settings. |
| `min` | `Date` | The earliest date accepted, in UTC | |
| `max` | `Date` | The latest date accepted, in UTC | |
| `value` | `'Date'` \| `'InvalidDate'` \| `'null'` | The selected date. Note that this Date object will be read as UTC time. Providing `Date.now()` could result in the incorrect date being displayed, depending on the system time zone. <br><br> To set `value` to today, regardless of timeZone, use `setToUTCMidnight(new Date(Date.now()))`. <br><br> e.g. `2023-12-31` at 20:00 in Los Angeles, will be `2024-01-01` at 04:00 in UTC. To set the correct day (`2023-12-31`) as the DatePicker value we must first convert our local timestamp to `2023-12-31` at midnight | |
| `onDateChange` | `(value?: Date \| InvalidDate \| null) => void` | Callback fired when the user makes a value change. Fired on click of a new date in the menu, or on keydown if the input contains a valid date. <br><br> _Not_ fired when a date segment changes, but does not create a full date <br><br> Callback date argument will be a Date object in UTC time, or `null` | |
| `initialValue` | `'Date'` \| `'InvalidDate'` \| `'null'` | The initial selected date. Ignored if `value` is provided <br><br> Note that this Date object will be read as UTC time. See `value` prop documentation for more details | |
| `handleValidation` | `(value?: Date \| InvalidDate \| null) => void` | A callback fired when validation should run, based on [form validation guidelines](https://www.mongodb.design/foundation/forms/#form-validation-error-handling). Use this callback to compute the correct `state` and `errorMessage` value.<br> <br> Callback date argument will be a Date object in UTC time, or `null` | |
| `onChange` | `(event: ChangeEvent<HTMLInputElement>) => void` | Callback fired when any segment changes, (but not necessarily a full value) | |
| `baseFontSize` | `'13'` \| `'16'` | The base font size of the input. Inherits from the nearest LeafyGreenProvider | |
| `disabled` | `boolean` | Whether the input is disabled. _Note_: will not set the `disabled` attribute on an input and the calendar menu will not open if disabled is set to true. | `false` |
| `size` | `'small'` \| `'xsmall'` \| `'default'` \| `'large'` | Whether the input is disabled. Note: will not set the `disabled` attribute on an input and the calendar menu will not open if disabled is set to true. | `default` |
| `state` | `'none'` \| `'error'` | Whether to show an error message | `none` |
| `errorMessage` | `string` | A message to show in red underneath the input when state is `Error` | |
| `initialOpen` | `boolean` | Whether the calendar menu is initially open. _Note_: The calendar menu will not open if disabled is set to `true`. | `false` |
| `autoComplete` | `'off'` \| `'on'` \| `'bday'` | Whether the input should autofill | `off` |
| `darkMode` | `boolean` | Render the component in dark mode. | `false` |

## 🔎 Glossary

### Date format

The pattern in which a string stores date (& time) information. E.g. `“YYYY-DD-MM”`, `“MM/DD/YYYY”`, `“YYYY-MM-DDTHH:mm:ss.sssZ”`

### Wire format (or Data format)

The format of the date string passed into the component. This will typically be [ISO-8601](https://www.iso.org/iso-8601-date-and-time-format.html), but could be any format accepted by the [Date constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date).

### Presentation format

The format in which the date is presented to the user. By default, the HTML date input element presents this in the format of the user’s Locale (as defined in browser or OS settings).

### Locale

Language, script, & region information. Can also include [other data](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale).

### Time Zone

A string representing a user’s local time zone (e.g. “America/New_York”) or UTC offset. Valid time zones are defined by IANA, and [listed on Wikipedia](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones#List). A UTC offset can be [provided in a DateTime string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#date_time_string_format).

### UTC offset

The offset of a time zone vs UTC. E.g. The UTC offset for `“America/New_York”` is -5:00, (or -4:00 depending on daylight savings).

### Wire time zone (or Data time zone)

The time zone information contained in the date string/object passed into the component.

### Presentation time zone

The time zone relative to which we present date information to the user. Can result in a different day than the wire time zone. E.g. `“2023-08-08T00:00:00Z”` (Aug. 8/2023 at midnight UTC) => `“2023-08-07T20:00:00-04:00”` (Aug. 7 at 8pm EDT)

## Special Case

### Aria Labels

Either `label` or `aria-labelledby` or `aria-label` must be provided, or there will be a console error. This is to ensure that screenreaders have a description for what the DatePicker does.
Loading

0 comments on commit ffd11f2

Please sign in to comment.