fix label width of selectlist in stories

marigold-ui · Oct 7, 2024 · b8ed587 · b8ed587
1 parent 20e67fc
commit b8ed587
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 9 deletions.
diff --git a/docs/content/components/collection/selectlist/selectlist.mdx b/docs/content/components/collection/selectlist/selectlist.mdx
@@ -29,12 +29,18 @@ import { SelectList } from '@marigold/components';
 
 This example shows the standard appearance for `SelectList` component.
 
-<ComponentDemo file="./selectlist-basic.demo.tsx" />
+<ComponentDemo disableLabelWidth file="./selectlist-basic.demo.tsx" />
 
 ### SelectList with single selection mode
 
-<ComponentDemo file="./selectlist-single-selection.demo.tsx" />
+<ComponentDemo
+  disableLabelWidth
+  file="./selectlist-single-selection.demo.tsx"
+/>
 
 ### SelectList with multiple selection mode
 
-<ComponentDemo file="./selectlist-multiple-selection.demo.tsx" />
+<ComponentDemo
+  disableLabelWidth
+  file="./selectlist-multiple-selection.demo.tsx"
+/>
diff --git a/packages/components/src/SelectList/SelectList.stories.tsx b/packages/components/src/SelectList/SelectList.stories.tsx
@@ -5,6 +5,9 @@ import { SelectList } from './SelectList';
 
 const meta = {
   title: 'Components/SelectList',
+  parameters: {
+    disableLabelWidth: true,
+  },
   argTypes: {
     selectionMode: {
       control: {

diff --git a/packages/components/src/SelectList/SelectListItem.tsx b/packages/components/src/SelectList/SelectListItem.tsx
@@ -22,15 +22,11 @@ const _SelectListItem = forwardRef<HTMLDivElement, SelectListItemProps>(
           'items-center group-data-[layout=grid]/list:flex-row',
           classNames?.option
         )}
-        ref={ref as Ref<HTMLDivElement>}
+        ref={ref}
       >
         {({ selectionMode }) => (
           <>
-            {selectionMode === 'multiple' && (
-              <FieldGroup>
-                <Checkbox slot="selection" />
-              </FieldGroup>
-            )}
+            {selectionMode === 'multiple' && <Checkbox slot="selection" />}
             {children}
           </>
         )}