@carbon/upgrade 11.22.0 → 11.23.0

package/transforms/__testfixtures__/enable-v12-tile-radio-icons.output.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import { TileGroup, RadioTile, Stack } from '@carbon/react';
+import { FeatureFlags } from '@carbon/feature-flags';
+
+function TestComponent() {
+  return (
+    //prettier-ignore
+    (<div>
+      {/* Case 1: Unwrapped TileGroup */}
+      <FeatureFlags enableV12TileRadioIcons><TileGroup legend="TestGroup" name="test">
+          <RadioTile id="test-1" value="test-1">
+            Option 1
+          </RadioTile>
+          <RadioTile id="test-2" value="test-2">
+            Option 2
+          </RadioTile>
+        </TileGroup></FeatureFlags>
+      {/* Wrapped standalone missing flag prop */}
+      <FeatureFlags enableV12TileRadioIcons>
+        <TileGroup legend="Missing Attribute" name="wrapped">
+          <RadioTile id="wrapped-1" value="wrapped-1">
+            Already Wrapped Option 1
+          </RadioTile>
+          <RadioTile id="wrapped-2" value="wrapped-2">
+            Already Wrapped Option 2
+          </RadioTile>
+        </TileGroup>
+      </FeatureFlags>
+      {/* Case 3: Already wrapped with other attributes */}
+      <FeatureFlags enable-v12-tile-default-icons enableV12TileRadioIcons>
+        <TileGroup legend="Other Attribute" name="other-wrapped">
+          <RadioTile id="other-1" value="other-1">
+            Other Flag Option 1
+          </RadioTile>
+        </TileGroup>
+      </FeatureFlags>
+      {/* Case 4: Already wrapped with correct attribute */}
+      <FeatureFlags enableV12TileRadioIcons>
+        <TileGroup legend="Correct Wrapped" name="correct">
+          <RadioTile id="correct-1" value="correct-1">
+            Correctly Wrapped Option
+          </RadioTile>
+        </TileGroup>
+      </FeatureFlags>
+      {/* Case 5: Standalone RadioTiles with different scenarios */}
+      <Stack>
+        {/* Unwrapped standalone */}
+        <FeatureFlags enableV12TileRadioIcons><RadioTile id="standalone" value="standalone">
+            Standalone Tile
+          </RadioTile></FeatureFlags>
+        {/* Wrapped standalone missing flag prop */}
+        <FeatureFlags enableV12TileRadioIcons>
+          <RadioTile id="wrapped-standalone" value="wrapped-standalone">
+            Wrapped Standalone
+          </RadioTile>
+        </FeatureFlags>
+        {/* Wrapped standalone with other flag */}
+        <FeatureFlags enable-v12-tile-default-icons enableV12TileRadioIcons>
+          <RadioTile id="other-standalone" value="other-standalone">
+            Other Flag Standalone
+          </RadioTile>
+        </FeatureFlags>
+        {/* Correctly wrapped standalone */}
+        <FeatureFlags enableV12TileRadioIcons>
+          <RadioTile id="correct-standalone" value="correct-standalone">
+            Correct Standalone
+          </RadioTile>
+        </FeatureFlags>
+      </Stack>
+      {/* Case 6: Nested structures */}
+      <div className="nested">
+        <FeatureFlags enableV12TileRadioIcons><TileGroup legend="Nested Group" name="nested">
+            <div className="wrapper">
+              <RadioTile id="nested-1" value="nested-1">
+                Nested Option 1
+              </RadioTile>
+            </div>
+            <RadioTile id="nested-2" value="nested-2">
+              Nested Option 2
+            </RadioTile>
+          </TileGroup></FeatureFlags>
+      </div>
+    </div>)
+  );
+}
+
+export default TestComponent;

