Skip to content

Commit

Permalink
refactor(dropdown): use Popper.js for positioning
Browse files Browse the repository at this point in the history
  • Loading branch information
@denkristoffer
denkristoffer committed Oct 25, 2020
1 parent 3b759dc commit 6db8d89
Show file tree
Hide file tree
Showing 20 changed files with 847 additions and 814 deletions.
5 changes: 5 additions & 0 deletions packages/components/forma-36-react-timepicker/jest.config.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
module.exports = {
moduleNameMapper: {
'^react($|/.+)': '<rootDir>/node_modules/react$1',
},
};
4 changes: 2 additions & 2 deletions packages/components/forma-36-react-timepicker/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,8 @@
"@types/react": "^16.9.11",
"@types/react-dom": "^16.9.3",
"husky": "^3.0.9",
"react": "16.10.2",
"react-dom": "16.10.2",
"react": "^16.8.3",
"react-dom": "^16.8.3",
"tsdx": "^0.11.0",
"tslib": "^1.10.0",
"typescript": "^3.6.4"
Expand Down
8 changes: 4 additions & 4 deletions ...a-36-react-components/src/components/Card/AssetCard/__snapshots__/AssetCard.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -169,23 +169,23 @@ exports[`renders the component with actions 1`] = `
<DropdownList
testId="cf-ui-dropdown-list"
>
<DropdownListItem
<ForwardRef
isActive={false}
isDisabled={false}
isTitle={true}
testId="cf-ui-dropdown-list-item"
>
Actions
</DropdownListItem>
<DropdownListItem
</ForwardRef>
<ForwardRef
isActive={false}
isDisabled={false}
isTitle={false}
onClick={[Function]}
testId="cf-ui-dropdown-list-item"
>
Edit
</DropdownListItem>
</ForwardRef>
</DropdownList>
</CardActions>
</div>
Expand Down
5 changes: 2 additions & 3 deletions packages/forma-36-react-components/src/components/Card/CardActions/CardActions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@ export interface CardActionsPropTypes {
* The DropdownList elements used to render an actions dropdown for the component
*/
children:
| React.ReactElement<DropdownList>
| React.ReactElement<DropdownList>[];
| React.ReactElement<typeof DropdownList>
| React.ReactElement<typeof DropdownList>[];
/**
* An ID used for testing purposes applied as a data attribute (data-test-id)
*/
Expand Down Expand Up @@ -73,7 +73,6 @@ export class CardActions extends Component<
});
}}
position="bottom-right"
isAutoalignmentEnabled={false}
className={className}
isOpen={this.state.isDropdownOpen}
testId={testId}
Expand Down
69 changes: 32 additions & 37 deletions ...-react-components/src/components/Card/CardActions/__snapshots__/CardActions.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
exports[`renders the component as disabled 1`] = `
<Dropdown
getContainerRef={[Function]}
isAutoalignmentEnabled={false}
isOpen={false}
onClose={[Function]}
position="bottom-right"
Expand All @@ -29,23 +28,22 @@ exports[`renders the component as disabled 1`] = `
onClick={[Function]}
testId="cf-ui-dropdown-list"
>
<DropdownListItem
<ForwardRef
isActive={false}
isDisabled={false}
isTitle={false}
onClick={[Function]}
testId="cf-ui-dropdown-list-item"
>
Edit
</DropdownListItem>
</ForwardRef>
</DropdownList>
</Dropdown>
`;

