Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(dropdown): use Popper.js for a proper positioning #597

Merged
merged 2 commits into from
Oct 26, 2020
Merged

feat(dropdown): use Popper.js for a proper positioning #597

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
114d0bb
refactor(dropdown): use Popper.js for positioning
denkristoffer Oct 19, 2020
4651b47
Merge branch 'master' into dropdown-popper
Oct 26, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages/components/forma-36-react-timepicker/jest.config.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
74 changes: 37 additions & 37 deletions ...-react-components/src/components/Card/CardActions/__snapshots__/CardActions.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
exports[`renders the component as disabled 1`] = `
<Dropdown
getContainerRef={[Function]}
isAutoalignmentEnabled={false}
isAutoalignmentEnabled={true}
isOpen={false}
onClose={[Function]}
position="bottom-right"
Expand All @@ -29,23 +29,23 @@ 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}
isAutoalignmentEnabled={true}
isOpen={false}
onClose={[Function]}
position="bottom-right"
Expand All @@ -71,74 +71,74 @@ 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}
isAutoalignmentEnabled={true}
isOpen={false}
onClose={[Function]}
position="bottom-right"
Expand All @@ -164,33 +164,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 +199,7 @@ exports[`renders the component with an additional class name 1`] = `
<Dropdown
className="my-extra-class"
getContainerRef={[Function]}
isAutoalignmentEnabled={false}
isAutoalignmentEnabled={true}
isOpen={false}
onClose={[Function]}
position="bottom-right"
Expand All @@ -225,41 +225,41 @@ 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}
isAutoalignmentEnabled={true}
isOpen={false}
onClose={[Function]}
position="bottom-right"
Expand All @@ -285,33 +285,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
Open in desktop
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
Loading