Merge pull request #4149 from relative-ci/refactor-extract-button-com…

…ponent refactor(ui): Extract Button component
relative-ci · Jan 10, 2024 · 279ed6f · 279ed6f
2 parents 18783e4 + 32a8fed
commit 279ed6f
Show file tree

Hide file tree

Showing 27 changed files with 468 additions and 238 deletions.
diff --git a/packages/ui/src/components/entry-info/entry-info.module.css b/packages/ui/src/components/entry-info/entry-info.module.css
@@ -33,16 +33,10 @@
 }
 
 .headerClose {
-  appearance: none;
-  background: none;
-  border: 0;
-  display: block;
-  padding: var(--space-xxxsmall);
   position: absolute;
   right: calc(var(--space-small) - var(--space-xxxsmall));
   top: calc(var(--space-small) - var(--space-xxxsmall));
   color: var(--color-text-ultra-light);
-  cursor: pointer;
 }
 
 .headerClose:hover,

diff --git a/packages/ui/src/components/entry-info/entry-info.tsx b/packages/ui/src/components/entry-info/entry-info.tsx
@@ -6,6 +6,7 @@ import { METRIC_TYPE_CONFIGS, MetricRunInfo, getMetricRunInfo } from '@bundle-st
 import { Box } from '../../layout/box';
 import { Stack } from '../../layout/stack';
 import { FileName } from '../../ui/file-name';
+import { Button } from '../../ui/button';
 import { Icon } from '../../ui/icon';
 import { Table } from '../../ui/table';
 import { RunInfo } from '../run-info';
@@ -94,14 +95,15 @@ export const EntryInfo = (props: EntryInfoProps & React.ComponentProps<'div'>) =
             size="large"
           />
         </Stack>
-        <button
+        <Button
+          radius="circle"
           type="button"
           onClick={onClose}
           aria-label={I18N.CLOSE_TITLE}
           className={css.headerClose}
         >
           <Icon glyph={Icon.ICONS.CLOSE} size="large" />
-        </button>
+        </Button>
       </Box>
       <Box padding="medium" as="main" className={css.contentWrapper}>
         <Stack space="small" className={css.content}>

diff --git a/packages/ui/src/components/metric-run-info/metric-run-info.module.css b/packages/ui/src/components/metric-run-info/metric-run-info.module.css
@@ -2,21 +2,3 @@
   font-weight: bold;
   font-size: 1em;
 }
