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.

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

(feat) O3-3505: Datepicker improvements #1099

Merged
merged 3 commits into from
Jul 31, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
6 changes: 3 additions & 3 deletions packages/framework/esm-framework/docs/API.md
Original file line number Diff line number Diff line change
Expand Up @@ -523,13 +523,13 @@ ___

### DateInputValue

Ƭ **DateInputValue**: `CalendarDate` \| `CalendarDateTime` \| `ZonedDateTime` \| `Date` \| `Dayjs` \| `string` \| `number` \| ``null`` \| `undefined`
Ƭ **DateInputValue**: `CalendarDate` \| `CalendarDateTime` \| `ZonedDateTime` \| `DayjsConfigType`

A type for any of the acceptable date formats

#### Defined in

[packages/framework/esm-styleguide/src/datepicker/index.tsx:58](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/datepicker/index.tsx#L58)
[packages/framework/esm-styleguide/src/datepicker/index.tsx:73](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/datepicker/index.tsx#L73)

___

Expand Down Expand Up @@ -1559,7 +1559,7 @@ A date picker component to select a single date. Based on React Aria, but styled

#### Defined in

[packages/framework/esm-styleguide/src/datepicker/index.tsx:251](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/datepicker/index.tsx#L251)
[packages/framework/esm-styleguide/src/datepicker/index.tsx:392](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/datepicker/index.tsx#L392)

___

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ Properties for the OpenmrsDatePicker

## Hierarchy

- `Omit`<`DatePickerProps`<`CalendarDate`\>, ``"className"`` \| ``"defaultValue"`` \| ``"value"``\>
- `Omit`<`DatePickerProps`<`CalendarDate`\>, ``"className"`` \| ``"onChange"`` \| ``"defaultValue"`` \| ``"value"``\>

↳ **`OpenmrsDatePickerProps`**

Expand Down Expand Up @@ -58,6 +58,7 @@ Properties for the OpenmrsDatePicker
- [isDateUnavailable](OpenmrsDatePickerProps.md#isdateunavailable)
- [onBlur](OpenmrsDatePickerProps.md#onblur)
- [onChange](OpenmrsDatePickerProps.md#onchange)
- [onChangeRaw](OpenmrsDatePickerProps.md#onchangeraw)
- [onFocus](OpenmrsDatePickerProps.md#onfocus)
- [onFocusChange](OpenmrsDatePickerProps.md#onfocuschange)
- [onKeyDown](OpenmrsDatePickerProps.md#onkeydown)
Expand Down Expand Up @@ -171,7 +172,7 @@ Any CSS classes to add to the outer div of the date picker

#### Defined in

[packages/framework/esm-styleguide/src/datepicker/index.tsx:76](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/datepicker/index.tsx#L76)
[packages/framework/esm-styleguide/src/datepicker/index.tsx:82](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/datepicker/index.tsx#L82)

___

Expand Down Expand Up @@ -199,7 +200,7 @@ The default value (uncontrolled)

#### Defined in

[packages/framework/esm-styleguide/src/datepicker/index.tsx:78](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/datepicker/index.tsx#L78)
[packages/framework/esm-styleguide/src/datepicker/index.tsx:84](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/datepicker/index.tsx#L84)

___

Expand Down Expand Up @@ -277,7 +278,7 @@ Whether the input value is invalid.

#### Defined in

[packages/framework/esm-styleguide/src/datepicker/index.tsx:80](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/datepicker/index.tsx#L80)
[packages/framework/esm-styleguide/src/datepicker/index.tsx:86](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/datepicker/index.tsx#L86)

___

Expand All @@ -289,7 +290,7 @@ Text to show if the input is invalid e.g. an error message

#### Defined in

[packages/framework/esm-styleguide/src/datepicker/index.tsx:82](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/datepicker/index.tsx#L82)
[packages/framework/esm-styleguide/src/datepicker/index.tsx:88](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/datepicker/index.tsx#L88)

___

Expand Down Expand Up @@ -383,7 +384,7 @@ The label for this DatePicker element

#### Defined in

[packages/framework/esm-styleguide/src/datepicker/index.tsx:87](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/datepicker/index.tsx#L87)
[packages/framework/esm-styleguide/src/datepicker/index.tsx:93](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/datepicker/index.tsx#L93)

___

Expand All @@ -395,7 +396,7 @@ The label for this DatePicker element.

#### Defined in

[packages/framework/esm-styleguide/src/datepicker/index.tsx:89](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/datepicker/index.tsx#L89)
[packages/framework/esm-styleguide/src/datepicker/index.tsx:95](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/datepicker/index.tsx#L95)

___

Expand All @@ -407,7 +408,7 @@ ___

#### Defined in

[packages/framework/esm-styleguide/src/datepicker/index.tsx:91](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/datepicker/index.tsx#L91)
[packages/framework/esm-styleguide/src/datepicker/index.tsx:97](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/datepicker/index.tsx#L97)

___

Expand All @@ -419,7 +420,7 @@ The latest date it is possible to select

#### Defined in

[packages/framework/esm-styleguide/src/datepicker/index.tsx:93](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/datepicker/index.tsx#L93)
[packages/framework/esm-styleguide/src/datepicker/index.tsx:99](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/datepicker/index.tsx#L99)

___

Expand Down Expand Up @@ -447,7 +448,7 @@ The earliest date it is possible to select

#### Defined in

[packages/framework/esm-styleguide/src/datepicker/index.tsx:95](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/datepicker/index.tsx#L95)
[packages/framework/esm-styleguide/src/datepicker/index.tsx:101](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/datepicker/index.tsx#L101)

___

Expand Down Expand Up @@ -525,7 +526,7 @@ ___

#### Defined in

[packages/framework/esm-styleguide/src/datepicker/index.tsx:99](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/datepicker/index.tsx#L99)
[packages/framework/esm-styleguide/src/datepicker/index.tsx:109](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/datepicker/index.tsx#L109)

___

Expand Down Expand Up @@ -572,7 +573,7 @@ Specifies the size of the input. Currently supports either `sm`, `md`, or `lg` a

#### Defined in

[packages/framework/esm-styleguide/src/datepicker/index.tsx:97](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/datepicker/index.tsx#L97)
[packages/framework/esm-styleguide/src/datepicker/index.tsx:107](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/datepicker/index.tsx#L107)

___

Expand Down Expand Up @@ -637,7 +638,7 @@ The value (controlled)

#### Defined in

[packages/framework/esm-styleguide/src/datepicker/index.tsx:101](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/datepicker/index.tsx#L101)
[packages/framework/esm-styleguide/src/datepicker/index.tsx:111](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/datepicker/index.tsx#L111)

## Methods

Expand Down Expand Up @@ -703,19 +704,37 @@ Handler that is called when the value changes.

| Name | Type |
| :------ | :------ |
| `value` | `C` |
| `value` | `undefined` \| ``null`` \| `Date` |

#### Returns

`void`

#### Inherited from
#### Defined in

Omit.onChange
[packages/framework/esm-styleguide/src/datepicker/index.tsx:103](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/datepicker/index.tsx#L103)

___

### onChangeRaw

▸ `Optional` **onChangeRaw**(`value`): `void`

Handler that is called when the value changes. Note that this provides types from @internationalized/date.

#### Parameters

| Name | Type |
| :------ | :------ |
| `value` | ``null`` \| `DateValue` |

#### Returns

`void`

#### Defined in

node_modules/@react-types/shared/src/inputs.d.ts:71
[packages/framework/esm-styleguide/src/datepicker/index.tsx:105](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/datepicker/index.tsx#L105)

___

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,6 @@
}

&[data-placeholder] {
caret-color: var(--cds-text-primary);
color: theme.$text-disabled;
}
}
Expand Down Expand Up @@ -327,7 +326,6 @@
&::after {
position: absolute;
display: block;
background-color: var(--cds-link-primary, #0f62fe);
block-size: 0.25rem;
content: '';
inline-size: 0.25rem;
Expand All @@ -336,4 +334,12 @@
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}

&[data-disabled]::after {
background-color: theme.$text-disabled;
}

&:not([data-disabled])::after {
background-color: var(--cds-link-primary, theme.$link-primary);
}
}
Loading
Loading