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

fix: Filter chips lacks width for longer values #7025

Merged
merged 10 commits into from
Oct 8, 2024
+14 −14
Merged

fix: Filter chips lacks width for longer values #7025

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
a120f88
Added overflow and position
harshit078 Sep 13, 2024
746039b
Fixed Cancel button
harshit078 Sep 13, 2024
7aff666
Improved Chip container
harshit078 Sep 13, 2024
2695180
Minor fix
harshit078 Sep 13, 2024
1a13382
Fixed comments
harshit078 Sep 14, 2024
594773d
Modified filter chips
harshit078 Sep 14, 2024
50a3bb8
Minor fix
harshit078 Sep 14, 2024
d98d1c8
Merge branch 'main' into Filter-chips-fix
lucasbordeau Oct 8, 2024
c74762d
Merge branch 'main' into Filter-chips-fix
lucasbordeau Oct 8, 2024
ddeecfb
Merge branch 'main' into Filter-chips-fix
lucasbordeau Oct 8, 2024
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
2 changes: 2 additions & 0 deletions packages/twenty-front/src/modules/views/components/SortOrFilterChip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ const StyledChip = styled.div<{ variant: SortOrFitlerChipVariant }>`
font-weight: ${({ theme }) => theme.font.weight.medium};
padding: ${({ theme }) => theme.spacing(1) + ' ' + theme.spacing(2)};
user-select: none;
white-space: nowrap;
`;

const StyledIcon = styled.div`
Expand All @@ -52,6 +53,7 @@ const StyledIcon = styled.div`
const StyledDelete = styled.div<{ variant: SortOrFitlerChipVariant }>`
align-items: center;
cursor: pointer;
padding: ${({ theme }) => theme.spacing(0.5)};
display: flex;
font-size: ${({ theme }) => theme.font.size.sm};
margin-left: ${({ theme }) => theme.spacing(2)};
Expand Down
26 changes: 12 additions & 14 deletions packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,24 +31,27 @@ export type ViewBarDetailsProps = {

const StyledBar = styled.div`
align-items: center;
align-items: center;
border-top: 1px solid ${({ theme }) => theme.border.color.light};
border-top: 1px solid ${({ theme }) => theme.border.color.light};
display: flex;
harshit078 marked this conversation as resolved.
Show resolved Hide resolved
flex-direction: row;
min-height: 32px;
justify-content: space-between;
z-index: 4;
min-height: 32px;
padding-top: ${({ theme }) => theme.spacing(1)};
padding-bottom: ${({ theme }) => theme.spacing(1)};
z-index: 4;
`;

const StyledChipcontainer = styled.div`
align-items: center;
display: flex;
flex-direction: row;
overflow: scroll;
gap: ${({ theme }) => theme.spacing(1)};
min-height: 32px;
margin-left: ${({ theme }) => theme.spacing(2)};
flex-wrap: wrap;
padding-top: ${({ theme }) => theme.spacing(1)};
harshit078 marked this conversation as resolved.
Show resolved Hide resolved
padding-bottom: ${({ theme }) => theme.spacing(0.5)};
z-index: 1;
`;

const StyledCancelButton = styled.button`
Expand All @@ -57,24 +60,19 @@ const StyledCancelButton = styled.button`
color: ${({ theme }) => theme.font.color.tertiary};
cursor: pointer;
font-weight: ${({ theme }) => theme.font.weight.medium};
margin-left: auto;
margin-right: ${({ theme }) => theme.spacing(2)};
padding: ${(props) => {
const horiz = props.theme.spacing(2);
const vert = props.theme.spacing(1);
return `${vert} ${horiz} ${vert} ${horiz}`;
}};
user-select: none;
harshit078 marked this conversation as resolved.
Show resolved Hide resolved

margin-right: ${({ theme }) => theme.spacing(2)};
&:hover {
background-color: ${({ theme }) => theme.background.tertiary};
border-radius: ${({ theme }) => theme.spacing(1)};
}
`;

const StyledFilterContainer = styled.div`
align-items: center;
display: flex;
align-items: center;
flex: 1;
overflow-x: hidden;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we need item to stack

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On the dev environment, filters stack on each other in column manner. But in figma they are stacking row wise and having a scroll. Is column stack behaviour we need to follow ?

`;

const StyledSeperatorContainer = styled.div`
Expand Down
Loading