fix!: remove flex classes from SfListItem (#2902)

* BREAKING CHANGE: remove flex classes form wrapper slot in list item * fix: lint fixes * fix: lint fixes
vuestorefront · Jul 5, 2023 · bbec9e1 · bbec9e1
1 parent a2bb3a2
commit bbec9e1
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 8 deletions.
diff --git a/.changeset/flat-radios-do.md b/.changeset/flat-radios-do.md
@@ -0,0 +1,6 @@
+---
+'@storefront-ui/react': major
+'@storefront-ui/vue': major
+---
+
+Breaking Change - removed flex classes from wrapper for slot in SfListItem
diff --git a/apps/preview/next/pages/showcases/Checkout/CheckoutDeliveryOptions.tsx b/apps/preview/next/pages/showcases/Checkout/CheckoutDeliveryOptions.tsx
@@ -39,7 +39,7 @@ export default function DeliveryOptions() {
           className="!items-start max-w-sm border rounded-md border-neutral-200 first-of-type:mr-4 first-of-type:mb-4"
         >
           {name}
-          <span className="text-xs text-gray-500 break-words">{date}</span>
+          <span className="block text-xs text-gray-500 break-words">{date}</span>
         </SfListItem>
       ))}
     </div>

diff --git a/apps/preview/next/pages/showcases/ListItem/ListItemSlots.tsx b/apps/preview/next/pages/showcases/ListItem/ListItemSlots.tsx
@@ -5,11 +5,11 @@ import { SfListItem, SfCounter, SfIconChevronRight, SfIconTune } from '@storefro
 export default function ListItemSlots() {
   return (
     <SfListItem className="max-w-sm" slotPrefix={<SfIconTune />} slotSuffix={<SfIconChevronRight />}>
-      <div className="break-words">
+      <span className="break-words">
         Label
         <SfCounter className="ml-2">123</SfCounter>
-      </div>
-      <span className="text-xs break-words text-neutral-500">Secondary text</span>
+      </span>
+      <span className="block text-xs break-words text-neutral-500">Secondary text</span>
     </SfListItem>
   );
 }

diff --git a/apps/preview/nuxt/pages/showcases/Checkout/CheckoutDeliveryOptions.vue b/apps/preview/nuxt/pages/showcases/Checkout/CheckoutDeliveryOptions.vue
@@ -6,7 +6,7 @@
     class="!items-start max-w-sm border rounded-md border-neutral-200 first-of-type:mr-4 first-of-type:mb-4"
   >
     {{ name }}
-    <span class="text-xs text-gray-500 break-words">{{ date }}</span>
+    <span class="block text-xs text-gray-500 break-words">{{ date }}</span>
     <template #prefix>
       <SfRadio v-model="radioModel" :value="name" name="delivery-options" />
     </template>

diff --git a/apps/preview/nuxt/pages/showcases/ListItem/ListItemSlots.vue b/apps/preview/nuxt/pages/showcases/ListItem/ListItemSlots.vue
@@ -5,7 +5,7 @@
       Label
       <SfCounter class="ml-2">123</SfCounter>
     </span>
-    <span class="text-xs break-words text-neutral-500">Secondary text</span>
+    <span class="block text-xs break-words text-neutral-500">Secondary text</span>
     <template #suffix><SfIconChevronRight /></template>
   </SfListItem>
 </template>

diff --git a/packages/sfui/frameworks/react/components/SfListItem/SfListItem.tsx b/packages/sfui/frameworks/react/components/SfListItem/SfListItem.tsx
@@ -42,7 +42,7 @@ const SfListItem = polymorphicForwardRef<typeof defaultListItemTag, SfListItemPr
       {...attributes}
     >
       {slotPrefix && <span className={disabled ? 'text-disabled-500' : 'text-neutral-500'}>{slotPrefix}</span>}
-      <span className="flex flex-col w-full min-w-0">{children}</span>
+      <span className="w-full min-w-0">{children}</span>
       {slotSuffix && <span className={disabled ? 'text-disabled-500' : 'text-neutral-500'}>{slotSuffix}</span>}
     </Tag>
   );

diff --git a/packages/sfui/frameworks/vue/components/SfListItem/SfListItem.vue b/packages/sfui/frameworks/vue/components/SfListItem/SfListItem.vue
@@ -44,7 +44,7 @@ defineProps({
     <span v-if="$slots.prefix" :class="disabled ? 'text-disabled-500' : 'text-neutral-500'">
       <slot name="prefix" />
     </span>
-    <span class="flex flex-col w-full min-w-0">
+    <span class="w-full min-w-0">
       <slot />
     </span>
     <span v-if="$slots.suffix" :class="disabled ? 'text-disabled-500' : 'text-neutral-500'">