package/transforms/__testfixtures__/enable-v12-tile-radio-icons.output.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { TileGroup, RadioTile, Stack } from '@carbon/react';
+import { FeatureFlags } from '@carbon/feature-flags';
+
+const TestComponent: React.FC = () => {
+  return (
+    //prettier-ignore
+    (<div>
+      {/* Case 1: Unwrapped TileGroup */}
+      <FeatureFlags enableV12TileRadioIcons><TileGroup legend="TestGroup" name="test">
+          <RadioTile id="test-1" value="test-1">
+            Option 1
+          </RadioTile>
+          <RadioTile id="test-2" value="test-2">
+            Option 2
+          </RadioTile>
+        </TileGroup></FeatureFlags>
+      {/* Wrapped standalone missing flag prop */}
+      <FeatureFlags enableV12TileRadioIcons>
+        <TileGroup legend="Missing Attribute" name="wrapped">
+          <RadioTile id="wrapped-1" value="wrapped-1">
+            Already Wrapped Option 1
+          </RadioTile>
+          <RadioTile id="wrapped-2" value="wrapped-2">
+            Already Wrapped Option 2
+          </RadioTile>
+        </TileGroup>
+      </FeatureFlags>
+      {/* Case 3: Already wrapped with other flags */}
+      <FeatureFlags enable-v12-tile-default-icons enableV12TileRadioIcons>
+        <TileGroup legend="Other Attribute" name="other-wrapped">
+          <RadioTile id="other-1" value="other-1">
+            Other Flag Option 1
+          </RadioTile>
+        </TileGroup>
+      </FeatureFlags>
+      {/* Case 4: Already wrapped with correct flag */}
+      <FeatureFlags enableV12TileRadioIcons>
+        <TileGroup legend="Correct Wrapped" name="correct">
+          <RadioTile id="correct-1" value="correct-1">
+            Correctly Wrapped Option
+          </RadioTile>
+        </TileGroup>
+      </FeatureFlags>
+      {/* Case 5: Standalone RadioTiles with different scenarios */}
+      <Stack>
+        {/* Unwrapped standalone */}
+        <FeatureFlags enableV12TileRadioIcons><RadioTile id="standalone" value="standalone">
+            Standalone Tile
+          </RadioTile></FeatureFlags>
+        {/* Wrapped standalone missing flag prop */}
+        <FeatureFlags enableV12TileRadioIcons>
+          <RadioTile id="wrapped-standalone" value="wrapped-standalone">
+            Wrapped Standalone
+          </RadioTile>
+        </FeatureFlags>
+        {/* Wrapped standalone with other flag */}
+        <FeatureFlags enable-v12-tile-default-icons enableV12TileRadioIcons>
+          <RadioTile id="other-standalone" value="other-standalone">
+            Other Flag Standalone radio
+          </RadioTile>
+        </FeatureFlags>
+        {/* Correctly wrapped standalone */}
+        <FeatureFlags enableV12TileRadioIcons>
+          <RadioTile id="correct-standalone" value="correct-standalone">
+            Correct Standalone
+          </RadioTile>
+        </FeatureFlags>
+      </Stack>
+      {/* Case 6: Nested structures */}
+      <div className="nested">
+        <FeatureFlags enableV12TileRadioIcons><TileGroup legend="Nested Group" name="nested">
+            <div className="wrapper">
+              <RadioTile id="nested-1" value="nested-1">
+                Nested Option 1
+              </RadioTile>
+            </div>
+            <RadioTile id="nested-2" value="nested-2">
+              Nested Option 2
+            </RadioTile>
+          </TileGroup></FeatureFlags>
+      </div>
+    </div>)
+  );
+};
+
+export default TestComponent;

package/transforms/__testfixtures__/slug-prop-to-decorator-prop.input.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Dropdown, Checkbox, Tag } from '@carbon/react';
+
+function TestComponent() {
+  return (
+    //prettier-ignore
+    <div>
+      {/* Basic Dropdown usage */}
+      <Dropdown
+        label="Select an option"
+        slug="dropdown-1"
+        items={['Option 1', 'Option 2']}
+        id="dropdown-1"
+        titleText="Dropdown"
+      />
+      {/* Checkbox with expression */}
+      <Checkbox
+        labelText="Check me"
+        slug={'checkbox-1'}
+        id="checkbox-1"
+      />
+      {/* Tag with string literal */}
+      <Tag slug={'static-tag'} type="red">
+        Important
+      </Tag>
+      {/* Nested structure */}
+      <div>
+        <Tag slug="tag-1" type="blue">
+          Active
+        </Tag>
+        <Checkbox
+          slug="checkbox-2"
+          labelText="Enable feature"
+          id="checkbox-2"
+        />
+      </div>
+    </div>
+  );
+}
+
+export default TestComponent;

