carbon-design-system / ibm-products

A Carbon-powered React component library for IBM Products
https://ibm-products.carbondesignsystem.com
Apache License 2.0
97 stars 138 forks source link

Tags with filter need to be replaced with `DismissibleTag` #4556

Closed elycheea closed 1 week ago

elycheea commented 7 months ago

@carbon/react@1.53.0 introduces DismissibleTag which should replace use of Tag with filters.

### Acceptance criteria
- [ ] Investigate the Tag updates from Carbon (is DismissibleTag stable??)
- [ ] Replace `<Tag filter>` with `<DismissibleTag>`
- [ ] Update tests
- [ ] Reinstate tests from #4552
- [ ] Search for any other cases not documented

To see the full list of tests that were modified as a result of this change, please see commits from #4552^1.

AlexanderMelox commented 2 months ago

Should this be an epic? This should list all the components that use not just PageHeader and Tagset, It's also being used in Datagrid, etc.

AlexanderMelox commented 1 month ago

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' />
AlexanderMelox commented 1 month ago

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>
                      );