Cleaner CSS class names + more semantic HTML markup

cee-chen · Dec 7, 2020 · dda58c4 · dda58c4
1 parent 6a6ff41
commit dda58c4
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 10 deletions.
diff --git a/...ck/plugins/enterprise_search/public/applications/app_search/components/result/result.scss b/...ck/plugins/enterprise_search/public/applications/app_search/components/result/result.scss
@@ -1,7 +1,7 @@
 .appSearchResult {
   display: flex;
 
-  &__contentWrap {
+  &__content {
     width: 100%;
     padding: $euiSize;
     overflow: hidden;
@@ -13,7 +13,7 @@
     margin-top: $euiSizeS;
   }
 
-  &__toggleExpandButton {
+  &__actionButton {
     display: flex;
     justify-content: center;
     align-items: center;

diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result.tsx
@@ -41,29 +41,30 @@ export const Result: React.FC<Props> = ({ result, showScore }) => {
         defaultMessage: 'View document details',
       })}
     >
-      <div className="appSearchResult__contentWrap">
+      <article className="appSearchResult__content">
         <ResultHeader resultMeta={resultMeta} showScore={!!showScore} />
-        <div className="appSearchResult__contentInner">
+        <div className="appSearchResult__body">
           {resultFields
             .slice(0, isOpen ? resultFields.length : RESULT_CUTOFF)
             .map(([field, value]: [string, FieldValue]) => (
               <ResultField key={field} field={field} raw={value.raw} snippet={value.snippet} />
             ))}
         </div>
         {numResults > RESULT_CUTOFF && !isOpen && (
-          <div className="appSearchResult__hiddenFieldsIndicator">
+          <footer className="appSearchResult__hiddenFieldsIndicator">
             {i18n.translate('xpack.enterpriseSearch.appSearch.result.numberOfAdditionalFields', {
               defaultMessage: '{numberOfAdditionalFields} more fields',
               values: {
                 numberOfAdditionalFields: numResults - RESULT_CUTOFF,
               },
             })}
-          </div>
+          </footer>
         )}
-      </div>
+      </article>
       {numResults > RESULT_CUTOFF && (
         <button
-          className="appSearchResult__toggleExpandButton"
+          type="button"
+          className="appSearchResult__actionButton"
           onClick={() => setIsOpen(!isOpen)}
           aria-label={
             isOpen

diff --git a/...gins/enterprise_search/public/applications/app_search/components/result/result_header.tsx b/...gins/enterprise_search/public/applications/app_search/components/result/result_header.tsx
@@ -20,7 +20,7 @@ export const ResultHeader: React.FC<Props> = ({ showScore, resultMeta }) => {
   const showEngineLabel: boolean = resultMeta.id !== resultMeta.scopedId;
 
   return (
-    <div className="appSearchResultHeader">
+    <header className="appSearchResultHeader">
       {showScore && (
         <div className="appSearchResultHeader__column">
           <ResultHeaderItem
@@ -43,6 +43,6 @@ export const ResultHeader: React.FC<Props> = ({ showScore, resultMeta }) => {
         )}
         <ResultHeaderItem data-test-subj="ResultId" field="id" value={resultMeta.id} type="id" />
       </div>
-    </div>
+    </header>
   );
 };