diff --git a/.changeset/five-monkeys-provide.md b/.changeset/five-monkeys-provide.md new file mode 100644 index 000000000..d3fa27648 --- /dev/null +++ b/.changeset/five-monkeys-provide.md @@ -0,0 +1,5 @@ +--- +"@bigcommerce/big-design": patch +--- + +fix(component): add conditional rendering for tree component diff --git a/packages/big-design/src/components/StatefulTree/spec.tsx b/packages/big-design/src/components/StatefulTree/spec.tsx index b873349db..bc4b2d4c8 100644 --- a/packages/big-design/src/components/StatefulTree/spec.tsx +++ b/packages/big-design/src/components/StatefulTree/spec.tsx @@ -40,23 +40,27 @@ const nodes: Array> = [ }, ]; +const parentNodes = ['0', '1', '3', '4', '5']; + const getSimpleTree = (props: Partial> = {}) => ( ); test('renders non-selectable Tree by default', () => { - const { container, getAllByRole } = render(getSimpleTree()); + const { container, getAllByRole } = render(getSimpleTree({ defaultExpanded: parentNodes })); expect(container.querySelectorAll('label')).toHaveLength(0); - expect(getAllByRole('treeitem', { hidden: true })).toHaveLength(10); + expect(getAllByRole('treeitem')).toHaveLength(10); }); test('defaultExpanded items are expanded by default', () => { - const { getAllByRole, getByText } = render(getSimpleTree({ defaultExpanded: ['0'] })); + const { getAllByRole, getByText, queryByText } = render( + getSimpleTree({ defaultExpanded: ['0'] }), + ); expect(getAllByRole('treeitem')).toHaveLength(6); expect(getByText('Test Node 5')).toBeVisible(); - expect(getByText('Test Node 6')).not.toBeVisible(); + expect(queryByText('Test Node 6')).toBeNull(); }); test('onExpandedChange gets called when an item expansion happens', () => { @@ -83,7 +87,9 @@ test('onNodeClick gets called when an item click happens', () => { describe('selectable = multi', () => { test('renders nodes with checkboxes', () => { - const { container } = render(getSimpleTree({ selectable: 'multi' })); + const { container } = render( + getSimpleTree({ selectable: 'multi', defaultExpanded: parentNodes }), + ); const checkboxes = container.querySelectorAll('label'); @@ -92,7 +98,9 @@ describe('selectable = multi', () => { }); test('no items are selected by default', () => { - const { container } = render(getSimpleTree({ selectable: 'multi' })); + const { container } = render( + getSimpleTree({ selectable: 'multi', defaultExpanded: parentNodes }), + ); const checkboxes = container.querySelectorAll('label'); @@ -105,7 +113,11 @@ describe('selectable = multi', () => { test('defaultSelected items are selected by default', () => { const { container } = render( - getSimpleTree({ selectable: 'multi', defaultSelected: ['0', '6'] }), + getSimpleTree({ + selectable: 'multi', + defaultSelected: ['0', '6'], + defaultExpanded: parentNodes, + }), ); const selectedNodes = container.querySelectorAll('[aria-selected="true"]'); @@ -131,7 +143,9 @@ describe('selectable = multi', () => { describe('selectable = radio', () => { test('renders nodes with radios', () => { - const { container } = render(getSimpleTree({ selectable: 'radio' })); + const { container } = render( + getSimpleTree({ selectable: 'radio', defaultExpanded: parentNodes }), + ); const checkboxes = container.querySelectorAll('label'); @@ -140,7 +154,9 @@ describe('selectable = radio', () => { }); test('first selectable item is selected by default', () => { - const { container } = render(getSimpleTree({ selectable: 'radio' })); + const { container } = render( + getSimpleTree({ selectable: 'radio', defaultExpanded: parentNodes }), + ); const selectedNode = container.querySelector('[aria-selected="true"]'); const deselectedNodes = container.querySelectorAll('[aria-selected="false"]'); @@ -150,7 +166,9 @@ describe('selectable = radio', () => { }); test('defaultSelected item is selected by default', () => { - const { container } = render(getSimpleTree({ selectable: 'radio', defaultSelected: ['2'] })); + const { container } = render( + getSimpleTree({ selectable: 'radio', defaultSelected: ['2'], defaultExpanded: parentNodes }), + ); const selectedNode = container.querySelector('[aria-selected="true"]'); const deselectedNodes = container.querySelectorAll('[aria-selected="false"]'); @@ -162,7 +180,11 @@ describe('selectable = radio', () => { test('first defaultSelected item is selected by default from list', () => { const { container } = render( - getSimpleTree({ selectable: 'radio', defaultSelected: ['2', '6'] }), + getSimpleTree({ + selectable: 'radio', + defaultSelected: ['2', '6'], + defaultExpanded: parentNodes, + }), ); const selectedNode = container.querySelector('[aria-selected="true"]'); diff --git a/packages/big-design/src/components/Tree/TreeNode/TreeNode.tsx b/packages/big-design/src/components/Tree/TreeNode/TreeNode.tsx index 6672203d1..6a3df253a 100644 --- a/packages/big-design/src/components/Tree/TreeNode/TreeNode.tsx +++ b/packages/big-design/src/components/Tree/TreeNode/TreeNode.tsx @@ -145,8 +145,9 @@ const InternalTreeNode = ({ const renderedChildren = useMemo( () => - children && ( - + children && + isExpanded && ( + {children.map((child, index) => ( ))} diff --git a/packages/big-design/src/components/Tree/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Tree/__snapshots__/spec.tsx.snap index 3a9ecbbef..24d680c0e 100644 --- a/packages/big-design/src/components/Tree/__snapshots__/spec.tsx.snap +++ b/packages/big-design/src/components/Tree/__snapshots__/spec.tsx.snap @@ -3,7 +3,7 @@ exports[`renders simple tree 1`] = `
    @@ -70,123 +70,6 @@ exports[`renders simple tree 1`] = ` Test Node 0 -
      - -
`; diff --git a/packages/big-design/src/components/Tree/spec.tsx b/packages/big-design/src/components/Tree/spec.tsx index fc7779191..966947b6d 100644 --- a/packages/big-design/src/components/Tree/spec.tsx +++ b/packages/big-design/src/components/Tree/spec.tsx @@ -199,11 +199,11 @@ test('renders expanded nodes', () => { }); const node5 = screen.getByText('Test Node 5'); - const node6 = screen.getByText('Test Node 6'); + const node6 = screen.queryByText('Test Node 6'); const node9 = screen.getByText('Test Node 9'); expect(node5).toBeVisible(); - expect(node6).not.toBeVisible(); + expect(node6).toBeNull(); expect(node9).toBeVisible(); }); diff --git a/packages/big-design/src/components/Tree/styled.ts b/packages/big-design/src/components/Tree/styled.ts index 816eed468..430414d74 100644 --- a/packages/big-design/src/components/Tree/styled.ts +++ b/packages/big-design/src/components/Tree/styled.ts @@ -1,5 +1,5 @@ import { theme as defaultTheme } from '@bigcommerce/big-design-theme'; -import styled, { css } from 'styled-components'; +import styled from 'styled-components'; export const StyledUl = styled.ul<{ show?: boolean }>` list-style-type: none; @@ -11,12 +11,6 @@ export const StyledUl = styled.ul<{ show?: boolean }>` padding-left: ${({ theme }) => theme.helpers.addValues(theme.spacing.xLarge, theme.spacing.xxSmall)}; } - - ${({ show }) => - show === false && - css` - display: none; - `} `; StyledUl.defaultProps = { theme: defaultTheme };