style(choice): correct icon alignment (#1957)

* style(choice): remove incorrect margin styles * docs(choice): add additional example without subtext
Kajabi · Aug 22, 2024 · d975ff7 · d975ff7
1 parent a947669
commit d975ff7
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/docs/app/views/examples/components/choice/_preview.html.erb b/docs/app/views/examples/components/choice/_preview.html.erb
@@ -45,6 +45,15 @@ long_description = "Description with longer text to cause wrapping and make the
 
 <h3 class="t-sage-heading-6">Icon Variation</h3>
 <p>Select any icon to appear to the left of the text.</p>
+<%= sage_component SageChoice, {
+    target: "example",
+    text: "Option 1",
+    type: "icon",
+    icon: "video-on",
+  }
+%>
+
+<p>With additional subtext.</p>
 <%= sage_component SageChoice, {
     target: "example",
     text: "Option 1",

diff --git a/packages/sage-assets/lib/stylesheets/components/_choice.scss b/packages/sage-assets/lib/stylesheets/components/_choice.scss
@@ -141,10 +141,6 @@ $-choice-radio-color-checked-inner: map-get($sage-radio-colors, checked-inner);
     transition: color map-get($sage-transitions, default);
   }
 
-  pds-icon {
-    margin-top: var(--icon-top-offset);
-  }
-
   &.sage-choice--vertical-align-icon-start::#{$-choice-el-icon} {
     align-self: start;
     margin-top: var(--icon-top-offset);