chore: resolve PR convos -- button alignment, changelog, etc

aragon · Sep 17, 2024 · 91a0623 · 91a0623
1 parent c881ad4
commit 91a0623
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 19 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -18,8 +18,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 -   Bump `micromatch` from 4.0.7 to 4.0.8
 -   Bump `webpack` from 5.91.0 to 5.94.0
 -   Update layout of `EmptyState` for centering
--   Update `AccordionItem` and `ProposalAction` usage for border with new optional custom heading prop for activating
-    `Heading` sub component
+-   Update `AccordionItem` and `ProposalAction` usage for border
 -   Bump `actions/setup-python` from 5.1.1 to 5.2.0
 
 ## [1.0.45] - 2024-08-23

diff --git a/src/modules/components/proposal/proposalActions/proposalActions/proposalActions.stories.tsx b/src/modules/components/proposal/proposalActions/proposalActions/proposalActions.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { Button } from '../../../../../core';
 import {
     generateProposalAction,
     generateProposalActionUpdateMetadata,
@@ -136,4 +137,32 @@ export const EmptyActions: Story = {
     },
 };
 
+export const WithChildren: Story = {
+    args: {
+        actionNames: { WITHDRAW_TOKEN: 'Withdraw assets', ADD_MEMBERS: 'Add members' },
+        actions: [
+            generateProposalActionWithdrawToken({
+                to: '0x6B175474E89094C44Da98b954EedeAC495271d0F',
+                value: '1000000000000000000',
+                data: '0x',
+                token: generateToken({
+                    name: 'Ether',
+                    symbol: 'ETH',
+                    logo: 'https://cryptologos.cc/logos/ethereum-eth-logo.png',
+                    priceUsd: '2800',
+                }),
+            }),
+            generateProposalActionUpdateMetadata({ data: 'update-data' }),
+        ],
+    },
+
+    render: (args) => {
+        return (
+            <ProposalActions {...args}>
+                <Button size="md">Execute actions</Button>
+            </ProposalActions>
+        );
+    },
+};
+
 export default meta;
diff --git a/src/modules/components/proposal/proposalActions/proposalActions/proposalActions.test.tsx b/src/modules/components/proposal/proposalActions/proposalActions/proposalActions.test.tsx
@@ -114,11 +114,9 @@ describe('<ProposalActions /> component', () => {
     });
 
     it('renders an empty state if no actions are provided', () => {
-        const emptyStateDescription = 'Custom empty state description';
         const actions: IProposalAction[] = [];
-        render(createTestComponent({ actions, emptyStateDescription }));
+        render(createTestComponent({ actions }));
         expect(screen.getByText(modulesCopy.proposalActionsContainer.empty.heading)).toBeInTheDocument();
-        expect(screen.getByText(emptyStateDescription)).toBeInTheDocument();
     });
 
     it('renders a custom empty state description if provided', () => {

diff --git a/src/modules/components/proposal/proposalActions/proposalActions/proposalActions.tsx b/src/modules/components/proposal/proposalActions/proposalActions/proposalActions.tsx
@@ -57,6 +57,11 @@ export const ProposalActions: React.FC<IProposalActionsProps> = (props) => {
 
     const handleAccordionValueChange = (value: string[] = []) => setExpandedItems(value);
 
+    const footerClassNames = classNames(
+        'mt-1 flex w-full flex-col justify-between gap-y-3 px-4 pb-4 md:flex-row-reverse md:items-end md:px-6 md:pb-6',
+        { hidden: actions.length === 0 && children == null },
+    );
+
     return (
         <Card className={classNames('w-full overflow-hidden', className)}>
             <Accordion.Container
@@ -65,7 +70,7 @@ export const ProposalActions: React.FC<IProposalActionsProps> = (props) => {
                 value={expandedItems}
                 onValueChange={handleAccordionValueChange}
             >
-                {actions?.map((action, index) => (
+                {actions.map((action, index) => (
                     <ProposalActionsAction
                         key={`action-${index}`}
                         action={action}
@@ -83,20 +88,13 @@ export const ProposalActions: React.FC<IProposalActionsProps> = (props) => {
                         objectIllustration={{ object: 'SMART_CONTRACT' }}
                     />
                 )}
-                <div className="flex md:flex-col">
+                <div className={footerClassNames}>
                     {actions.length > 1 && (
-                        <div className="mt-1 flex w-full flex-col justify-between gap-y-3 px-4 pb-4 md:flex-row md:px-6 md:pb-6">
-                            <Button
-                                onClick={handleToggleAll}
-                                variant="tertiary"
-                                size="md"
-                                className="shrink-0 md:w-fit"
-                            >
-                                {expandedItems.length === actions.length
-                                    ? copy.proposalActionsContainer.collapse
-                                    : copy.proposalActionsContainer.expand}
-                            </Button>
-                        </div>
+                        <Button onClick={handleToggleAll} variant="tertiary" size="md" className="shrink-0 md:w-fit">
+                            {expandedItems.length === actions.length
+                                ? copy.proposalActionsContainer.collapse
+                                : copy.proposalActionsContainer.expand}
+                        </Button>
                     )}
                     {children}
                 </div>