mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

1584/fix/dropdown item width not correct (#1950)

Browse Source 
* added full width to new button

* removed scrollbar width in dropdown item

* Fix dropdown width issue

* Fix lint

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Abhishek Thory
2023-10-10 02:07:26 +05:30
committed by GitHub
parent e1c0cb7821
commit 29c013f826
24 changed files with 137 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
front/src/modules/ui/dropdown/components/DropdownMenuItemsContainer.tsx Normal file
View File

@ -0,0 +1,55 @@
import styled from '@emotion/styled';
import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
const StyledDropdownMenuItemsExternalContainer = styled.div<{
hasMaxHeight?: boolean;
}>`
--padding: ${({ theme }) => theme.spacing(1)};
align-items: flex-start;
display: flex;
flex-direction: column;
gap: 2px;
height: 100%;
max-height: ${({ hasMaxHeight }) => (hasMaxHeight ? '180px' : 'none')};
overflow-y: auto;
padding: var(--padding);
padding-right: 0;
width: calc(100% - 1 * var(--padding));
`;
const StyledScrollWrapper = styled(ScrollWrapper)`
width: 100%;
`;
const StyledDropdownMenuItemsInternalContainer = styled.div`
align-items: flex-start;
display: flex;
flex-direction: column;
gap: 2px;
height: 100%;
width: 100%;
`;
export const DropdownMenuItemsContainer = ({
children,
hasMaxHeight,
}: {
children: React.ReactNode;
hasMaxHeight?: boolean;
}) => {
return (
<StyledDropdownMenuItemsExternalContainer hasMaxHeight={hasMaxHeight}>
<StyledScrollWrapper>
<StyledDropdownMenuItemsInternalContainer>
{children}
</StyledDropdownMenuItemsInternalContainer>
</StyledScrollWrapper>
</StyledDropdownMenuItemsExternalContainer>
);
};

20
front/src/modules/ui/dropdown/components/StyledDropdownMenuItemsContainer.tsx
View File

@ -1,20 +0,0 @@
import styled from '@emotion/styled';
export const StyledDropdownMenuItemsContainer = styled.div<{
hasMaxHeight?: boolean;
}>`
--padding: ${({ theme }) => theme.spacing(1)};
align-items: flex-start;
display: flex;
flex-direction: column;
gap: 2px;
height: 100%;
max-height: ${({ hasMaxHeight }) => (hasMaxHeight ? '180px' : 'none')};
overflow-y: auto;
padding: var(--padding);
padding-right: var(--padding);
width: calc(100% - 2 * var(--padding));
`;

26
front/src/modules/ui/dropdown/components/__stories__/DropdownMenu.stories.tsx
View File

@ -12,9 +12,9 @@ import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
import { DropdownMenuHeader } from '../DropdownMenuHeader';
import { DropdownMenuInput } from '../DropdownMenuInput';
import { DropdownMenuInputContainer } from '../DropdownMenuInputContainer';
import { DropdownMenuItemsContainer } from '../DropdownMenuItemsContainer';
import { DropdownMenuSearchInput } from '../DropdownMenuSearchInput';
import { StyledDropdownMenu } from '../StyledDropdownMenu';
import { StyledDropdownMenuItemsContainer } from '../StyledDropdownMenuItemsContainer';
import { StyledDropdownMenuSeparator } from '../StyledDropdownMenuSeparator';
import { StyledDropdownMenuSubheader } from '../StyledDropdownMenuSubheader';
@ -179,18 +179,18 @@ export const WithHeaders: Story = {
<DropdownMenuHeader>Header</DropdownMenuHeader>
<StyledDropdownMenuSeparator />
<StyledDropdownMenuSubheader>Subheader 1</StyledDropdownMenuSubheader>
<StyledDropdownMenuItemsContainer>
<DropdownMenuItemsContainer>
{mockSelectArray.slice(0, 3).map(({ name }) => (
<MenuItem text={name} />
))}
</StyledDropdownMenuItemsContainer>
</DropdownMenuItemsContainer>
<StyledDropdownMenuSeparator />
<StyledDropdownMenuSubheader>Subheader 2</StyledDropdownMenuSubheader>
<StyledDropdownMenuItemsContainer>
<DropdownMenuItemsContainer>
{mockSelectArray.slice(3).map(({ name }) => (
<MenuItem text={name} />
))}
</StyledDropdownMenuItemsContainer>
</DropdownMenuItemsContainer>
</>
),
},
@ -203,9 +203,9 @@ export const SearchWithLoadingMenu: Story = {
<>
<DropdownMenuSearchInput value="query" autoFocus />
<StyledDropdownMenuSeparator />
<StyledDropdownMenuItemsContainer hasMaxHeight>
<DropdownMenuItemsContainer hasMaxHeight>
<DropdownMenuSkeletonItem />
</StyledDropdownMenuItemsContainer>
</DropdownMenuItemsContainer>
</>
),
},
@ -220,11 +220,11 @@ export const WithInput: Story = {
<DropdownMenuInput defaultValue="Lorem ipsum" autoFocus />
</DropdownMenuInputContainer>
<StyledDropdownMenuSeparator />
<StyledDropdownMenuItemsContainer hasMaxHeight>
<DropdownMenuItemsContainer hasMaxHeight>
{mockSelectArray.map(({ name }) => (
<MenuItem text={name} />
))}
</StyledDropdownMenuItemsContainer>
</DropdownMenuItemsContainer>
</>
),
},
@ -234,9 +234,9 @@ export const SelectableMenuItemWithAvatar: Story = {
decorators: [WithContentBelowDecorator],
args: {
children: (
<StyledDropdownMenuItemsContainer hasMaxHeight>
<DropdownMenuItemsContainer hasMaxHeight>
<FakeSelectableMenuItemList hasAvatar />
</StyledDropdownMenuItemsContainer>
</DropdownMenuItemsContainer>
),
},
};
@ -245,9 +245,9 @@ export const CheckableMenuItemWithAvatar: Story = {
decorators: [WithContentBelowDecorator],
args: {
children: (
<StyledDropdownMenuItemsContainer hasMaxHeight>
<DropdownMenuItemsContainer hasMaxHeight>
<FakeCheckableMenuItemList hasAvatar />
</StyledDropdownMenuItemsContainer>
</DropdownMenuItemsContainer>
),
},
};