Merge pull request #4378 from relative-ci/ui-improvements

UI Improvements
relative-ci · Apr 8, 2024 · 41515fc · 41515fc
2 parents cdb035a + d076ece
commit 41515fc
Show file tree

Hide file tree

Showing 18 changed files with 413 additions and 518 deletions.
diff --git a/packages/ui/src/components/bundle-modules/bundle-modules.tsx b/packages/ui/src/components/bundle-modules/bundle-modules.tsx
@@ -9,6 +9,7 @@ import { Box } from '../../layout/box';
 import { MetricsDisplayType } from '../../constants';
 import { FlexStack } from '../../layout/flex-stack';
 import { Button } from '../../ui/button';
+import { ControlGroup } from '../../ui/control-group';
 import { EmptySet } from '../../ui/empty-set';
 import { FileName } from '../../ui/file-name';
 import { Filters } from '../../ui/filters';
@@ -197,7 +198,7 @@ export const BundleModules = (props: BundleModulesProps) => {
           </FlexStack>
         </Toolbar>
         <Box padding={['xsmall', 'small']} className={css.metricSelector}>
-          <FlexStack space="xxsmall" as="nav">
+          <ControlGroup as="nav">
             <Button
               outline
               active={moduleMetric === ModuleMetric.SIZE}
@@ -216,7 +217,7 @@ export const BundleModules = (props: BundleModulesProps) => {
             >
               <Tooltip title="Size (including duplicate modules)">Module total size</Tooltip>
             </Button>
-          </FlexStack>
+          </ControlGroup>
         </Box>
         {displayType === MetricsDisplayType.TABLE && (
           <MetricsTable

diff --git a/packages/ui/src/components/metrics-display-selector/metrics-display-selector.tsx b/packages/ui/src/components/metrics-display-selector/metrics-display-selector.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import cx from 'classnames';
 
 import { MetricsDisplayType } from '../../constants';
-import { FlexStack } from '../../layout/flex-stack';
 import { Button } from '../../ui/button';
+import { ControlGroup } from '../../ui/control-group';
 import { Icon } from '../../ui/icon';
 import css from './metrics-display-selector.module.css';
 
@@ -14,12 +14,12 @@ interface MetricsDisplaySelectorProps {
 
 export const MetricsDisplaySelector = (
   props: MetricsDisplaySelectorProps &
-    Omit<React.ComponentProps<typeof FlexStack>, 'onSelect' | 'value'>,
+    Omit<React.ComponentProps<typeof ControlGroup>, 'onSelect' | 'value'>,
 ) => {
   const { className = '', value, onSelect, ...restProps } = props;
 
   return (
-    <FlexStack space="xxsmall" as="nav" className={cx(css.root, className)} {...restProps}>
+    <ControlGroup className={cx(css.root, className)} {...restProps}>
       <Button
         outline
         active={value === MetricsDisplayType.TABLE}
@@ -42,6 +42,6 @@ export const MetricsDisplaySelector = (
       >
         Treemap
       </Button>
-    </FlexStack>
+    </ControlGroup>
   );
 };
diff --git a/packages/ui/src/components/metrics-table-header/metrics-table-header.module.css b/packages/ui/src/components/metrics-table-header/metrics-table-header.module.css
@@ -1,9 +1,16 @@
 /* columns */
-.root .metricName {
+.root .col {
+  padding-top: var(--space-xxsmall);
+  padding-bottom: var(--space-xxsmall);
+}
+
+.root .metric {
   width: 55%;
+  vertical-align: middle;
 }
 
 .root .job {
+  padding-top: var(--space-xxsmall);
   text-align: right;
 }
 
@@ -30,13 +37,13 @@
 }
 
 /* columns overrides for showHeaderSum */
-.showHeaderSum .headerRow .job {
+.showHeaderSum .job {
   border-bottom: 0;
   padding-bottom: 0;
 }
 
-.showHeaderSum .headerRow .sum {
-  padding-top: var(--space-xxxsmall);
+.showHeaderSum .sum {
+  padding-top: 0;
   font-size: var(--size-small);
   vertical-align: middle;
   text-transform: none;

diff --git a/packages/ui/src/components/metrics-table-header/metrics-table-header.tsx b/packages/ui/src/components/metrics-table-header/metrics-table-header.tsx
@@ -34,7 +34,7 @@ const JobColumn = ({ job, isBaseline }: JobColumnProps) => {
   }
 
   return (
-    <Table.Th className={css.job} colSpan={colSpan}>
+    <Table.Th className={cx(css.col, css.job)} colSpan={colSpan}>
       <JobName
         title={isBaseline ? I18N.BASELINE_TITLE : I18N.CURRENT_TITLE}
         internalBuildNumber={internalBuildNumber}
@@ -65,7 +65,7 @@ const SumColumn = ({ rows, isBaseline, runIndex, updateSort, sort }: ColumnSumPr
 
   return (
     <>
-      <Table.Th className={cx(css.value, css.sum)}>
+      <Table.Th className={cx(css.col, css.value, css.sum)}>
         <SortButton
           fieldPath={fieldPath}
           fieldName="value"
@@ -78,7 +78,7 @@ const SumColumn = ({ rows, isBaseline, runIndex, updateSort, sort }: ColumnSumPr
       </Table.Th>
       {!isBaseline && (
         <>
-          <Table.Th className={cx(css.delta, css.sum)}>
+          <Table.Th className={cx(css.col, css.delta, css.sum)}>
             <SortButton
               fieldPath={fieldPath}
               fieldName="delta"
@@ -91,7 +91,7 @@ const SumColumn = ({ rows, isBaseline, runIndex, updateSort, sort }: ColumnSumPr
               )}
             </SortButton>
           </Table.Th>
-          <Table.Th className={cx(css.delta, css.deltaPercentage, css.sum)}>
+          <Table.Th className={cx(css.col, css.delta, css.deltaPercentage, css.sum)}>
             <SortButton
               fieldPath={fieldPath}
               fieldName="deltaPercentage"
@@ -146,16 +146,16 @@ export const MetricsTableHeader = (
 
   return (
     <Table.THead className={rootClassName}>
-      <Table.Tr className={css.headerRow}>
-        <Table.Th className={css.metricName} rowSpan={showSum ? 2 : 1}>
+      <Table.Tr>
+        <Table.Th className={cx(css.col, css.metric)} rowSpan={showSum ? 2 : 1}>
           {metricTitle || ' '}
         </Table.Th>
         {jobs.map((job, runIndex) => (
           <JobColumn job={job} isBaseline={runIndex === jobs.length - 1} />
         ))}
       </Table.Tr>
       {showSum && (
-        <Table.Tr className={css.headerRow}>
+        <Table.Tr>
           {jobs.map((_, runIndex) => (
             <SumColumn
               rows={rows}

diff --git a/packages/ui/src/components/metrics-table-options/metrics-table-options.jsx b/packages/ui/src/components/metrics-table-options/metrics-table-options.jsx
@@ -2,23 +2,17 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import I18N from '../../i18n';
-import { Dropdown } from '../../ui/dropdown';
+import { Dropdown, DropdownItem } from '../../ui/dropdown';
 
 export const MetricsTableOptions = (props) => {
-  const { className,  handleViewAll, handleResetFilters, ...restProps } = props;
+  const { className, handleViewAll, handleResetFilters, ...restProps } = props;
 
   return (
     <Dropdown className={className} glyph="more-vertical" {...restProps}>
       {handleResetFilters && (
-        <Dropdown.Item onClick={handleResetFilters}>
-          {I18N.RESET_FILTERS}
-        </Dropdown.Item>
-      )}
-      {handleViewAll && (
-        <Dropdown.Item onClick={handleViewAll}>
-          {I18N.VIEW_ALL}
-        </Dropdown.Item>
+        <DropdownItem onClick={handleResetFilters}>{I18N.RESET_FILTERS}</DropdownItem>
       )}
+      {handleViewAll && <DropdownItem onClick={handleViewAll}>{I18N.VIEW_ALL}</DropdownItem>}
     </Dropdown>
   );
 };

diff --git a/packages/ui/src/components/metrics-table-title/metrics-table-title.jsx b/packages/ui/src/components/metrics-table-title/metrics-table-title.jsx
@@ -15,7 +15,7 @@ export const MetricsTableTitle = (props) => {
   const rootClassName = cx(css.root, className);
 
   return (
-    <Stack space="xxxsmall" className={rootClassName}>
+    <Stack space="none" className={rootClassName}>
       <FlexStack space="xxxsmall" alignItems="center" as="h3" className={css.title}>
         <span>{title}</span>
 

diff --git a/packages/ui/src/components/metrics-table-title/metrics-table-title.module.css b/packages/ui/src/components/metrics-table-title/metrics-table-title.module.css
@@ -19,6 +19,7 @@
 }
 
 .info {
+  font-size: var(--size-small);
   font-family: var(--font-family-fixed);
   font-weight: normal;
 }
diff --git a/packages/ui/src/components/metrics-treemap/metrics-treemap.module.css b/packages/ui/src/components/metrics-treemap/metrics-treemap.module.css
@@ -72,7 +72,7 @@
 }
 
 /** Align label to other elements on the first column leafs */
-.leaf[x="1"] .leafContent {
+.leafFirstCol .leafContent {
   padding-left: var(--space-small);
 }
 

diff --git a/packages/ui/src/components/metrics-treemap/metrics-treemap.tsx b/packages/ui/src/components/metrics-treemap/metrics-treemap.tsx
@@ -11,9 +11,9 @@ import { Delta } from '../delta';
 import { RunInfo } from '../run-info';
 import css from './metrics-treemap.module.css';
 
-const SQUARIFY_RATIO = 1.78;
-const PADDING_OUTER = 1;
-const PADDING_INNER = 1;
+const SQUARIFY_RATIO = 1.33;
+const PADDING_OUTER = 0;
+const PADDING_INNER = 2;
 
 type TileSizeDisplay = 'minimal' | 'small' | 'default';
 
@@ -180,6 +180,7 @@ const Leaf = (props: LeafProps) => {
     css.leaf,
     css[`leaf-${runInfo.deltaType}`],
     sizeDisplay === 'small' && css.leafSmall,
+    left === 0 && css.leafFirstCol,
   );
 
   return (

diff --git a/packages/ui/src/ui/dropdown/dropdown.jsx b/packages/ui/src/ui/dropdown/dropdown.jsx
diff --git a/packages/ui/src/ui/dropdown/dropdown.stories.jsx b/packages/ui/src/ui/dropdown/dropdown.stories.jsx
diff --git a/packages/ui/src/ui/dropdown/dropdown.stories.tsx b/packages/ui/src/ui/dropdown/dropdown.stories.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Meta } from '@storybook/react';
+
+import { getWrapperDecorator } from '../../stories';
+import { Dropdown, DropdownItem } from '.';
+
+export default {
+  title: 'UI/Dropdown',
+  component: Dropdown,
+  decorators: [getWrapperDecorator()],
+} as Meta;
+
+export const Defualt = () => (
+  <Dropdown glyph="filter" label="Toggle">
+    <DropdownItem>Option 1</DropdownItem>
+    <DropdownItem>Option 2</DropdownItem>
+  </Dropdown>
+);
+
+export const Disabled = () => (
+  <Dropdown glyph="filter" label="Toggle" disabled>
+    <DropdownItem>Option 1</DropdownItem>
+    <DropdownItem>Option 2</DropdownItem>
+  </Dropdown>
+);