From 88d47688facb28047dae922ed1e8a7f9d33be241 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Fri, 18 Jun 2021 16:54:16 -0400
Subject: [PATCH] =?UTF-8?q?chore:=20=F0=9F=A4=96=20simplify=20dropdown=20s?=
 =?UTF-8?q?tyles=20for=20consistency=20with=20Structur?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 addons/api/mirage/config.js                   |  2 +-
 .../rose/components/dropdown/_item.scss       | 29 +++++++++----------
 .../rose/components/dropdown/_section.scss    | 24 ---------------
 .../rose/tests/dummy/app/templates/index.hbs  |  6 +++-
 4 files changed, 19 insertions(+), 42 deletions(-)

diff --git a/addons/api/mirage/config.js b/addons/api/mirage/config.js
index 007950f69..008ed2743 100644
--- a/addons/api/mirage/config.js
+++ b/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.
diff --git a/addons/rose/addon/styles/rose/components/dropdown/_item.scss b/addons/rose/addon/styles/rose/components/dropdown/_item.scss
index ad01cdb70..2d9634e42 100644
--- a/addons/rose/addon/styles/rose/components/dropdown/_item.scss
+++ b/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;
-  }
-}
diff --git a/addons/rose/addon/styles/rose/components/dropdown/_section.scss b/addons/rose/addon/styles/rose/components/dropdown/_section.scss
index ea63e9007..10ca0a790 100644
--- a/addons/rose/addon/styles/rose/components/dropdown/_section.scss
+++ b/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);
-  }
-}
diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs
index 3a2be2249..e3cd92620 100644
--- a/addons/rose/tests/dummy/app/templates/index.hbs
+++ b/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>
\ No newline at end of file
+</Rose::Dropdown>