archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

feat(date-picker): add support for DatePicker to apply styles to DateInput (#3146)

Browse Source 
* feat(date-picker): add support for DatePicker to apply styles to DateInput

* chore: update changeset

* docs(date-picker): add dateInputClassNames props
This commit is contained in:
Ryo Matsukawa 2024-06-15 08:58:11 +09:00 committed by GitHub
parent dbb4b8ee56
commit 3da81494c3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 49 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/cool-dolls-cheat.md Normal file
View File

@ -0,0 +1,5 @@
---
"@nextui-org/date-picker": patch
---
Add support for apply styles to DateInput (#2770, #2895, #2998)

1
apps/docs/content/docs/components/date-picker.mdx
View File

@ -342,6 +342,7 @@ import {I18nProvider} from "@react-aria/i18n";
| timeInputProps | `TimeInputProps` | Props to be passed to the time input component. | `{ size: "sm", variant: "light", radius: "full", isIconOnly: true }` |
| disableAnimation | `boolean` | Whether to disable all animations in the date picker. Including the DateInput, Button, Calendar, and Popover. | `false` |
| classNames | `Record<"base" \| "selectorButton" \| "selectorIcon" \| "popoverContent" \| "calendar" \| "calendarContent" \| "timeInputLabel" \| "timeInput", string>` | Allows to set custom class names for the date-picker slots. | - |
| dateInputClassNames | `Record<"base"｜ "label"｜ "inputWrapper"｜ "innerWrapper"｜ "input"｜ "helperWrapper"｜ "description"｜ "errorMessage", string>` | Allows to set custom class names for the [date input slots](/docs/components/date-input#slots). | - |
### DatePicker Events

20
packages/components/date-picker/__tests__/date-picker.test.tsx
View File

@ -172,6 +172,26 @@ describe("DatePicker", () => {
expect(getByTestId("foo")).toHaveAttribute("role", "group");
});
it("should apply custom dateInput classNames", function () {
const {getByRole, getByText} = render(
<DatePicker
dateInputClassNames={{
inputWrapper: "border-green-500",
label: "text-green-500",
}}
label="Date"
/>,
);
const label = getByText("Date");
expect(label).toHaveClass("text-green-500");
const inputWrapper = getByRole("group");
expect(inputWrapper).toHaveClass("border-green-500");
});
});
describe("Events", () => {

9
packages/components/date-picker/src/use-date-picker.ts
View File

@ -49,7 +49,13 @@ interface Props<T extends DateValue>
classNames?: SlotsToClasses<DatePickerSlots> & DateInputProps<T>["classNames"];
}
export type UseDatePickerProps<T extends DateValue> = Props<T> & AriaDatePickerProps<T>;
export type UseDatePickerProps<T extends DateValue> = Props<T> &
AriaDatePickerProps<T> & {
/**
* Classname or List of classes to change the classNames of the date input element.
*/
dateInputClassNames?: DateInputProps<T>["classNames"];
};
export function useDatePicker<T extends DateValue>({
className,
@ -129,6 +135,7 @@ export function useDatePicker<T extends DateValue>({
const getDateInputProps = () => {
return {
...dateInputProps,
classNames: {...originalProps?.dateInputClassNames},
groupProps,
labelProps,
createCalendar,

15
packages/components/date-picker/stories/date-picker.stories.tsx
View File

@ -537,3 +537,18 @@ export const WithValidation = {
label: "Date (Year 2024 or later)",
},
};
export const WithDateInputClassNames = {
render: Template,
args: {
...defaultProps,
dateInputClassNames: {
base: "bg-gray-200 p-2 rounded-md",
label: "text-blue-400 font-semibold",
inputWrapper: "border-3 border-solid border-blue-400 p-2 rounded-md",
description: "text-black",
},
isRequired: true,
description: "Please enter your birth date",
},
};