Merge pull request #3383 from relative-ci/summary-hide-help-icon

UI: Hide RunInfo help icon by default

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

@@ -39,7 +39,28 @@
   width: 5em;
 }
 
-/* Size large */
+/* Hover state */
+.titleIcon span[aria-controls=""] {
+  opacity: 0;
+  visibility: none;
+  transition: var(--ui-transition-out);
+}
+
+.root:hover .titleIcon span {
+  opacity: 1;
+  visibility: visible;
+  transition: var(--ui-transition-in);
+}
+
+/* Size variation */
+.small .info {
+  margin-top: var(--space-xxxsmall);
+}
+
+.small .currentMetric {
+  font-size: var(--size-xlarge);
+}
+
 .large .info {
   margin-top: var(--space-xxsmall);
 }

packages/ui/src/components/run-info/run-info.stories.tsx

@@ -6,6 +6,15 @@ import { RunInfo } from './run-info';
 export default {
   title: 'Components/RunInfo',
   component: RunInfo,
+  args: {
+    size: 'medium',
+  },
+  argTypes: {
+    size: {
+      options: ['small', 'medium', 'large'],
+      control: { type: 'select' },
+    },
+  },
 } as Meta;
 
 const Template: Story = (args) => <RunInfo id="webpack.totalSizeByTypeALL" {...args} />;

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

@@ -34,7 +34,7 @@ export interface RunInfoProps {
   deltaType?: string;
 
   as?: React.ElementType;
-  size?: 'medium' | 'large';
+  size?: 'small' | 'medium' | 'large';
 
   showBaseline?: boolean;
   loading?: boolean;

packages/ui/src/ui/hover-card/hover-card.stories.jsx → packages/ui/src/ui/hover-card/hover-card.stories.tsx

@@ -1,15 +1,16 @@
 import React from 'react';
+import { Meta, Story } from '@storybook/react';
 
-import { HoverCard } from '.';
+import { HoverCard, HoverCardProps } from '.';
 
 export default {
   title: 'UI/HoverCard',
   component: HoverCard,
-};
+} as Meta;
 
-const Template = (props) => (
+const Template: Story<HoverCardProps> = (props) => (
   <>
-    <HoverCard {...props} style={{ zIndex: 2 }} />
+    <HoverCard {...props} />
     <p style={{ position: 'relative', zIndex: 1, maxWidth: 360 }}>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in neque ante. Curabitur
       vehicula, lorem sit amet fringilla dapibus, justo mauris varius elit, ut fermentum leo velit

packages/ui/src/ui/hover-card/hover-card.jsx → packages/ui/src/ui/hover-card/hover-card.tsx

@@ -1,5 +1,4 @@
 import React, { useMemo } from 'react';
-import PropTypes from 'prop-types';
 import cx from 'classnames';
 import {
   Hovercard,
@@ -11,8 +10,26 @@ import {
 
 import css from './hover-card.module.css';
 
-export const HoverCard = (props) => {
-  const { className, anchorClassName, hoverCardClassName, href, as, label, children } = props;
+export interface HoverCardProps {
+  className?: string;
+  anchorClassName?: string;
+  hoverCardClassName?: string;
+  href?: string;
+  as?: React.ElementType;
+  label: React.ReactNode;
+  children?: React.ReactNode | (({ close }: { close: () => void }) => React.ReactNode);
+}
+
+export const HoverCard = (props: HoverCardProps) => {
+  const {
+    className = '',
+    anchorClassName = '',
+    hoverCardClassName = '',
+    href = '',
+    as = null,
+    label,
+    children,
+  } = props;
 
   const state = useHovercardState({ gutter: 8, timeout: 800 });
   const hovercardProps = useHovercard({ state, portal: true });
@@ -37,6 +54,7 @@ export const HoverCard = (props) => {
         href={href}
         className={cx(css.anchor, anchorClassName)}
         as={Component}
+        aria-controls={state.open ? hovercardProps.id : ''}
       >
         {label}
       </HovercardAnchor>
@@ -52,29 +70,3 @@ export const HoverCard = (props) => {
     </div>
   );
 };
-
-HoverCard.propTypes = {
-  /** Adopted child class name */
-  className: PropTypes.string,
-  /** Adopted child class name for hover card */
-  hoverCardClassName: PropTypes.string,
-  /** Adopted child class name for anchor */
-  anchorClassName: PropTypes.string,
-  /** Anchor label */
-  label: PropTypes.node,
-  /** Anchor href */
-  href: PropTypes.string,
-  /** Anchor component */
-  as: PropTypes.elementType,
-  /** Hover card component */
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
-};
-
-HoverCard.defaultProps = {
-  className: '',
-  hoverCardClassName: '',
-  anchorClassName: '',
-  label: '',
-  as: '',
-  href: '',
-};

packages/ui/src/ui/tooltip/tooltip.tsx

@@ -39,6 +39,7 @@ export const Tooltip = <T extends React.ElementType = 'span'>(
         as={Component as React.ElementType}
         className={cx(css.root, className)}
         state={tooltip}
+        aria-controls={tooltip.open ? tooltip.contentElement?.id : ''}
         {...(ref ? { ref } : {})}
         {...restProps}
       />