fix: Add paragraph prop for bottom margin

Signed-off-by: Carlos Esteban Lopez <lcarlosesteb@vmware.com>

packages/core-components/src/layout/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -36,7 +36,7 @@ export default {
 export const InHeader = () => (
   <MemoryRouter>
     <h2>Standard breadcrumbs</h2>
-    <Typography>
+    <Typography paragraph>
       Underlined pages are links. This should show a hierarchical relationship.
     </Typography>
 
@@ -61,14 +61,14 @@ export const OutsideOfHeader = () => {
   const open = Boolean(anchorEl);
   return (
     <MemoryRouter>
-      <Typography>
+      <Typography paragraph>
         It might be the case that you want to keep your breadcrumbs outside of
         the header. In that case, they should be positioned above the title of
         the page.
       </Typography>
 
       <h2>Standard breadcrumbs</h2>
-      <Typography>
+      <Typography paragraph>
         Underlined pages are links. This should show a hierarchical
         relationship.
       </Typography>
@@ -82,7 +82,7 @@ export const OutsideOfHeader = () => {
       </Breadcrumbs>
 
       <h2>Hidden breadcrumbs</h2>
-      <Typography>
+      <Typography paragraph>
         Use this when you have more than three breadcrumbs. When user clicks on
         ellipses, expand the breadcrumbs out.
       </Typography>
@@ -96,7 +96,7 @@ export const OutsideOfHeader = () => {
       </Breadcrumbs>
 
       <h2>Layered breadcrumbs</h2>
-      <Typography>
+      <Typography paragraph>
         Use this when you want to show alternative breadcrumbs on the same
         hierarchical level.
       </Typography>

plugins/bazaar/src/components/EntityBazaarInfoContent/EntityBazaarInfoContent.tsx

@@ -184,7 +184,7 @@ export const EntityBazaarInfoContent = ({
 
         <CardHeader
           title={
-            <Typography className={classes.wordBreak}>
+            <Typography paragraph className={classes.wordBreak}>
               {bazaarProject?.title!}
             </Typography>
           }

plugins/bazaar/src/components/HomePageBazaarInfoCard/HomePageBazaarInfoCard.tsx

@@ -257,7 +257,7 @@ export const HomePageBazaarInfoCard = ({
 
         <CardHeader
           title={
-            <Typography className={classes.wordBreak}>
+            <Typography paragraph className={classes.wordBreak}>
               {bazaarProject.value?.title || initProject.title}
             </Typography>
           }

plugins/fossa/src/components/FossaCard/FossaCard.tsx

@@ -167,6 +167,7 @@ export const FossaCard = (props: { variant?: InfoCardVariants }) => {
       >
         <Grid item>
           <Typography
+            paragraph
             className={
               value.issueCount > 0 || value.dependencyCount === 0
                 ? classes.numberError
@@ -176,12 +177,12 @@ export const FossaCard = (props: { variant?: InfoCardVariants }) => {
             {value.issueCount}
           </Typography>
           {value.dependencyCount > 0 && (
-            <Typography className={classes.description}>
+            <Typography paragraph className={classes.description}>
               Number of issues
             </Typography>
           )}
           {value.dependencyCount === 0 && (
-            <Typography className={classes.description}>
+            <Typography paragraph className={classes.description}>
               No Dependencies.
               <br />
               Please check your FOSSA project settings.

plugins/github-actions/src/components/WorkflowRunsTable/WorkflowRunsTable.tsx

@@ -68,8 +68,12 @@ const generatedColumns: TableColumn[] = [
     title: 'Source',
     render: (row: Partial<WorkflowRun>) => (
       <Typography variant="body2" noWrap>
-        <Typography variant="body2">{row.source?.branchName}</Typography>
-        <Typography variant="body2">{row.source?.commit.hash}</Typography>
+        <Typography paragraph variant="body2">
+          {row.source?.branchName}
+        </Typography>
+        <Typography paragraph variant="body2">
+          {row.source?.commit.hash}
+        </Typography>
       </Typography>
     ),
   },

plugins/home/src/homePageComponents/RandomJoke/Content.tsx

@@ -21,12 +21,12 @@ import { useRandomJoke } from './Context';
 export const Content = () => {
   const { joke, loading } = useRandomJoke();
 
-  if (loading) return <Typography>Loading...</Typography>;
+  if (loading) return <Typography paragraph>Loading...</Typography>;
 
   return (
     <div>
-      <Typography>{joke.setup}</Typography>
-      <Typography>{joke.punchline}</Typography>
+      <Typography paragraph>{joke.setup}</Typography>
+      <Typography paragraph>{joke.punchline}</Typography>
     </div>
   );
 };

plugins/jenkins/src/components/BuildsPage/lib/CITable/CITable.tsx

@@ -126,12 +126,12 @@ const generatedColumns: TableColumn[] = [
     field: 'lastBuild.source.branchName',
     render: (row: Partial<Project>) => (
       <>
-        <Typography>
+        <Typography paragraph>
           <Link to={row.lastBuild?.source?.url ?? ''}>
             {row.lastBuild?.source?.branchName}
           </Link>
         </Typography>
-        <Typography>{row.lastBuild?.source?.commit?.hash}</Typography>
+        <Typography paragraph>{row.lastBuild?.source?.commit?.hash}</Typography>
       </>
     ),
   },
@@ -152,7 +152,7 @@ const generatedColumns: TableColumn[] = [
     render: (row: Partial<Project>) => {
       return (
         <>
-          <Typography>
+          <Typography paragraph>
             {row.lastBuild?.tests && (
               <Link to={row.lastBuild?.tests.testUrl ?? ''}>
                 {row.lastBuild?.tests.passed} / {row.lastBuild?.tests.total}{' '}

plugins/kubernetes/src/components/CustomResources/ArgoRollouts/StepsProgress.tsx

@@ -50,9 +50,9 @@ const createLabelForStep = (step: ArgoRolloutCanaryStep): React.ReactNode => {
   } else if (isAnalysisStep(step)) {
     return (
       <div>
-        <Typography>analysis templates:</Typography>
+        <Typography paragraph>analysis templates:</Typography>
         {step.analysis.templates.map((t, i) => (
-          <Typography key={i}>{`${t.templateName}${
+          <Typography paragraph key={i}>{`${t.templateName}${
             t.clusterScope ? ' (cluster scoped)' : ''
           }`}</Typography>
         ))}

plugins/scaffolder/src/components/ListTasksPage/columns/CreatedAtColumn.tsx

@@ -25,6 +25,8 @@ export const CreatedAtColumn = ({ createdAt }: { createdAt: string }) => {
     .valueOf();
 
   return (
-    <Typography>{humanizeDuration(formatted, { round: true })} ago</Typography>
+    <Typography paragraph>
+      {humanizeDuration(formatted, { round: true })} ago
+    </Typography>
   );
 };

plugins/scaffolder/src/components/ListTasksPage/columns/OwnerEntityColumn.tsx

@@ -31,7 +31,7 @@ export const OwnerEntityColumn = ({ entityRef }: { entityRef?: string }) => {
   );
 
   if (!entityRef) {
-    return <Typography>Unknown</Typography>;
+    return <Typography paragraph>Unknown</Typography>;
   }
 
   if (loading || error) {

plugins/stack-overflow/src/home/StackOverflowQuestions/Content.tsx

@@ -52,11 +52,11 @@ export const Content = (props: StackOverflowQuestionsContentProps) => {
   }, []);
 
   if (loading) {
-    return <Typography>loading...</Typography>;
+    return <Typography paragraph>loading...</Typography>;
   }
 
   if (error || !value || !value.length) {
-    return <Typography>could not load questions</Typography>;
+    return <Typography paragraph>could not load questions</Typography>;
   }
 
   const getSecondaryText = (answer_count: Number) =>

plugins/tech-radar/src/components/RadarLegend/RadarLegendRing.tsx

@@ -39,7 +39,9 @@ export const RadarLegendRing = ({
     <div data-testid="radar-ring" key={ring.id} className={classes.ring}>
       <h3 className={classes.ringHeading}>{ring.name}</h3>
       {entries.length === 0 ? (
-        <Typography className={classes.ringEmpty}>(empty)</Typography>
+        <Typography paragraph className={classes.ringEmpty}>
+          (empty)
+        </Typography>
       ) : (
         <ol className={classes.ringList}>
           {entries.map(entry => (

plugins/tech-radar/src/components/RadarPage.tsx

@@ -80,7 +80,7 @@ export function RadarPage(props: TechRadarPageProps) {
             onChange={e => setSearchText(e.target.value)}
           />
           <SupportButton>
-            <Typography>
+            <Typography paragraph>
               This is used for visualizing the official guidelines of different
               areas of software development such as languages, frameworks,
               infrastructure and processes. You can find an explanation for the

plugins/xcmetrics/src/components/BuildTimeline/BuildTimeline.tsx

@@ -92,7 +92,7 @@ export const BuildTimeline = ({
   width,
 }: BuildTimelineProps) => {
   const theme = useTheme();
-  if (!targets.length) return <Typography>No Targets</Typography>;
+  if (!targets.length) return <Typography paragraph>No Targets</Typography>;
 
   const data = getTimelineData(targets);