style: make focus styles more consistent (microsoft#2898)

* use action button instead of link for more consistent focus style

* fix focus outline for visual panel

* fix search box focus style

* fix visual editor focus style

* improve focus styles for dialog nav

* fix focus style for main left nav

* bring connect skill button into toolbar

show the skill form in a modal

* fix broken tests

* fix focus style in form

* remove extra border from visual design container

* Fix lint

Co-authored-by: Chris Whitten <christopher.whitten@microsoft.com>

Composer/packages/client/__tests__/components/skill.test.jsx → Composer/packages/client/__tests__/components/skill.test.tsx

@@ -2,42 +2,68 @@
 // Licensed under the MIT License.
 
 import * as React from 'react';
-import { render, fireEvent } from '@bfc/test-utils';
+import { render, fireEvent, getByLabelText, getByTestId } from '@bfc/test-utils';
+import { Skill } from '@bfc/shared';
 
+import Skills from '../../src/pages/skills';
 import SkillList from '../../src/pages/skills/skill-list';
 import SkillForm from '../../src/pages/skills/skill-form';
+import { renderWithStore } from '../testUtils';
 
-const items = [
+const items: Skill[] = [
   {
     manifestUrl: 'https://yuesuemailskill0207-gjvga67.azurewebsites.net/manifest/manifest-1.0.json',
     name: 'Email Skill',
     description: 'The Email skill provides email related capabilities and supports Office and Google calendars.',
     endpointUrl: 'https://yuesuemailskill0207-gjvga67.azurewebsites.net/api/messages',
     msAppId: '79432da8-0f7e-4a16-8c23-ddbba30ae85d',
+    protocol: '',
+    endpoints: [],
+    body: '',
   },
   {
     manifestUrl: 'https://hualxielearn2-snskill.azurewebsites.net/manifest/manifest-1.0.json',
     name: 'Point Of Interest Skill',
     description: 'The Point of Interest skill provides PoI search capabilities leveraging Azure Maps and Foursquare.',
     endpointUrl: 'https://hualxielearn2-snskill.azurewebsites.net/api/messages',
     msAppId: 'e2852590-ea71-4a69-9e44-e74b5b6cbe89',
+    protocol: '',
+    endpoints: [],
+    body: '',
   },
 ];
 
+describe('Skill page', () => {
+  it('can add a new skill', () => {
+    const { getByText } = renderWithStore(<Skills />);
+
+    const button = getByText('Connect to a new skill');
+    fireEvent.click(button);
+
+    const manifestUrl = getByLabelText(document.body, 'Manifest url');
+    expect(manifestUrl).toBeTruthy();
+
+    const cancel = getByTestId(document.body, 'SkillFormCancel');
+    fireEvent.click(cancel);
+  });
+});
+
 describe('<SkillList />', () => {
   it('should render the SkillList', () => {
-    const { container } = render(<SkillList skills={items} />);
+    const { container } = render(<SkillList skills={items} projectId="test-project" onEdit={jest.fn()} />);
     expect(container).toHaveTextContent('Email Skill');
     expect(container).toHaveTextContent('Point Of Interest Skill');
   });
 
-  it('should open/close skill form', () => {
-    const renderResult = render(<SkillList skills={items} />);
-    const createButton = renderResult.getByText('Connect to a new skill');
-    fireEvent.click(createButton);
+  it('can edit the skill', () => {
+    const onEdit = jest.fn();
+    const { getAllByTestId } = render(<SkillList skills={items} projectId="test-project" onEdit={onEdit} />);
 
-    const cancelButton = renderResult.getByText('Cancel');
-    fireEvent.click(cancelButton);
+    const editBtns = getAllByTestId('EditSkill');
+    editBtns.forEach((btn, i) => {
+      fireEvent.click(btn);
+      expect(onEdit).toHaveBeenCalledWith(i);
+    });
   });
 });
 
@@ -48,11 +74,11 @@ describe('<SkillForm />', () => {
     });
     const onDismiss = jest.fn(() => {});
     const { getByLabelText, getByText } = render(
-      <SkillForm skills={items} editIndex={0} onSubmit={onSubmit} onDismiss={onDismiss} />
+      <SkillForm skills={items} editIndex={0} onSubmit={onSubmit} onDismiss={onDismiss} isOpen />
     );
 
     const urlInput = getByLabelText('Manifest url');
-    expect(urlInput.value).toBe(items[0].manifestUrl);
+    expect(urlInput.getAttribute('value')).toBe(items[0].manifestUrl);
     fireEvent.change(urlInput, { target: { value: 'http://AwesomeSkill' } });
 
     const submitButton = getByText('Confirm');

Composer/packages/client/__tests__/testUtils/renderWithStore.tsx

@@ -0,0 +1,31 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import React from 'react';
+import { render } from '@bfc/test-utils';
+import mapValues from 'lodash/mapValues';
+
+import { State } from '../../src/store/types';
+import * as initialActions from '../../src/store/action';
+import { initialState, StoreContext, StoreContextValue } from '../../src/store';
+
+export function renderWithStore(subject, state: Partial<State> = {}, actions = {}) {
+  const store: StoreContextValue = {
+    actions: {
+      ...mapValues(initialActions, () => jest.fn()),
+      ...actions,
+    },
+    state: {
+      ...initialState,
+      ...state,
+    },
+    dispatch: jest.fn(),
+    resolvers: {
+      lgImportresolver: jest.fn(),
+      lgFileResolver: jest.fn(),
+      luFileResolver: jest.fn(),
+    },
+  };
+
+  return render(<StoreContext.Provider value={store}>{subject}</StoreContext.Provider>);
+}

Composer/packages/client/src/components/NavItem/index.tsx

@@ -74,6 +74,21 @@ export const NavItem: React.FC<INavItemProps> = props => {
         :visited {
           text-decoration: none;
         }
+
+        :focus {
+          outline: none;
+          position: relative;
+
+          &::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            border: 1px solid black;
+          }
+        }
       `}
     >
       {activeArea}

Composer/packages/client/src/components/ProjectTree/index.tsx

@@ -169,6 +169,7 @@ export const ProjectTree: React.FC<IProjectTreeProps> = props => {
           styles={searchBox}
           onChange={onFilter}
           iconProps={{ iconName: 'Filter' }}
+          underlined
         />
         <div
           aria-live={'polite'}

Composer/packages/client/src/components/ProjectTree/styles.ts

@@ -8,6 +8,7 @@ import { IButtonStyles } from 'office-ui-fabric-react/lib/Button';
 import { IContextualMenuStyles } from 'office-ui-fabric-react/lib/ContextualMenu';
 import { ICalloutContentStyles } from 'office-ui-fabric-react/lib/Callout';
 import { IGroupedListStyles } from 'office-ui-fabric-react/lib/GroupedList';
+import { ISearchBoxStyles } from 'office-ui-fabric-react/lib/SearchBox';
 
 export const groupListStyle: Partial<IGroupedListStyles> = {
   root: {
@@ -16,12 +17,11 @@ export const groupListStyle: Partial<IGroupedListStyles> = {
   },
 };
 
-export const searchBox = {
+export const searchBox: ISearchBoxStyles = {
   root: {
-    outline: 'none',
-    border: 'none',
     borderBottom: '1px solid #edebe9',
     height: '45px',
+    borderRadius: '0px',
   },
 };
 export const root = css`
@@ -81,10 +81,17 @@ export const itemText = (depth: number) => css`
   overflow: hidden;
   text-align: left;
   cursor: pointer;
+  width: 100%;
+
+  label: ProjectTreeItemContainer;
 `;
 
 export const content = css`
   outline: none;
+  display: flex;
+  align-items: center;
+
+  label: ProjectTreeItem;
 `;
 
 export const moreButton = (isActive: boolean): IButtonStyles => {
@@ -121,9 +128,12 @@ export const overflowSet = css`
   width: 100%;
   height: 100%;
   padding-left: 12px;
+  padding-right: 12px;
   box-sizing: border-box;
   line-height: 36px;
   justify-content: space-between;
+  display: flex;
+  justify-content: space-between;
 `;
 
 export const styles = {

Composer/packages/client/src/components/ProjectTree/treeItem.tsx

@@ -3,6 +3,7 @@
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
+import React from 'react';
 import { OverflowSet, IOverflowSetItemProps } from 'office-ui-fabric-react/lib/OverflowSet';
 import { IconButton } from 'office-ui-fabric-react/lib/Button';
 import { Icon } from 'office-ui-fabric-react/lib/Icon';
@@ -20,7 +21,7 @@ interface ITreeItemProps {
 
 const onRenderItem = (item: IOverflowSetItemProps) => {
   return (
-    <div role="cell" css={itemText(item.depth)} tabIndex={0}>
+    <div role="cell" css={itemText(item.depth)} tabIndex={0} onFocus={item.onFocus} onBlur={item.onBlur}>
       <div css={content} tabIndex={-1}>
         {item.depth !== 0 && (
           <Icon
@@ -58,6 +59,7 @@ const onRenderOverflowButton = (isRoot: boolean, isActive: boolean) => {
 
 export const TreeItem: React.FC<ITreeItemProps> = props => {
   const { link, isActive, isSubItemActive, depth, onDelete, onSelect } = props;
+
   return (
     <div
       role="presentation"
@@ -88,6 +90,7 @@ export const TreeItem: React.FC<ITreeItemProps> = props => {
           },
         ]}
         css={overflowSet}
+        styles={{ item: { flex: 1 } }}
         data-testid={`DialogTreeItem${link.id}`}
         onRenderItem={onRenderItem}
         onRenderOverflowButton={onRenderOverflowButton(link.isRoot, isActive)}

Composer/packages/client/src/pages/design/index.tsx

@@ -10,7 +10,7 @@ import { globalHistory, RouteComponentProps } from '@reach/router';
 import get from 'lodash/get';
 import { PromptTab } from '@bfc/shared';
 import { DialogFactory, SDKKinds, DialogInfo } from '@bfc/shared';
-import { Link } from 'office-ui-fabric-react/lib/Link';
+import { ActionButton } from 'office-ui-fabric-react/lib/Button';
 import { JsonEditor } from '@bfc/code-editor';
 import { useTriggerApi } from '@bfc/extension';
 
@@ -303,14 +303,15 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
           data-testid="Breadcrumb"
           onRenderItem={onRenderBreadcrumbItem}
         />
-        <Link
-          style={{ position: 'absolute', right: 0, marginTop: '22px', marginRight: '10px' }}
-          onClick={() => {
-            setDialogJsonVisibility(current => !current);
-          }}
-        >
-          {dialogJsonVisible ? formatMessage('Hide code') : formatMessage('Show code')}
-        </Link>
+        <div style={{ padding: '10px' }}>
+          <ActionButton
+            onClick={() => {
+              setDialogJsonVisibility(current => !current);
+            }}
+          >
+            {dialogJsonVisible ? formatMessage('Hide code') : formatMessage('Show code')}
+          </ActionButton>
+        </div>
       </div>
     );
   }, [dialogs, breadcrumb, dialogJsonVisible]);

Composer/packages/client/src/pages/design/styles.ts

@@ -9,12 +9,16 @@ export const pageRoot = css`
   height: 100%;
   display: flex;
   flex-direction: row;
+
+  label: DesignPageContainer;
 `;
 
 export const contentWrapper = css`
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+
+  label: DesignPageContent;
 `;
 
 export const projectContainer = css`
@@ -25,10 +29,9 @@ export const projectContainer = css`
   width: 255px;
   overflow: auto;
   border-right: 1px solid #c4c4c4;
-`;
 
-//remove TODO
-export const projectWrapper = css``;
+  label: DesignPageProjectContent;
+`;
 
 export const projectHeader = css`
   font-weight: bold;
@@ -39,16 +42,22 @@ export const projectHeader = css`
   justify-content: space-between;
   align-items: center;
   background-color: ${NeutralColors.gray20};
+
+  label: DesignPageProjectHeader;
 `;
 
 export const projectTree = css`
   flex-grow: 3;
   flex-shrink: 3;
+
+  label: DesignPageProjectTree;
 `;
 
 export const assetTree = css`
   flex-grow: 2;
   flex-shrink: 2;
+
+  label: DesignPageAssetTree;
 `;
 /*******/
 
@@ -71,8 +80,24 @@ export const visualPanel = css`
   flex-direction: column;
   flex: 1;
   border-right: 1px solid #c4c4c4;
-  border-left: 1px solid #c4c4c4;
   position: relative;
+
+  &:focus {
+    border-right: none;
+    outline: none;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      border: black solid 1px;
+    }
+  }
+
+  label: DesignPageVisualPanel;
 `;
 
 export const visualEditor = (hidden: boolean) => css`