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 <[email protected]>
carbon-design-system · May 3, 2024 · 01ad989 · 01ad989
1 parent a9af020
commit 01ad989
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git 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
@@ -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;
+  }
 }