fix: Improving the ui for when "additionalProperties": true

Composer/packages/adaptive-form/src/components/WithTypeIcons.tsx

@@ -36,7 +36,7 @@ export function WithTypeIcons(WrappedComponent: FieldWidget): FieldWidget {
           required={props.required}
         />
         <div css={styles.mainWrapper}>
-          <div css={styles.iconWrapper}>{iconText}</div>
+          {iconText && <div css={styles.iconWrapper}>{iconText}</div>}
           <div css={styles.componentWrapper}>
             <WrappedComponent {...props} label={undefined} />
           </div>

Composer/packages/adaptive-form/src/components/fields/OneOfField/utils.ts

@@ -29,9 +29,9 @@ export function getOptions(
   schema: JSONSchema7,
   definitions?: SchemaDefinitions
 ): { options: IDropdownOption[]; isNested: boolean } {
-  const { type, oneOf } = schema;
+  const { type, oneOf, additionalProperties } = schema;
 
-  let isNested = false;
+  let isNested = !!additionalProperties;
 
   if (type && Array.isArray(type)) {
     const options: IDropdownOption[] = type.map((t) => ({

Composer/packages/adaptive-form/src/components/fields/OpenObjectField/ObjectItem.tsx

@@ -91,6 +91,7 @@ const ObjectItem: React.FC<ObjectItemProps> = ({
             {...rest}
             definitions={definitions}
             id={`${name}.value`}
+            label={stackedLayout ? formatMessage('Value') : false}
             name="value"
             placeholder={placeholder}
             schema={schema}

Composer/packages/adaptive-form/src/components/fields/OpenObjectField/styles.ts

@@ -32,7 +32,9 @@ export const filler = css`
 
 export const item = (stackedLayout?: boolean) => css`
   flex: 1;
-
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
   & + & {
     margin-left: ${!stackedLayout ? '16px' : '0'};
   }

Composer/packages/adaptive-form/src/utils/getFieldIconText.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-export const getFieldIconText = (type: any): string => {
+export const getFieldIconText = (type: any): string | undefined => {
   const typeFormatted = Array.isArray(type) ? type[0] : type;
   if (typeFormatted === 'string') {
     return 'abc';
@@ -16,5 +16,4 @@ export const getFieldIconText = (type: any): string => {
   } else if (typeFormatted === 'expression') {
     return '=';
   }
-  return '';
 };