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

Fix #5471: Calendar PT refactor #5483

Merged
merged 1 commit into from
Dec 1, 2023
Merged

Fix #5471: Calendar PT refactor #5483

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
96 changes: 67 additions & 29 deletions components/doc/calendar/theming/tailwinddoc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,11 +29,11 @@ const Tailwind = {
})
})
},
dropdownbutton: ({ props }) => ({
root: {
className: classNames({ 'rounded-l-none': props.showIcon })
}
}),
dropdownButton: {
root: ({ props }) => ({
className: classNames({ 'rounded-l-none': props.icon })
})
},
panel: ({ props }) => ({
className: classNames('bg-white dark:bg-gray-900', 'min-w-[350px]', {
'shadow-md border-0 absolute': !props.inline,
Expand All @@ -43,12 +43,14 @@ const Tailwind = {
header: {
className: classNames('flex items-center justify-between', 'p-2 text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 font-semibold m-0 border-b border-gray-300 dark:border-blue-900/40 rounded-t-lg')
},
previousbutton: {
className: classNames(
'flex items-center justify-center cursor-pointer overflow-hidden relative',
'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out',
'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
)
previousButton: {
root: ({ props }) => ({
className: classNames(
'flex items-center justify-center cursor-pointer overflow-hidden relative',
'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out',
'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
)
})
},
title: 'leading-8 mx-auto',
monthTitle: {
Expand All @@ -57,20 +59,22 @@ const Tailwind = {
yearTitle: {
className: classNames('text-gray-700 dark:text-white/80 transition duration-200 font-semibold p-2', 'hover:text-blue-500')
},
nextbutton: {
className: classNames(
'flex items-center justify-center cursor-pointer overflow-hidden relative',
'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out',
'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
)
nextButton: {
root: ({ props }) => ({
className: classNames(
'flex items-center justify-center cursor-pointer overflow-hidden relative',
'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out',
'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
)
})
},
table: {
className: classNames('border-collapse w-full', 'my-2')
},
tableheadercell: 'p-2',
tableHeaderCell: 'p-2',
weekday: 'text-gray-600 dark:text-white/70',
day: 'p-2',
daylabel: ({ context }) => ({
dayLabel: ({ context }) => ({
className: classNames(
'w-10 h-10 rounded-full transition-shadow duration-200 border-transparent border',
'flex items-center justify-center mx-auto overflow-hidden relative',
Expand All @@ -85,7 +89,7 @@ const Tailwind = {
}
)
}),
monthpicker: 'my-2',
monthPicker: 'my-2',
month: ({ context }) => ({
className: classNames(
'w-1/3 inline-flex items-center justify-center cursor-pointer overflow-hidden relative',
Expand All @@ -94,7 +98,7 @@ const Tailwind = {
{ 'text-gray-600 dark:text-white/70 bg-transprent hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.selected && !context.disabled, 'text-blue-700 bg-blue-100 hover:bg-blue-200': context.selected && !context.disabled }
)
}),
yearpicker: {
yearPicker: {
className: classNames('my-2')
},
year: ({ context }) => ({
Expand All @@ -108,33 +112,67 @@ const Tailwind = {
}
)
}),
timepicker: {
timePicker: {
className: classNames('flex justify-center items-center', 'border-t-1 border-solid border-gray-300 p-2')
},
separatorcontainer: 'flex items-center flex-col px-2',
separatorContainer: 'flex items-center flex-col px-2',
separator: 'text-xl',
hourpicker: 'flex items-center flex-col px-2',
minutepicker: 'flex items-center flex-col px-2',
ampmpicker: 'flex items-center flex-col px-2',
incrementbutton: {
hourPicker: 'flex items-center flex-col px-2',
minutePicker: 'flex items-center flex-col px-2',
ampmPicker: 'flex items-center flex-col px-2',
incrementButton: {
className: classNames(
'flex items-center justify-center cursor-pointer overflow-hidden relative',
'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out',
'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
)
},
decrementbutton: {
decrementButton: {
className: classNames(
'flex items-center justify-center cursor-pointer overflow-hidden relative',
'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out',
'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
)
},
groupcontainer: 'flex',
groupContainer: 'flex',
group: {
className: classNames('flex-1', 'border-l border-gray-300 pr-0.5 pl-0.5 pt-0 pb-0', 'first:pl-0 first:border-l-0')
},
transition: TRANSITIONS.overlay
},
listbox: {
root: {
className: classNames('bg-white dark:bg-gray-900 border border-gray-400 dark:border-blue-900/40 transition-colors duration-200 ease-in-out rounded-md', 'w-full md:w-56')
},
wrapper: 'overflow-auto',
list: 'py-3 list-none m-0',
item: ({ context }) => ({
className: classNames('cursor-pointer font-normal overflow-hidden relative whitespace-nowrap', 'm-0 p-3 border-0 transition-shadow duration-200 rounded-none', {
'text-gray-700 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:bg-gray-800': !context.focused && !context.selected,
'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:bg-gray-800': context.focused && !context.selected,
'bg-blue-100 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.focused && context.selected,
'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.selected
})
}),
itemgroup: {
className: classNames('m-0 p-3 text-gray-800 bg-white font-bold', 'dark:bg-gray-900 dark:text-white/80', 'cursor-auto')
},
header: {
className: classNames('p-3 border-b border-gray-300 text-gray-700 bg-gray-100 mt-0 rounded-tl-lg rounded-tr-lg', 'dark:bg-gray-800 dark:text-white/80 dark:border-blue-900/40')
},
filtercontainer: 'relative',
filterinput: {
root: {
className: classNames(
'pr-7 -mr-7',
'w-full',
'font-sans text-base text-gray-700 bg-white py-3 px-3 border border-gray-300 transition duration-200 rounded-lg appearance-none',
'dark:bg-gray-900 dark:border-blue-900/40 dark:hover:border-blue-300 dark:text-white/80',
'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
)
}
},
filtericon: '-mt-2 absolute top-1/2'
}
`
};
Expand Down
14 changes: 2 additions & 12 deletions components/lib/calendar/Calendar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2682,12 +2682,7 @@ export const Calendar = React.memo(
ptm('previousButton')
);

return (
<button ref={previousButton} {...previousButtonProps}>
{backwardNavigatorIcon}
<Ripple />
</button>
);
return <Button type="button" ref={previousButton} icon={backwardNavigatorIcon} {...previousButtonProps} />;
};

const createForwardNavigator = (isVisible) => {
Expand All @@ -2709,12 +2704,7 @@ export const Calendar = React.memo(
ptm('nextButton')
);

return (
<button ref={nextButton} {...nextButtonProps}>
{forwardNavigatorIcon}
<Ripple />
</button>
);
return <Button type="button" ref={nextButton} icon={forwardNavigatorIcon} {...nextButtonProps} />;
};

const renderMonthsNavigator = (index) => {
Expand Down
62 changes: 33 additions & 29 deletions components/lib/passthrough/tailwind/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1132,11 +1132,11 @@ const Tailwind = {
})
})
},
dropdownbutton: ({ props }) => ({
root: {
className: classNames({ 'rounded-l-none': props.showIcon })
}
}),
dropdownButton: {
root: ({ props }) => ({
className: classNames({ 'rounded-l-none': props.icon })
})
},
panel: ({ props }) => ({
className: classNames('bg-white dark:bg-gray-900', 'min-w-[350px]', {
'shadow-md border-0 absolute': !props.inline,
Expand All @@ -1146,12 +1146,14 @@ const Tailwind = {
header: {
className: classNames('flex items-center justify-between', 'p-2 text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 font-semibold m-0 border-b border-gray-300 dark:border-blue-900/40 rounded-t-lg')
},
previousbutton: {
className: classNames(
'flex items-center justify-center cursor-pointer overflow-hidden relative',
'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out',
'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
)
previousButton: {
root: ({ props }) => ({
className: classNames(
'flex items-center justify-center cursor-pointer overflow-hidden relative',
'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out',
'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
)
})
},
title: 'leading-8 mx-auto',
monthTitle: {
Expand All @@ -1160,20 +1162,22 @@ const Tailwind = {
yearTitle: {
className: classNames('text-gray-700 dark:text-white/80 transition duration-200 font-semibold p-2', 'hover:text-blue-500')
},
nextbutton: {
className: classNames(
'flex items-center justify-center cursor-pointer overflow-hidden relative',
'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out',
'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
)
nextButton: {
root: ({ props }) => ({
className: classNames(
'flex items-center justify-center cursor-pointer overflow-hidden relative',
'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out',
'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
)
})
},
table: {
className: classNames('border-collapse w-full', 'my-2')
},
tableheadercell: 'p-2',
tableHeaderCell: 'p-2',
weekday: 'text-gray-600 dark:text-white/70',
day: 'p-2',
daylabel: ({ context }) => ({
dayLabel: ({ context }) => ({
className: classNames(
'w-10 h-10 rounded-full transition-shadow duration-200 border-transparent border',
'flex items-center justify-center mx-auto overflow-hidden relative',
Expand All @@ -1188,7 +1192,7 @@ const Tailwind = {
}
)
}),
monthpicker: 'my-2',
monthPicker: 'my-2',
month: ({ context }) => ({
className: classNames(
'w-1/3 inline-flex items-center justify-center cursor-pointer overflow-hidden relative',
Expand All @@ -1197,7 +1201,7 @@ const Tailwind = {
{ 'text-gray-600 dark:text-white/70 bg-transprent hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.selected && !context.disabled, 'text-blue-700 bg-blue-100 hover:bg-blue-200': context.selected && !context.disabled }
)
}),
yearpicker: {
yearPicker: {
className: classNames('my-2')
},
year: ({ context }) => ({
Expand All @@ -1211,29 +1215,29 @@ const Tailwind = {
}
)
}),
timepicker: {
timePicker: {
className: classNames('flex justify-center items-center', 'border-t-1 border-solid border-gray-300 p-2')
},
separatorcontainer: 'flex items-center flex-col px-2',
separatorContainer: 'flex items-center flex-col px-2',
separator: 'text-xl',
hourpicker: 'flex items-center flex-col px-2',
minutepicker: 'flex items-center flex-col px-2',
ampmpicker: 'flex items-center flex-col px-2',
incrementbutton: {
hourPicker: 'flex items-center flex-col px-2',
minutePicker: 'flex items-center flex-col px-2',
ampmPicker: 'flex items-center flex-col px-2',
incrementButton: {
className: classNames(
'flex items-center justify-center cursor-pointer overflow-hidden relative',
'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out',
'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
)
},
decrementbutton: {
decrementButton: {
className: classNames(
'flex items-center justify-center cursor-pointer overflow-hidden relative',
'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out',
'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
)
},
groupcontainer: 'flex',
groupContainer: 'flex',
group: {
className: classNames('flex-1', 'border-l border-gray-300 pr-0.5 pl-0.5 pt-0 pb-0', 'first:pl-0 first:border-l-0')
},
Expand Down
Loading