From 36375ae0be0f2e241f9028691c2fdad17c53a65a Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Wed, 26 Jan 2022 11:43:30 -0800
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20remove=20wrapper=20and=20?=
 =?UTF-8?q?make=20card=20always=20inline?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rose/form/radio/group/index.hbs           |  4 +---
 .../rose/form/radio/group/index.stories.mdx   | 22 +++++++++++++++----
 .../rose/components/form/_radio-card.scss     |  2 +-
 .../styles/rose/components/form/_radio.scss   | 11 ----------
 4 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/addons/rose/addon/components/rose/form/radio/group/index.hbs b/addons/rose/addon/components/rose/form/radio/group/index.hbs
index 11f60d571..187aad87b 100644
--- a/addons/rose/addon/components/rose/form/radio/group/index.hbs
+++ b/addons/rose/addon/components/rose/form/radio/group/index.hbs
@@ -1,6 +1,4 @@
-<div class="radio-field-wrapper {{if @inline "inline"}}">
   {{yield (hash
   radio=(component 'rose/form/radio/radio' name=@name selectedValue=@selectedValue disabled=@disabled changed=@changed inline=@inline)
-  card=(component 'rose/form/radio/card' name=@name selectedValue=@selectedValue disabled=@disabled changed=@changed inline=@inline layout=@layout)
+  card=(component 'rose/form/radio/card' name=@name selectedValue=@selectedValue disabled=@disabled changed=@changed layout=@layout)
 )}}
-</div>
\ No newline at end of file
diff --git a/addons/rose/addon/components/rose/form/radio/group/index.stories.mdx b/addons/rose/addon/components/rose/form/radio/group/index.stories.mdx
index 6425e79d6..9e2c01009 100644
--- a/addons/rose/addon/components/rose/form/radio/group/index.stories.mdx
+++ b/addons/rose/addon/components/rose/form/radio/group/index.stories.mdx
@@ -119,7 +119,6 @@ Renders a form radiofield group.
       @name={{name}}
       @selectedValue={{selectedValue}}
       @changed={{changed}}
-      @inline={{inline}}
       as |radioGroup|
     >
       <radioGroup.card
@@ -131,11 +130,13 @@ Renders a form radiofield group.
       <radioGroup.card
         @label={{secondFieldLabel}}
         @value={{secondFieldValue}}
+        @icon={{secondFieldIcon}}
         @layout="tile"
       />
       <radioGroup.card
         @label={{thirdFieldLabel}}
         @value={{thirdFieldValue}}
+        @icon={{thirdFieldIcon}}
         @layout="tile"
       />
     </Rose::Form::Radio::Group>
@@ -143,7 +144,6 @@ Renders a form radiofield group.
   context: {
     name: text('name', 'mustagree'),
     disabled: boolean('disabled', false),
-    inline: boolean('inline', true),
     selectedValue: text('selectedValue', 'disagree'),
     firstFieldLabel: text('first label', 'Agree'),
     firstFieldValue: text('first value', 'agree'),
@@ -154,6 +154,22 @@ Renders a form radiofield group.
           'flight-icons/svg/azure-color-16': 'flight-icons/svg/azure-color-16',
         },
         null
+      ),
+         secondFieldIcon: select(
+        'secondFieldIcon',
+        {
+          'none': null,
+          'flight-icons/svg/azure-color-16': 'flight-icons/svg/azure-color-16',
+        },
+        null
+      ),
+         thirdFieldIcon: select(
+        'thirdFieldIcon',
+        {
+          'none': null,
+          'flight-icons/svg/azure-color-16': 'flight-icons/svg/azure-color-16',
+        },
+        null
       ),
     secondFieldLabel: text('second label', 'Maybe'),
     secondFieldValue: text('second value', 'maybe'),
@@ -193,7 +209,6 @@ Renders a form radiofield group.
       @name={{name}}
       @selectedValue={{selectedValue}}
       @changed={{changed}}
-      @inline={{inline}}
       as |radioGroup|
     >
       <radioGroup.card
@@ -217,7 +232,6 @@ Renders a form radiofield group.
   context: {
     name: text('name', 'mustagree'),
     disabled: boolean('disabled', false),
-    inline: boolean('inline', true),
     selectedValue: text('selectedValue', 'disagree'),
     firstFieldLabel: text('first label', 'Agree'),
     firstFieldValue: text('first value', 'agree'),
diff --git a/addons/rose/addon/styles/rose/components/form/_radio-card.scss b/addons/rose/addon/styles/rose/components/form/_radio-card.scss
index 85364923a..4ed548c55 100644
--- a/addons/rose/addon/styles/rose/components/form/_radio-card.scss
+++ b/addons/rose/addon/styles/rose/components/form/_radio-card.scss
@@ -58,7 +58,7 @@ $radio-svg: (
     }
   }
   position: relative;
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
 
diff --git a/addons/rose/addon/styles/rose/components/form/_radio.scss b/addons/rose/addon/styles/rose/components/form/_radio.scss
index 8c41f98c2..32be9a8c5 100644
--- a/addons/rose/addon/styles/rose/components/form/_radio.scss
+++ b/addons/rose/addon/styles/rose/components/form/_radio.scss
@@ -22,17 +22,6 @@ $radio-svg: (
 );
 
 $data-svg-prefix: 'data:image/svg+xml;utf-8,';
-.radio-field-wrapper {
-  &.inline {
-    display: inline-flex;
-    .rose-form-radio-label {
-      margin-right: sizing.rems(s);
-    }
-  }
-  .rose-form-radio-card {
-    margin-bottom: sizing.rems(s);
-  }
-}
 .rose-form-radio {
   &.inline {
     display: inline-block;