package/transforms/__testfixtures__/slug-prop-to-decorator-prop.input.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Dropdown, Checkbox, Tag } from '@carbon/react';
+
+const TestComponent: React.FC = () => {
+  return (
+    //prettier-ignore
+    <div>
+      {/* Basic Dropdown usage */}
+      <Dropdown
+        label="Select an option"
+        slug="dropdown-1"
+        items={['Option 1', 'Option 2']}
+        id="dropdown-1"
+        titleText="Dropdown"
+      />
+      {/* Checkbox with expression */}
+      <Checkbox
+        labelText="Check me"
+        slug={'checkbox-1'}
+        id="checkbox-1"
+      />
+      {/* Tag with string literal */}
+      <Tag slug={'static-tag'} type="red">
+        Important
+      </Tag>
+      {/* Nested structure */}
+      <div>
+        <Tag slug="tag-1" type="blue">
+          Active
+        </Tag>
+        <Checkbox
+          slug="checkbox-2"
+          labelText="Enable feature"
+          id="checkbox-2"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default TestComponent;

package/transforms/__testfixtures__/slug-prop-to-decorator-prop.output.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Dropdown, Checkbox, Tag } from '@carbon/react';
+
+function TestComponent() {
+  return (
+    //prettier-ignore
+    (<div>
+      {/* Basic Dropdown usage */}
+      <Dropdown
+        label="Select an option"
+        decorator="dropdown-1"
+        items={['Option 1', 'Option 2']}
+        id="dropdown-1"
+        titleText="Dropdown"
+      />
+      {/* Checkbox with expression */}
+      <Checkbox
+        labelText="Check me"
+        decorator={'checkbox-1'}
+        id="checkbox-1"
+      />
+      {/* Tag with string literal */}
+      <Tag decorator={'static-tag'} type="red">
+        Important
+      </Tag>
+      {/* Nested structure */}
+      <div>
+        <Tag decorator="tag-1" type="blue">
+          Active
+        </Tag>
+        <Checkbox
+          decorator="checkbox-2"
+          labelText="Enable feature"
+          id="checkbox-2"
+        />
+      </div>
+    </div>)
+  );
+}
+
+export default TestComponent;

package/transforms/__testfixtures__/slug-prop-to-decorator-prop.output.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Dropdown, Checkbox, Tag } from '@carbon/react';
+
+const TestComponent: React.FC = () => {
+  return (
+    //prettier-ignore
+    (<div>
+      {/* Basic Dropdown usage */}
+      <Dropdown
+        label="Select an option"
+        decorator="dropdown-1"
+        items={['Option 1', 'Option 2']}
+        id="dropdown-1"
+        titleText="Dropdown"
+      />
+      {/* Checkbox with expression */}
+      <Checkbox
+        labelText="Check me"
+        decorator={'checkbox-1'}
+        id="checkbox-1"
+      />
+      {/* Tag with string literal */}
+      <Tag decorator={'static-tag'} type="red">
+        Important
+      </Tag>
+      {/* Nested structure */}
+      <div>
+        <Tag decorator="tag-1" type="blue">
+          Active
+        </Tag>
+        <Checkbox
+          decorator="checkbox-2"
+          labelText="Enable feature"
+          id="checkbox-2"
+        />
+      </div>
+    </div>)
+  );
+};
+
+export default TestComponent;

package/transforms/__tests__/enable-v12-tile-default-icons-test.js

@@ -0,0 +1,12 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const { defineTest } = require('jscodeshift/dist/testUtils');
+
+defineTest(__dirname, 'enable-v12-tile-default-icons');

package/transforms/__tests__/enable-v12-tile-radio-icons-test.js

@@ -0,0 +1,12 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const { defineTest } = require('jscodeshift/dist/testUtils');
+
+defineTest(__dirname, 'enable-v12-tile-radio-icons');

package/transforms/__tests__/slug-prop-to-decorator-prop-test.js

@@ -0,0 +1,12 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const { defineTest } = require('jscodeshift/dist/testUtils');
+
+defineTest(__dirname, 'slug-prop-to-decorator-prop');

package/transforms/enable-v12-tile-default-icons.js

