From ab668d74eb717ca9d3c3a5d234d6690598e14457 Mon Sep 17 00:00:00 2001
From: Carlos Alcaide <me@calcaide.com>
Date: Wed, 19 May 2021 11:16:30 -0700
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Delete=20key-value=20row?=
 =?UTF-8?q?=20and=20other=20tweaks?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Delete the recently introduced key-value class for rows, for they
key-value lookalike, when editing we want to use 3 colums on the table
rather than 2. Some style's tweaks to simplify
---
 .../components/rose/table/index.stories.mdx   |  77 ++++++++-----
 .../styles/rose/components/table/_table.scss  |  23 +---
 .../rose/tests/dummy/app/templates/index.hbs  | 109 +++++++-----------
 3 files changed, 99 insertions(+), 110 deletions(-)

diff --git a/addons/rose/addon/components/rose/table/index.stories.mdx b/addons/rose/addon/components/rose/table/index.stories.mdx
index 7c91f0de4..444419be4 100644
--- a/addons/rose/addon/components/rose/table/index.stories.mdx
+++ b/addons/rose/addon/components/rose/table/index.stories.mdx
@@ -6,9 +6,7 @@ import { boolean, select } from '@storybook/addon-knobs';
 
 # Table
 
-A table component to display data in structure of rows and columns. It supports `header`, `body` and `footer` optional definitions. Each definition allows for a table `row` to be defined with either a `cell` or `headerCell` table element. Rows can be visually hidden, styled for a key/value visualization, cells can be shrinked to its content with, and center/right cell alignment is supported.
-
-Row `key/value` style should be applied per row.
+A table component to display data in structure of rows and columns. It supports `header`, `body` and `footer` optional definitions. Each definition allows for a table `row` to be defined with either a `cell` or `headerCell` table element. Rows can be visually hidden, and cells can be shrinked to its content with, and center/right cell alignment is supported.
 
 Cell shrink should be applied to all the cells in a row. Otherwise the bigger cell with shrink applied will determinate the width of the row.
 
