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

Fix #5457: TabMenu fix tailwind styling #5458

Merged
merged 1 commit into from
Nov 30, 2023
Merged

Fix #5457: TabMenu fix tailwind styling #5458

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
6 changes: 3 additions & 3 deletions components/doc/tabmenu/theming/tailwinddoc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,20 @@ export function TailwindDoc(props) {
const code = {
basic: `
const Tailwind = {
tabmenu: {
tabmenu: {
root: 'overflow-x-auto',
menu: {
className: classNames('flex m-0 p-0 list-none flex-nowrap', 'bg-white border-solid border-gray-300 border-b-2', 'outline-none no-underline text-base list-none')
},
menuitem: 'mr-0',
action: ({ context, state }) => ({
action: ({ context, parent }) => ({
className: classNames(
'cursor-pointer select-none flex items-center relative no-underline overflow-hidden',
'border-b-2 p-5 font-bold rounded-t-lg ',
'focus:outline-none focus:outline-offset-0 focus:shadow-[inset_0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]',
{
'border-gray-300 bg-white text-gray-700 hover:bg-white hover:border-gray-400 hover:text-gray-600 dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 dark:hover:bg-gray-800/80': state.activeIndex !== context.index, // Condition-based hover styles.
'bg-white border-blue-500 text-blue-500 dark:bg-gray-900 dark:border-blue-300 dark:text-blue-300': state.activeIndex === context.index // Condition-based active styles.
'bg-white border-blue-500 text-blue-500 dark:bg-gray-900 dark:border-blue-300 dark:text-blue-300': parent.state.activeIndex === context.index // Condition-based active styles.
}
),
style: { top: '2px' }
Expand Down
44 changes: 22 additions & 22 deletions components/lib/passthrough/tailwind/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -253,7 +253,7 @@ const Tailwind = {
},
tabpanel: {
header: ({ props }) => ({
className: classNames('mr-0', { 'cursor-default pointer-events-none select-none user-select-none opacity-60': props?.disabled }) // Margin and condition-based styles.
className: classNames('mr-0', { 'cursor-default pointer-events-none select-none user-select-none opacity-60': props.disabled }) // Margin and condition-based styles.
}),
headerAction: ({ parent, context }) => ({
className: classNames(
Expand Down Expand Up @@ -675,7 +675,7 @@ const Tailwind = {
},
{ 'px-4 py-3 text-base': props.size === null, 'text-xs py-2 px-3': props.size === 'small', 'text-xl py-3 px-4': props.size === 'large' },
{ 'flex-column': props.iconPos == 'top' || props.iconPos == 'bottom' },
{ 'opacity-60 pointer-events-none cursor-default': context?.disabled }
{ 'opacity-60 pointer-events-none cursor-default': context.disabled }
)
}),
label: ({ props }) => ({
Expand Down Expand Up @@ -981,9 +981,9 @@ const Tailwind = {
className: classNames(
'transition-width duration-1000 ease-in-out h-full',
{
'bg-red-500': state.meter?.strength == 'weak',
'bg-orange-500': state.meter?.strength == 'medium',
'bg-green-500': state.meter?.strength == 'strong'
'bg-red-500': state.meter.strength == 'weak',
'bg-orange-500': state.meter.strength == 'medium',
'bg-green-500': state.meter.strength == 'strong'
},
{ 'pr-[2.5rem] ': props.toggleMask }
)
Expand Down Expand Up @@ -1306,7 +1306,7 @@ const Tailwind = {
multiselect: {
root: ({ props }) => ({
className: classNames('inline-flex cursor-pointer select-none', '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-80', {
'opacity-60 select-none pointer-events-none cursor-default': props?.disabled
'opacity-60 select-none pointer-events-none cursor-default': props.disabled
})
}),
labelContainer: 'overflow-hidden flex flex-auto cursor-pointer',
Expand Down Expand Up @@ -1338,8 +1338,8 @@ const Tailwind = {
'border-2 w-6 h-6 text-gray-600 dark:text-white/70 rounded-lg transition-colors duration-200',
'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)]',
{
'border-gray-300 dark:border-blue-900/40 bg-white dark:bg-gray-900': !context?.selected,
'border-blue-500 bg-blue-500': context?.selected
'border-gray-300 dark:border-blue-900/40 bg-white dark:bg-gray-900': !context.selected,
'border-blue-500 bg-blue-500': context.selected
}
)
}),
Expand Down Expand Up @@ -1374,8 +1374,8 @@ const Tailwind = {
'border-2 w-6 h-6 text-gray-600 dark:text-white/80 rounded-lg transition-colors duration-200',
'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)]',
{
'border-gray-300 dark:border-blue-900/40 bg-white dark:bg-gray-900': !context?.selected,
'border-blue-500 bg-blue-500': context?.selected
'border-gray-300 dark:border-blue-900/40 bg-white dark:bg-gray-900': !context.selected,
'border-blue-500 bg-blue-500': context.selected
}
)
}),
Expand Down Expand Up @@ -1429,7 +1429,7 @@ const Tailwind = {
treeselect: {
root: ({ props }) => ({
className: classNames('inline-flex cursor-pointer select-none', '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-80', {
'opacity-60 select-none pointer-events-none cursor-default': props?.disabled
'opacity-60 select-none pointer-events-none cursor-default': props.disabled
})
}),
labelContainer: {
Expand Down Expand Up @@ -1866,8 +1866,8 @@ const Tailwind = {
'flex-col top-full left-0',
'absolute py-1 bg-white dark:bg-gray-900 border-0 shadow-md w-full',
{
'hidden ': !state?.mobileActive,
'flex ': state?.mobileActive
'hidden ': !state.mobileActive,
'flex ': state.mobileActive
}
)
}),
Expand Down Expand Up @@ -2068,14 +2068,14 @@ const Tailwind = {
className: classNames('flex m-0 p-0 list-none flex-nowrap', 'bg-white border-solid border-gray-300 border-b-2', 'outline-none no-underline text-base list-none')
},
menuitem: 'mr-0',
action: ({ context, state }) => ({
action: ({ context, parent }) => ({
className: classNames(
'cursor-pointer select-none flex items-center relative no-underline overflow-hidden',
'border-b-2 p-5 font-bold rounded-t-lg ',
'focus:outline-none focus:outline-offset-0 focus:shadow-[inset_0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]',
{
'border-gray-300 bg-white text-gray-700 hover:bg-white hover:border-gray-400 hover:text-gray-600 dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 dark:hover:bg-gray-800/80': state.activeIndex !== context.index, // Condition-based hover styles.
'bg-white border-blue-500 text-blue-500 dark:bg-gray-900 dark:border-blue-300 dark:text-blue-300': state.activeIndex === context.index // Condition-based active styles.
'bg-white border-blue-500 text-blue-500 dark:bg-gray-900 dark:border-blue-300 dark:text-blue-300': parent.state.activeIndex === context.index // Condition-based active styles.
}
),
style: { top: '2px' }
Expand Down Expand Up @@ -2343,7 +2343,7 @@ const Tailwind = {
tree: {
root: ({ props }) => ({
className: classNames('max-w-[30rem] md:w-full', 'bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 p-5', {
'border border-solid border-gray-300 dark:border-blue-900/40 rounded-md': props.__parentMetadata?.parent.props.__TYPE !== 'TreeSelect'
'border border-solid border-gray-300 dark:border-blue-900/40 rounded-md': props.__parentMetadata.parent.props.__TYPE !== 'TreeSelect'
})
}),
wrapper: 'overflow-auto',
Expand Down Expand Up @@ -3170,12 +3170,12 @@ const Tailwind = {
className: classNames(
'text-left border-0 border-b border-solid border-gray-300 dark:border-blue-900/40 font-bold',
'transition duration-200',
context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4', // Size
context.size === 'small' ? 'p-2' : context.size === 'large' ? 'p-5' : 'p-4', // Size
context.sorted ? 'bg-blue-50 text-blue-700' : 'bg-slate-50 text-slate-700', // Sort
context.sorted ? 'dark:text-white/80 dark:bg-blue-300' : 'dark:text-white/80 dark:bg-gray-900', // Dark Mode
{
'sticky z-[1]': props.frozen || props.frozen === '', // Frozen Columns
'border-x border-y': context?.showGridlines,
'border-x border-y': context.showGridlines,
'overflow-hidden space-nowrap border-y relative bg-clip-padding': context.resizable // Resizable
}
)
Expand All @@ -3184,10 +3184,10 @@ const Tailwind = {
bodycell: ({ props, context }) => ({
className: classNames(
'text-left border-0 border-b border-solid border-gray-300',
context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4', // Size
context.size === 'small' ? 'p-2' : context.size === 'large' ? 'p-5' : 'p-4', // Size
'dark:text-white/80 dark:border-blue-900/40', // Dark Mode
{
'sticky bg-inherit': props?.frozen || props?.frozen === '', // Frozen Columns
'sticky bg-inherit': props.frozen || props.frozen === '', // Frozen Columns
'border-x border-y': context.showGridlines
}
)
Expand All @@ -3197,7 +3197,7 @@ const Tailwind = {
'text-left border-0 border-b border-solid border-gray-300 font-bold',
'bg-slate-50 text-slate-700',
'transition duration-200',
context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4', // Size
context.size === 'small' ? 'p-2' : context.size === 'large' ? 'p-5' : 'p-4', // Size
'dark:text-white/80 dark:bg-gray-900 dark:border-blue-900/40', // Dark Mode
{
'border-x border-y': context.showGridlines
Expand Down Expand Up @@ -3230,7 +3230,7 @@ const Tailwind = {
className: classNames(
'm-0 py-3 px-5 bg-transparent',
'transition duration-200',
context?.highlighted ? 'text-blue-700 bg-blue-100 dark:text-white/80 dark:bg-blue-300' : 'text-gray-600 bg-transparent dark:text-white/80 dark:bg-transparent'
context.highlighted ? 'text-blue-700 bg-blue-100 dark:text-white/80 dark:bg-blue-300' : 'text-gray-600 bg-transparent dark:text-white/80 dark:bg-transparent'
)
}),
filteroperator: {
Expand Down
7 changes: 6 additions & 1 deletion components/lib/tabmenu/TabMenu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,16 +19,21 @@ export const TabMenu = React.memo(
const tabsRef = React.useRef({});
const activeIndex = props.onTabChange ? props.activeIndex : activeIndexState;

const { ptm, cx, isUnstyled } = TabMenuBase.setMetaData({
const metaData = {
props,
state: {
id: idState,
activeIndex: activeIndexState
}
};

const { ptm, cx, isUnstyled } = TabMenuBase.setMetaData({
...metaData
});

const getPTOptions = (key, item, index) => {
return ptm(key, {
parent: metaData,
context: {
item,
index
Expand Down
Loading