From 2fd646c2c9f2bdee26ff75f63219d5886987f187 Mon Sep 17 00:00:00 2001
From: Carlos Alcaide <me@calcaide.com>
Date: Wed, 16 Jun 2021 11:03:59 -0700
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Add=20condensed=20style?=
 =?UTF-8?q?=20for=20dropdown?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

First iteration to add a condensed style for dropdown.

✅ Closes: ICU-1431
---
 .../addon/components/rose/dropdown/index.hbs  |   2 +-
 .../rose/components/dropdown/_dropdown.scss   |  23 ++
 .../rose/components/dropdown/_item.scss       |  20 +-
 .../rose/components/dropdown/_section.scss    |  24 ++
 .../rose/components/form/_fieldset.scss       |   2 +-
 .../rose/tests/dummy/app/templates/index.hbs  | 236 ++++--------------
 6 files changed, 104 insertions(+), 203 deletions(-)

diff --git a/addons/rose/addon/components/rose/dropdown/index.hbs b/addons/rose/addon/components/rose/dropdown/index.hbs
index 587b8c369..90f899281 100644
--- a/addons/rose/addon/components/rose/dropdown/index.hbs
+++ b/addons/rose/addon/components/rose/dropdown/index.hbs
@@ -1,6 +1,6 @@
 <details
   ...attributes
-  class="rose-dropdown {{if @dropdownRight "rose-dropdown-right"}}"
+  class="rose-dropdown {{if @dropdownRight "rose-dropdown-right"}} {{if @style (concat "rose-dropdown-" @style)}}"
   {{on-click-outside this.close}}
 >
 
diff --git a/addons/rose/addon/styles/rose/components/dropdown/_dropdown.scss b/addons/rose/addon/styles/rose/components/dropdown/_dropdown.scss
index 4b75b3ad5..96717ebc1 100644
--- a/addons/rose/addon/styles/rose/components/dropdown/_dropdown.scss
+++ b/addons/rose/addon/styles/rose/components/dropdown/_dropdown.scss
@@ -5,6 +5,7 @@ $xs: sizing.rems(xs); // 8
 $xxs: sizing.rems(xxs); // 4
 $chevron: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231b1f26' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>");
 $chevronWhite: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>");
+$chevronGrey: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%23626873' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>");
 
 .rose-dropdown {
   --background-image-light: #{$chevron};
@@ -121,4 +122,26 @@ $chevronWhite: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%23f
     border: none;
     margin: $xxs 0;
   }
+
+  // Styles for condensed verion. Some are overrides
+  &.rose-dropdown-condensed {
+    --background-image: #{$chevronGrey};
+    border: sizing.rems(xxxxs) solid var(--ui-border);
+    border-radius: sizing.rems(xxs);
+
+    .rose-dropdown-trigger {
+      color: var(--ui-gray-starker-1);
+      padding: 0 sizing.rems(s); // To clear the inherit padding.
+
+      &.show-caret {
+        padding-right: sizing.rems(l) + sizing.rems(xs); // 32
+        background-position: right sizing.rems(xs) center;
+      }
+    }
+
+    .rose-dropdown-content {
+      border: none;
+      border: sizing.rems(xxxxs) solid var(--ui-border);
+    }
+  }
 }
diff --git a/addons/rose/addon/styles/rose/components/dropdown/_item.scss b/addons/rose/addon/styles/rose/components/dropdown/_item.scss
index a0f4b0a67..ad01cdb70 100644
--- a/addons/rose/addon/styles/rose/components/dropdown/_item.scss
+++ b/addons/rose/addon/styles/rose/components/dropdown/_item.scss
@@ -32,11 +32,6 @@ $checkmark: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231563
       padding-right: sizing.rems(xl);
       font-weight: normal;
 
-      // &::before,
-      // &::after {
-      //   display: none;
-      // }
-
       &::after {
         top: sizing.rems(xxs) + sizing.rems(xxxs);
         right: sizing.rems(xs);
@@ -57,11 +52,6 @@ $checkmark: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231563
         ~ .rose-form-radio-label {
           color: var(--action);
           background-color: var(--action-subtler-1h);
-
-          // background-image: #{$checkmark};
-          // background-repeat: no-repeat;
-          // background-position: right sizing.rems(m) center;
-          // background-size: sizing.rems(m);
         }
       }
 
@@ -73,3 +63,13 @@ $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 10ca0a790..ea63e9007 100644
--- a/addons/rose/addon/styles/rose/components/dropdown/_section.scss
+++ b/addons/rose/addon/styles/rose/components/dropdown/_section.scss
@@ -13,3 +13,27 @@
     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/addon/styles/rose/components/form/_fieldset.scss b/addons/rose/addon/styles/rose/components/form/_fieldset.scss