@@ -108,48 +106,71 @@ Cell shrink should be applied to all the cells in a row. Otherwise the bigger ce
 <Preview>
   <Story name="Basic Key/Value Table">{{
     template: hbs`
-      <Rose::Table @style="condensed" as |table|>
+      <Rose::Table @style={{style}} as |table|>
         <table.header as |header|>
-          <header.row @hidden=true as |row|>
-            <row.headerCell>Key</row.headerCell>
-            <row.headerCell>Value</row.headerCell>
+          <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 @style={{style}} as |row|>
-            <row.cell>Key</row.cell>
-            <row.cell>Value</row.cell>
-          </body.row>
-          <body.row @style={{style}} as |row|>
-            <row.cell>Key</row.cell>
-            <row.cell>Value</row.cell>
-          </body.row>
-          <body.row @style={{style}} as |row|>
-            <row.cell>Key</row.cell>
-            <row.cell>Value</row.cell>
-          </body.row>
-          <body.row @style={{style}} as |row|>
+          <body.row as |row|>
             <row.cell>Key</row.cell>
             <row.cell>
               <Rose::Form::Input @contextual={{true}} as |input|>
                 <input.field />
-                <Rose::Button @style="secondary">Add</Rose::Button>
               </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 @style={{style}} as |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::Button @style="secondary" @iconOnly="trash" title="Remove">Remove</Rose::Button>
               </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 as |footer|>
-          <footer.row  @hidden=true as |row|>
-            <row.cell>Footer</row.cell>
+        <table.footer @hidden={{true}} as |footer|>
+          <footer.row as |row|>
+            <row.cell colspan="3">Footer</row.cell>
           </footer.row>
         </table.footer>
       </Rose::Table>
@@ -158,8 +179,8 @@ Cell shrink should be applied to all the cells in a row. Otherwise the bigger ce
       style: select(
         'style',
         {
-          'default': '',
-          'key-value': 'key-value'
+          'condensed': 'condensed',
+          'default': ''
         }
       )
     }
diff --git a/addons/rose/addon/styles/rose/components/table/_table.scss b/addons/rose/addon/styles/rose/components/table/_table.scss
index a3c3bfcdc..f9b7b9daf 100644
--- a/addons/rose/addon/styles/rose/components/table/_table.scss
+++ b/addons/rose/addon/styles/rose/components/table/_table.scss
@@ -10,15 +10,12 @@
     text-align: left;
   }
 
-  .rose-table-row-key-value {
-    td:nth-child(2) {
-      display: flex;
-      input {
-        width: 100%;
-        margin-right: sizing.rems(s);
-      }
-      button { margin-right: 0; }
-    }
+  // This styles are add to stop the input to apply extra margin (default on forms)
+  .rose-form-input-field,
+  .rose-form-select, 
+  .rose-form-input { 
+    margin: 0; 
+    width: 100%;
   }
 
   .rose-table-cell,
@@ -58,14 +55,6 @@
     margin-bottom: 0;
   }
 
-  .rose-table-cell {
-    .rose-form-input-field {
-      margin: 0;
-      width: inherit;
-      vertical-align: inherit;
-    }
-  }
-
   &.rose-table-condensed {
     .rose-table-cell {
       @include type.type(s);
diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs
index f162f9948..e82d02286 100644
--- a/addons/rose/tests/dummy/app/templates/index.hbs
+++ b/addons/rose/tests/dummy/app/templates/index.hbs
@@ -75,49 +75,72 @@
   </table.footer>
 </Rose::Table>
 
-<h2>Condensed Table Key/Value Lookalike</h2>
+<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>Value</row.headerCell>
+      <row.headerCell colspan="2">Value</row.headerCell>
     </header.row>
   </table.header>
   <table.body as |body|>
-    <body.row @style="key-value" as |row|>
-      <row.cell>Key</row.cell>
-      <row.cell>Value</row.cell>
-    </body.row>
-    <body.row @style="key-value" as |row|>
-      <row.cell>Key</row.cell>
-      <row.cell>Value</row.cell>
-    </body.row>
-    <body.row @style="key-value" as |row|>
-      <row.cell>Key</row.cell>
-      <row.cell>Value</row.cell>
-    </body.row>
-    <body.row @style="key-value" as |row|>
+    <body.row as |row|>
       <row.cell>Key</row.cell>
       <row.cell>
         <Rose::Form::Input @contextual={{true}} as |input|>
-            <input.field />
-            <Rose::Button @style="secondary" @iconOnly="trash" title="Remove">Remove</Rose::Button>
+          <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 @style="key-value" as |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::Button @style="secondary">Add</Rose::Button>
+          <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>Footer</row.cell>
+      <row.cell colspan="3">Footer</row.cell>
     </footer.row>
   </table.footer>
 </Rose::Table>
@@ -147,50 +170,6 @@
   </table.footer>
 </Rose::Table>
 
-<h2>Key/Value</h2>
-<Rose::List::KeyValue as |list|>
-  <list.item as |item|>
-    <item.key>Key</item.key>
-    <item.cell>Value</item.cell>
-  </list.item>
-  <list.item as |item|>
-    <item.key>Key</item.key>
-    <item.cell>Value</item.cell>
-  </list.item>
-  <list.item as |item|>
-    <item.key>Key</item.key>
-    <item.cell>Value</item.cell>
-  </list.item>
-
-  <Rose::Form::Input @contextual={{true}} as |input|>
-    <list.item as |item|>
-      <item.key>
-        <input.label>Key</input.label>
-      </item.key>
-      <item.cell>
-        <input.field />
-      </item.cell>
-      <item.cell>
-        <Rose::Button @style="secondary">Add</Rose::Button>
-      </item.cell>
-    </list.item>
-  </Rose::Form::Input>
-
-  <Rose::Form::Input @contextual={{true}} as |input|>
-    <list.item as |item|>
-      <item.key>
-        <input.label>Key</input.label>
-      </item.key>
-      <item.cell>
-        <input.field />
-      </item.cell>
-      <item.cell>
-        <Rose::Button @style="secondary" @iconOnly="trash" title="Remove">Remove</Rose::Button>
-      </item.cell>
-    </list.item>
-  </Rose::Form::Input>
-</Rose::List::KeyValue>
-
 <h2>Table</h2>
 <Rose::Table as |table|>
   <table.header as |header|>