fix: Fix field icon border radius

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

@@ -18,7 +18,8 @@ const styles = {
     ...sharedFieldIconStyles,
     textAlign: 'center',
     border: '1px solid rgb(96, 94, 92)',
-    borderRadius: '2px',
+    borderRadius: '2px 0 0 2px',
+    borderRight: 'none',
     cursor: 'default',
   }),
   componentWrapper: css({ flexGrow: 1 }),
@@ -38,7 +39,7 @@ export function WithTypeIcons(WrappedComponent: FieldWidget): FieldWidget {
         <div css={styles.mainWrapper}>
           {iconText && <div css={styles.iconWrapper}>{iconText}</div>}
           <div css={styles.componentWrapper}>
-            <WrappedComponent {...props} label={undefined} />
+            <WrappedComponent hasIcon {...props} label={undefined} />
           </div>
         </div>
       </React.Fragment>

Composer/packages/adaptive-form/src/components/fields/BooleanField.tsx

@@ -10,7 +10,7 @@ import formatMessage from 'format-message';
 import { FieldLabel } from '../FieldLabel';
 
 const BooleanField: React.FC<FieldProps> = function CheckboxWidget(props) {
-  const { expression, onChange, value, label, id, schema, required, uiOptions } = props;
+  const { hasIcon, expression, onChange, value, label, id, schema, required, uiOptions } = props;
   const { description } = schema;
 
   const options: IDropdownOption[] = [
@@ -78,6 +78,9 @@ const BooleanField: React.FC<FieldProps> = function CheckboxWidget(props) {
         selectedKey={selectedKey}
         styles={{
           root: { width: '100%' },
+          title: {
+            borderRadius: hasIcon ? '0 2px 2px 0' : undefined,
+          },
           errorMessage: { display: 'none' },
         }}
         onChange={handleChange}

Composer/packages/adaptive-form/src/components/fields/OneOfField/OneOfField.tsx

@@ -37,7 +37,7 @@ const styles = {
     margin-right: 3px;
   `,
   dropdown: {
-    title: { ...sharedFieldIconStyles, height: '100%' },
+    title: { ...sharedFieldIconStyles, height: '100%', borderRadius: '2px 0 0 2px', borderRight: 'none' },
     dropdown: { height: '100%' },
   },
   nestedDropdown: {
@@ -121,6 +121,7 @@ const OneOfField: React.FC<FieldProps> = (props) => {
       <Field
         key={selectedSchema.type}
         expression={expression}
+        hasIcon={options.length > 1 || !isNested}
         {...props}
         {...customProps}
         css={{ label: 'ExpressionFieldValue' }}

Composer/packages/adaptive-form/src/components/fields/SelectField.tsx

@@ -21,6 +21,7 @@ export const SelectField: React.FC<FieldProps<string | number>> = function Selec
     expression,
     uiOptions,
     required,
+    hasIcon,
   } = props;
 
   const options: IDropdownOption[] = useMemo(() => {
@@ -68,6 +69,9 @@ export const SelectField: React.FC<FieldProps<string | number>> = function Selec
         responsiveMode={ResponsiveMode.large}
         selectedKey={value}
         styles={{
+          title: {
+            borderRadius: hasIcon ? '0 2px 2px 0' : undefined,
+          },
           errorMessage: { display: 'none' },
         }}
         onBlur={() => onBlur(id, value)}

Composer/packages/adaptive-form/src/components/fields/StringField.tsx

@@ -9,11 +9,12 @@ import formatMessage from 'format-message';
 
 import { FieldLabel } from '../FieldLabel';
 
-export const borderStyles = (transparentBorder: boolean, error: boolean) =>
+export const borderStyles = (transparentBorder: boolean, error: boolean, hasIcon: boolean) =>
   transparentBorder
     ? {
         fieldGroup: {
           borderColor: error ? undefined : 'transparent',
+          borderRadius: hasIcon ? '0 2px 2px 0' : undefined,
           transition: 'border-color 0.1s linear',
           selectors: {
             ':hover': {
@@ -22,7 +23,11 @@ export const borderStyles = (transparentBorder: boolean, error: boolean) =>
           },
         },
       }
-    : {};
+    : {
+        fieldGroup: {
+          borderRadius: hasIcon ? '0 2px 2px 0' : undefined,
+        },
+      };
 
 export const StringField: React.FC<FieldProps<string>> = function StringField(props) {
   const {
@@ -42,6 +47,7 @@ export const StringField: React.FC<FieldProps<string>> = function StringField(pr
     required,
     focused,
     cursorPosition,
+    hasIcon,
   } = props;
 
   const textFieldRef = React.createRef<ITextField>();
@@ -89,7 +95,7 @@ export const StringField: React.FC<FieldProps<string>> = function StringField(pr
         placeholder={placeholder}
         readOnly={readonly}
         styles={{
-          ...borderStyles(Boolean(transparentBorder), Boolean(error)),
+          ...borderStyles(Boolean(transparentBorder), Boolean(error), !!hasIcon),
           root: { width: '100%' },
           errorMessage: { display: 'none' },
         }}

Composer/packages/extension-client/src/types/form.ts

@@ -37,6 +37,7 @@ export interface FieldProps<T = any> {
   focused?: boolean;
   style?: React.CSSProperties;
   cursorPosition?: number;
+  hasIcon?: boolean;
 
   onChange: ChangeHandler<T>;
   onFocus?: (id: string, value?: T, event?: React.FocusEvent<any>) => void;