feat(ui-toolkit, cp-frontend): Add button states to bin

packages/cp-frontend/src/containers/deployment-groups/list.js

@@ -87,22 +87,13 @@ const StyledCreateLink = styled(StyledLink)`
   display: flex;
 `;
 
-const DeleteButtonContainer = styled.div`
-  position: absolute;
-  right: 0;
-  bottom: 0;
-`;
-
 const StyledIconButton = styled(IconButton)`
   position: absolute;
   right: 0;
   bottom: 0;
   border: none;
 
-  &:hover {
+  &:hover,
-    background-color: ${props => props.theme.white};
-  }
-
   &:active,
   &:active:hover,
   &:active:focus {

packages/ui-toolkit/src/icon-button/index.js

@@ -24,6 +24,10 @@ const style = css`
   min-width: 0;
   cursor: pointer;
 
+  > svg {
+    fill: ${props => props.theme.secondary};
+  }
+
   &:focus {
     outline: 0;
     background-color: ${props => props.theme.white};
@@ -35,6 +39,11 @@ const style = css`
     border-color: ${props => props.theme.grey};
   }
 
+  &:focus,
+  &:hover > svg {
+    fill: ${props => props.theme.secondaryHover};
+  }
+
   &:active,
   &:active:hover,
   &:active:focus {
@@ -43,6 +52,12 @@ const style = css`
     border-color: ${props => props.theme.grey};
   }
 
+  &:active,
+  &:active:hover,
+  &:active:focus > svg {
+    fill: ${props => props.theme.secondaryActive};
+  }
+
   &[disabled] {
     cursor: not-allowed;
     pointer-events: none;
@@ -50,22 +65,26 @@ const style = css`
     background-color: ${props => props.theme.disabled};
     border-color: ${props => props.theme.grey};
 
-    &:focus {
+    > svg {
-      background-color: ${props => props.theme.disabled};
+      fill: ${props => props.theme.grey};
-      border-color: ${props => props.theme.grey};
-    }
-
-    &:hover {
-      background-color: ${props => props.theme.disabled};
-      border-color: ${props => props.theme.disabled};
     }
 
+    &:focus,
+    &:hover,
     &:active,
     &:active:hover,
     &:active:focus {
       background-color: ${props => props.theme.disabled};
       border-color: ${props => props.theme.disabled};
     }
+
+    &:focus,
+    &:hover,
+    &:active,
+    &:active:hover,
+    &:active:focus > svg {
+      fill: ${props => props.theme.grey};
+    }
   }
 `;
 
@@ -83,10 +102,6 @@ const StyledLink = styled(Link)`
   ${style}
 `;
 
-const StyledDiv = styled.div`
-  height: ${remcalc(16)};
-`;
-
 /**
  * @example ./usage.md
  */
@@ -103,9 +118,7 @@ const IconButton = props => {
 
   return (
     <View {...props}>
-      <StyledDiv>
+      {children}
-        {children}
-      </StyledDiv>
     </View>
   );
 };

packages/ui-toolkit/src/icons/svg/icon_bin.svg

@@ -4,8 +4,8 @@
     <title>icon: delete</title>
     <desc>Created with Sketch.</desc>
     <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
-        <g id="home" transform="translate(-467.000000, -421.000000)" fill="#646464">
+        <g id="home" transform="translate(-467.000000, -421.000000)">
             <path d="M471,421 L471,422 L467,422 L467,424 L479,424 L479,422 L475.001,422 L475.001,421 L471,421 Z M468,438 L478,438 L478,425 L468,425 L468,438 Z" id="icon:-delete"></path>
         </g>
     </g>