fix: rework new list item view text crop behaviour

gravity-ui · Feb 2, 2024 · a27ae59 · a27ae59
1 parent 14559ea
commit a27ae59
Show file tree

Hide file tree

Showing 7 changed files with 185 additions and 58 deletions.
diff --git a/src/components/TreeSelect/TreeSelectItem/TreeSelectItem.tsx b/src/components/TreeSelect/TreeSelectItem/TreeSelectItem.tsx
@@ -10,18 +10,18 @@ const b = block('tree-select-item');
 
 export interface TreeSelectItemProps extends Omit<ListItemViewProps, 'as'> {
     as?: 'div' | 'li';
-    itemClassName?: string;
+    wrapperClassName?: string;
 }
 
 export const TreeSelectItem = React.forwardRef(function TreeSelectItem(
-    {as = 'div', className, itemClassName, ...props}: TreeSelectItemProps,
+    {as = 'div', className, wrapperClassName, ...props}: TreeSelectItemProps,
     ref?: any,
 ) {
     const Tag: React.ElementType = as;
 
     return (
-        <Tag ref={ref} className={b(null, className)}>
-            <ListItemView as={as} {...props} className={itemClassName} />
+        <Tag ref={ref} className={b(null, wrapperClassName)}>
+            <ListItemView as={as} {...props} className={className} />
         </Tag>
     );
 });
