Review legacy Security PATTERNS for migration

[elycheea]

Related issues:

• Review legacy Security OVERVIEW (Read me first)
• Review legacy Security COMPONENTS for migration
• Review legacy Security PATTERNS for migration You are here
• Review legacy Security LAYOUTS for migration

Patterns (as Components)

These are Security patterns that are still widely used and DO NOT have a competing component in Carbon or Carbon for IBM Products.

This is a summary report. The details listed for each component is not comprehensive.

---

FilterPanel

GitHub, Storybook

FilterPanel comes with 8 subcomponents, including search, panel, group, label, accordion (2), and checkbox (2).

With a design review, these can be expanded to include more features such as radio buttons, date pickers, sliders, etc.

FilterPanel will easily be the largest and most complex component to migrate.

TLDR

• ✓ Follows Carbon for IBM Products component architecture.

PROBLEMATIC IMPORTS (includes all subcomponents)

import { Accordion } from '../../Accordion';
import { AccordionItem } from '../../Accordion';
import Checkbox from '../../Checkbox';
import OverflowMenu from '../../OverflowMenu';
import TruncatedList from '../../TruncatedList';

---

IconButtonBar

GitHub, Storybook

TLDR

• ✓ Follows Carbon for IBM Products component architecture.

PROBLEMATIC IMPORTS

import { OverflowMenu, OverflowMenuItem } from '../..';
import IconButton from '../IconButton';

---

NonEntitledSection

GitHub, Storybook

TLDR

• ✓ Follows Carbon for IBM Products component architecture.

PROBLEMATIC IMPORTS

import Link from '../Link';

---

SearchBar

GitHub, Storybook

TLDR

• ✗ See This component must be refactored from a Class to a Function. (Link)

PROBLEMATIC IMPORTS

import Button from '../Button';
import Search from '../Search';
import MultiSelect from '../MultiSelect';

---

StatusIndicator

GitHub, Storybook

TLDR

• ✓ Follows Carbon for IBM Products component architecture.

PROBLEMATIC IMPORTS

import Button from '../Button';

---

TagWall

GitHub, Storybook

TLDR

• ✓ Follows Carbon for IBM Products component architecture.

PROBLEMATIC IMPORTS

import Button from '../Button';
import InteractiveTag from '../InteractiveTag';

PROBLEMATIC CODE

const { TAG_WALL_ADD_BUTTON, TAG_WALL_LABEL, TAG_WALL_REMOVE_BUTTON } = {
  ...defaultLabels.labels,
  ...defaultLabels.filterFalsey({
    TAG_WALL_ADD_BUTTON: addLabel,
    TAG_WALL_LABEL: label,
  }),
  ...labels,
};

---

TagWallFilter

GitHub, Storybook

Includes one subcomponent: filter

TLDR

• ✓ Follows Carbon for IBM Products component architecture.

PROBLEMATIC IMPORTS

import { TearsheetSmall } from '../Tearsheet';
import { buttonType } from '../Tearsheet/TearsheetSmall/TearsheetSmall';

[elycheea]

Closing for now since it’s documented as part of the Security migration epic.