diff --git a/packages/ui/src/components/asset-info/asset-info.tsx b/packages/ui/src/components/asset-info/asset-info.tsx index 26bdb9d2c8..5954f4120d 100644 --- a/packages/ui/src/components/asset-info/asset-info.tsx +++ b/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 && ( - {fileTypeLabel} - + )} diff --git a/packages/ui/src/components/entry-info/entry-info.module.css b/packages/ui/src/components/entry-info/entry-info.module.css index 3040400aaa..aa12fddb00 100644 --- a/packages/ui/src/components/entry-info/entry-info.module.css +++ b/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); } diff --git a/packages/ui/src/components/entry-info/entry-info.tsx b/packages/ui/src/components/entry-info/entry-info.tsx index c8669e3bd3..1a35a4898f 100644 --- a/packages/ui/src/components/entry-info/entry-info.tsx +++ b/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 ; +}; + interface EntryInfoMetaProps { label: string; } diff --git a/packages/ui/src/components/module-info/module-info.module.css b/packages/ui/src/components/module-info/module-info.module.css index 7b0f4d594b..e370226bfe 100644 --- a/packages/ui/src/components/module-info/module-info.module.css +++ b/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); -} diff --git a/packages/ui/src/components/module-info/module-info.tsx b/packages/ui/src/components/module-info/module-info.tsx index 89e7c95675..2f914cd313 100644 --- a/packages/ui/src/components/module-info/module-info.tsx +++ b/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,12 +83,13 @@ export const ModuleInfo = (props: ModuleInfoProps & React.ComponentProps<'div'>) } return ( - {chunk.name} - + ); })} @@ -96,19 +97,23 @@ export const ModuleInfo = (props: ModuleInfoProps & React.ComponentProps<'div'>) {item?.fileType && ( - + {fileTypeLabel} - + )} - {sourceTypeLabel} - +