diff --git a/...ents/TreeSelect/__stories__/components/WithGroupSelectionControlledStateAndCustomIcon.tsx b/...ents/TreeSelect/__stories__/components/WithGroupSelectionControlledStateAndCustomIcon.tsx
@@ -53,7 +53,14 @@ export const WithGroupSelectionControlledStateAndCustomIconExample = ({
                 renderControlContent={mapCustomDataStructureToKnownProps}
                 expandedById={expandedById}
                 value={value}
-                renderItem={(item, state, {groupState}) => {
+                renderItem={(
+                    item,
+                    {
+                        expanded, // don't use default ListItemView expand icon
+                        ...state
+                    },
+                    {groupState},
+                ) => {
                     return (
                         <TreeSelectItem
                             {...state}
@@ -78,10 +85,7 @@ export const WithGroupSelectionControlledStateAndCustomIconExample = ({
                                             }));
                                         }}
                                     >
-                                        <Icon
-                                            data={state.expanded ? ChevronDown : ChevronUp}
-                                            size={16}
-                                        />
+                                        <Icon data={expanded ? ChevronDown : ChevronUp} size={16} />
                                     </Button>
                                 ) : undefined
                             }

diff --git a/src/components/TreeSelect/__stories__/components/WithItemLinksAndActionsExample.tsx b/src/components/TreeSelect/__stories__/components/WithItemLinksAndActionsExample.tsx
@@ -5,7 +5,7 @@ import {ChevronDown, ChevronUp, FolderOpen} from '@gravity-ui/icons';
 import {Button} from '../../../Button';
 import {DropdownMenu} from '../../../DropdownMenu';
 import {Icon} from '../../../Icon';
-import {Flex, spacing} from '../../../layout';
+import {Flex} from '../../../layout';
 import type {ListItemId} from '../../../useList';
 import {createRandomizedData} from '../../../useList/__stories__/utils/makeData';
 import {TreeSelect} from '../../TreeSelect';
@@ -42,7 +42,14 @@ export const WithItemLinksAndActionsExample = (props: WithItemLinksAndActionsExa
                     setOpen((x) => !x);
                 }}
                 expandedById={expandedById}
-                renderItem={(item, state, {groupState}) => {
+                renderItem={(
+                    item,
+                    {
+                        expanded, // don't use build in expand icon ListItemView behavior
+                        ...state
+                    },
+                    {groupState},
+                ) => {
                     return (
                         // eslint-disable-next-line jsx-a11y/anchor-is-valid
                         <a
@@ -76,7 +83,6 @@ export const WithItemLinksAndActionsExample = (props: WithItemLinksAndActionsExa
                                         <Button
                                             size="m"
                                             view="flat"
-                                            className={spacing({mr: 1})}
                                             onClick={(e) => {
                                                 e.stopPropagation();
                                                 e.preventDefault();
@@ -92,12 +98,18 @@ export const WithItemLinksAndActionsExample = (props: WithItemLinksAndActionsExa
                                             }}
                                         >
                                             <Icon
-                                                data={state.expanded ? ChevronDown : ChevronUp}
+                                                data={expanded ? ChevronDown : ChevronUp}
                                                 size={16}
                                             />
                                         </Button>
                                     ) : (
-                                        <Icon data={FolderOpen} size={16} />
+                                        <Flex
+                                            width={28}
+                                            justifyContent="center"
+                                            spacing={state.indentation > 0 ? {ml: 1} : undefined}
+                                        >
+                                            <Icon data={FolderOpen} size={16} />
+                                        </Flex>
                                     )
                                 }
                             />

diff --git a/src/components/useList/__stories__/components/FlattenList.tsx b/src/components/useList/__stories__/components/FlattenList.tsx
@@ -84,20 +84,14 @@ export const FlattenList = ({itemsCount, size}: FlattenListProps) => {
                     }
                 >
                     {(id) => {
-                        const {data, props, context} = getItemRenderState({
+                        const {data, props} = getItemRenderState({
                             id,
                             size,
                             onItemClick,
                             ...list,
                             ...listState,
                         });
-                        return (
-                            <ListItemView
-                                {...props}
-                                {...data}
-                                hasSelectionIcon={!context.groupState}
-                            />
-                        );
+                        return <ListItemView {...props} {...data} hasSelectionIcon={false} />;
                     }}
                 </VirtualizedListContainer>
             </ListContainerView>

diff --git a/src/components/useList/components/ListItemView/ListItemView.scss b/src/components/useList/components/ListItemView/ListItemView.scss
@@ -5,6 +5,11 @@ $block: '.#{variables.$ns}list-item-view';
 #{$block} {
     flex-shrink: 0;
 
+    &__main-content {
+        display: grid;
+        gap: var(--g-spacing-half, 2px);
+    }
+
     &:hover#{$block}_activeOnHover,
     &_active#{$block}_activeOnHover,
     &_active {
@@ -33,7 +38,13 @@ $block: '.#{variables.$ns}list-item-view';
         border-radius: var(--g-list-item-border-radius, 8px);
     }
 
+    &__icon {
+        flex-shrink: 0;
+    }
+
     &__slot {
+        flex-shrink: 0;
+
         &_indent_1 {
             width: 16px;
         }

diff --git a/src/components/useList/components/ListItemView/ListItemView.tsx b/src/components/useList/components/ListItemView/ListItemView.tsx
@@ -63,7 +63,12 @@ interface SlotProps extends FlexProps {
     indentation?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
 }
 
-export const Slot = ({children, indentation: indent = 1, className, ...props}: SlotProps) => {
+export const ListItemViewSlot = ({
+    children,
+    indentation: indent = 1,
+    className,
+    ...props
+}: SlotProps) => {
     return (
         <Flex className={b('slot', {indent}, className)} {...props}>
             {children}
@@ -73,7 +78,9 @@ export const Slot = ({children, indentation: indent = 1, className, ...props}: S
 
 const renderSafeIndentation = (indentation?: number) => {
     if (indentation && indentation >= 1 && indentation < 11) {
-        return <Slot indentation={Math.floor(indentation) as SlotProps['indentation']} />;
+        return (
+            <ListItemViewSlot indentation={Math.floor(indentation) as SlotProps['indentation']} />
+        );
     }
     return null;
 };
@@ -123,7 +130,7 @@ export const ListItemView = React.forwardRef(
                     spacing({px: 2}, className),
                 )}
                 style={{
-                    height: height ?? modToHeight[size][Number(Boolean(subtitle))],
+                    minHeight: height ?? modToHeight[size][Number(Boolean(subtitle))],
                     ...style,
                 }}
                 as={as}
@@ -136,25 +143,31 @@ export const ListItemView = React.forwardRef(
             >
                 <Flex gap="2" alignItems="center">
                     {hasSelectionIcon && (
-                        <Slot>
+                        <ListItemViewSlot // reserve space
+                        >
                             {selected ? (
                                 <Icon
                                     data={Check}
                                     size={16}
                                     className={colorText({color: 'info'})}
                                 />
                             ) : null}
-                        </Slot>
+                        </ListItemViewSlot>
                     )}
 
                     {renderSafeIndentation(indentation)}
 
-                    {startSlot ??
-                        (isGroup ? (
-                            <Icon data={expanded ? ChevronDown : ChevronUp} size={16} />
-                        ) : null)}
+                    {isGroup ? (
+                        <Icon
+                            className={b('icon', colorText({color: disabled ? 'hint' : undefined}))}
+                            data={expanded ? ChevronDown : ChevronUp}
+                            size={16}
+                        />
+                    ) : null}
+
+                    {startSlot}
 
-                    <Flex direction="column" gap="0.5">
+                    <div className={b('main-content')}>
                         {typeof title === 'string' ? (
                             <Text
                                 ellipsis
@@ -173,7 +186,7 @@ export const ListItemView = React.forwardRef(
                         ) : (
                             subtitle
                         )}
-                    </Flex>
+                    </div>
                 </Flex>
 
                 {endSlot}