Use semantic HTML tags

Signed-off-by: Prem Kumar <[email protected]>
thanos-io · Aug 20, 2020 · 2d1a847 · 2d1a847
1 parent 2f38a92
commit 2d1a847
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 66 deletions.
diff --git a/pkg/ui/bindata.go b/pkg/ui/bindata.go
diff --git a/pkg/ui/react-app/src/thanos/pages/blocks/BlockDetails.test.tsx b/pkg/ui/react-app/src/thanos/pages/blocks/BlockDetails.test.tsx
@@ -20,7 +20,7 @@ describe('BlockDetails', () => {
   const blockDetails = mount(<BlockDetails {...defaultProps} />);
 
   it('renders a heading with block ulid', () => {
-    const title = blockDetails.find('div > p');
+    const title = blockDetails.find('div > span');
     expect(title).toHaveLength(1);
     expect(title.text()).toEqual(sampleBlock.ulid);
   });

diff --git a/pkg/ui/react-app/src/thanos/pages/blocks/BlockDetails.tsx b/pkg/ui/react-app/src/thanos/pages/blocks/BlockDetails.tsx
@@ -14,7 +14,7 @@ export const BlockDetails: FC<BlockDetailsProps> = ({ block, selectBlock }) => {
       {block && (
         <>
           <div className={styles.detailsTop}>
-            <p>{block.ulid}</p>
+            <span className={styles.header}>{block.ulid}</span>
             <button className={styles.closeBtn} onClick={(): void => selectBlock(undefined)}>
               &times;
             </button>

diff --git a/pkg/ui/react-app/src/thanos/pages/blocks/SourceView.test.tsx b/pkg/ui/react-app/src/thanos/pages/blocks/SourceView.test.tsx
@@ -21,7 +21,7 @@ describe('Blocks SourceView', () => {
   const sourceView = mount(<SourceView {...defaultProps} />);
 
   it('renders a paragraph with title', () => {
-    const title = sourceView.find('div > p');
+    const title = sourceView.find('div > span');
     expect(title).toHaveLength(1);
     expect(title.text()).toEqual(source);
   });

diff --git a/pkg/ui/react-app/src/thanos/pages/blocks/SourceView.tsx b/pkg/ui/react-app/src/thanos/pages/blocks/SourceView.tsx
@@ -31,7 +31,7 @@ export const SourceView: FC<SourceViewProps> = ({ data, title, gridMaxTime, grid
     <>
       <div className={styles.source}>
         <div className={styles.title} title={title}>
-          <p>{title}</p>
+          <span>{title}</span>
         </div>
         <div className={styles.rowsContainer}>
           {Object.keys(data).map(k => (

diff --git a/pkg/ui/react-app/src/thanos/pages/blocks/blocks.module.css b/pkg/ui/react-app/src/thanos/pages/blocks/blocks.module.css
@@ -50,7 +50,7 @@
   flex-wrap: wrap-reverse;
 }
 
-.detailsTop > p {
+.header {
   margin: 0;
   padding: 0;
   font-weight: 700;
@@ -93,7 +93,8 @@
   padding: 0 1em;
 }
 
-.title > p {
+.title > span {
+  display: block;
   width: 8vw;
   margin: 0;
   text-align: center;