From 01ad98908d67a35a85fe9c94e4bb7f6fe753d98b Mon Sep 17 00:00:00 2001
From: Gururaj J <89023023+Gururajj77@users.noreply.github.com>
Date: Fri, 3 May 2024 21:42:42 +0530
Subject: [PATCH] feat(structuredlist): aligned the radio icons to center
 (#16208)

* feat(structuredlist): aligned the radio icons to center

* feat(structuredlist): changed to use tokens instead of px

* feat(structuredlist): updated the package for spacings

* feat(structuredlist): followed BEM convention for classes

* feat(structuredlist): modified css classes

---------

Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>
---
 .../src/components/StructuredList/StructuredList.tsx      | 8 +++++++-
 .../scss/components/structured-list/_structured-list.scss | 7 +++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/components/StructuredList/StructuredList.tsx b/packages/react/src/components/StructuredList/StructuredList.tsx
index 7a5fd035394f..b06fb2bc3838 100644
--- a/packages/react/src/components/StructuredList/StructuredList.tsx
+++ b/packages/react/src/components/StructuredList/StructuredList.tsx
@@ -316,7 +316,13 @@ export function StructuredListRow(props: StructuredListRowProps) {
       <GridRowContext.Provider value={value}>
         {selection && (
           <StructuredListCell>
-            {selectedRow === id ? <RadioButtonChecked /> : <RadioButton />}
+            {selectedRow === id ? (
+              <RadioButtonChecked
+                className={`${prefix}--structured-list__icon`}
+              />
+            ) : (
+              <RadioButton className={`${prefix}--structured-list__icon`} />
+            )}
           </StructuredListCell>
         )}
 
diff --git a/packages/styles/scss/components/structured-list/_structured-list.scss b/packages/styles/scss/components/structured-list/_structured-list.scss
index 1bf9ef19d2bb..2a4a2269c87d 100644
--- a/packages/styles/scss/components/structured-list/_structured-list.scss
+++ b/packages/styles/scss/components/structured-list/_structured-list.scss
@@ -12,6 +12,7 @@
 @use '../../motion';
 @use '../../theme' as *;
 @use '../../type' as *;
+@use '../../spacing' as *;
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/skeleton' as *;
 @use '../../utilities/high-contrast-mode' as *;
@@ -186,6 +187,7 @@
 
   .#{$prefix}--structured-list-svg {
     display: inline-block;
+    margin-block-start: $spacing-01;
     transition: all motion.$duration-fast-02 motion.motion(standard, productive);
     vertical-align: top;
   }
@@ -261,4 +263,9 @@
     .#{$prefix}--structured-list-svg {
     @include high-contrast-mode('icon-fill');
   }
+
+  .#{$prefix}--structured-list__icon {
+    margin-block-start: $spacing-01;
+    vertical-align: top;
+  }
 }