Tighter layout of Union type connect button
@@ -30,6 +30,8 @@ import {
ActorDirection,
ScriptEventFieldSchema,
} from "store/features/entities/entitiesTypes";
+import styled from "styled-components";
+import { Button } from "ui/buttons/Button";
import { DropdownButton } from "ui/buttons/DropdownButton";
import { CheckboxField } from "ui/form/CheckboxField";
import { Input } from "ui/form/Input";
@@ -53,6 +55,14 @@ interface ScriptEventFormInputProps {
onChange: (newValue: unknown, valueIndex?: number | undefined) => void;
}
+const ConnectButton = styled.div`
+ ${Button} {
+ min-width: 15px;
+ padding: 0;
+ height: 28px;
+ }
+`;
+
const argValue = (arg: unknown): unknown => {
const unionArg = arg as { value: unknown; type: unknown };
if (unionArg && unionArg.value !== undefined) {
@@ -485,12 +495,15 @@ const ScriptEventFormInput = ({
onChange={onChangeUnionField}
/>
</div>
+ <ConnectButton>
<DropdownButton
variant="transparent"
size="small"
showArrow={false}
menuDirection="right"
- label={<ConnectIcon connected={currentType !== field.defaultType} />}
+ label={
+ <ConnectIcon connected={currentType !== field.defaultType} />
+ }
>
{(field.types || []).map((type) => (
<MenuItem key={type} onClick={() => onChangeUnionType(type)}>
@@ -501,6 +514,7 @@ const ScriptEventFormInput = ({
</MenuItem>
))}
</DropdownButton>
+ </ConnectButton>
</div>
);
}
