fix: fliter list item clear button alignment fix (#2741)

This commit is contained in:
Anmol Singh Bhatia 2023-11-09 18:27:19 +05:30 committed by GitHub
parent 446981422e
commit c291ff05ee
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 68 additions and 61 deletions

View File

@ -36,7 +36,7 @@ export const AppliedDateFilters: React.FC<Props> = observer((props) => {
}; };
return ( return (
<div className="flex items-center gap-1 flex-wrap"> <>
{values.map((date) => ( {values.map((date) => (
<div key={date} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded"> <div key={date} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
<span className="normal-case">{getDateLabel(date)}</span> <span className="normal-case">{getDateLabel(date)}</span>
@ -49,6 +49,6 @@ export const AppliedDateFilters: React.FC<Props> = observer((props) => {
</button> </button>
</div> </div>
))} ))}
</div> </>
); );
}); });

View File

@ -50,50 +50,55 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
className="capitalize py-1 px-2 border border-custom-border-200 rounded-md flex items-center gap-2 flex-wrap" className="capitalize py-1 px-2 border border-custom-border-200 rounded-md flex items-center gap-2 flex-wrap"
> >
<span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span> <span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
{membersFilters.includes(filterKey) && ( <div className="flex items-center gap-1 flex-wrap">
<AppliedMembersFilters {membersFilters.includes(filterKey) && (
handleRemove={(val) => handleRemoveFilter(filterKey, val)} <AppliedMembersFilters
members={members} handleRemove={(val) => handleRemoveFilter(filterKey, val)}
values={value} members={members}
/> values={value}
)} />
{dateFilters.includes(filterKey) && ( )}
<AppliedDateFilters handleRemove={(val) => handleRemoveFilter(filterKey, val)} values={value} /> {dateFilters.includes(filterKey) && (
)} <AppliedDateFilters handleRemove={(val) => handleRemoveFilter(filterKey, val)} values={value} />
{filterKey === "labels" && ( )}
<AppliedLabelsFilters {filterKey === "labels" && (
handleRemove={(val) => handleRemoveFilter("labels", val)} <AppliedLabelsFilters
labels={labels} handleRemove={(val) => handleRemoveFilter("labels", val)}
values={value} labels={labels}
/> values={value}
)} />
{filterKey === "priority" && ( )}
<AppliedPriorityFilters handleRemove={(val) => handleRemoveFilter("priority", val)} values={value} /> {filterKey === "priority" && (
)} <AppliedPriorityFilters handleRemove={(val) => handleRemoveFilter("priority", val)} values={value} />
{filterKey === "state" && states && ( )}
<AppliedStateFilters {filterKey === "state" && states && (
handleRemove={(val) => handleRemoveFilter("state", val)} <AppliedStateFilters
states={states} handleRemove={(val) => handleRemoveFilter("state", val)}
values={value} states={states}
/> values={value}
)} />
{filterKey === "state_group" && ( )}
<AppliedStateGroupFilters handleRemove={(val) => handleRemoveFilter("state_group", val)} values={value} /> {filterKey === "state_group" && (
)} <AppliedStateGroupFilters
{filterKey === "project" && ( handleRemove={(val) => handleRemoveFilter("state_group", val)}
<AppliedProjectFilters values={value}
handleRemove={(val) => handleRemoveFilter("project", val)} />
projects={projects} )}
values={value} {filterKey === "project" && (
/> <AppliedProjectFilters
)} handleRemove={(val) => handleRemoveFilter("project", val)}
<button projects={projects}
type="button" values={value}
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" />
onClick={() => handleRemoveFilter(filterKey, null)} )}
> <button
<X size={12} strokeWidth={2} /> type="button"
</button> className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemoveFilter(filterKey, null)}
>
<X size={12} strokeWidth={2} />
</button>
</div>
</div> </div>
); );
})} })}

View File

@ -15,7 +15,7 @@ export const AppliedLabelsFilters: React.FC<Props> = observer((props) => {
const { handleRemove, labels, values } = props; const { handleRemove, labels, values } = props;
return ( return (
<div className="flex items-center gap-1 flex-wrap"> <>
{values.map((labelId) => { {values.map((labelId) => {
const labelDetails = labels?.find((l) => l.id === labelId); const labelDetails = labels?.find((l) => l.id === labelId);
@ -40,6 +40,6 @@ export const AppliedLabelsFilters: React.FC<Props> = observer((props) => {
</div> </div>
); );
})} })}
</div> </>
); );
}); });

