Skip to content

Commit

Permalink
Fix #5457: TabMenu fix tailwind styling (#5458)
Browse files Browse the repository at this point in the history
  • Loading branch information
@melloware
melloware authored Nov 30, 2023
1 parent 2b44884 commit ad61ccf
Show file tree
Hide file tree
Showing 3 changed files with 31 additions and 26 deletions.
6 changes: 3 additions & 3 deletions components/doc/tabmenu/theming/tailwinddoc.js
View file
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
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
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

0 comments on commit ad61ccf

Please sign in to comment.