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 6257902462..bc9e062733 100644
--- a/packages/ui/src/components/entry-info/entry-info.module.css
+++ b/packages/ui/src/components/entry-info/entry-info.module.css
@@ -30,6 +30,7 @@
/** space for close icon */
padding-right: calc(var(--space-medium) + var(--space-xxxsmall) + var(--space-xsmall));
border-bottom: 1px solid var(--color-outline);
+ background: var(--color-highlight);
}
.headerClose {
@@ -67,10 +68,6 @@
font-size: var(--size-small);
}
-.runs .runsCell {
- padding: var(--space-xxxsmall) var(--space-xxsmall);
-}
-
.runs .runsColJob {
white-space: nowrap;
}
@@ -88,6 +85,7 @@
}
.metaLabel {
- margin-right: .6em;
- color: var(--color-text-light);
+ display: inline-block;
+ margin-right: var(--space-xxxsmall);
+ min-width: 5em;
}
diff --git a/packages/ui/src/components/entry-info/entry-info.tsx b/packages/ui/src/components/entry-info/entry-info.tsx
index 9d4f31c42d..d8cce23cec 100644
--- a/packages/ui/src/components/entry-info/entry-info.tsx
+++ b/packages/ui/src/components/entry-info/entry-info.tsx
@@ -71,29 +71,28 @@ export const EntryInfo = (props: EntryInfoProps & React.ComponentProps<'div'>) =
{tags && {tags}
}
-
-
-
-
+
+
+
-
-
+
{children}
-
+
diff --git a/packages/ui/src/components/run-info/run-info.stories.tsx b/packages/ui/src/components/run-info/run-info.stories.tsx
index eb1804fd0d..e8011c2dde 100644
--- a/packages/ui/src/components/run-info/run-info.stories.tsx
+++ b/packages/ui/src/components/run-info/run-info.stories.tsx
@@ -29,6 +29,13 @@ Default.args = {
deltaType: 'HIGH_NEGATIVE',
};
+export const DeltaPercentage = Template.bind({});
+
+DeltaPercentage.args = {
+ ...Default.args,
+ deltaPercentage: '+20KiB',
+};
+
export const SizeLarge = Template.bind({});
SizeLarge.args = {
diff --git a/packages/ui/src/components/run-info/run-info.tsx b/packages/ui/src/components/run-info/run-info.tsx
index c24fded79a..448e2f7489 100644
--- a/packages/ui/src/components/run-info/run-info.tsx
+++ b/packages/ui/src/components/run-info/run-info.tsx
@@ -31,6 +31,7 @@ export interface RunInfoProps {
current?: React.ReactNode;
baseline?: string;
delta?: string;
+ deltaPercentage?: string;
deltaType?: string;
as?: React.ElementType;
@@ -49,6 +50,7 @@ export const RunInfo = ({
current = '',
baseline = '',
delta = '',
+ deltaPercentage = '',
deltaType = '',
as: Component = 'div',
size = 'medium',
@@ -57,7 +59,7 @@ export const RunInfo = ({
enhance = false,
...restProps
}: RunInfoProps & React.ComponentProps<'div'>) => {
- const rootClassName = cx(css.root, className, css[size], delta && css.showDelta);
+ const rootClassName = cx(css.root, className, css[size], (delta || deltaPercentage) && css.showDelta);
const currentValueParams: [React.ReactNode, string?] = useMemo(() => {
if (!enhance || typeof current !== 'string') {
@@ -96,7 +98,17 @@ export const RunInfo = ({
unit={currentValueParams[1]}
inline
>
- {delta && }
+ {(delta || deltaPercentage) && (
+
+ {deltaPercentage && (
+
+
+ {' / '}
+
+ )}
+ {delta && }
+
+ )}
{showBaseline && }