fix: background of +/- icon buttons should be transparent (#43)

Author: billiegoose

src/components/ArrayInput.tsx

@@ -8,6 +8,7 @@ import { IFormtronControl } from '..';
 
 import { FieldSet } from './FieldSet';
 import { useDiagnostics } from './hooks';
+import { IconButton } from './IconButton';
 import { Label } from './Label';
 import { Messages } from './Messages';
 import { EasyArray } from './utils/EasyArray';
@@ -38,7 +39,8 @@ export const ArrayInput: React.FunctionComponent<IFormtronControl> = ({
             color="rgb(118, 130, 143)"
             disabled={disabled}
             display="inline-block"
-            border="transparent"
+            borderColor="transparent"
+            backgroundColor="transparent"
             onClick={() => onChange(easyArray.append())}
           >
             <Icon mr={2} icon={faPlus} /> Add Item
@@ -64,24 +66,19 @@ export const ArrayInput: React.FunctionComponent<IFormtronControl> = ({
                   <Label disabled={disabled}>Add</Label>
 
                   <Flex flex={1} width="100%" justifyContent="center" alignItems="center">
-                    <Button
-                      border="transparent"
-                      height="100%"
+                    <IconButton
+                      icon={faPlus}
                       onClick={() => onChange(easyArray.insert(index + 1))}
                       disabled={disabled}
-                    >
-                      <Icon icon={faPlus} fontSize="15px" color="rgb(118, 130, 143)" />
-                    </Button>
+                    />
                   </Flex>
                 </Flex>
 
                 <Flex flexDirection="column" alignItems="center" ml="10px">
                   <Label disabled={disabled}>Remove</Label>
 
                   <Flex flex={1} width="100%" justifyContent="center" alignItems="center" disabled={disabled}>
-                    <Button border="transparent" height="100%" onClick={() => onChange(easyArray.remove(index))}>
-                      <Icon icon={faTrash} fontSize="15px" color="rgb(118, 130, 143)" />
-                    </Button>
+                    <IconButton icon={faTrash} onClick={() => onChange(easyArray.remove(index))} disabled={disabled} />
                   </Flex>
                 </Flex>
               </Flex>

src/components/IconButton.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+
+import { Button, IButton, Icon } from '@stoplight/ui-kit';
+
+import { IconDefinition } from '@fortawesome/free-solid-svg-icons';
+
+interface IIconButton extends IButton {
+  disabled?: boolean;
+  onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+  icon: IconDefinition;
+}
+
+export const IconButton: React.FunctionComponent<IIconButton> = ({ disabled = false, onClick, icon }) => {
+  return (
+    <Button
+      borderColor="transparent"
+      backgroundColor="transparent"
+      height="100%"
+      fontSize="15px"
+      px={0}
+      onClick={onClick}
+      disabled={disabled}
+      color="rgb(118, 130, 143)"
+      css={{
+        ':hover': {
+          backgroundColor: 'transparent',
+          color: '#1E2537',
+        },
+        ':active': {
+          backgroundColor: 'transparent',
+          fontSize: '17px',
+        },
+      }}
+    >
+      <Icon icon={icon} />
+    </Button>
+  );
+};

src/components/ObjectInput.tsx

@@ -8,6 +8,7 @@ import { IFormtronControl } from '..';
 
 import { FieldSet } from './FieldSet';
 import { useDiagnostics } from './hooks';
+import { IconButton } from './IconButton';
 import { Label } from './Label';
 import { Messages } from './Messages';
 import { Variant } from './types';
@@ -39,12 +40,11 @@ export const ObjectInput: React.FunctionComponent<IFormtronControl> = ({
           <Button
             fontWeight={800}
             fontSize="11px"
-            my={3}
-            mx={2}
             color="rgb(118, 130, 143)"
             disabled={disabled}
             display="inline-block"
-            border="transparent"
+            borderColor="transparent"
+            backgroundColor="transparent"
             onClick={() => onChange(easyObject.append())}
           >
             <Icon mr={2} icon={faPlus} /> Add Item
@@ -94,29 +94,19 @@ export const ObjectInput: React.FunctionComponent<IFormtronControl> = ({
                   <Label disabled={disabled}>Add</Label>
 
                   <Flex flex={1} width="100%" justifyContent="center" alignItems="center">
-                    <Button
-                      border="transparent"
-                      height="100%"
-                      disabled={disabled}
+                    <IconButton
+                      icon={faPlus}
                       onClick={() => onChange(easyObject.insert(index + 1))}
-                    >
-                      <Icon icon={faPlus} fontSize="15px" color="rgb(118, 130, 143)" />
-                    </Button>
+                      disabled={disabled}
+                    />
                   </Flex>
                 </Flex>
 
                 <Flex flexDirection="column" alignItems="center" ml="10px">
                   <Label disabled={disabled}>Remove</Label>
 
                   <Flex flex={1} width="100%" justifyContent="center" alignItems="center">
-                    <Button
-                      border="transparent"
-                      height="100%"
-                      disabled={disabled}
-                      onClick={() => onChange(easyObject.remove(index))}
-                    >
-                      <Icon icon={faTrash} fontSize="15px" color="rgb(118, 130, 143)" />
-                    </Button>
+                    <IconButton icon={faTrash} onClick={() => onChange(easyObject.remove(index))} disabled={disabled} />
                   </Flex>
                 </Flex>
               </Flex>