feat(nav-bar-content): smaller requirement icons in left nav and bett…

…er margins (#2715) * feat(nav-bar-content): smaller icons for requirements in left nav * fixed up title margins in requirements view
microsoft · May 19, 2020 · e1789ee · e1789ee
1 parent 2909f90
commit e1789ee
Show file tree

Hide file tree

Showing 9 changed files with 96 additions and 68 deletions.
diff --git a/src/DetailsView/components/left-nav/left-nav-icon.tsx b/src/DetailsView/components/left-nav/left-nav-icon.tsx
@@ -1,18 +1,20 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
-import { INavLink } from 'office-ui-fabric-react';
+import { css, INavLink } from 'office-ui-fabric-react';
 import * as React from 'react';
 import { NamedFC } from '../../../common/react/named-fc';
 import { StatusIcon } from '../status-icon';
 
 export type LeftNavIconProps = {
     item: INavLink;
+    className?: string;
 };
 
 export const LeftNavStatusIcon = NamedFC<LeftNavIconProps>('LeftNavStatusIcon', props => {
     const { item } = props;
+    const classes = css('dark-gray', props.className);
 
-    return <StatusIcon status={item.status} className={'dark-gray'} level="test" />;
+    return <StatusIcon status={item.status} className={classes} level="test" />;
 });
 
 export const LeftNavIndexIcon = NamedFC<LeftNavIconProps>('LeftNavIndexIcon', props => {

diff --git a/src/DetailsView/components/left-nav/left-nav-link-builder.scss b/src/DetailsView/components/left-nav/left-nav-link-builder.scss
@@ -0,0 +1,10 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+/*
+Specificity due to clashes with details-view.scss & avoiding use of !important
+*/
+:global(#details-container .details-view-body-nav-content-layout .left-nav .button-flex-container)
+    .requirement-status-icon {
+    font-size: 20px;
+}
diff --git a/src/DetailsView/components/left-nav/left-nav-link-builder.tsx b/src/DetailsView/components/left-nav/left-nav-link-builder.tsx
@@ -13,6 +13,7 @@ import {
 } from 'DetailsView/components/left-nav/assessment-left-nav';
 import { GettingStartedNavLink } from 'DetailsView/components/left-nav/getting-started-nav-link';
 import { LeftNavIndexIcon, LeftNavStatusIcon } from 'DetailsView/components/left-nav/left-nav-icon';
+import { requirementStatusIcon } from 'DetailsView/components/left-nav/left-nav-link-builder.scss';
 import { NavLinkHandler } from 'DetailsView/components/left-nav/nav-link-handler';
 import { map } from 'lodash';
 import * as React from 'react';
@@ -261,7 +262,7 @@ export class LeftNavLinkBuilder {
             return <>{link.displayedIndex}</>;
         }
 
-        return <LeftNavStatusIcon item={link} />;
+        return <LeftNavStatusIcon className={requirementStatusIcon} item={link} />;
     };
 
     private renderAssessmentTestIcon: onBaseLeftNavItemRender = (link: AssessmentLeftNavLink) => {

diff --git a/src/DetailsView/components/requirement-view.scss b/src/DetailsView/components/requirement-view.scss
@@ -6,6 +6,10 @@
     margin: 0px 18px;
     padding-left: 6px;
     padding-top: 1vh;
+
+    .main-content {
+        margin-top: 10px;
+    }
 }
 
 :global(.visual-helper) {

diff --git a/src/DetailsView/components/requirement-view.tsx b/src/DetailsView/components/requirement-view.tsx
@@ -111,23 +111,27 @@ export class RequirementView extends React.Component<RequirementViewProps> {
                     guidanceLinks={this.props.requirement.guidanceLinks}
                     infoAndExamples={this.props.requirement.infoAndExamples}
                 />
-                {this.props.requirement.description}
-                {visualHelperToggle}
-                <RequirementInstructions howToTest={this.props.requirement.howToTest} />
-                <RequirementTableSection
-                    requirement={requirement}
-                    assessmentNavState={this.props.assessmentNavState}
-                    instancesMap={this.props.instancesMap}
-                    manualRequirementResultMap={this.props.manualRequirementResultMap}
-                    assessmentInstanceTableHandler={this.props.assessmentInstanceTableHandler}
-                    assessmentsProvider={this.props.assessmentsProvider}
-                    featureFlagStoreData={this.props.featureFlagStoreData}
-                    pathSnippetStoreData={this.props.pathSnippetStoreData}
-                    scanningInProgress={this.props.scanningInProgress}
-                    selectedRequirementHasVisualHelper={requirementHasVisualHelper}
-                    isRequirementScanned={this.props.isRequirementScanned}
-                    assessmentDefaultMessageGenerator={this.props.assessmentDefaultMessageGenerator}
-                />
+                <div className={styles.mainContent}>
+                    {this.props.requirement.description}
+                    {visualHelperToggle}
+                    <RequirementInstructions howToTest={this.props.requirement.howToTest} />
+                    <RequirementTableSection
+                        requirement={requirement}
+                        assessmentNavState={this.props.assessmentNavState}
+                        instancesMap={this.props.instancesMap}
+                        manualRequirementResultMap={this.props.manualRequirementResultMap}
+                        assessmentInstanceTableHandler={this.props.assessmentInstanceTableHandler}
+                        assessmentsProvider={this.props.assessmentsProvider}
+                        featureFlagStoreData={this.props.featureFlagStoreData}
+                        pathSnippetStoreData={this.props.pathSnippetStoreData}
+                        scanningInProgress={this.props.scanningInProgress}
+                        selectedRequirementHasVisualHelper={requirementHasVisualHelper}
+                        isRequirementScanned={this.props.isRequirementScanned}
+                        assessmentDefaultMessageGenerator={
+                            this.props.assessmentDefaultMessageGenerator
+                        }
+                    />
+                </div>
             </div>
         );
     }

diff --git a/src/tests/unit/tests/DetailsView/components/__snapshots__/requirement-view.test.tsx.snap b/src/tests/unit/tests/DetailsView/components/__snapshots__/requirement-view.test.tsx.snap
@@ -14,59 +14,63 @@ exports[`RequirementViewTest renders with content from props 1`] = `
     }
     name="test-requirement-name"
   />
-  <div>
-    test-description
-  </div>
-  <div>
-    test-visual-helper-toggle
-  </div>
-  <RequirementInstructions
-    howToTest={
-      <p>
-        how-to-test-stub
-      </p>
-    }
-  />
-  <RequirementTableSection
-    assessmentInstanceTableHandler={
-      Object {
-        "changeRequirementStatus": null,
+  <div
+    className="mainContent"
+  >
+    <div>
+      test-description
+    </div>
+    <div>
+      test-visual-helper-toggle
+    </div>
+    <RequirementInstructions
+      howToTest={
+        <p>
+          how-to-test-stub
+        </p>
       }
-    }
-    assessmentNavState={
-      Object {
-        "selectedTestSubview": "test-requirement-name",
-        "selectedTestType": 0,
+    />
+    <RequirementTableSection
+      assessmentInstanceTableHandler={
+        Object {
+          "changeRequirementStatus": null,
+        }
       }
-    }
-    assessmentsProvider={
-      proxy {
-        "___id": "BCDF5CE5-F0DF-40B7-8BA0-69DF395033C8",
+      assessmentNavState={
+        Object {
+          "selectedTestSubview": "test-requirement-name",
+          "selectedTestType": 0,
+        }
       }
-    }
-    featureFlagStoreData={
-      Object {
-        "some feature flag": true,
+      assessmentsProvider={
+        proxy {
+          "___id": "BCDF5CE5-F0DF-40B7-8BA0-69DF395033C8",
+        }
       }
-    }
-    instancesMap={Object {}}
-    isRequirementScanned={true}
-    manualRequirementResultMap={
-      Object {
-        "some manual test step result id": null,
+      featureFlagStoreData={
+        Object {
+          "some feature flag": true,
+        }
       }
-    }
-    pathSnippetStoreData={
-      Object {
-        "path": null,
+      instancesMap={Object {}}
+      isRequirementScanned={true}
+      manualRequirementResultMap={
+        Object {
+          "some manual test step result id": null,
+        }
       }
-    }
-    requirement={
-      Object {
-        "getVisualHelperToggle": [Function],
+      pathSnippetStoreData={
+        Object {
+          "path": null,
+        }
       }
-    }
-    selectedRequirementHasVisualHelper={true}
-  />
+      requirement={
+        Object {
+          "getVisualHelperToggle": [Function],
+        }
+      }
+      selectedRequirementHasVisualHelper={true}
+    />
+  </div>
 </div>
 `;
diff --git a/...ests/unit/tests/DetailsView/components/left-nav/__snapshots__/left-nav-icon.test.tsx.snap b/...ests/unit/tests/DetailsView/components/left-nav/__snapshots__/left-nav-icon.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`LeftNavIndexIcon render 1`] = `
 
 exports[`LeftNavStatusIcon render 1`] = `
 <StatusIcon
-  className="dark-gray"
+  className="dark-gray some class"
   level="test"
   status={0}
 />

diff --git a/...t/tests/DetailsView/components/left-nav/__snapshots__/left-nav-link-builder.test.tsx.snap b/...t/tests/DetailsView/components/left-nav/__snapshots__/left-nav-link-builder.test.tsx.snap
@@ -163,6 +163,7 @@ exports[`LeftNavBuilder buildReflowAssessmentTestLinks should build links for as
 
 exports[`LeftNavBuilder buildReflowAssessmentTestLinks should build links for assessments: requirement nav link render icon 1`] = `
 <LeftNavStatusIcon
+  className="requirementStatusIcon"
   item={
     <TestViewLeftNavLink
       link={
@@ -192,6 +193,7 @@ exports[`LeftNavBuilder buildReflowAssessmentTestLinks should build links for as
 
 exports[`LeftNavBuilder buildReflowAssessmentTestLinks should build links for assessments: requirement nav link render icon 2`] = `
 <LeftNavStatusIcon
+  className="requirementStatusIcon"
   item={
     <TestViewLeftNavLink
       link={

diff --git a/src/tests/unit/tests/DetailsView/components/left-nav/left-nav-icon.test.tsx b/src/tests/unit/tests/DetailsView/components/left-nav/left-nav-icon.test.tsx
@@ -18,6 +18,7 @@ describe('LeftNavStatusIcon', () => {
                 name: 'test',
                 url: 'test',
             },
+            className: 'some class',
         } as LeftNavIconProps;
 
         const actual = shallow(<LeftNavStatusIcon {...props} />);