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;