Merge branch 'master' into julong/choiceinput

microsoft · Feb 12, 2020 · a92dfda · a92dfda
2 parents 9e6c2cb + db96de4
commit a92dfda
Show file tree

Hide file tree

Showing 14 changed files with 24 additions and 195 deletions.
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/ObjectFieldTemplate/styles.css b/Composer/packages/extensions/obiformeditor/src/Form/ObjectFieldTemplate/styles.css
@@ -10,12 +10,12 @@
 .ObjectItem .ObjectItemField {
   flex: 1;
   overflow: hidden;
-  padding: 0px 18px;
+  padding: 0px 12px;
   margin: 10px 0;
 }
 
 .ObjectItem .ObjectItemField {
-  padding: 0px 18px;
+  padding: 0px 12px;
   margin: 10px 0;
 }
 

diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/BotAsks.tsx b/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/BotAsks.tsx
@@ -1,6 +1,8 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import React from 'react';
 import formatMessage from 'format-message';
 import { MicrosoftInputDialog } from '@bfc/shared';
@@ -9,6 +11,7 @@ import { LgEditorWidget } from '../../widgets/LgEditorWidget';
 import { WidgetLabel } from '../../widgets/WidgetLabel';
 import { BFDFieldProps } from '../../types';
 
+import { field } from './styles';
 import { GetSchema, PromptFieldChangeHandler } from './types';
 
 interface BotAsksProps extends BFDFieldProps<MicrosoftInputDialog> {
@@ -20,7 +23,7 @@ export const BotAsks: React.FC<BotAsksProps> = props => {
   const { onChange, getSchema, formData, formContext } = props;
 
   return (
-    <>
+    <div css={field}>
       <WidgetLabel label={formatMessage('Prompt')} description={getSchema('prompt').description} />
       <LgEditorWidget
         name="prompt"
@@ -29,6 +32,6 @@ export const BotAsks: React.FC<BotAsksProps> = props => {
         formContext={formContext}
         height={125}
       />
-    </>
+    </div>
   );
 };
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/styles.ts b/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/styles.ts
@@ -17,7 +17,7 @@ export const tabs: Partial<IPivotStyles> = {
     flex: 1,
   },
   itemContainer: {
-    padding: '24px 18px',
+    padding: '12px 12px',
   },
 };
 

diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/RecognizerField/styles.ts b/Composer/packages/extensions/obiformeditor/src/Form/fields/RecognizerField/styles.ts
@@ -5,5 +5,5 @@ import { css } from '@emotion/core';
 
 // offset ObjectField's margin
 export const regexEditorContainer = css`
-  margin: 0 -18px -26px -18px;
+  margin: 0 -12px -26px -12px;
 `;
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/RootField.tsx b/Composer/packages/extensions/obiformeditor/src/Form/fields/RootField.tsx
@@ -69,7 +69,7 @@ export const RootField: React.FC<RootFieldProps> = props => {
           styles={{ field: { fontWeight: FontWeights.semibold }, root: { margin: '5px 0 7px -9px' } }}
           fontSize={FontSizes.size20}
         />
-        <p className="RootFieldSubtitle">{getSubTitle()}</p>
+        <p className={classnames('RootFieldSubtitle', FontClassNames.smallPlus)}>{getSubTitle()}</p>
         {sdkOverrides.description !== false && (description || schema.description) && (
           <p className={classnames('RootFieldDescription', FontClassNames.smallPlus)}>
             {getDescription()}

diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/styles.css b/Composer/packages/extensions/obiformeditor/src/Form/fields/styles.css
@@ -15,20 +15,19 @@
 }
 .RootFieldTitle {
   border-bottom: 1px solid #c8c6c4;
-  padding: 0 18px;
+  padding: 0 12px;
   margin-bottom: 0px;
 }
 .RootFieldSubtitle {
   height: 15px;
   line-height: 15px;
   font-size: 12px;
-  font-weight: 600;
   color: #4F4F4F;
-  margin: -7px 0 7px;
+  margin: 12px 0;
 }
 .RootFieldDescription {
   margin-top: 0;
-  margin-bottom: 10px;
+  margin-bottom: 12px;
   white-space: pre-line;
 }
 .RootFieldMetaData {

diff --git a/...s__/components/nodes/ChoiceInput.test.tsx → ...er/__tests__/widgets/ChoiceInput.test.tsx b/...s__/components/nodes/ChoiceInput.test.tsx → ...er/__tests__/widgets/ChoiceInput.test.tsx
@@ -4,8 +4,8 @@
 import React from 'react';
 import { render, cleanup } from 'react-testing-library';
 
-import { ChoiceInput } from '../../../src/components/nodes/steps/ChoiceInput';
-import { ObiTypes } from '../../../src/constants/ObiTypes';
+import { ChoiceInput } from '../../src/widgets/ChoiceInput';
+import { ObiTypes } from '../../src/constants/ObiTypes';
 
 describe('<ChoiceInput />', () => {
   let renderResult, id, data, onEvent, onResize;

diff --git a/Composer/packages/extensions/visual-designer/src/components/nodes/index.tsx b/Composer/packages/extensions/visual-designer/src/components/nodes/index.tsx
@@ -1,12 +1,6 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-export * from './steps/ChoiceInput';
-export * from './steps/TextInput';
-export * from './steps/BotAsks';
-export * from './steps/UserInput';
-export * from './steps/InvalidPromptBrick';
-
 export * from './events/EventRule';
 export * from './events/IntentRule';
 export * from './events/UnknownIntentRule';

diff --git a/Composer/packages/extensions/visual-designer/src/components/nodes/steps/BotAsks.tsx b/Composer/packages/extensions/visual-designer/src/components/nodes/steps/BotAsks.tsx
diff --git a/...ser/packages/extensions/visual-designer/src/components/nodes/steps/InvalidPromptBrick.tsx b/...ser/packages/extensions/visual-designer/src/components/nodes/steps/InvalidPromptBrick.tsx
diff --git a/Composer/packages/extensions/visual-designer/src/components/nodes/steps/TextInput.tsx b/Composer/packages/extensions/visual-designer/src/components/nodes/steps/TextInput.tsx
diff --git a/Composer/packages/extensions/visual-designer/src/components/nodes/steps/UserInput.tsx b/Composer/packages/extensions/visual-designer/src/components/nodes/steps/UserInput.tsx
diff --git a/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx b/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx
@@ -13,9 +13,9 @@ import { PromptWidget } from '../widgets/PromptWidget';
 import { IfConditionWidget } from '../widgets/IfConditionWidget';
 import { SwitchConditionWidget } from '../widgets/SwitchConditionWidget';
 import { ForeachWidget } from '../widgets/ForeachWidget';
+import { ChoiceInputChoices } from '../widgets/ChoiceInput';
 import { ElementIcon } from '../utils/obiPropertyResolver';
 import { ObiColors } from '../constants/ElementColors';
-import { ChoiceInputChoices } from '../components/nodes';
 import { measureChoiceInputDetailBoundary } from '../layouters/measureJsonBoundary';
 
 import { UISchema, UIWidget } from './uischema.types';

diff --git a/...rc/components/nodes/steps/ChoiceInput.tsx → ...sual-designer/src/widgets/ChoiceInput.tsx b/...rc/components/nodes/steps/ChoiceInput.tsx → ...sual-designer/src/widgets/ChoiceInput.tsx
@@ -6,14 +6,14 @@ import { jsx } from '@emotion/core';
 import { FC } from 'react';
 import { DialogGroup, PromptTab } from '@bfc/shared';
 
-import { ChoiceInputSize, ChoiceInputMarginTop } from '../../../constants/ElementSizes';
-import { NodeEventTypes } from '../../../constants/NodeEventTypes';
-import { NodeColors } from '../../../constants/ElementColors';
-import { measureJsonBoundary } from '../../../layouters/measureJsonBoundary';
-import { ElementIcon } from '../../../utils/obiPropertyResolver';
-import { FormCard } from '../templates/FormCard';
-import { NodeProps } from '../nodeProps';
-import { getUserAnswersTitle } from '../utils';
+import { ChoiceInputSize, ChoiceInputMarginTop } from '../constants/ElementSizes';
+import { NodeEventTypes } from '../constants/NodeEventTypes';
+import { NodeColors } from '../constants/ElementColors';
+import { measureJsonBoundary } from '../layouters/measureJsonBoundary';
+import { ElementIcon } from '../utils/obiPropertyResolver';
+import { FormCard } from '../components/nodes/templates/FormCard';
+import { NodeProps } from '../components/nodes/nodeProps';
+import { getUserAnswersTitle } from '../components/nodes/utils';
 
 export const ChoiceInputChoices = ({ choices }) => {
   if (!Array.isArray(choices)) {