From f523a5eb32ad5bca4506f45fa276c02a7b7b2c89 Mon Sep 17 00:00:00 2001
From: Milos Dzepina <milos@aragon.org>
Date: Thu, 12 Jun 2025 15:57:48 +0100
Subject: [PATCH 1/5] Update DataListItem to wrap in div when non interactive

Signed-off-by: Milos Dzepina <milos@aragon.org>
---
 .../dataListItem/dataListItem.test.tsx        | 19 ++++++++++++++++---
 .../dataList/dataListItem/dataListItem.tsx    | 15 +++++++++++----
 2 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/src/core/components/dataList/dataListItem/dataListItem.test.tsx b/src/core/components/dataList/dataListItem/dataListItem.test.tsx
index 4a7ae7462..9f0b28f60 100644
--- a/src/core/components/dataList/dataListItem/dataListItem.test.tsx
+++ b/src/core/components/dataList/dataListItem/dataListItem.test.tsx
@@ -58,9 +58,22 @@ describe('<DataList.Item /> component', () => {
         expect(button.classList).toContain('cursor-pointer');
     });
 
-    it('renders the item as a non interactive button when both onClick and href property are not set', () => {
-        const props = { onClick: undefined, href: undefined };
+    it('renders the item as a non interactive div when both onClick and href property are not set', () => {
+        const props = { children: 'test-data-list-item', onClick: undefined, href: undefined };
         render(createTestComponent({ props }));
-        expect(screen.getByRole('button').classList).not.toContain('cursor-pointer');
+        const button = screen.queryByRole('button', { name: props.children });
+        const link = screen.queryByRole('link', { name: props.children });
+        const text = screen.getByText(props.children);
+        expect(button).not.toBeInTheDocument();
+        expect(link).not.toBeInTheDocument();
+        expect(text).toBeInTheDocument();
+    });
+
+    it('renders the item as an interactive button when onClick property is set', () => {
+        const props = { children: 'test-data-list-item', onClick: jest.fn() };
+        render(createTestComponent({ props }));
+        const button = screen.getByRole('button', { name: props.children });
+        expect(button).toBeInTheDocument();
+        expect(button.classList).toContain('cursor-pointer');
     });
 });
diff --git a/src/core/components/dataList/dataListItem/dataListItem.tsx b/src/core/components/dataList/dataListItem/dataListItem.tsx
index 38da467ac..bb231770f 100644
--- a/src/core/components/dataList/dataListItem/dataListItem.tsx
+++ b/src/core/components/dataList/dataListItem/dataListItem.tsx
@@ -1,9 +1,12 @@
 import classNames from 'classnames';
-import { type AnchorHTMLAttributes, type ButtonHTMLAttributes, useContext } from 'react';
+import { type AnchorHTMLAttributes, type ButtonHTMLAttributes, type HTMLAttributes, useContext } from 'react';
 import { LinkBase } from '../../link';
 import { dataListContext } from '../dataListContext';
 
