feat(useList): added migration guide to set of useList components (#1728

)
gravity-ui · Aug 1, 2024 · 69283f1 · 69283f1
1 parent 0e22bde
commit 69283f1
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 7 deletions.
diff --git a/src/components/useList/__stories__/components/ListWithDnd.tsx b/src/components/useList/__stories__/components/ListWithDnd.tsx
@@ -81,11 +81,6 @@ export const ListWithDnd = ({size, itemsCount, 'aria-label': ariaLabel}: ListWit
                                         list,
                                     });
 
-                                    console.log(
-                                        '🚀 ~ {list.structure.visibleFlattenIds.map ~ props:',
-                                        props,
-                                    );
-
                                     return (
                                         <Draggable
                                             draggableId={String(index)}

diff --git a/src/components/useList/__stories__/docs/list-item-view.md b/src/components/useList/__stories__/docs/list-item-view.md
@@ -70,6 +70,7 @@ const List = () => {
 | dragging         | manage view of dragging element. Required for draggable list implementation                                                                                |       `boolean`       |         |
 | indentation      | Affects the visual indentation of the element content                                                                                                      |       `number `       |         |
 | hasSelectionIcon | Show selected icon if selected and reserve space for this icon                                                                                             |      `boolean `       |         |
-| endSlot          | Custom slot before `title`                                                                                                                                 |   `React.ReactNode`   |         |
-| expanded         | Adds a visual representation of a group element if the value is different from `undefined`                                                                 | `string \| undefined` |         |
+| isGroup          | Applies group styles view to list element                                                                                                                  |       `boolean`       |         |
+| expanded         | Control group item view state expended/closed                                                                                                              | `string \| undefined` |         |
 | startSlot        | Custom slot before `title`                                                                                                                                 |   `React.ReactNode`   |         |
+| endSlot          | Custom slot after `title`                                                                                                                                  |   `React.ReactNode`   |         |
diff --git a/src/components/useList/migration-guide.md b/src/components/useList/migration-guide.md
@@ -0,0 +1,78 @@
+# 6.23
+
+## ListItemView:
+
+- changed prop `hasSelectionIcon?: boolean` to prop `selectionViewType?: 'multiple' | 'single'` with default value `multiple`;
+- now mix of ccs class works that applied at root of component;
+- ability to set item height by css custom property `--g-list-item-height`;
+- new ability to pass custom react node as `content` prop;
+
+```diff
+    <ListItemView
+-        hasSelectionIcon={hasSelectionIcon}
++        selectionViewType="multiple"
+         selected={selected}
+         height={height}
+         active={active}
+         activeOnHover={activeOnHover}
+         onClick={handleClick(props)}
+-        indentation={indentation}
+-        expanded={selected}
+-        title={title}
+-        subtitle={subtitle}
+-        startSlot={startSlot}
+-        endSlot={endSlot}
++        content={{
++            isGroup,
++            indentation,
++            expanded,
++            title,
++            subtitle,
++            startSlot,
++            endSlot,
+        }}
+    />
+```
+
+## TreeList:
+
+- changed `mapItemDataToProps` prop name to `mapItemDataToContentProps`:
+
+```diff
+    <TreeList<{title: string}>
+        size="l"
+        list={list}
+-       mapItemDataToProps={item => ({title: item.text})}
++       mapItemDataToContentProps={item => ({title: item.text})}
+        multiple={multiple}
+        renderItem={({props, context: {childrenIds}}) => {
+            return (
+                <ListItemView
+                    {...props}
+-                   endSlot={childrenIds ? <Label>{childrenIds.length}</Label> : undefined}
++                   content={{
++                   ...props.content,
++                   endSlot: childrenIds ? (
++                       <Label>{childrenIds.length}</Label>
++                       ) : undefined,
+                    }}
+                />
+            )
+        })}
+    />
+```
+
+## getItemRenderState:
+
+- changed `mapItemDataToProps` prop name to `mapItemDataToContentProps`:
+
+```diff
+const {props, context} = getItemRenderState({
+    id,
+    size,
+    onItemClick,
+-   mapItemDataToProps: (x) => x,
++   mapItemDataToContentProps: (x) => x,
+    list,
+});
+```