diff --git a/Composer/packages/adaptive-form/src/components/WithTypeIcons.tsx b/Composer/packages/adaptive-form/src/components/WithTypeIcons.tsx
index 64ec8bdfc0..8d748fcca5 100644
--- a/Composer/packages/adaptive-form/src/components/WithTypeIcons.tsx
+++ b/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 {
{iconText &&
{iconText}
}
-
+
diff --git a/Composer/packages/adaptive-form/src/components/fields/BooleanField.tsx b/Composer/packages/adaptive-form/src/components/fields/BooleanField.tsx
index 4503149782..5c24057ea5 100644
--- a/Composer/packages/adaptive-form/src/components/fields/BooleanField.tsx
+++ b/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 = 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 = function CheckboxWidget(props) {
selectedKey={selectedKey}
styles={{
root: { width: '100%' },
+ title: {
+ borderRadius: hasIcon ? '0 2px 2px 0' : undefined,
+ },
errorMessage: { display: 'none' },
}}
onChange={handleChange}
diff --git a/Composer/packages/adaptive-form/src/components/fields/OneOfField/OneOfField.tsx b/Composer/packages/adaptive-form/src/components/fields/OneOfField/OneOfField.tsx
index 8e4a91cc2c..e931a28242 100644
--- a/Composer/packages/adaptive-form/src/components/fields/OneOfField/OneOfField.tsx
+++ b/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 = (props) => {
1 || !isNested}
{...props}
{...customProps}
css={{ label: 'ExpressionFieldValue' }}
diff --git a/Composer/packages/adaptive-form/src/components/fields/SelectField.tsx b/Composer/packages/adaptive-form/src/components/fields/SelectField.tsx
index 3cd3250e4d..a4342c6d47 100644
--- a/Composer/packages/adaptive-form/src/components/fields/SelectField.tsx
+++ b/Composer/packages/adaptive-form/src/components/fields/SelectField.tsx
@@ -21,6 +21,7 @@ export const SelectField: React.FC> = function Selec
expression,
uiOptions,
required,
+ hasIcon,
} = props;
const options: IDropdownOption[] = useMemo(() => {
@@ -68,6 +69,9 @@ export const SelectField: React.FC> = function Selec
responsiveMode={ResponsiveMode.large}
selectedKey={value}
styles={{
+ title: {
+ borderRadius: hasIcon ? '0 2px 2px 0' : undefined,
+ },
errorMessage: { display: 'none' },
}}
onBlur={() => onBlur(id, value)}
diff --git a/Composer/packages/adaptive-form/src/components/fields/StringField.tsx b/Composer/packages/adaptive-form/src/components/fields/StringField.tsx
index 34263050ee..b6f12ec421 100644
--- a/Composer/packages/adaptive-form/src/components/fields/StringField.tsx
+++ b/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> = function StringField(props) {
const {
@@ -42,6 +47,7 @@ export const StringField: React.FC> = function StringField(pr
required,
focused,
cursorPosition,
+ hasIcon,
} = props;
const textFieldRef = React.createRef();
@@ -89,7 +95,7 @@ export const StringField: React.FC> = 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' },
}}
diff --git a/Composer/packages/adaptive-form/src/components/fields/__tests__/StringField.test.tsx b/Composer/packages/adaptive-form/src/components/fields/__tests__/StringField.test.tsx
index b90e1e59c7..e8b514085c 100644
--- a/Composer/packages/adaptive-form/src/components/fields/__tests__/StringField.test.tsx
+++ b/Composer/packages/adaptive-form/src/components/fields/__tests__/StringField.test.tsx
@@ -48,14 +48,19 @@ describe('', () => {
describe('borderStyles', () => {
it('does not apply border styles when transparentBorder is false', () => {
- expect(borderStyles(false, false)).toEqual({});
+ expect(borderStyles(false, false, false)).toEqual({
+ fieldGroup: {
+ borderRadius: undefined,
+ },
+ });
});
it('applies a transparent border when there is no error', () => {
- expect(borderStyles(true, false)).toMatchInlineSnapshot(`
+ expect(borderStyles(true, false, false)).toMatchInlineSnapshot(`
Object {
"fieldGroup": Object {
"borderColor": "transparent",
+ "borderRadius": undefined,
"selectors": Object {
":hover": Object {
"borderColor": "#edebe9",
@@ -68,10 +73,11 @@ describe('borderStyles', () => {
});
it('does not apply a transparent border when there is an error', () => {
- expect(borderStyles(true, true)).toMatchInlineSnapshot(`
+ expect(borderStyles(true, true, false)).toMatchInlineSnapshot(`
Object {
"fieldGroup": Object {
"borderColor": undefined,
+ "borderRadius": undefined,
"selectors": Object {
":hover": Object {
"borderColor": undefined,
diff --git a/Composer/packages/extension-client/src/types/form.ts b/Composer/packages/extension-client/src/types/form.ts
index 002c561d3b..8e58a946fb 100644
--- a/Composer/packages/extension-client/src/types/form.ts
+++ b/Composer/packages/extension-client/src/types/form.ts
@@ -37,6 +37,7 @@ export interface FieldProps {
focused?: boolean;
style?: React.CSSProperties;
cursorPosition?: number;
+ hasIcon?: boolean;
onChange: ChangeHandler;
onFocus?: (id: string, value?: T, event?: React.FocusEvent) => void;