add slide animation for item actions

src/components/caloriesList/CalorieRow.tsx

@@ -1,7 +1,7 @@
 import cx from 'classnames';
 import React, { MouseEvent } from 'react';
-import styles from './calorieRow.css';
 import { ItemActions } from './ItemActions';
+import styles from './calorieRow.scss';
 
 type CalorieRowProps = {
   item: CalorieValue,
@@ -25,14 +25,20 @@ function CalorieRow (props: CalorieRowProps) {
 
   return (
     <div className={cx(styles.calorieRow, {[styles.selected]: isSelected})} {...{onClick}}>
-      <div className="itemValues">
+      <ItemActions {...{
+        className: cx(
+          styles.itemActions,
+          {
+            [styles.open]: isSelected
+          }
+        ),
+        removeItem: () => removeItem(item)
+      }} />
+
+      <div className={styles.itemValues}>
         <div className={styles.title}>{item.title}</div>
         <div>{item.count}</div>
       </div>
-
-      { isSelected && (
-        <ItemActions {...{removeItem: () => removeItem(item)}} />
-      )}
     </div>
   );
 }

src/components/caloriesList/ItemActions.tsx

@@ -1,19 +1,22 @@
 import React from 'react';
+import cx from 'classnames';
 import { IconButton } from '../button/IconButton';
 import { iconTypes } from '../icon/iconTypes';
 import styles from './itemActions.css';
 
 type ItemActionsProps = {
-  removeItem: () => void
+  removeItem: () => void,
+  className?: string
 };
 
 function ItemActions (props: ItemActionsProps) {
   const {
+    className,
     removeItem
   } = props;
 
   return (
-    <section className={styles.itemActions}>
+    <section className={cx(styles.itemActions, className)}>
       <IconButton icon={iconTypes.TRASH} buttonClassName={styles.button} onClick={removeItem} />
     </section>
   );

src/components/caloriesList/calorieRow.css

@@ -1,21 +0,0 @@
-.calorieRow {
-    display: flex;
-    justify-content: space-between;
-    padding: .5em .5em;
-
-    &:nth-child(2n) {
-        background: #f5f5f5;
-    }
-
-    &.selected {
-        background: #ddd;
-    }
-}
-
-.title {
-    margin-right: 1em;
-}
-
-.count {
-
-}

src/components/caloriesList/calorieRow.scss

@@ -0,0 +1,42 @@
+.calorieRow {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: .5em .5em;
+
+    &:nth-child(2n) {
+        background: #f5f5f5;
+    }
+
+    &.selected {
+        background: #ddd;
+    }
+}
+
+.title {
+    margin-right: 1em;
+}
+
+.itemValues {
+    display: flex;
+    justify-content: space-between;
+    flex: 1;
+}
+
+.itemActions {
+    $itemActionTransitionTime: .1s;
+    max-width: 0;
+    padding: 0;
+    overflow: hidden;
+    transition: max-width $itemActionTransitionTime, padding $itemActionTransitionTime, margin-right $itemActionTransitionTime;
+    font-size: 1.3em;
+
+    &.open {
+        max-width: 2em;
+        margin-right: .3em;
+    }
+}
+
+.count {
+
+}

src/components/caloriesList/itemActions.css

@@ -1,7 +1,7 @@
 .itemActions {
     display: flex;
     justify-content: flex-end;
-    font-size: 2em;
+    padding: 0 .3em;
 
     .button {
         &:not(:first-child) {