Merge pull request #3846 from relative-ci/enhance-entry-info

Enhance entry info

Author: vio

packages/ui/src/components/asset-info/asset-info.tsx

@@ -14,7 +14,7 @@ import { Asset, MetaChunk } from '@bundle-stats/utils/types/webpack';
 import { FlexStack } from '../../layout/flex-stack';
 import { Tag } from '../../ui/tag';
 import { ComponentLink } from '../component-link';
-import { EntryInfo } from '../entry-info';
+import { EntryInfo, EntryInfoMetaLink } from '../entry-info';
 import css from './asset-info.module.css';
 
 interface ChunkModulesLinkProps {
@@ -134,12 +134,13 @@ export const AssetInfo = (props: AssetInfoProps & React.ComponentProps<'div'>) =
     >
       {item.fileType && (
         <EntryInfo.Meta label="File type">
-          <CustomComponentLink
+          <EntryInfoMetaLink
+            as={CustomComponentLink}
             {...getBundleAssetsFileTypeComponentLink(item.fileType, fileTypeLabel)}
             onClick={onClick}
           >
             {fileTypeLabel}
-          </CustomComponentLink>
+          </EntryInfoMetaLink>
         </EntryInfo.Meta>
       )}
 

packages/ui/src/components/entry-info/entry-info.module.css

@@ -84,7 +84,33 @@
 }
 
 .metaLabel {
+  padding: 2px 0;
   display: inline-block;
   margin-right: var(--space-xxxsmall);
-  min-width: 5em;
+  min-width: 6em;
+  color: var(--color-text-light);
+}
+
+.metaLink {
+  padding: 2px var(--space-xxxsmall);
+  border-radius: var(--radius-small);
+  background: var(--color-highlight);
+  transition: var(--transition-out);
+
+  overflow-wrap: break-word;
+  text-decoration: none;
+  text-transform: none;
+  font-weight: normal;
+}
+
+.metaLink + .metaLink {
+  margin-left: var(--space-xxsmall);
+}
+
+.metaLink:hover,
+.metaLink:active,
+.metaLink:focus {
+  transition: var(--transition-in);
+  background: var(--color-outline);
+  color: var(--color-primary-dark);
 }

packages/ui/src/components/entry-info/entry-info.tsx

@@ -11,6 +11,15 @@ import { Table } from '../../ui/table';
 import { RunInfo } from '../run-info';
 import css from './entry-info.module.css';
 
+interface EntryInfoMetaLinkProps {
+  as?: React.ElementType;
+}
+
+export const EntryInfoMetaLink = (props: EntryInfoMetaLinkProps & React.ComponentProps<'a'>) => {
+  const { as: BaseComponent = 'a', className = '', ...restProps } = props;
+  return <BaseComponent className={cx(css.metaLink, className)} {...restProps} />;
+};
+
 interface EntryInfoMetaProps {
   label: string;
 }

packages/ui/src/components/module-info/module-info.module.css

@@ -1,15 +1,3 @@
 .chunksItems {
   display: inline;
 }
-
-.chunksItem {
-  overflow-wrap: break-word;
-  text-decoration: none;
-  text-transform: none;
-  font-weight: normal;
-  font-size: 1em;
-}
-
-.chunksItem + .chunksItem {
-  margin-left: var(--space-xxxsmall);
-}

packages/ui/src/components/module-info/module-info.tsx

@@ -16,7 +16,7 @@ import { Module, MetaChunk } from '@bundle-stats/utils/types/webpack';
 import { Stack } from '../../layout/stack';
 import { Tag } from '../../ui/tag';
 import { ComponentLink } from '../component-link';
-import { EntryInfo } from '../entry-info';
+import { EntryInfo, EntryInfoMetaLink } from '../entry-info';
 import css from './module-info.module.css';
 
 interface ModuleInfoProps {
@@ -83,32 +83,37 @@ export const ModuleInfo = (props: ModuleInfoProps & React.ComponentProps<'div'>)
               }
 
               return (
-                <CustomComponentLink
+                <EntryInfoMetaLink
+                  as={CustomComponentLink}
                   {...getBundleModulesByChunk(chunkIds, chunkId)}
                   className={css.chunksItem}
                 >
                   {chunk.name}
-                </CustomComponentLink>
+                </EntryInfoMetaLink>
               );
             })}
           </EntryInfo.Meta>
         )}
 
         {item?.fileType && (
           <EntryInfo.Meta label="File type">
-            <CustomComponentLink {...getBundleModulesByFileTpe(item.fileType, fileTypeLabel)}>
+            <EntryInfoMetaLink
+              as={CustomComponentLink}
+              {...getBundleModulesByFileTpe(item.fileType, fileTypeLabel)}
+            >
               {fileTypeLabel}
-            </CustomComponentLink>
+            </EntryInfoMetaLink>
           </EntryInfo.Meta>
         )}
 
         <EntryInfo.Meta label="Source">
-          <CustomComponentLink
+          <EntryInfoMetaLink
+            as={CustomComponentLink}
             {...getBundleModulesBySource(item.thirdParty || false, sourceTypeLabel)}
             onClick={onClick}
           >
             {sourceTypeLabel}
-          </CustomComponentLink>
+          </EntryInfoMetaLink>
         </EntryInfo.Meta>
       </Stack>
     </EntryInfo>