fix(component): display text only on Sidebar.Item tooltip

When a `Sidebar` is collapsed, each item's text content is hidden. You hover over an item to see a `Tooltip` with its text content. That isn't how it worked up until now. resolve themesberg#258
tulup-conner · Jul 31, 2022 · c84afc5 · c84afc5
1 parent bfef57a
commit c84afc5
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 22 deletions.
diff --git a/src/lib/components/Flowbite/FlowbiteTheme.ts b/src/lib/components/Flowbite/FlowbiteTheme.ts
@@ -405,7 +405,6 @@ export interface FlowbiteTheme {
       };
       content: {
         base: string;
-        collapsed: string;
       };
       icon: {
         base: string;

diff --git a/src/lib/components/Sidebar/SidebarItem.tsx b/src/lib/components/Sidebar/SidebarItem.tsx
@@ -32,26 +32,34 @@ const SidebarItem: FC<SidebarItemProps> = ({
   label,
   labelColor = 'info',
   ...props
-}): JSX.Element => {
+}) => {
   const theirProps = excludeClassName(props);
 
   const id = useId();
   const { isCollapsed } = useSidebarContext();
   const { isInsideCollapse } = useSidebarItemContext();
   const theme = useTheme().theme.sidebar.item;
 
-  const Wrapper: FC<PropsWithChildren<unknown>> = ({ children }): JSX.Element => (
+  const Wrapper: FC<PropsWithChildren<unknown>> = ({ children: Component }) => (
     <li>
       {isCollapsed ? (
-        <Tooltip content={children} placement="right">
-          {children}
+        <Tooltip content={<Children>{children}</Children>} placement="right">
+          {Component}
         </Tooltip>
-      ) : (
-        children
-      )}
+      ) : Component}
     </li>
   );
 
+  const Children: FC<PropsWithChildren<unknown>> = ({ children }) => (
+    <span
+      className={classNames(theme.content.base)}
+      data-testid="flowbite-sidebar-item-content"
+      id={`flowbite-sidebar-item-${id}`}
+    >
+      {children}
+    </span>
+  );
+
   return (
     <Wrapper>
       <Component
@@ -70,14 +78,8 @@ const SidebarItem: FC<SidebarItemProps> = ({
             data-testid="flowbite-sidebar-item-icon"
           />
         )}
-        <span
-          className={classNames(theme.content.base, isCollapsed && theme.content.collapsed)}
-          data-testid="flowbite-sidebar-item-content"
-          id={`flowbite-sidebar-item-${id}`}
-        >
-          {children}
-        </span>
-        {label && (
+        {!isCollapsed && <Children>{children}</Children>}
+        {label && !isCollapsed && (
           <Badge color={labelColor} data-testid="flowbite-sidebar-label" hidden={isCollapsed}>
             {label}
           </Badge>

diff --git a/src/lib/theme/default.ts b/src/lib/theme/default.ts
@@ -253,7 +253,7 @@ export default {
       base: 'absolute top-1/2 left-1/2 block w-full -translate-x-1/2 -translate-y-1/2',
       wrapper: 'w-full flex-shrink-0 transform cursor-grab snap-center',
     },
-    control:{
+    control: {
       base: 'inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/30 group-hover:bg-white/50 group-focus:outline-none group-focus:ring-4 group-focus:ring-white dark:bg-gray-800/30 dark:group-hover:bg-gray-800/60 dark:group-focus:ring-gray-800/70 sm:h-10 sm:w-10',
       icon: 'h-5 w-5 text-white dark:text-gray-800 sm:h-6 sm:w-6',
     },
@@ -430,7 +430,8 @@ export default {
     },
     select: {
       base: 'flex',
-      addon: 'inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-200 px-3 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-600 dark:text-gray-400',
+      addon:
+        'inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-200 px-3 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-600 dark:text-gray-400',
       field: {
         base: 'relative w-full',
         icon: {
@@ -560,7 +561,7 @@ export default {
       hidden: {
         on: 'hidden',
         off: '',
-      },      
+      },
     },
     link: {
       base: 'block py-2 pr-4 pl-3 md:p-0',
@@ -668,11 +669,10 @@ export default {
       base: 'flex items-center rounded-lg p-2 text-base font-normal text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700',
       active: 'bg-gray-100 dark:bg-gray-700',
       collapsed: {
-        insideCollapse: 'group w-full pl-8 transition duration-75',
+        insideCollapse: 'group w-full ml-3 pl-8 transition duration-75',
       },
       content: {
-        base: 'ml-3 flex-1 whitespace-nowrap',
-        collapsed: 'hidden',
+        base: 'px-3 flex-1 whitespace-nowrap',
       },
       icon: {
         base: 'h-6 w-6 flex-shrink-0 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white',