fix(ui-list): remove delimiter placeholder after last child

INSTUI-4639

Author: joyenjoyer

packages/ui-list/src/InlineList/InlineListItem/index.tsx

@@ -53,7 +53,8 @@ class InlineListItem extends Component<InlineListItemProps> {
     padding: 'none',
     spacing: 'none',
     delimiter: 'none',
-    size: 'medium'
+    size: 'medium',
+    lastPlaceholder: false
   }
 
   ref: Element | null = null
@@ -86,6 +87,7 @@ class InlineListItem extends Component<InlineListItemProps> {
       children,
       spacing,
       styles,
+      lastPlaceholder,
       ...rest
     } = this.props
 
@@ -101,7 +103,9 @@ class InlineListItem extends Component<InlineListItemProps> {
         elementRef={this.handleRef}
       >
         {children}
-        <span css={styles?.delimiter} aria-hidden="true" />
+        {!lastPlaceholder && (
+          <span css={styles?.delimiter} aria-hidden="true" />
+        )}
       </View>
     )
   }

packages/ui-list/src/InlineList/InlineListItem/props.ts

@@ -71,6 +71,10 @@ type InlineListItemOwnProps = {
    * provides a reference to the underlying html root element
    */
   elementRef?: (element: Element | null) => void
+  /**
+   * Used internally to mark the last item as a placeholder
+   */
+  lastPlaceholder?: boolean
 } & PropsWithChildren<unknown> // <unknown> is needed for React 17 compatibility
 
 type PropKeys = keyof InlineListItemOwnProps
@@ -100,7 +104,8 @@ const propTypes: PropValidators<PropKeys> = {
     'x-large',
     'xx-large'
   ]),
-  elementRef: PropTypes.func
+  elementRef: PropTypes.func,
+  lastPlaceholder: PropTypes.bool
 }
 
 const allowedProps: AllowedPropKeys = [

packages/ui-list/src/InlineList/__tests__/InlineList.test.tsx

@@ -75,7 +75,7 @@ describe('<InlineList />', () => {
     )
     const delimiters = container.querySelectorAll('span[aria-hidden="true"]')
 
-    expect(delimiters.length).toEqual(4)
+    expect(delimiters.length).toEqual(3)
     delimiters.forEach((delimiter) => {
       expect(delimiter.getAttribute('class')).toContain(
         'inlineListItem__delimiter'

packages/ui-list/src/InlineList/index.tsx

@@ -65,13 +65,19 @@ class InlineList extends Component<InlineListProps> {
   }
 
   renderChildren() {
-    return Children.map(this.props.children, (child) => {
-      if (!child) return // ignore null, falsy children
+    const childrenArray = Children.toArray(this.props.children)
+    const lastIndex = childrenArray.length - 1
+
+    return childrenArray.map((child, index) => {
+      if (!child) return null
+
+      const shouldRenderPlaceholder = index === lastIndex
 
       return safeCloneElement(child as ReactElement, {
         delimiter: this.props.delimiter,
         size: this.props.size,
-        spacing: this.props.itemSpacing
+        spacing: this.props.itemSpacing,
+        lastPlaceholder: shouldRenderPlaceholder
       })
     })
   }