Pulls in latest pf-react. Adds selected list component to org instance groups lookup

src/components/SelectedList/SelectedList.jsx

@@ -0,0 +1,61 @@
+import React, { Component } from 'react';
+import {
+  Chip
+} from '@patternfly/react-core';
+
+class SelectedList extends Component {
+  constructor (props) {
+    super(props);
+
+    this.state = {
+      showOverflow: false
+    };
+
+    this.showOverflow = this.showOverflow.bind(this);
+  }
+
+  showOverflow = () => {
+    this.setState({ showOverflow: true });
+  };
+
+  render () {
+    const { label, selected, showOverflowAfter, onRemove } = this.props;
+    const { showOverflow } = this.state;
+    return (
+      <div className="awx-selectedList">
+        <div className="pf-l-split">
+          <div className="pf-l-split__item pf-u-align-items-center">
+            {label}
+          </div>
+          <div className="pf-l-split__item">
+            <div className="pf-c-chip-group">
+              {selected
+                .slice(0, showOverflow ? selected.length : showOverflowAfter)
+                .map(selectedItem => (
+                  <Chip
+                    key={selectedItem.id}
+                    onClick={() => onRemove(selectedItem)}
+                  >
+                    {selectedItem.name}
+                  </Chip>
+                ))}
+              {(
+                !showOverflow
+                && selected.length > showOverflowAfter
+              ) && (
+                <Chip
+                  isOverflowChip
+                  onClick={() => this.showOverflow()}
+                >
+                  {`${(selected.length - showOverflowAfter).toString()} more`}
+                </Chip>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default SelectedList;

src/components/SelectedList/index.js

@@ -0,0 +1,3 @@
+import SelectedList from './SelectedList';
+
+export default SelectedList;

src/components/SelectedList/styles.scss

@@ -0,0 +1,34 @@
+.awx-selectedList {
+  --awx-selectedList--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
+  --awx-selectedList--BorderColor: #d7d7d7;
+  --awx-selectedList--BorderWidth: var(--pf-global--BorderWidth--sm);
+  --awx-selectedList--FontSize: var(--pf-c-chip__text--FontSize);
+
+  
+  .pf-l-split {
+    padding-top: 20px;
+    padding-bottom: 10px;
+    border-bottom: var(--awx-selectedList--BorderWidth) solid var(--awx-selectedList--BorderColor);
+  }
+  .pf-l-split__item:first-child {
+    display: flex;
+    white-space: nowrap;
+    height: 30px;
+  }
+  .pf-l-split__item:not(:last-child):after {
+    content: "";
+    background-color: #d7d7d7;
+    width: 1px;
+    height: 30px;
+    display: block;
+    margin-left: 20px;
+    margin-right: 20px;
+  }
+  .pf-c-chip {
+    margin-right: 10px;
+    margin-bottom: 10px;
+  }
+  // .pf-c-button {
+  //   font-size: var(--awx-selectedList--FontSize);
+  // }
+}