-
-.readMoreLink {
-  appearance: none;
-  background: none;
-  margin: 0;
-  border: 0;
-  padding: 0;
-  color: var(--color-primary);
-  text-decoration: underline;
-  cursor: pointer;
-}
-
-.readMoreLink:hover,
-.readMoreLink:active,
-.readMoreLink:focus {
-  color: var(--color-primary-dark);
-  text-decoration: none;
-}
diff --git a/packages/ui/src/components/metric-run-info/metric-run-info.tsx b/packages/ui/src/components/metric-run-info/metric-run-info.tsx
@@ -3,6 +3,7 @@ import { getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
 
 import { Stack } from '../../layout/stack';
 import { FlexStack } from '../../layout/flex-stack';
+import { Button } from '../../ui/button';
 import { Icon } from '../../ui/icon';
 import { RunInfo, RunInfoProps } from '../run-info';
 import css from './metric-run-info.module.css';
@@ -28,12 +29,12 @@ const MetricHoverCard = ({ title, description, url }: MetricInfoProps) => {
         <p className={css.metricHoverCardDescription}>{description}</p>
         {url && (
           <div>
-            <button type="button" onClick={onClick} className={css.readMoreLink}>
+            <Button kind="primary" type="button" onClick={onClick} className={css.readMoreLink}>
               <FlexStack alignItems="center" space="xxxsmall">
                 <span>Read more</span>
                 <Icon glyph={Icon.ICONS.EXTERNAL_LINK} size="small" />
               </FlexStack>
-            </button>
+            </Button>
           </div>
         )}
       </Stack>

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
@@ -5,6 +5,7 @@ import cx from 'classnames';
 import I18N from '../../i18n';
 import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
+import { Button } from '../../ui/button';
 import { Icon } from '../../ui/icon';
 import { HoverCard } from '../../ui/hover-card';
 import css from './metrics-table-title.module.css';
@@ -19,14 +20,17 @@ export const MetricsTableTitle = (props) => {
         <span>{title}</span>
 
         {(popoverInfo || popoverHref) && (
-          <HoverCard label={<Icon glyph={Icon.ICONS.HELP} className={css.anchorIcon} />} anchorClassName={css.anchor}>
+          <HoverCard
+            label={<Icon glyph={Icon.ICONS.HELP} className={css.anchorIcon} />}
+            anchorClassName={css.anchor}
+          >
             <Stack space="xxxsmall">
               {popoverInfo && <p>{popoverInfo}</p>}
               {popoverHref && (
                 <p>
-                  <button type="button" onClick={() => window.open(popoverHref)} className={css.readMoreLink}>
+                  <Button kind="primary" type="button" onClick={() => window.open(popoverHref)}>
                     {I18N.READ_MORE}
-                  </button>
+                  </Button>
                 </p>
               )}
             </Stack>

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
@@ -23,21 +23,3 @@
   font-size: var(--size-xsmall);
   font-weight: bold;
 }
-
-.readMoreLink {
-  appearance: none;
-  background: none;
-  margin: 0;
-  border: 0;
-  padding: 0;
-  color: var(--color-primary);
-  text-decoration: underline;
-  cursor: pointer;
-}
-
-.readMoreLink:hover,
-.readMoreLink:active,
-.readMoreLink:focus {
-  color: var(--color-primary-dark);
-  text-decoration: none;
-}
diff --git a/packages/ui/src/components/metrics-table/metrics-table.module.css b/packages/ui/src/components/metrics-table/metrics-table.module.css
@@ -82,24 +82,6 @@
   text-align: center;
 }
 
-/** show all */
-.showAllItemsButton {
-  appearance: none;
-  background: none;
-  margin: 0;
-  border: 0;
-  padding: var(--space-xxxsmall);
-  color: var(--color-primary);
-  text-decoration: underline;
-  cursor: pointer;
-}
-
-.showAllItemsButton:hover,
-.showAllItemsButton:focus,
-.showAllItemsButton:active {
-  color: var(--color-primary-dark);
-}
-
 /** Breakpoints */
 .root tr {
   display: flex;

diff --git a/packages/ui/src/components/metrics-table/metrics-table.tsx b/packages/ui/src/components/metrics-table/metrics-table.tsx
@@ -9,6 +9,7 @@ import {
   getMetricRunInfo,
 } from '@bundle-stats/utils';
 
+import { Button } from '../../ui/button';
 import { Icon } from '../../ui/icon';
 import { Table } from '../../ui/table';
 import { Stack } from '../../layout/stack';
@@ -274,21 +275,23 @@ export const MetricsTable = ({
               <Table.Tr>
                 <Table.Td className={css.showAllItems} colSpan={columnCount}>
                   {showAllItems ? (
-                    <button
+                    <Button
+                      padding="small"
+                      kind="primary"
                       onClick={() => setShowAllItems(false)}
                       type="button"
-                      className={css.showAllItemsButton}
                     >
                       {I18N.SHOW_LESS}
-                    </button>
+                    </Button>
                   ) : (
-                    <button
+                    <Button
+                      padding="small"
+                      kind="primary"
                       onClick={() => setShowAllItems(true)}
                       type="button"
-                      className={css.showAllItemsButton}
                     >
                       {I18N.SHOW_ALL}
-                    </button>
+                    </Button>
                   )}
                 </Table.Td>
               </Table.Tr>

diff --git a/packages/ui/src/components/sort-button/sort-button.module.css b/packages/ui/src/components/sort-button/sort-button.module.css
@@ -7,16 +7,6 @@
   position: relative;
 }
 
-.button {
-  appearance: none;
-  cursor: pointer;
-  border: 0;
-  padding: 0;
-  margin: 0;
-  background: transparent;
-  transition: var(--transition-out);
-}
-
 .toggle {
   padding: 1px var(--space-xxxsmall);
   padding-right: calc(1px + var(--icon-dimension));

diff --git a/packages/ui/src/components/sort-button/sort-button.tsx b/packages/ui/src/components/sort-button/sort-button.tsx
@@ -3,6 +3,7 @@ import cx from 'classnames';
 
 import { SORT } from '../../constants';
 import type { SortAction } from '../../types';
+import { Button } from '../../ui/button';
 import { Icon } from '../../ui/icon';
 import { Tooltip } from '../../ui/tooltip';
 import css from './sort-button.module.css';
@@ -76,20 +77,19 @@ export const SortButton = (props: SortButtonProps & React.ComponentProps<'div'>)
     <div className={cx(css.root, css.interactive, className, isSorted && css.active)}>
       <Tooltip
         title={toggleAction.title}
-        as="button"
+        as={Button}
         type="button"
         onClick={getOrderOnClick(toggleAction)}
-        className={cx(css.button, css.toggle)}
+        className={css.toggle}
       >
         {children}
       </Tooltip>
       <Tooltip
         title={ascAction.title}
-        as="button"
+        as={Button}
         type="button"
         onClick={getOrderOnClick(ascAction)}
         className={cx(
-          css.button,
           css.direction,
           css.directionAsc,
           isSorted && sort.direction === SORT.ASC && css.directionActive,
@@ -99,11 +99,10 @@ export const SortButton = (props: SortButtonProps & React.ComponentProps<'div'>)
       </Tooltip>
       <Tooltip
         title={descAction.title}
-        as="button"
+        as={Button}
         type="button"
         onClick={getOrderOnClick(descAction)}
         className={cx(
-          css.button,
           css.direction,
           css.directionDesc,
           isSorted && sort.direction === SORT.DESC && css.directionActive,

diff --git a/packages/ui/src/components/summary/summary.module.css b/packages/ui/src/components/summary/summary.module.css
@@ -29,21 +29,3 @@
 .itemSmall {
   min-width: 8em;
 }
-
-.readMoreLink {
-  appearance: none;
-  background: none;
-  margin: 0;
-  border: 0;
-  padding: 0;
-  color: var(--color-primary);
-  text-decoration: underline;
-  cursor: pointer;
-}
-
-.readMoreLink:hover,
-.readMoreLink:active,
-.readMoreLink:focus {
-  color: var(--color-primary-dark);
-  text-decoration: none;
-}
diff --git a/packages/ui/src/components/total-size-type-title/total-size-type-title.jsx b/packages/ui/src/components/total-size-type-title/total-size-type-title.jsx
@@ -6,6 +6,7 @@ import config from '../../config.json';
 import I18N from '../../i18n';
 import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
+import { Button } from '../../ui/button';
 import { Icon } from '../../ui/icon';
 import { HoverCard } from '../../ui/hover-card';
 import css from './total-size-type-title.module.css';
@@ -17,13 +18,14 @@ export const TotalSizeTypeTitle = ({ className }) => (
       <Stack space="xxxsmall">
         <p>{I18N.ASSET_TOTALS_INFO}</p>
         <p>
-          <button
+          <Button
+            kind="primary"
             type="button"
             onClick={() => window.open(config.documentation.assets)}
             className={css.readMoreLink}
           >
             {I18N.READ_MORE}
-          </button>
+          </Button>
         </p>
       </Stack>
     </HoverCard>

diff --git a/packages/ui/src/components/total-size-type-title/total-size-type-title.module.css b/packages/ui/src/components/total-size-type-title/total-size-type-title.module.css
@@ -12,21 +12,3 @@
 .anchor {
   display: block;
 }
-
-.readMoreLink {
-  appearance: none;
-  background: none;
-  margin: 0;
-  border: 0;
-  padding: 0;
-  color: var(--color-primary);
-  text-decoration: underline;
-  cursor: pointer;
-}
-
-.readMoreLink:hover,
-.readMoreLink:active,
-.readMoreLink:focus {
-  color: var(--color-primary-dark);
-  text-decoration: none;
-}
diff --git a/packages/ui/src/css/variables.css b/packages/ui/src/css/variables.css
@@ -190,8 +190,8 @@
   --shadow-layer-high: 0 0 var(--space-xxsmall) var(--color-shadow);
 
   --radius-small: 3px;
-  --radius-medium: 5px;
-  --radius-large: 9px;
+  --radius-medium: 4px;
+  --radius-large: 6px;
 
   --outline-hover: 0 0 0 3px var(--color-highlight);