exports[`renders the component using a multiple dropdown lists 1`] = `
<Dropdown
getContainerRef={[Function]}
isAutoalignmentEnabled={false}
isOpen={false}
onClose={[Function]}
position="bottom-right"
Expand All @@ -71,74 +69,73 @@ exports[`renders the component using a multiple dropdown lists 1`] = `
onClick={[Function]}
testId="cf-ui-dropdown-list"
>
<DropdownListItem
<ForwardRef
isActive={false}
isDisabled={false}
isTitle={false}
onClick={[Function]}
testId="cf-ui-dropdown-list-item"
>
Edit
</DropdownListItem>
<DropdownListItem
</ForwardRef>
<ForwardRef
isActive={false}
isDisabled={false}
isTitle={false}
onClick={[Function]}
testId="cf-ui-dropdown-list-item"
>
Download
</DropdownListItem>
<DropdownListItem
</ForwardRef>
<ForwardRef
isActive={false}
isDisabled={false}
isTitle={false}
onClick={[Function]}
testId="cf-ui-dropdown-list-item"
>
Remove
</DropdownListItem>
</ForwardRef>
</DropdownList>
<DropdownList
key=".1/.$.0/.$.0"
onClick={[Function]}
testId="cf-ui-dropdown-list"
>
<DropdownListItem
<ForwardRef
isActive={false}
isDisabled={false}
isTitle={false}
onClick={[Function]}
testId="cf-ui-dropdown-list-item"
>
Edit
</DropdownListItem>
<DropdownListItem
</ForwardRef>
<ForwardRef
isActive={false}
isDisabled={false}
isTitle={false}
onClick={[Function]}
testId="cf-ui-dropdown-list-item"
>
Download
</DropdownListItem>
<DropdownListItem
</ForwardRef>
<ForwardRef
isActive={false}
isDisabled={false}
isTitle={false}
onClick={[Function]}
testId="cf-ui-dropdown-list-item"
>
Remove
</DropdownListItem>
</ForwardRef>
</DropdownList>
</Dropdown>
`;

exports[`renders the component using a single dropdown list 1`] = `
<Dropdown
getContainerRef={[Function]}
isAutoalignmentEnabled={false}
isOpen={false}
onClose={[Function]}
position="bottom-right"
Expand All @@ -164,33 +161,33 @@ exports[`renders the component using a single dropdown list 1`] = `
onClick={[Function]}
testId="cf-ui-dropdown-list"
>
<DropdownListItem
<ForwardRef
isActive={false}
isDisabled={false}
isTitle={false}
onClick={[Function]}
testId="cf-ui-dropdown-list-item"
>
Edit
</DropdownListItem>
<DropdownListItem
</ForwardRef>
<ForwardRef
isActive={false}
isDisabled={false}
isTitle={false}
onClick={[Function]}
testId="cf-ui-dropdown-list-item"
>
Download
</DropdownListItem>
<DropdownListItem
</ForwardRef>
<ForwardRef
isActive={false}
isDisabled={false}
isTitle={false}
onClick={[Function]}
testId="cf-ui-dropdown-list-item"
>
Remove
</DropdownListItem>
</ForwardRef>
</DropdownList>
</Dropdown>
`;
Expand All @@ -199,7 +196,6 @@ exports[`renders the component with an additional class name 1`] = `
<Dropdown
className="my-extra-class"
getContainerRef={[Function]}
isAutoalignmentEnabled={false}
isOpen={false}
onClose={[Function]}
position="bottom-right"
Expand All @@ -225,41 +221,40 @@ exports[`renders the component with an additional class name 1`] = `
onClick={[Function]}
testId="cf-ui-dropdown-list"
>
<DropdownListItem
<ForwardRef
isActive={false}
isDisabled={false}
isTitle={false}
onClick={[Function]}
testId="cf-ui-dropdown-list-item"
>
Edit
</DropdownListItem>
<DropdownListItem
</ForwardRef>
<ForwardRef
isActive={false}
isDisabled={false}
isTitle={false}
onClick={[Function]}
testId="cf-ui-dropdown-list-item"
>
Download
</DropdownListItem>
<DropdownListItem
</ForwardRef>
<ForwardRef
isActive={false}
isDisabled={false}
isTitle={false}
onClick={[Function]}
testId="cf-ui-dropdown-list-item"
>
Remove
</DropdownListItem>
</ForwardRef>
</DropdownList>
</Dropdown>
`;

exports[`renders the component with published status 1`] = `
<Dropdown
getContainerRef={[Function]}
isAutoalignmentEnabled={false}
isOpen={false}
onClose={[Function]}
position="bottom-right"
Expand All @@ -285,33 +280,33 @@ exports[`renders the component with published status 1`] = `
onClick={[Function]}
testId="cf-ui-dropdown-list"
>
<DropdownListItem
<ForwardRef
isActive={false}
isDisabled={false}
isTitle={false}
onClick={[Function]}
testId="cf-ui-dropdown-list-item"
>
Edit
</DropdownListItem>
<DropdownListItem
</ForwardRef>
<ForwardRef
isActive={false}
isDisabled={false}
isTitle={false}
onClick={[Function]}
testId="cf-ui-dropdown-list-item"
>
Download
</DropdownListItem>
<DropdownListItem
</ForwardRef>
<ForwardRef
isActive={false}
isDisabled={false}
isTitle={false}
onClick={[Function]}
testId="cf-ui-dropdown-list-item"
>
Remove
</DropdownListItem>
</ForwardRef>
</DropdownList>
</Dropdown>
`;
16 changes: 8 additions & 8 deletions ...a-36-react-components/src/components/Card/EntryCard/__snapshots__/EntryCard.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -353,41 +353,41 @@ exports[`renders the component with dropdownListElements 1`] = `
<DropdownList
testId="cf-ui-dropdown-list"
>
<DropdownListItem
<ForwardRef
isActive={false}
isDisabled={false}
isTitle={true}
testId="cf-ui-dropdown-list-item"
>
Actions
</DropdownListItem>
<DropdownListItem
</ForwardRef>
<ForwardRef
isActive={false}
isDisabled={false}
isTitle={false}
onClick={[Function]}
testId="cf-ui-dropdown-list-item"
>
Edit
</DropdownListItem>
<DropdownListItem
</ForwardRef>
<ForwardRef
isActive={false}
isDisabled={false}
isTitle={false}
onClick={[Function]}
testId="cf-ui-dropdown-list-item"
>
Download
</DropdownListItem>
<DropdownListItem
</ForwardRef>
<ForwardRef
isActive={false}
isDisabled={false}
isTitle={false}
onClick={[Function]}
testId="cf-ui-dropdown-list-item"
>
Remove
</DropdownListItem>
</ForwardRef>
</DropdownList>
</CardActions>
</div>
Expand Down
8 changes: 4 additions & 4 deletions ...omponents/src/components/Card/InlineEntryCard/__snapshots__/InlineEntryCard.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ exports[`renders the component with a dropdown 1`] = `
<DropdownList
testId="cf-ui-dropdown-list"
>
<DropdownListItem
<ForwardRef
isActive={false}
isDisabled={false}
isTitle={false}
Expand All @@ -95,8 +95,8 @@ exports[`renders the component with a dropdown 1`] = `
testId="cf-ui-dropdown-list-item"
>
Edit
</DropdownListItem>
<DropdownListItem
</ForwardRef>
<ForwardRef
isActive={false}
isDisabled={false}
isTitle={false}
Expand All @@ -105,7 +105,7 @@ exports[`renders the component with a dropdown 1`] = `
testId="cf-ui-dropdown-list-item"
>
Remove
</DropdownListItem>
</ForwardRef>
</DropdownList>
</CardActions>
</Card>
Expand Down
Loading

0 comments on commit 6db8d89

Please sign in to comment.