@@ -0,0 +1,183 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * Migrate Tile components by wrapping them with FeatureFlags
+ */
+
+'use strict';
+
+const defaultOptions = {
+  quote: 'single',
+  trailingComma: true,
+};
+
+function transform(fileInfo, api, options) {
+  const j = api.jscodeshift;
+  const root = j(fileInfo.source);
+  const printOptions = options.printOptions || defaultOptions;
+
+  // Early return if no Tile components found
+  if (
+    !root
+      .find(j.JSXElement, { openingElement: { name: { name: 'Tile' } } })
+      .size()
+  ) {
+    return null;
+  }
+
+  let needsFeatureFlagsImport = false;
+
+  // First update all existing FeatureFlags wrappers that need the attribute
+  root
+    .find(j.JSXElement, {
+      openingElement: { name: { name: 'FeatureFlags' } },
+    })
+    .forEach((path) => {
+      const hasTileInside =
+        j(path)
+          .find(j.JSXElement, {
+            openingElement: { name: { name: 'Tile' } },
+          })
+          .size() > 0;
+
+      const hasTileGroupWithTile =
+        j(path)
+          .find(j.JSXElement, {
+            openingElement: { name: { name: 'TileGroup' } },
+          })
+          .filter((tileGroupPath) => {
+            return (
+              j(tileGroupPath)
+                .find(j.JSXElement, {
+                  openingElement: { name: { name: 'Tile' } },
+                })
+                .size() > 0
+            );
+          })
+          .size() > 0;
+
+      if (hasTileInside || hasTileGroupWithTile) {
+        const hasAttribute = path.node.openingElement.attributes.some(
+          (attr) =>
+            attr.type === 'JSXAttribute' &&
+            attr.name.name === 'enableV12TileDefaultIcons'
+        );
+
+        if (!hasAttribute) {
+          path.node.openingElement.attributes.push(
+            j.jsxAttribute(j.jsxIdentifier('enableV12TileDefaultIcons'))
+          );
+          needsFeatureFlagsImport = true;
+        }
+      }
+    });
+
+  // Handle Tiles within TileGroups
+  root
+    .find(j.JSXElement, {
+      openingElement: { name: { name: 'TileGroup' } },
+    })
+    .forEach((path) => {
+      const hasTile =
+        j(path)
+          .find(j.JSXElement, {
+            openingElement: { name: { name: 'Tile' } },
+          })
+          .size() > 0;
+
+      const wrappingFeatureFlags = j(path).closest(j.JSXElement, {
+        openingElement: { name: { name: 'FeatureFlags' } },
+      });
+
+      if (hasTile) {
+        if (wrappingFeatureFlags.size() === 0) {
+          // Not wrapped, add wrapper
+          const featureFlagsWrapper = j.jsxElement(
+            j.jsxOpeningElement(
+              j.jsxIdentifier('FeatureFlags'),
+              [j.jsxAttribute(j.jsxIdentifier('enableV12TileDefaultIcons'))],
+              false
+            ),
+            j.jsxClosingElement(j.jsxIdentifier('FeatureFlags')),
+            [path.node]
+          );
+
+          j(path).replaceWith(featureFlagsWrapper);
+          needsFeatureFlagsImport = true;
+        }
+      }
+    });
+
+  // Handle standalone Tiles
+  root
+    .find(j.JSXElement, {
+      openingElement: { name: { name: 'Tile' } },
+    })
+    .forEach((path) => {
+      const isInsideTileGroup =
+        j(path)
+          .closest(j.JSXElement, {
+            openingElement: { name: { name: 'TileGroup' } },
+          })
+          .size() > 0;
+
+      const wrappingFeatureFlags = j(path).closest(j.JSXElement, {
+        openingElement: { name: { name: 'FeatureFlags' } },
+      });
+
+      if (!isInsideTileGroup) {
+        if (wrappingFeatureFlags.size() === 0) {
+          // Not wrapped, add wrapper
+          const featureFlagsWrapper = j.jsxElement(
+            j.jsxOpeningElement(
+              j.jsxIdentifier('FeatureFlags'),
+              [j.jsxAttribute(j.jsxIdentifier('enableV12TileDefaultIcons'))],
+              false
+            ),
+            j.jsxClosingElement(j.jsxIdentifier('FeatureFlags')),
+            [path.node]
+          );
+
+          j(path).replaceWith(featureFlagsWrapper);
+          needsFeatureFlagsImport = true;
+        }
+      }
+    });
+
+  // Add FeatureFlags import only if we've added wrappers or attributes
+  if (needsFeatureFlagsImport) {
+    const hasFeatureFlagsImport =
+      root
+        .find(j.ImportDeclaration, {
+          source: { value: '@carbon/feature-flags' },
+        })
+        .size() > 0;
+
+    if (!hasFeatureFlagsImport) {
+      // Find the last import declaration
+      const lastImport = root.find(j.ImportDeclaration).at(-1);
+      const featureFlagsImport = j.importDeclaration(
+        [j.importSpecifier(j.identifier('FeatureFlags'))],
+        j.literal('@carbon/feature-flags')
+      );
+
+      if (lastImport.size() > 0) {
+        // Add newline after the last import
+        const newline = j.template.statement`\n`;
+        lastImport.insertAfter(newline);
+        lastImport.insertAfter(featureFlagsImport);
+      } else {
+        // If no imports exist, add at the beginning of the file
+        root.get().node.program.body.unshift(featureFlagsImport);
+      }
+    }
+  }
+
+  return root.toSource(printOptions);
+}
+
+module.exports = transform;
+module.exports.parser = 'tsx';