feat: WP-65 dropdown-menu css component

#866 (comment)

client/src/components/DataFiles/DataFilesBreadcrumbs/DataFilesBreadcrumbs.jsx

@@ -209,6 +209,7 @@ const DataFilesBreadcrumbs = ({
         <ButtonDropdown
           isOpen={dropdownOpen}
           toggle={toggleDropdown}
+          id="go-to-button-dropdown"
           className="go-to-button-dropdown"
         >
           <DropdownToggle tag={Button}>Go to ...</DropdownToggle>

client/src/components/DataFiles/DataFilesBreadcrumbs/DataFilesBreadcrumbs.scss

@@ -1,5 +1,5 @@
 @import '../../../styles/tools/mixins.scss';
-@import '../DataFilesSidebar/DataFilesSidebar.scss';
+@import '../../../styles/components/dropdown-menu.css';
 
 .breadcrumbs {
   /* ... */
@@ -42,51 +42,32 @@
   padding-left: var(--horizontal-buffer);
 }
 
-/* HACK: Quick solution to prevent styles from cascading into header dropdown */
-.go-to-button-dropdown {
+/* Nested to prevent styles from affecting CMS header dropdown */
+/* HACK: Using ID to increase specificity (until source of problem is fixed) */
+/* HELP: Why does DataFilesSidebar not need such specificity? */
+/* .go-to-button-dropdown { */
+#go-to-button-dropdown {
+  /* To fix menu not showing */
+  /* HELP: Why does DataFilesSidebar not need this? */
   .dropdown-menu {
     opacity: 1 !important;
-    border-color: var(--global-color-accent--normal);
-    border-radius: 0;
-    margin-top: 34px;
-    padding: 0;
-    width: 200px;
-    vertical-align: top;
     pointer-events: auto !important;
   }
+  /* To restyle */
+  .dropdown-menu {
+    margin-top: 38px;
+  }
   .dropdown-menu::before,
   .dropdown-menu::after {
-    position: absolute;
-    top: -10px;
     left: 23px;
-    border-right: 10px solid transparent;
-    border-bottom: 10px solid var(--global-color-accent--normal);
-    border-left: 10px solid transparent;
-    content: '';
+    margin-left: 0;
   }
   .dropdown-menu::after {
     top: -9px;
-    left: 23px;
-    border-bottom: 10px solid #ffffff;
   }
 
   .dropdown-item {
     display: inline-block;
-    padding: 10px 6px;
-    color: var(--global-color-primary--x-dark);
-    font-size: 14px;
-    i {
-      padding-right: 19px;
-      font-size: 20px;
-      vertical-align: top;
-    }
-    &:hover {
-      color: var(--global-color-primary--x-dark);
-    }
-  }
-  .dropdown-item:focus,
-  .dropdown-item:hover {
-    background-color: var(--global-color-accent--weak);
   }
 }
 

client/src/components/DataFiles/DataFilesSidebar/DataFilesSidebar.scss

@@ -1,3 +1,5 @@
+@import '../../../styles/components/dropdown-menu.css';
+
 .data-files-btn {
   background-color: var(--global-color-accent--normal);
   border-color: var(--global-color-accent--normal);
@@ -19,56 +21,17 @@
   padding-top: 20px;
 }
 
-/* HACK: Quick solution to prevent styles from cascading into header dropdown */
+/* Nested to prevent styles from affecting CMS header dropdown */
 .data-files-sidebar {
   .dropdown-menu {
-    border-color: var(--global-color-accent--normal);
-    border-radius: 0;
     margin-top: 11px;
-    padding: 0;
-    width: 200px;
-    vertical-align: top;
-  }
-  .dropdown-menu::before {
-    position: absolute;
-    top: -10px;
-    left: 65px;
-    border-right: 10px solid transparent;
-    border-bottom: 10px solid var(--global-color-accent--normal);
-    border-left: 10px solid transparent;
-    margin-left: 20px;
-    content: '';
   }
   .dropdown-menu::after {
-    position: absolute;
     top: -9px;
     left: 66px;
-    border-right: 9px solid transparent;
-    border-bottom: 9px solid #ffffff;
-    border-left: 9px solid transparent;
-    margin-left: 20px;
-    content: '';
-  }
-
-  .dropdown-item {
-    padding: 10px 6px;
-    color: var(--global-color-primary--x-dark);
-    font-size: 14px;
-    i {
-      padding-right: 19px;
-      font-size: 20px;
-      vertical-align: middle;
-    }
-    &:hover {
-      color: var(--global-color-primary--x-dark);
-    }
-  }
-  .dropdown-item:focus,
-  .dropdown-item:hover {
-    /* FAQ: Before FP-1083, value was #E6E0FB, which matched Design
-            and was `--global-color-accent` at 25% opacity on white…
-            which is what `--global-color-accent--weak` is now */
-    background-color: var(--global-color-accent--weak);
+    border-right-width: 9px;
+    border-bottom-width: 9px;
+    border-left-width: 9px;
   }
 }
 

client/src/styles/components/dropdown-menu.css

@@ -0,0 +1,54 @@
+/*
+Dropdown
+
+A menu of navigation elements.
+
+Styleguide Components.Dropdown
+*/
+
+/* Nested to prevent styles from affecting CMS header dropdown */
+.workbench-wrapper {
+  .dropdown-menu {
+    border-color: var(--global-color-accent--normal);
+    border-radius: 0;
+    margin-top: 11px;
+    padding: 0;
+    width: 200px;
+    vertical-align: top;
+  }
+  .dropdown-menu::before,
+  .dropdown-menu::after {
+    position: absolute;
+    top: -10px;
+    left: 65px;
+    border-right: 10px solid transparent;
+    border-bottom: 10px solid var(--global-color-accent--normal);
+    border-left: 10px solid transparent;
+    margin-left: 20px;
+    content: '';
+  }
+  .dropdown-menu::after {
+    border-bottom-color: var(--global-color-primary--xx-light);
+  }
+
+  .dropdown-item {
+    padding: 10px 6px;
+    color: var(--global-color-primary--x-dark);
+    font-size: 14px;
+    & i {
+      padding-right: 19px;
+      font-size: 20px;
+      vertical-align: middle;
+    }
+    &:hover {
+      color: var(--global-color-primary--x-dark);
+    }
+  }
+  .dropdown-item:focus,
+  .dropdown-item:hover {
+    /* FAQ: Before FP-1083, value was #E6E0FB, which matched Design
+            and was `--global-color-accent` at 25% opacity on white…
+            which is what `--global-color-accent--weak` is now */
+    background-color: var(--global-color-accent--weak);
+  }
+}