Refactor row toggle/label CSS, and fix row hover icon bug (#358)

src/components/node-list/node-list-items.js

@@ -185,6 +185,43 @@ export const getSections = createSelector(() =>
   }))
 );
 
+/**
+ * Create a new group of items. This can be one of two kinds:
+ * 'filter': Categories, e.g. tags
+ * 'element': Graph elements, e.g. nodes, datasets, or parameters
+ * An item is a node-list row, e.g. a node or a tag.
+ * @param {object} itemType Meta information about the group's items
+ * @param {array} itemsOfType List of items in the group
+ */
+export const createGroup = (itemType, itemsOfType = []) => {
+  const group = {
+    type: itemType,
+    id: itemType.id,
+    count: itemsOfType.length,
+    allUnset: itemsOfType.every(item => item.unset),
+    allChecked: itemsOfType.every(item => item.checked)
+  };
+
+  if (itemType.id === 'tag') {
+    Object.assign(group, {
+      name: 'Tags',
+      kind: 'filter',
+      checked: !group.allUnset,
+      visibleIcon: group.allChecked ? IndicatorIcon : IndicatorPartialIcon,
+      invisibleIcon: IndicatorOffIcon
+    });
+  } else {
+    Object.assign(group, {
+      name: itemType.name,
+      kind: 'element',
+      checked: !itemType.disabled,
+      visibleIcon: VisibleIcon,
+      invisibleIcon: InvisibleIcon
+    });
+  }
+  return group;
+};
+
 /**
  * Returns groups of items per type
  * @param {array} types List of node types
@@ -196,36 +233,9 @@ export const getGroups = createSelector(
   (nodeTypes, items) => {
     const groups = {};
     const itemTypes = [...nodeTypes, { id: 'tag' }];
-
     for (const itemType of itemTypes) {
-      const itemsOfType = items[itemType.id] || [];
-
-      groups[itemType.id] = {
-        type: itemType,
-        id: itemType.id,
-        name: itemType.name,
-        kind: 'toggle',
-        visibleIcon: VisibleIcon,
-        invisibleIcon: InvisibleIcon,
-        checked: !itemType.disabled,
-        count: itemsOfType.length,
-        allUnset: itemsOfType.every(item => item.unset),
-        allChecked: itemsOfType.every(item => item.checked)
-      };
-
-      if (itemType.id === 'tag') {
-        const group = groups[itemType.id];
-
-        Object.assign(group, {
-          name: 'Tags',
-          kind: 'filter',
-          checked: !group.allUnset,
-          visibleIcon: group.allChecked ? IndicatorIcon : IndicatorPartialIcon,
-          invisibleIcon: IndicatorOffIcon
-        });
-      }
+      groups[itemType.id] = createGroup(itemType, items[itemType.id]);
     }
-
     return groups;
   }
 );

src/components/node-list/node-list.test.js

@@ -91,7 +91,7 @@ describe('NodeList', () => {
     const rows = () =>
       wrapper
         .find(
-          '.pipeline-nodelist__group--kind-toggle .pipeline-nodelist__list--nested'
+          '.pipeline-nodelist__group--kind-element .pipeline-nodelist__list--nested'
         )
         .find('.pipeline-nodelist__row');
     const rowName = row =>
@@ -190,7 +190,7 @@ describe('NodeList', () => {
     const elements = wrapper =>
       wrapper
         .find(
-          '.pipeline-nodelist__group--kind-toggle .pipeline-nodelist__list--nested'
+          '.pipeline-nodelist__group--kind-element .pipeline-nodelist__list--nested'
         )
         .find('.pipeline-nodelist__row')
         .map(row => [

src/components/node-list/styles/_row-label.scss

@@ -0,0 +1,79 @@
+@import '../../../styles/extends';
+@import '../../../styles/mixins';
+@import '../../../styles/variables';
+@import './variables';
+
+.pipeline-nodelist__row__text {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: $row-padding-y $row-offset-right $row-padding-y $row-offset-left;
+  color: inherit;
+  font-size: inherit;
+  font-family: inherit;
+  letter-spacing: inherit;
+  text-align: inherit;
+  background: none;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  cursor: default;
+  user-select: none;
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 4px $color-link inset;
+
+    [data-whatintent='mouse'] & {
+      box-shadow: none;
+    }
+  }
+}
+
+.pipeline-nodelist__row__label {
+  overflow: hidden;
+  font-size: 1.48em;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  &--faded {
+    opacity: 0.65;
+  }
+
+  &--disabled {
+    opacity: 0.3;
+  }
+
+  b {
+    color: var(--color-nodelist-highlight);
+    font-weight: normal;
+  }
+
+  i {
+    display: inline-block;
+    margin-left: 0.45em;
+    font-weight: normal;
+    font-style: normal;
+  }
+}
+
+.pipeline-nodelist__row--unchecked {
+  // Fade row text when unchecked
+  .pipeline-nodelist__row__label--kind-filter {
+    opacity: 0.55;
+  }
+
+  // Brighter row text when unchecked and hovered
+  &:hover {
+    .pipeline-nodelist__row__label--kind-filter {
+      opacity: 0.8;
+    }
+  }
+
+  // Bright row text when all unset
+  .pipeline-nodelist__group--all-unset & {
+    .pipeline-nodelist__row__label--kind-filter {
+      opacity: 1;
+    }
+  }
+}