Merge pull request #612 from hashicorp/chore-tweak-dropdown

chore: 🤖 simplify dropdown styles for consistency with Structure

addons/api/mirage/config.js

@@ -13,7 +13,7 @@ export default function () {
   // make this `/api`, for example, if your API is namespaced
   this.namespace = config.api.namespace;
   // delay for each request, automatically set to 0 during testing
-  this.timing = 350;
+  this.timing = 1;
 
   // Allow any configured API host to passthrough, which is useful in
   // development for testing against a locally running backend.

addons/rose/addon/styles/rose/components/dropdown/_item.scss

@@ -7,8 +7,14 @@ $checkmark: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231563
 .rose-dropdown-item {
   @include type.type(s);
   min-width: (sizing.rems(m)) * 20;
-  $line-height: math.div(36, 14);
-  line-height: $line-height;
+  $paddingY: math.div(
+    sizing.rems(xl) - (sizing.rems(m) + sizing.rems(xxxs)),
+    2
+  );
+  $paddingX: sizing.rems(s);
+  padding: $paddingY $paddingX;
+  //$line-height: math.div(36, 14);
+  //line-height: $line-height;
 
   --color: var(--stark);
   --background-color: transparent;
@@ -16,22 +22,23 @@ $checkmark: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231563
   color: var(--color);
   background-color: var(--background-color);
 
-  &:hover {
-    --background-color: var(--ui-gray-subtler-5);
-  }
-
   .rose-form-radio {
     color: currentColor;
     margin-bottom: 0;
 
     .rose-form-radio-label {
       display: block;
+      margin: -#{$paddingY} -#{$paddingX};
       padding-top: sizing.rems(xs) + sizing.rems(xxxxs);
       padding-bottom: sizing.rems(xs) + sizing.rems(xxxxs);
       padding-left: sizing.rems(s);
       padding-right: sizing.rems(xl);
       font-weight: normal;
 
+      &:hover {
+        background-color: var(--ui-gray-subtler-5);
+      }
+
       &::after {
         top: sizing.rems(xxs) + sizing.rems(xxxs);
         right: sizing.rems(xs);
@@ -63,13 +70,3 @@ $checkmark: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231563
     }
   }
 }
-
-.rose-dropdown-condensed .rose-dropdown-item {
-  @include type.type(s);
-  color: var(--ui-gray-starker-1);
-
-  &:hover {
-    // To override original
-    background-color: transparent;
-  }
-}

addons/rose/addon/styles/rose/components/dropdown/_section.scss

@@ -13,27 +13,3 @@
     color: var(--ui-gray);
   }
 }
-
-// Styles for condensed verion. Some are overrides
-.rose-dropdown-condensed .rose-dropdown-section {
-  border-bottom: sizing.rems(xxxxs) solid var(--ui-border);
-  margin: sizing.rems(xxs) 0;
-  padding: sizing.rems(xs) sizing.rems(s);
-
-  &:first-child {
-    margin-top: 0;
-  }
-
-  &:last-child {
-    border: none;
-    margin-bottom: 0;
-  }
-
-  .rose-dropdown-section-title {
-    @include type.type(s, normal);
-    padding: 0; // To clear the inherit padding.
-    text-transform: capitalize; // To override original
-    color: var(--ui-gray-starker-4);
-    margin-bottom: sizing.rems(xxs);
-  }
-}

addons/rose/tests/dummy/app/templates/index.hbs

@@ -9,10 +9,14 @@
     <dropdown.item>cl_nbv9375hLHs</dropdown.item>
   </dropdown.section>
 
+  <dropdown.separator />
+
   <dropdown.section @title="Name">
     <dropdown.item>Key/Value</dropdown.item>
   </dropdown.section>
 
+  <dropdown.separator />
+
   <dropdown.section @title="Description">
     <dropdown.item>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet sem sodales neque ultrices sollicitudin vel sed justo. Vivamus vitae sollicitudin turpis.</dropdown.item>
   </dropdown.section>
@@ -47,4 +51,4 @@
 >
 <dropdown.link @route="about">Menu item</dropdown.link>
 <dropdown.link @route="about">Menu item 2</dropdown.link>
-</Rose::Dropdown>
+</Rose::Dropdown>