Closed elycheea closed 1 week ago
Should this be an epic? This should list all the components that use
Below is documentation on the current process on DismissibleTag
Filter tags current:
<Tag filter type="gray" onClose={...}>Label</Tag>
New DismissibleTag:
<DismissibleTag type="gray" onClose={...} text='Label' />
Proposed solution 1:
(filter__deprecated || dismissible) && <DismissibleTag type="gray" onClose={...} text='Label' />
Proposed solution 2 (rely on a passed onClose prop from user):
onClose && <DismissibleTag type="gray" onClose={...} text='Label' />
Below are places the filter prop would prob be named to dismissible TagOverflowModal.tsx
<ModalBody className={`${blockClass}__body`} hasForm>
{getFilteredItems().map(({ label, id, filter }) => {
const isFilterable = overflowType === 'tag' ? filter : false;
return isFilterable ? (
<DismissibleTag
key={id}
text={label}
onClose={() => onTagClose({ label, id })}
/>
) : (
<Tag key={id}>{label}</Tag>
);
})}
</ModalBody>
TagOverflowPopover.tsx
const isFilterable =
overflowType === 'tag' ? filter : false;
return (
<li
className={cx(`${blockClass}__tag-item`, {
[`${blockClass}__tag-item--default`]:
overflowType === 'default',
[`${blockClass}__tag-item--tag`]:
overflowType === 'tag',
})}
key={id}
>
{overflowType === 'tag' ? (
<Tag
{...other}
onClose={() => onClose?.()}
type={typeValue}
filter={isFilterable}
>
{label}
</Tag>
) : (
label
)}
</li>
);
@carbon/react@1.53.0
introducesDismissibleTag
which should replace use of Tag with filters.To see the full list of tests that were modified as a result of this change, please see commits from #4552^1.