chore: swap default expand icon for collapse component (#491)

Co-authored-by: Gaby Zifferman <[email protected]>
mParticle · Dec 19, 2024 · ad063f5 · ad063f5
1 parent c0e3048
commit ad063f5
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 12 deletions.
diff --git a/docs/UX Patterns/Table/Table.stories.tsx b/docs/UX Patterns/Table/Table.stories.tsx
@@ -23,8 +23,6 @@ import { tableColumns, tableData, type TableDataType } from './TableStoryUtils'
 import { SelectWithRangePicker } from 'docs/Candidate Components/Directory/Date Range Filter/SelectWithRangePicker'
 import { useState } from 'react'
 import { ColorTextDescription } from 'src/styles/style'
-import MinusSquareOutlined from '@ant-design/icons/MinusSquareOutlined'
-import PlusSquareOutlined from '@ant-design/icons/PlusSquareOutlined'
 
 const meta: Meta<typeof Table> = {
   title: 'UX Patterns/Table/Table',
@@ -110,11 +108,7 @@ const CollapsibleSection = ({ ...item }: ICollapsibleFormSectionProps): React.JS
           },
         },
       }}>
-      <Collapse
-        ghost
-        expandIcon={({ isActive }): React.JSX.Element => (isActive ? <MinusSquareOutlined /> : <PlusSquareOutlined />)}
-        items={[{ ...item, key: 'item' }]}
-      />
+      <Collapse ghost items={[{ ...item, key: 'item' }]} />
     </ConfigProvider>
   )
 }

diff --git a/src/components/data-display/Collapse/Collapse.stories.tsx b/src/components/data-display/Collapse/Collapse.stories.tsx
@@ -1,7 +1,7 @@
-import { type Meta, type StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 import { Collapse } from 'src/components/data-display/Collapse/Collapse'
 import { ExampleStory } from 'src/utils/ExampleStory'
-import { type ICollapseProps } from 'src/components/data-display/Collapse/Collapse'
+import type { ICollapseProps } from 'src/components/data-display/Collapse/Collapse'
 import { Divider, Icon, Space } from 'src/components'
 import { theme } from 'antd'
 import { Select } from 'src/components'
@@ -42,7 +42,6 @@ const meta: Meta<typeof Collapse> = {
     collapsible: undefined,
     defaultActiveKey: undefined,
     destroyInactivePanel: false,
-    expandIcon: undefined,
     expandIconPosition: undefined,
     ghost: false,
     size: 'middle',

diff --git a/src/components/data-display/Collapse/Collapse.tsx b/src/components/data-display/Collapse/Collapse.tsx
@@ -1,13 +1,18 @@
 import { Collapse as AntCollapse } from 'antd'
 import type { CollapseProps as AntCollapseProps } from 'antd'
-import { ConfigProvider } from 'src/components'
+import { ConfigProvider, Icon } from 'src/components'
 
 export interface ICollapseProps extends AntCollapseProps {}
 
 export const Collapse = (props: ICollapseProps) => {
   return (
     <ConfigProvider>
-      <AntCollapse {...props} />
+      <AntCollapse
+        expandIcon={({ isActive }): React.JSX.Element =>
+          isActive ? <Icon name="dropdownOpen" size="sm" /> : <Icon name="next" size="sm" />
+        }
+        {...props}
+      />
     </ConfigProvider>
   )
 }