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: change opacity tooltip #286

Closed
wants to merge 3 commits into from
Closed

fix: change opacity tooltip #286

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9a9ff00
fix: change opacity tooltip
arielsrodriguez Feb 20, 2025
3a37362
fix: testing
arielsrodriguez Feb 20, 2025
a959948
fix: testing
arielsrodriguez Feb 21, 2025
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
1 change: 1 addition & 0 deletions src/components/SideBar/SideBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ export interface SideBarItemPropsBase {
hidden?: boolean
subItems?: SideBarItemPropsBase[]
badge?: TBadge
toolTip?: string
}

export type SidebarDropdownListItem = {
Expand Down
120 changes: 65 additions & 55 deletions src/components/SideBar/SideBarItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,48 +94,35 @@ const ListSubItems = ({
!isSubSubItem && 'pl-10 ml-4'
)}
>
{subItemsArray?.map(
(subItem, index: number) =>
!subItem.hidden && (
<div key={`sub-item-${subItem.title}-${index}`}>
<Flex
alignItems="center"
gap="2"
className={composeClasses(
subItem.disabled ? 'cursor-not-allowed' : 'cursor-pointer',
!subItem.subItems &&
'border-l border-gray-300 text-gray-500 -ml-4 pl-3 hover:opacity-75'
)}
onClick={() => onToggleMenu(subItem, index)}
>
{subItem?.subItems && (
<div className="w-4 h-4 -ml-6 text-gray-500">
{subItem.isOpen ? (
<ChevronUpIcon className="w-full" />
) : (
<ChevronDownIcon className="w-full" />
)}
</div>
)}
{subItem?.title?.length > 25 ? (
<Tooltip
position="right"
content={<Text>{subItem.title}</Text>}
>
<Text
size="sm"
className={composeClasses(
'whitespace-nowrap overflow-hidden overflow-ellipsis my-2',
subItem.disabled ? 'text-gray-300' : 'text-gray-500',
subItem.active &&
!subItem.subItems &&
'font-semibold text-blue-600'
)}
>
{subItem.title}
</Text>
</Tooltip>
) : (
{subItemsArray?.map((subItem, index: number) => {
if (subItem.hidden) return null

const renderSubItem = () => {
return (
<Flex
alignItems="center"
gap="2"
className={composeClasses(
subItem.disabled ? 'cursor-not-allowed' : 'cursor-pointer',
!subItem.subItems &&
'border-l border-gray-300 text-gray-500 -ml-4 pl-3 hover:opacity-75'
)}
onClick={() => onToggleMenu(subItem, index)}
>
{subItem?.subItems && (
<div className="w-4 h-4 -ml-6 text-gray-500">
{subItem.isOpen ? (
<ChevronUpIcon className="w-full" />
) : (
<ChevronDownIcon className="w-full" />
)}
</div>
)}
{subItem?.title?.length > 25 ? (
<Tooltip
position="right"
content={<Text>{subItem.title}</Text>}
>
<Text
size="sm"
className={composeClasses(
Expand All @@ -148,21 +135,44 @@ const ListSubItems = ({
>
{subItem.title}
</Text>
)}
{subItem?.badge && subItem?.badge}
</Flex>
{subItem.subItems && (
<ListSubItems
indexItem={indexItem}
isOpen={subItem.isOpen}
subItemsArray={subItem.subItems}
toggleSubMenu={toggleSubMenu}
isSubSubItem
/>
</Tooltip>
) : (
<Text
size="sm"
className={composeClasses(
'whitespace-nowrap overflow-hidden overflow-ellipsis my-2',
subItem.disabled ? 'text-gray-300' : 'text-gray-500',
subItem.active &&
!subItem.subItems &&
'font-semibold text-blue-600'
)}
>
{subItem.title}
</Text>
)}
</div>
{subItem?.badge && subItem?.badge}
</Flex>
)
)}
}
return (
<div key={`sub-item-${subItem.title}-${index}`}>
{subItem.toolTip ? (
<Tooltip content={subItem?.toolTip}>{renderSubItem()}</Tooltip>
) : (
renderSubItem()
)}
{subItem.subItems && (
<ListSubItems
indexItem={indexItem}
isOpen={subItem.isOpen}
subItemsArray={subItem.subItems}
toggleSubMenu={toggleSubMenu}
isSubSubItem
/>
)}
</div>
)
})}
</Flex>
</div>
)
Expand Down
1 change: 0 additions & 1 deletion src/components/Tabs/Tab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,6 @@ const Tab = forwardRef<HTMLButtonElement, Props>(
startAdornment={toolTipProps.startAdornment}
position={toolTipProps.position ?? 'right'}
content={toolTipProps.content ?? ''}
noOpacity={toolTipProps.noOpacity}
>
{renderTab()}
</Tooltip>
Expand Down
12 changes: 2 additions & 10 deletions src/components/Tooltip/Tooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,12 +37,6 @@ export interface TooltipProps {
* primary by default
*/
variant?: TooltipVariant
/**
* If true, the tooltip will use a solid color without any opacity.
* This is useful when you need a fully opaque background or text color.
* By default, this is set to false, allowing for transparency if defined in the variant styles.
*/
noOpacity?: boolean
}

const Tooltip: FC<TooltipProps> = ({
Expand All @@ -51,8 +45,7 @@ const Tooltip: FC<TooltipProps> = ({
endAdornment,
position,
startAdornment,
variant = 'primary',
noOpacity = false
variant = 'primary'
}) => {
const { isVisible, handleMouseEnter, handleMouseLeave, refs } = useTooltip({
placement: position
Expand All @@ -68,9 +61,8 @@ const Tooltip: FC<TooltipProps> = ({

const colorVariants: { [key: string]: string } = {
primary: composeClasses(
!noOpacity && 'opacity-70',
fontSize.xs,
'p-2 text-white rounded-md text-center bg-gray-900'
`p-2 text-white rounded-md text-center bg-gray-900 opacity-90`
)
}

Expand Down