index d0b35d2ea..33f5ad5d9 100644
--- a/addons/rose/addon/styles/rose/components/form/_fieldset.scss
+++ b/addons/rose/addon/styles/rose/components/form/_fieldset.scss
@@ -3,7 +3,7 @@
 
 .rose-form-fieldset {
   margin-bottom: sizing.rems(m);
-  
+
   .rose-form-fieldset-title {
     @include type.type(l, bold);
   }
diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs
index e82d02286..3a2be2249 100644
--- a/addons/rose/tests/dummy/app/templates/index.hbs
+++ b/addons/rose/tests/dummy/app/templates/index.hbs
@@ -1,196 +1,50 @@
-<h2>Condensed Table</h2>
-<Rose::Table @style="condensed" as |table|>
-  <table.header as |header|>
-    <header.row  as |row|>
-      <row.headerCell >Address</row.headerCell>
-      <row.headerCell>Host Set</row.headerCell>
-      <row.headerCell>Name</row.headerCell>
-      <row.headerCell>Description</row.headerCell>
-    </header.row>
-  </table.header>
-  <table.body as |body|>
-    <body.row as |row|>
-      <row.cell>1.1.1.1</row.cell>
-      <row.cell>host-set-1, host-set-2</row.cell>
-      <row.cell>optional name</row.cell>
-      <row.cell>description</row.cell>
-    </body.row>
-  </table.body>
-  <table.footer as |footer|>
-    <footer.row as |row|>
-      <row.cell>Footer</row.cell>
-    </footer.row>
-  </table.footer>
-</Rose::Table>
+<h2>Condensed dropdown</h2>
+<Rose::Dropdown
+  @style="condensed"
+  @text="Credential library details"
+  @showCaret={{true}}
+  as |dropdown|
+>
+  <dropdown.section @title="ID">
+    <dropdown.item>cl_nbv9375hLHs</dropdown.item>
+  </dropdown.section>
 
-<h2>Condensed Table with Shrink Cells</h2>
-<Rose::Table @style="condensed" as |table|>
-  <table.header as |header|>
-    <header.row  as |row|>
-      <row.headerCell>Address</row.headerCell>
-      <row.headerCell @shrink={{true}}>Host Set</row.headerCell>
-      <row.headerCell @shrink={{true}}>Name</row.headerCell>
-      <row.headerCell>Description</row.headerCell>
-    </header.row>
-  </table.header>
-  <table.body as |body|>
-    <body.row as |row|>
-      <row.cell>1.1.1.1</row.cell>
-      <row.cell @shrink={{true}}>host-set-1, host-set-2</row.cell>
-      <row.cell @shrink={{true}}>
-        <Rose::Button @style="secondary" @iconOnly="trash" title="Remove">Remove</Rose::Button>
-      </row.cell>
-      <row.cell>description</row.cell>
-    </body.row>
-  </table.body>
-  <table.footer @hidden={{true}} as |footer|>
-    <footer.row as |row|>
-      <row.cell>Footer</row.cell>
-    </footer.row>
-  </table.footer>
-</Rose::Table>
+  <dropdown.section @title="Name">
+    <dropdown.item>Key/Value</dropdown.item>
+  </dropdown.section>
 
-<h2>Condensed Table with Right and Center aligned cells</h2>
-<Rose::Table @style="condensed" as |table|>
-  <table.header as |header|>
-    <header.row  as |row|>
-      <row.headerCell>Address</row.headerCell>
-      <row.headerCell @alignCenter={{true}}>Host Set</row.headerCell>
-      <row.headerCell>Name</row.headerCell>
-      <row.headerCell>Description</row.headerCell>
-    </header.row>
-  </table.header>
-  <table.body as |body|>
-    <body.row as |row|>
-      <row.cell>1.1.1.1</row.cell>
-      <row.cell @alignCenter={{true}}>host-set-1, host-set-2</row.cell>
-      <row.cell @alignRight={{true}}>optional name</row.cell>
-      <row.cell @alignCenter={{true}}>description</row.cell>
-    </body.row>
-  </table.body>
-  <table.footer as |footer|>
-    <footer.row as |row|>
-      <row.cell>Footer</row.cell>
-    </footer.row>
-  </table.footer>
-</Rose::Table>
+  <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>
+</Rose::Dropdown>
 
-<h2>Condensed Table Key/Value Lookalike (edit mode)</h2>
-<Rose::Table @style="condensed" as |table|>
-  <table.header as |header|>
-    <header.row  as |row|>
-      <row.headerCell @shrink={{true}}>Key</row.headerCell>
-      <row.headerCell colspan="2">Value</row.headerCell>
-    </header.row>
-  </table.header>
-  <table.body as |body|>
-    <body.row as |row|>
-      <row.cell>Key</row.cell>
-      <row.cell>
-        <Rose::Form::Input @contextual={{true}} as |input|>
-          <input.field />
-        </Rose::Form::Input>
-      </row.cell>
-      <row.cell @shrink={{true}} @alignRight={{true}}>
-        <Rose::Button @style="secondary" @iconOnly="trash" title="Remove">Remove</Rose::Button>
-      </row.cell>
-    </body.row>
-    <body.row as |row|>
-      <row.cell>Key</row.cell>
-      <row.cell>
-        <Rose::Form::Select
-          @name="Test select"
-          as |field|
-        >
-          <field.field as |select|>
-            <select.option>Choose an option</select.option>
-            <select.option @value="value-1">Value 1</select.option>
-            <select.option @value="value-2">Value 2</select.option>
-            <select.option @value="value-3">Value 3</select.option>
-          </field.field>
-        </Rose::Form::Select>
-      </row.cell>
-      <row.cell @shrink={{true}} @alignRight={{true}}>
-        <Rose::Button @style="secondary">Add</Rose::Button>
-      </row.cell>
-    </body.row>
-    <body.row as |row|>
-      <row.cell>Key</row.cell>
-      <row.cell>
-        <Rose::Form::Input @contextual={{true}} as |input|>
-          <input.field />
-        </Rose::Form::Input>
-      </row.cell>
-      <row.cell @alignRight={{true}}>
-        <Rose::Button @style="secondary">Add</Rose::Button>
-      </row.cell>
-    </body.row>
-    <body.row as |row|>
-      <row.cell>Key</row.cell>
-      <row.cell>
-        <Rose::Form::Textarea
-          @name="field"
-          readonly={{false}}
-        />
-      </row.cell>
-      <row.cell @alignRight={{true}}>
-        <Rose::Button @style="secondary">Add</Rose::Button>
-      </row.cell>
-    </body.row>
-  </table.body>
-  <table.footer @hidden={{true}} as |footer|>
-    <footer.row as |row|>
-      <row.cell colspan="3">Footer</row.cell>
-    </footer.row>
-  </table.footer>
-</Rose::Table>
+<h2>Normal Dropdown</h2>
+<Rose::Dropdown
+  @text="Credential library details"
+  @showCaret={{true}}
+  as |dropdown|
+>
+  <dropdown.section @title="ID">
+    <dropdown.item>cl_nbv9375hLHs</dropdown.item>
+  </dropdown.section>
+  <dropdown.separator />
 
-<h2>Condensed Table With Visually Hidden Header & Footer</h2>
-<Rose::Table @style="condensed" as |table|>
-  <table.header as |header|>
-    <header.row @hidden={{true}} as |row|>
-      <row.headerCell >Address</row.headerCell>
-      <row.headerCell>Host Set</row.headerCell>
-      <row.headerCell>Name</row.headerCell>
-      <row.headerCell>Description</row.headerCell>
-    </header.row>
-  </table.header>
-  <table.body as |body|>
-    <body.row as |row|>
-      <row.cell>1.1.1.1</row.cell>
-      <row.cell>host-set-1, host-set-2</row.cell>
-      <row.cell>optional name</row.cell>
-      <row.cell>description</row.cell>
-    </body.row>
-  </table.body>
-  <table.footer as |footer|>
-    <footer.row @hidden={{true}} as |row|>
-      <row.cell>Footer</row.cell>
-    </footer.row>
-  </table.footer>
-</Rose::Table>
+  <dropdown.section @title="Name">
+    <dropdown.item>Key/Value</dropdown.item>
+  </dropdown.section>
+  <dropdown.separator />
 
-<h2>Table</h2>
-<Rose::Table as |table|>
-  <table.header as |header|>
-    <header.row as |row|>
-      <row.headerCell>Address</row.headerCell>
-      <row.headerCell>Host Set</row.headerCell>
-      <row.headerCell>Name</row.headerCell>
-      <row.headerCell>Description</row.headerCell>
-    </header.row>
-  </table.header>
-  <table.body as |body|>
-    <body.row as |row|>
-      <row.cell>1.1.1.1</row.cell>
-      <row.cell>host-set-1, host-set-2</row.cell>
-      <row.cell>optional name</row.cell>
-      <row.cell>description</row.cell>
-    </body.row>
-  </table.body>
-  <table.footer as |footer|>
-    <footer.row as |row|>
-      <row.cell>Footer</row.cell>
-    </footer.row>
-  </table.footer>
-</Rose::Table>
\ No newline at end of file
+  <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>
+</Rose::Dropdown>
+
+<h2>Normal Dropdown</h2>
+<Rose::Dropdown
+  @text="Credential library details"
+  @showCaret={{true}}
+  as |dropdown|
+>
+<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