🐛 Fix List subText alignment for links without icons

Author: Frontendland

src/components/List/List.astro

@@ -76,7 +76,7 @@ const wrapperClasses = [
                             <ConditionalWrapper condition={!!(item.icon && item.subText)}>
                                 <div slot="wrapper">children</div>
                                 {item.icon && <Fragment set:html={item.icon} />}
-                                {item.name}
+                                <div>{item.name}</div>
                             </ConditionalWrapper>
                             {item.subText && <span>{item.subText}</span>}
                         </ConditionalWrapper>

src/components/List/List.svelte

@@ -130,7 +130,7 @@
                             {#if item.icon}
                                 {@html item.icon}
                             {/if}
-                            {item.name}
+                            <div>{item.name}</div>
                         </ConditionalWrapper>
                         {#if item.subText}
                             <span>{item.subText}</span>

src/components/List/List.tsx

@@ -147,7 +147,7 @@ const List = ({
                                                 style={{ height: '18px' }}
                                             />
                                         )}
-                                        {item.name}
+                                        <div>{item.name}</div>
                                     </ConditionalWrapper>
                                     {item.subText && <span>{item.subText}</span>}
                                 </ConditionalWrapper>

src/data.js

@@ -151,15 +151,15 @@ export const listWithGroups = [
                 icon: infoIcon,
                 subText: 'Learn more'
             },
-            { name: 'Switch theme', value: 'theme', icon: moonIcon }
+            { name: 'Switch theme', href: '#', icon: moonIcon }
         ]
     },
     {
         title: 'Settings',
         items: [
             { name: 'Profile', href: '#' },
-            { name: 'Preferences', href: '#' },
-            { name: 'Sign out', value: 'sign-out' }
+            { name: 'Preferences', href: '#', subText: 'Update styles' },
+            { name: 'Sign out', value: 'sign-out', subText: 'Save your work' }
         ]
     }
 ]