-export type IDataListItemProps = ButtonHTMLAttributes<HTMLButtonElement> | AnchorHTMLAttributes<HTMLAnchorElement>;
+export type IDataListItemProps =
+    | ButtonHTMLAttributes<HTMLButtonElement>
+    | AnchorHTMLAttributes<HTMLAnchorElement>
+    | HTMLAttributes<HTMLDivElement>;
 
 export const DataListItem: React.FC<IDataListItemProps> = (props) => {
     const { className, ...otherProps } = props;
@@ -33,11 +36,15 @@ export const DataListItem: React.FC<IDataListItemProps> = (props) => {
         tabIndex: isSkeletonElement ? -1 : 0,
     };
 
-    if (!isLinkElement) {
+    if (isLinkElement) {
+        return <LinkBase {...commonProps} {...otherProps} />;
+    }
+
+    if (isInteractiveElement) {
         const { type = 'button', ...buttonProps } = otherProps as ButtonHTMLAttributes<HTMLButtonElement>;
 
         return <button type={type} {...commonProps} {...buttonProps} />;
     }
 
-    return <LinkBase {...commonProps} {...otherProps} />;
+    return <div {...commonProps} {...(otherProps as HTMLAttributes<HTMLDivElement>)} />;
 };

From 7c1789e7da819ff7fa74fc01922d4ffe22c7bbd6 Mon Sep 17 00:00:00 2001
From: Milos Dzepina <milos@aragon.org>
Date: Thu, 12 Jun 2025 16:32:47 +0100
Subject: [PATCH 2/5] Fix type error

Signed-off-by: Milos Dzepina <milos@aragon.org>
---
 .../components/dataList/dataListItem/dataListItem.stories.tsx   | 2 +-
 .../proposalDataListItemStructure.tsx                           | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/core/components/dataList/dataListItem/dataListItem.stories.tsx b/src/core/components/dataList/dataListItem/dataListItem.stories.tsx
index e543c62d9..55bd38091 100644
--- a/src/core/components/dataList/dataListItem/dataListItem.stories.tsx
+++ b/src/core/components/dataList/dataListItem/dataListItem.stories.tsx
@@ -20,7 +20,7 @@ type Story = StoryObj<typeof DataList.Item>;
 export const Default: Story = {
     args: {
         children: 'Data list item',
-        className: 'min-h-12',
+        className: 'flex items-center min-h-12',
     },
 };
 
diff --git a/src/modules/components/proposal/proposalDataListItem/proposalDataListItemStructure/proposalDataListItemStructure.tsx b/src/modules/components/proposal/proposalDataListItem/proposalDataListItemStructure/proposalDataListItemStructure.tsx
index e459923f0..cbc2ed4e3 100644
--- a/src/modules/components/proposal/proposalDataListItem/proposalDataListItemStructure/proposalDataListItemStructure.tsx
+++ b/src/modules/components/proposal/proposalDataListItem/proposalDataListItemStructure/proposalDataListItemStructure.tsx
@@ -22,7 +22,6 @@ export const ProposalDataListItemStructure: React.FC<IProposalDataListItemStruct
         wagmiConfig: config,
         id,
         className,
-        type,
         date,
         tag,
         publisher,

From 979a143af94840fd493694c47148745a0d7779d4 Mon Sep 17 00:00:00 2001
From: Milos Dzepina <milos@aragon.org>
Date: Thu, 12 Jun 2025 16:41:24 +0100
Subject: [PATCH 3/5] Add changeset

Signed-off-by: Milos Dzepina <milos@aragon.org>
---
 .changeset/slow-colts-pick.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/slow-colts-pick.md

diff --git a/.changeset/slow-colts-pick.md b/.changeset/slow-colts-pick.md
new file mode 100644
index 000000000..118e9cbc6
--- /dev/null
+++ b/.changeset/slow-colts-pick.md
@@ -0,0 +1,5 @@
+---
+'@aragon/gov-ui-kit': minor
+---
+
+Update `DataListItem` to wrap in `div` when non-interactive

From 6adc9765f93448cf621608e18a84ad1cbe06e492 Mon Sep 17 00:00:00 2001
From: Milos Dzepina <milos@aragon.org>
Date: Mon, 16 Jun 2025 11:57:02 +0200
Subject: [PATCH 4/5] Remove isSkeleton flag

Signed-off-by: Milos Dzepina <milos@aragon.org>
---
 .../dataListContainerSkeletonLoader.tsx       |  7 +++++-
 .../dataListItem/dataListItem.test.tsx        | 14 -----------
 .../dataList/dataListItem/dataListItem.tsx    | 24 ++++---------------
 3 files changed, 11 insertions(+), 34 deletions(-)

diff --git a/src/core/components/dataList/dataListContainer/dataListContainerSkeletonLoader.tsx b/src/core/components/dataList/dataListContainer/dataListContainerSkeletonLoader.tsx
index 28225140c..f25e89fb0 100644
--- a/src/core/components/dataList/dataListContainer/dataListContainerSkeletonLoader.tsx
+++ b/src/core/components/dataList/dataListContainer/dataListContainerSkeletonLoader.tsx
@@ -4,7 +4,12 @@ export interface IDataListContainerSkeletonLoaderProps {}
 
 export const DataListContainerSkeletonLoader: React.FC<IDataListContainerSkeletonLoaderProps> = () => {
     return (
-        <DataListItem className="flex animate-pulse flex-col gap-3">
+        <DataListItem
+            className="flex animate-pulse flex-col gap-3 py-4 md:py-6"
+            tabIndex={0}
+            aria-busy="true"
+            aria-label="loading"
+        >
             <div className="h-5 w-1/3 rounded-full bg-neutral-50" />
             <div className="flex flex-col gap-1.5">
                 <div className="h-4 grow rounded-full bg-neutral-50" />
diff --git a/src/core/components/dataList/dataListItem/dataListItem.test.tsx b/src/core/components/dataList/dataListItem/dataListItem.test.tsx
index 9f0b28f60..2df8a58f1 100644
--- a/src/core/components/dataList/dataListItem/dataListItem.test.tsx
+++ b/src/core/components/dataList/dataListItem/dataListItem.test.tsx
@@ -31,20 +31,6 @@ describe('<DataList.Item /> component', () => {
         expect(link.classList).toContain('cursor-pointer');
     });
 
-    it('marks the item as hidden when the data list is on initialLoading state', () => {
-        const context = { state: 'initialLoading' as const };
-        const props = { href: '/test' };
-        render(createTestComponent({ context, props }));
-        expect(screen.queryByRole('link')).not.toBeInTheDocument();
-    });
-
-    it('marks the item as hidden when the data list is on loading state with no elements being currently rendered', () => {
-        const context = { state: 'loading' as const, childrenItemCount: 0 };
-        const props = { href: '/test' };
-        render(createTestComponent({ context, props }));
-        expect(screen.queryByRole('link')).not.toBeInTheDocument();
-    });
-
     it('does not throw error when not placed inside the DataListContextProvider', () => {
         const context = null;
         expect(() => render(createTestComponent({ context }))).not.toThrow();
diff --git a/src/core/components/dataList/dataListItem/dataListItem.tsx b/src/core/components/dataList/dataListItem/dataListItem.tsx
index bb231770f..d03fc5693 100644
--- a/src/core/components/dataList/dataListItem/dataListItem.tsx
+++ b/src/core/components/dataList/dataListItem/dataListItem.tsx
@@ -1,7 +1,6 @@
 import classNames from 'classnames';
-import { type AnchorHTMLAttributes, type ButtonHTMLAttributes, type HTMLAttributes, useContext } from 'react';
+import { type AnchorHTMLAttributes, type ButtonHTMLAttributes, type HTMLAttributes } from 'react';
 import { LinkBase } from '../../link';
-import { dataListContext } from '../dataListContext';
 
 export type IDataListItemProps =
     | ButtonHTMLAttributes<HTMLButtonElement>
@@ -11,15 +10,8 @@ export type IDataListItemProps =
 export const DataListItem: React.FC<IDataListItemProps> = (props) => {
     const { className, ...otherProps } = props;
 
-    // Use the dataListContext directly to support usage of DataListItem component outside the DataListContextProvider.
-    const { state, childrenItemCount } = useContext(dataListContext) ?? {};
-
-    // The DataListElement is a skeleton element on initial loading or loading state when no items are being
-    // rendered (e.g. after a reset filters action)
-    const isSkeletonElement = state === 'initialLoading' || (state === 'loading' && childrenItemCount === 0);
-
     const isLinkElement = 'href' in otherProps && otherProps.href != null && otherProps.href !== '';
-    const isInteractiveElement = !isSkeletonElement && (isLinkElement || props.onClick != null);
+    const isInteractiveElement = isLinkElement || props.onClick != null;
 
     const actionItemClasses = classNames(
         'w-full rounded-xl border border-neutral-100 bg-neutral-0 px-4 text-left shadow-neutral-sm transition-all', // Default
@@ -30,21 +22,15 @@ export const DataListItem: React.FC<IDataListItemProps> = (props) => {
         className,
     );
 
-    const commonProps = {
-        className: actionItemClasses,
-        'aria-hidden': isSkeletonElement,
-        tabIndex: isSkeletonElement ? -1 : 0,
-    };
-
     if (isLinkElement) {
-        return <LinkBase {...commonProps} {...otherProps} />;
+        return <LinkBase className={actionItemClasses} {...otherProps} />;
     }
 
     if (isInteractiveElement) {
         const { type = 'button', ...buttonProps } = otherProps as ButtonHTMLAttributes<HTMLButtonElement>;
 
-        return <button type={type} {...commonProps} {...buttonProps} />;
+        return <button type={type} className={actionItemClasses} {...buttonProps} />;
     }
 
-    return <div {...commonProps} {...(otherProps as HTMLAttributes<HTMLDivElement>)} />;
+    return <div className={actionItemClasses} {...(otherProps as HTMLAttributes<HTMLDivElement>)} />;
 };

From 599c43ac2aa0e3a6cb61b59ccd26d08edca9a050 Mon Sep 17 00:00:00 2001
From: Milos Dzepina <milos@aragon.org>
Date: Mon, 16 Jun 2025 11:57:30 +0200
Subject: [PATCH 5/5] Update .changeset/slow-colts-pick.md

Co-authored-by: cgero.eth <ruggero.cino@gmail.com>
Signed-off-by: Milos Dzepina <milos@aragon.org>
---
 .changeset/slow-colts-pick.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/slow-colts-pick.md b/.changeset/slow-colts-pick.md
index 118e9cbc6..733a2b52b 100644
--- a/.changeset/slow-colts-pick.md
+++ b/.changeset/slow-colts-pick.md
@@ -2,4 +2,4 @@
 '@aragon/gov-ui-kit': minor
 ---
 
-Update `DataListItem` to wrap in `div` when non-interactive
+Update `DataListItem` component to wrap in `div` when non-interactive