emphasize completed steps

elastic · Sep 30, 2019 · 00e59ad · 00e59ad
1 parent 2f676ce
commit 00e59ad
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 7 deletions.
diff --git a/x-pack/legacy/plugins/graph/public/components/guidance_panel/_guidance_panel.scss b/x-pack/legacy/plugins/graph/public/components/guidance_panel/_guidance_panel.scss
@@ -13,7 +13,7 @@
   display: block;
   max-width: 420px;
   position: relative;
-  padding-left: $euiSizeL;
+  padding-left: $euiSizeXL;
   margin-bottom: $euiSizeL;
 
   button {
@@ -34,5 +34,5 @@
 .gphGuidancePanel__itemIcon {
   position: absolute;
   left: 0;
-  top: 0;
+  top: -$euiSizeXS;
 }
diff --git a/x-pack/legacy/plugins/graph/public/components/guidance_panel/guidance_panel.tsx b/x-pack/legacy/plugins/graph/public/components/guidance_panel/guidance_panel.tsx
@@ -18,15 +18,31 @@ export interface GuidancePanelProps {
   hasFields: boolean;
 }
 
-function ListItem({ children, disabled }: { children: ReactNode; disabled: boolean }) {
+function ListItem({
+  children,
+  disabled,
+  selected,
+}: {
+  children: ReactNode;
+  disabled: boolean;
+  selected: boolean;
+}) {
   return (
     <li
       className={classNames('gphGuidancePanel__item', {
         'gphGuidancePanel__item--disabled': disabled,
       })}
       aria-disabled={disabled}
     >
-      <EuiIcon type="check" className="gphGuidancePanel__itemIcon" aria-hidden={true} />
+      {selected && (
+        <EuiIcon
+          color="secondary"
+          type="check"
+          className="gphGuidancePanel__itemIcon"
+          aria-hidden={true}
+          size="l"
+        />
+      )}
       {children}
     </li>
   );
@@ -60,7 +76,7 @@ export function GuidancePanel(props: GuidancePanelProps) {
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
               <ul className="gphGuidancePanel__list">
-                <ListItem disabled={false}>
+                <ListItem disabled={false} selected={hasDatasource}>
                   <FormattedMessage
                     id="xpack.graph.guidancePanel.datasourceItem.description"
                     defaultMessage="Choose an {indexpattern} above"
@@ -78,7 +94,7 @@ export function GuidancePanel(props: GuidancePanelProps) {
                     }}
                   />
                 </ListItem>
-                <ListItem disabled={!hasDatasource}>
+                <ListItem disabled={!hasDatasource} selected={hasFields}>
                   <FormattedMessage
                     id="xpack.graph.guidancePanel.fieldsItem.description"
                     defaultMessage="{fields} to explore"
@@ -96,7 +112,7 @@ export function GuidancePanel(props: GuidancePanelProps) {
                     }}
                   />
                 </ListItem>
-                <ListItem disabled={!hasFields}>
+                <ListItem disabled={!hasFields} selected={false}>
                   <FormattedMessage
                     id="xpack.graph.guidancePanel.nodesItem.description"
                     defaultMessage="Search for something in the search bar above to begin exploration. If you don't know where to start, you can also {topTerms}"