From 7b154b223a4b9d697e6754ef1b4f4daf15899eaa Mon Sep 17 00:00:00 2001
From: Cameron Perera <cameron.perera@hashicorp.com>
Date: Thu, 21 Apr 2022 13:51:47 -0500
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Update=20Target=20types?=
 =?UTF-8?q?=20help=20text=20(#1064)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 🎸 Update Target types help text

✅ Closes: ICU-4014

* refactor: 💡 Update how radio cards determine height

Radio cards will now fill up the entire height of the fieldset they are
in

* style: 💄 Update radio card padding
---
 addons/core/translations/resources/en-us.yaml                | 4 ++--
 addons/rose/addon/styles/rose/components/form/_fieldset.scss | 4 ++++
 .../rose/addon/styles/rose/components/form/_radio-card.scss  | 5 +++--
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/addons/core/translations/resources/en-us.yaml b/addons/core/translations/resources/en-us.yaml
index 32f098cc4..1d0a3feb3 100644
--- a/addons/core/translations/resources/en-us.yaml
+++ b/addons/core/translations/resources/en-us.yaml
@@ -279,8 +279,8 @@ target:
     tcp: TCP
     ssh: SSH
   help: 
-    tcp: This target belongs to an TCP host catalog and will use TCP to connect
-    ssh: This target belongs to an SSH host catalog and will use SSH to connect
+    tcp: Connections are made over TCP to support a broad range of protocols, including SSH, RDP, databases, and more.  This is the most general-purpose type.
+    ssh: Protocol-aware connections are made over SSH.  Use when requiring SSH connections to remote hosts.
   host-source:
     title: Host Source
     title_plural: Host Sources
diff --git a/addons/rose/addon/styles/rose/components/form/_fieldset.scss b/addons/rose/addon/styles/rose/components/form/_fieldset.scss
index c01a77a60..404737cf4 100644
--- a/addons/rose/addon/styles/rose/components/form/_fieldset.scss
+++ b/addons/rose/addon/styles/rose/components/form/_fieldset.scss
@@ -8,6 +8,10 @@
     @include type.type(s, semibold);
   }
 
+  .rose-form-fieldset-body {
+    display: flex;
+  }
+
   .rose-form-fieldset-description {
     margin: sizing.rems(xxs) 0;
     @include type.type(xs);
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 18081e154..7d7dff35d 100644
--- a/addons/rose/addon/styles/rose/components/form/_radio-card.scss
+++ b/addons/rose/addon/styles/rose/components/form/_radio-card.scss
@@ -78,7 +78,7 @@ $radio-svg: (
     display: flex;
     color: var(--black);
     width: ($size-m) * 23;
-    height: ($size-m) * 7.4;
+    height: 100%;
     display: block;
     position: relative;
     text-align: left;
@@ -86,11 +86,12 @@ $radio-svg: (
     box-shadow: 0 $size-xxs $size-xxs
       rgba(var(--stark-components), var(--opacity-2));
     border-radius: $size-xxs;
-    padding: $size-s $size-m;
+    padding: $size-s $size-m ($size-xl + $size-m);
     box-sizing: border-box;
     background-color: var(--white);
     .rose-form-helper-text {
       @include type.type(xs, normal);
+      padding-top: $size-xs;
     }
 
     &::after {