style: update multiple choice input node style (#1954)

* fix ui bug about choice input * adjust * fix test error Co-authored-by: Andy Brown <asbrown002@gmail.com> Co-authored-by: Chris Whitten <christopher.whitten@microsoft.com>
microsoft · Feb 13, 2020 · 65f959b · 65f959b
1 parent 1cd2d9b
commit 65f959b
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 8 deletions.
diff --git a/Composer/packages/extensions/visual-designer/__tests__/layouters/measureJsonBoundary.test.ts b/Composer/packages/extensions/visual-designer/__tests__/layouters/measureJsonBoundary.test.ts
@@ -10,6 +10,7 @@ import {
   LoopIconSize,
   ChoiceInputSize,
   ChoiceInputMarginTop,
+  ChoiceInputMarginBottom,
 } from '../../src/constants/ElementSizes';
 
 describe('measureJsonBoundary', () => {
@@ -34,13 +35,23 @@ describe('measureJsonBoundary', () => {
     );
   });
   it("should return boundary whose size is determined by the data's choices when json.$type is choiceInput", () => {
-    const data: { [key: string]: any } = {
+    const data1: { [key: string]: any } = {
       $type: ObiTypes.ChoiceInputDetail,
       choices: [{ value: '1' }],
     };
 
-    expect(measureJsonBoundary(data)).toEqual(
-      new Boundary(InitNodeSize.width, InitNodeSize.height + ChoiceInputSize.height + ChoiceInputMarginTop)
+    const data2: { [key: string]: any } = {
+      $type: ObiTypes.ChoiceInputDetail,
+      choices: [{ value: '1' }, { value: '2' }, { value: '3' }, { value: '4' }, { value: '5' }],
+    };
+    expect(measureJsonBoundary(data1)).toEqual(
+      new Boundary(
+        InitNodeSize.width,
+        InitNodeSize.height + ChoiceInputSize.height + ChoiceInputMarginTop + ChoiceInputMarginBottom
+      )
+    );
+    expect(measureJsonBoundary(data2)).toEqual(
+      new Boundary(InitNodeSize.width, InitNodeSize.height + 4 * (ChoiceInputSize.height + ChoiceInputMarginTop))
     );
   });
 });
diff --git a/Composer/packages/extensions/visual-designer/src/constants/ElementSizes.ts b/Composer/packages/extensions/visual-designer/src/constants/ElementSizes.ts
@@ -29,11 +29,12 @@ export const TriggerSize = InitNodeSize;
 export const TerminatorSize = { width: 14, height: 14 };
 
 export const ChoiceInputSize = {
-  width: 145,
+  width: 155,
   height: 22,
 };
 
-export const ChoiceInputMarginTop = 5;
+export const ChoiceInputMarginTop = 8;
+export const ChoiceInputMarginBottom = 10;
 
 export const EventNodeSize = {
   width: 240,

diff --git a/Composer/packages/extensions/visual-designer/src/layouters/measureJsonBoundary.ts b/Composer/packages/extensions/visual-designer/src/layouters/measureJsonBoundary.ts
@@ -9,6 +9,7 @@ import {
   LoopIconSize,
   ChoiceInputSize,
   ChoiceInputMarginTop,
+  ChoiceInputMarginBottom,
   IconBrickSize,
 } from '../constants/ElementSizes';
 import { transformIfCondtion } from '../transformers/transformIfCondition';
@@ -64,7 +65,9 @@ export function measureChoiceInputDetailBoundary(data): Boundary {
   const height =
     InitNodeSize.height +
     (data.choices && Array.isArray(data.choices)
-      ? (data.choices.length <= 4 ? data.choices.length : 4) * (ChoiceInputSize.height + ChoiceInputMarginTop)
+      ? data.choices.length < 4
+        ? data.choices.length * (ChoiceInputSize.height + ChoiceInputMarginTop) + ChoiceInputMarginBottom
+        : 4 * (ChoiceInputSize.height + ChoiceInputMarginTop)
       : 0);
   return new Boundary(width, height);
 }

diff --git a/Composer/packages/extensions/visual-designer/src/widgets/ChoiceInput.tsx b/Composer/packages/extensions/visual-designer/src/widgets/ChoiceInput.tsx
@@ -21,7 +21,7 @@ export const ChoiceInputChoices = ({ choices }) => {
   }
 
   return (
-    <div data-testid="ChoiceInput" css={{ padding: '0 0 8px 45px' }}>
+    <div data-testid="ChoiceInput" css={{ padding: '0 0 16px 29px' }}>
       {choices.map(({ value }, index) => {
         if (index < 3) {
           return (
@@ -60,7 +60,7 @@ export const ChoiceInputChoices = ({ choices }) => {
             textAlign: 'center',
             fontFamily: 'Segoe UI',
             fontSize: '12px',
-            lineHeight: '19px',
+            lineHeight: '14px',
             boxSizing: 'border-box',
           }}
         >