View File

@ -15,7 +15,7 @@ export const AppliedMembersFilters: React.FC<Props> = observer((props) => {
const { handleRemove, members, values } = props; const { handleRemove, members, values } = props;
return ( return (
<div className="flex items-center gap-1 flex-wrap"> <>
{values.map((memberId) => { {values.map((memberId) => {
const memberDetails = members?.find((m) => m.id === memberId); const memberDetails = members?.find((m) => m.id === memberId);
@ -35,6 +35,6 @@ export const AppliedMembersFilters: React.FC<Props> = observer((props) => {
</div> </div>
); );
})} })}
</div> </>
); );
}); });

View File

@ -15,7 +15,7 @@ export const AppliedPriorityFilters: React.FC<Props> = observer((props) => {
const { handleRemove, values } = props; const { handleRemove, values } = props;
return ( return (
<div className="flex items-center gap-1 flex-wrap"> <>
{values.map((priority) => ( {values.map((priority) => (
<div key={priority} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded"> <div key={priority} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
<PriorityIcon <PriorityIcon
@ -42,6 +42,6 @@ export const AppliedPriorityFilters: React.FC<Props> = observer((props) => {
</button> </button>
</div> </div>
))} ))}
</div> </>
); );
}); });

View File

@ -16,7 +16,7 @@ export const AppliedProjectFilters: React.FC<Props> = observer((props) => {
const { handleRemove, projects, values } = props; const { handleRemove, projects, values } = props;
return ( return (
<div className="flex items-center gap-1 flex-wrap"> <>
{values.map((projectId) => { {values.map((projectId) => {
const projectDetails = projects?.find((p) => p.id === projectId); const projectDetails = projects?.find((p) => p.id === projectId);
@ -44,6 +44,6 @@ export const AppliedProjectFilters: React.FC<Props> = observer((props) => {
</div> </div>
); );
})} })}
</div> </>
); );
}); });

View File

@ -104,9 +104,11 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
states={projectStateStore.states?.[projectId?.toString() ?? ""]} states={projectStateStore.states?.[projectId?.toString() ?? ""]}
/> />
{storedFilters && viewDetails && areFiltersDifferent(storedFilters, viewDetails.query_data ?? {}) && ( {storedFilters && viewDetails && areFiltersDifferent(storedFilters, viewDetails.query_data ?? {}) && (
<Button variant="primary" size="sm" onClick={handleUpdateView}> <div className="flex items-center justify-center flex-shrink-0">
Update view <Button variant="primary" size="sm" onClick={handleUpdateView}>
</Button> Update view
</Button>
</div>
)} )}
</div> </div>
); );

View File

@ -14,7 +14,7 @@ export const AppliedStateGroupFilters: React.FC<Props> = observer((props) => {
const { handleRemove, values } = props; const { handleRemove, values } = props;
return ( return (
<div className="flex items-center gap-1 flex-wrap"> <>
{values.map((stateGroup) => ( {values.map((stateGroup) => (
<div key={stateGroup} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded"> <div key={stateGroup} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
<StateGroupIcon stateGroup={stateGroup as TStateGroups} height="12px" width="12px" /> <StateGroupIcon stateGroup={stateGroup as TStateGroups} height="12px" width="12px" />
@ -28,6 +28,6 @@ export const AppliedStateGroupFilters: React.FC<Props> = observer((props) => {
</button> </button>
</div> </div>
))} ))}
</div> </>
); );
}); });

View File

@ -16,7 +16,7 @@ export const AppliedStateFilters: React.FC<Props> = observer((props) => {
const { handleRemove, states, values } = props; const { handleRemove, states, values } = props;
return ( return (
<div className="flex items-center gap-1 flex-wrap"> <>
{values.map((stateId) => { {values.map((stateId) => {
const stateDetails = states?.find((s) => s.id === stateId); const stateDetails = states?.find((s) => s.id === stateId);
@ -36,6 +36,6 @@ export const AppliedStateFilters: React.FC<Props> = observer((props) => {
</div> </div>
); );
})} })}
</div> </>
); );
}); });