add divider when action menu is displayed

elastic · Nov 10, 2020 · aea10e6 · aea10e6
1 parent cc5bcc7
commit aea10e6
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 28 deletions.
diff --git a/x-pack/plugins/saved_objects_tagging/public/management/components/_action_bar.scss b/x-pack/plugins/saved_objects_tagging/public/management/components/_action_bar.scss
@@ -2,6 +2,11 @@
   display: none;
 }
 
+.tagMgt__actionBarDivider {
+  height: $euiSize;
+  border-right: $euiBorderThin;
+}
+
 .tagMgt__actionBar {
   border-bottom: $euiBorderThin;
   padding-bottom: $euiSizeS;

diff --git a/x-pack/plugins/saved_objects_tagging/public/management/components/action_bar.tsx b/x-pack/plugins/saved_objects_tagging/public/management/components/action_bar.tsx
@@ -70,7 +70,7 @@ export const ActionBar: FC<ActionBarProps> = ({
 
   return (
     <div className="tagMgt__actionBar">
-      <EuiFlexGroup justifyContent="flexStart" alignItems="baseline" gutterSize="m">
+      <EuiFlexGroup justifyContent="flexStart" alignItems="center" gutterSize="m">
         <EuiFlexItem grow={false}>
           <EuiText size="xs" color="subdued">
             <FormattedMessage
@@ -83,33 +83,38 @@ export const ActionBar: FC<ActionBarProps> = ({
           </EuiText>
         </EuiFlexItem>
         {selectedCount > 0 && (
-          <EuiFlexItem grow={false}>
-            <EuiPopover
-              isOpen={isPopoverOpened}
-              closePopover={closePopover}
-              panelPaddingSize="none"
-              button={
-                <EuiText size="xs">
-                  <EuiLink onClick={togglePopover} data-test-subj="actionBar-contextMenuButton">
-                    <FormattedMessage
-                      id="xpack.savedObjectsTagging.management.actionBar.selectedTagsLabel"
-                      defaultMessage="{count, plural, one {1 selected tag} other {# selected tags}}"
-                      values={{
-                        count: selectedCount,
-                      }}
-                    />
-                    <EuiIcon className="tagMgt__actionBarIcon" type="arrowDown" size="s" />
-                  </EuiLink>
-                </EuiText>
-              }
-            >
-              <EuiContextMenu
-                initialPanelId={0}
-                panels={contextMenuPanels}
-                data-test-subj="actionBar-contextMenu"
-              />
-            </EuiPopover>
-          </EuiFlexItem>
+          <>
+            <EuiFlexItem grow={false}>
+              <div className="tagMgt__actionBarDivider" />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiPopover
+                isOpen={isPopoverOpened}
+                closePopover={closePopover}
+                panelPaddingSize="none"
+                button={
+                  <EuiText size="xs">
+                    <EuiLink onClick={togglePopover} data-test-subj="actionBar-contextMenuButton">
+                      <FormattedMessage
+                        id="xpack.savedObjectsTagging.management.actionBar.selectedTagsLabel"
+                        defaultMessage="{count, plural, one {1 selected tag} other {# selected tags}}"
+                        values={{
+                          count: selectedCount,
+                        }}
+                      />
+                      <EuiIcon className="tagMgt__actionBarIcon" type="arrowDown" size="s" />
+                    </EuiLink>
+                  </EuiText>
+                }
+              >
+                <EuiContextMenu
+                  initialPanelId={0}
+                  panels={contextMenuPanels}
+                  data-test-subj="actionBar-contextMenu"
+                />
+              </EuiPopover>
+            </EuiFlexItem>
+          </>
         )}
       </EuiFlexGroup>
     </div>