Merge pull request #15535 from luchillo17/feat/BCKSTG-93-spans

Enable eslint-plugin-react forbid span - Reopen

packages/app/src/components/search/SearchModal.tsx

@@ -25,6 +25,7 @@ import {
   Paper,
   useTheme,
 } from '@material-ui/core';
+import Typography from '@material-ui/core/Typography';
 import BuildIcon from '@material-ui/icons/Build';
 import LaunchIcon from '@material-ui/icons/Launch';
 import {
@@ -178,9 +179,12 @@ export const SearchModal = ({ toggleModal }: { toggleModal: () => void }) => {
                   }}
                   to={`${getSearchLink()}?query=${term}`}
                 >
-                  <span className={classes.viewResultsLink}>
+                  <Typography
+                    component="span"
+                    className={classes.viewResultsLink}
+                  >
                     View Full Results
-                  </span>
+                  </Typography>
                   <LaunchIcon color="primary" />
                 </Link>
               </Grid>

packages/core-components/src/components/LogViewer/LogLine.tsx

@@ -15,6 +15,7 @@
  */
 
 import React, { useMemo } from 'react';
+import Typography from '@material-ui/core/Typography';
 import { AnsiChunk, AnsiLine, ChunkModifiers } from './AnsiProcessor';
 import startCase from 'lodash/startCase';
 import classnames from 'classnames';
@@ -158,7 +159,8 @@ export function LogLine({
   const elements = useMemo(
     () =>
       chunks.map(({ text, modifiers, highlight }, index) => (
-        <span
+        <Typography
+          component="span"
           key={index}
           className={classnames(
             getModifierClasses(classes, modifiers),
@@ -169,7 +171,7 @@ export function LogLine({
           )}
         >
           {text}
-        </span>
+        </Typography>
       )),
     [chunks, highlightResultIndex, classes],
   );

packages/core-components/src/components/Tabs/TabBar.tsx

@@ -17,6 +17,7 @@
 import React, { PropsWithChildren } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import Tabs from '@material-ui/core/Tabs';
+import Typography from '@material-ui/core/Typography';
 import { BackstageTheme } from '@backstage/theme';
 
 interface StyledTabsProps {
@@ -53,7 +54,7 @@ export const StyledTabs = (props: PropsWithChildren<StyledTabsProps>) => {
     <Tabs
       classes={classes}
       {...props}
-      TabIndicatorProps={{ children: <span /> }}
+      TabIndicatorProps={{ children: <Typography component="span" /> }}
     />
   );
 };

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

@@ -106,7 +106,7 @@ export const OutsideOfHeader = () => {
           <Link to="/">General Page</Link>
           <Link to="/" onClick={handleClick}>
             <Box display="flex" alignItems="center">
-              <span>Second Page</span>
+              <Typography component="span">Second Page</Typography>
               {open ? <ExpandLessIcon /> : <ExpandMoreIcon />}
             </Box>
           </Link>

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

@@ -15,6 +15,7 @@
  */
 
 import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
 import React, { PropsWithChildren, useState } from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { CardTab, TabbedCard } from './TabbedCard';
@@ -89,7 +90,7 @@ export const WithControlledTabValue = () => {
 
   return (
     <Wrapper>
-      <span>Selected tab is {selectedTab}</span>
+      <Typography component="span">Selected tab is {selectedTab}</Typography>
 
       <TabbedCard
         value={selectedTab}