Merge pull request #4 from constancecchen/documents-view-4

Documents view 4
elastic · Dec 8, 2020 · 128b4ce · 128b4ce
2 parents 2ccd75c + a2573bd
commit 128b4ce
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 82 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,40 +1,24 @@
 .appSearchResult {
-  overflow: hidden;
   display: flex;
-  justify-content: space-between;
-  width: 100%;
 
-  &__contentWrap {
+  &__content {
     width: 100%;
     padding: $euiSize;
-    display: grid;
-    grid-template-rows: 1fr $euiSizeXS * 5;
-    border-right: $euiBorderThin;
-  }
-
-  &__contentInner {
-    display: grid;
-    grid-gap: $euiSizeS;
     overflow: hidden;
   }
 
-  &__fieldsetContainer {
-    display: flex;
-    flex-direction: column;
-  }
-
   &__hiddenFieldsIndicator {
     font-size: $euiFontSizeXS;
     color: $euiColorDarkShade;
-    align-self: end;
-    padding-top: 0;
+    margin-top: $euiSizeS;
   }
 
-  &__toggleExpandButton {
-    justify-self: stretch;
-    align-self: stretch;
+  &__actionButton {
     display: flex;
+    justify-content: center;
+    align-items: center;
     width: $euiSizeL * 2;
+    border-left: $euiBorderThin;
 
     &:hover,
     &:focus,
@@ -43,13 +27,4 @@
       cursor: pointer;
     }
   }
-
-  &__toggleExpandButton {
-    grid-column: 2;
-  }
-
-  &__toggleIcon {
-    align-self: center;
-    margin: auto;
-  }
 }
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
@@ -34,40 +34,36 @@ export const Result: React.FC<Props> = ({ result, showScore }) => {
   return (
     <EuiPanel
       paddingSize="none"
-      key="results"
       className={'appSearchResult'}
       data-test-subj="AppSearchResult"
       title={i18n.translate('xpack.enterpriseSearch.appSearch.result.title', {
         defaultMessage: 'View document details',
       })}
     >
-      <div className="appSearchResult__contentWrap">
-        <div className="appSearchResult__contentInner">
-          <ResultHeader resultMeta={resultMeta} showScore={!!showScore} />
-          <div className="appSearchResult__fieldsetContainer">
-            <div>
-              {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>
-          </div>
+      <article className="appSearchResult__content">
+        <ResultHeader resultMeta={resultMeta} showScore={!!showScore} />
+        <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
@@ -80,17 +76,9 @@ export const Result: React.FC<Props> = ({ result, showScore }) => {
           }
         >
           {isOpen ? (
-            <EuiIcon
-              data-test-subj="CollapseResult"
-              type="arrowUp"
-              className="appSearchResult__toggleIcon"
-            />
+            <EuiIcon data-test-subj="CollapseResult" type="arrowUp" />
           ) : (
-            <EuiIcon
-              data-test-subj="ExpandResult"
-              type="arrowDown"
-              className="appSearchResult__toggleIcon"
-            />
+            <EuiIcon data-test-subj="ExpandResult" type="arrowDown" />
           )}
         </button>
       )}

diff --git a/...gins/enterprise_search/public/applications/app_search/components/result/result_field.scss b/...gins/enterprise_search/public/applications/app_search/components/result/result_field.scss
@@ -2,18 +2,24 @@
   font-size: $euiFontSizeS;
   line-height: $euiLineHeight;
   display: grid;
-  grid-template-columns: calc(35% + #{$euiSizeS * 7} ) $euiSize * 2 1fr;
+  grid-template-columns: 0.85fr $euiSizeXL 1fr;
   grid-gap: $euiSizeXS;
 
   &__separator {
+    text-align: center;
+
     &:after {
       content: '=>';
       color: $euiColorDarkShade;
     }
   }
 
   &__value {
-    padding-left: $euiSizeS;
+    padding-left: $euiSize;
     overflow: hidden;
+
+    @include euiBreakpoint('xs') {
+      padding-left: 0;
+    }
   }
 }
diff --git a/...ugins/enterprise_search/public/applications/app_search/components/result/result_field.tsx b/...ugins/enterprise_search/public/applications/app_search/components/result/result_field.tsx
@@ -19,11 +19,9 @@ interface Props {
 
 export const ResultField: React.FC<Props> = ({ field, raw, snippet, type }) => {
   return (
-    <div className="appSearchResultField" key={field}>
-      <div className="appSearchResultField__key eui-textTruncate">
-        <span>{field}</span>
-      </div>
-      <div className="appSearchResultField__separator" />
+    <div className="appSearchResultField">
+      <div className="appSearchResultField__key eui-textTruncate">{field}</div>
+      <div className="appSearchResultField__separator" aria-hidden />
       <div className="appSearchResultField__value">
         <ResultFieldValue className="eui-textTruncate" raw={raw} snippet={snippet} type={type} />
       </div>

diff --git a/...ins/enterprise_search/public/applications/app_search/components/result/result_header.scss b/...ins/enterprise_search/public/applications/app_search/components/result/result_header.scss
@@ -2,25 +2,27 @@
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-}
+  margin-bottom: $euiSizeS;
 
-.appSearchResultHeaderColumn {
-  display: flex;
-  flex-wrap: wrap;
+  @include euiBreakpoint('xs') {
+    flex-direction: column;
+  }
 
-  &--left {
-    justify-content: flex-start;
+  &__column {
+    display: flex;
+    flex-wrap: wrap;
 
-    .appSearchResultHeaderItem {
-      margin-right: $euiSizeL;
+    @include euiBreakpoint('xs') {
+      flex-direction: column;
     }
-  }
-
-  &--right {
-    justify-content: flex-end;
 
+    & + &,
     .appSearchResultHeaderItem + .appSearchResultHeaderItem {
       margin-left: $euiSizeL;
+
+      @include euiBreakpoint('xs') {
+        margin-left: 0;
+      }
     }
   }
 }
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,9 +20,9 @@ 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="appSearchResultHeaderColumn appSearchResultHeaderColumn--left">
+        <div className="appSearchResultHeader__column">
           <ResultHeaderItem
             data-test-subj="ResultScore"
             field="score"
@@ -32,7 +32,7 @@ export const ResultHeader: React.FC<Props> = ({ showScore, resultMeta }) => {
         </div>
       )}
 
-      <div className="appSearchResultHeaderColumn appSearchResultHeaderColumn--right">
+      <div className="appSearchResultHeader__column">
         {showEngineLabel && (
           <ResultHeaderItem
             data-test-subj="ResultEngine"
@@ -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>
   );
 };
diff --git a/...enterprise_search/public/applications/app_search/components/result/result_header_item.tsx b/...enterprise_search/public/applications/app_search/components/result/result_header_item.tsx
@@ -26,7 +26,7 @@ export const ResultHeaderItem: React.FC<Props> = ({ field, type, value }) => {
   }
 
   return (
-    <div className="appSearchResultHeaderItem" key={field}>
+    <div className="appSearchResultHeaderItem">
       <div className="appSearchResultHeaderItem__key">
         <TruncatedContent content={field} length={MAX_CHARACTER_LENGTH} tooltipType="title" />
       </div>