feat(codemod): add in codemod for size prop updates

codemods/transforms/size-prop-update.js

@@ -0,0 +1,155 @@
+/**
+ * Copyright IBM Corp. 2016, 2020
+ *
+ * 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';
+
+import fs from 'fs';
+
+const defaultOptions = {
+  quote: 'auto',
+  trailingComma: true,
+};
+
+function transform(fileInfo, api, options) {
+  const printOptions = options.printOptions || defaultOptions;
+  const j = api.jscodeshift;
+  const root = j(fileInfo.source);
+
+  function replacePropForComponent(name) {
+    // Multiselect.Filterable has a different AST structure, so we need to
+    // adjust the query to find it properly. If it is not 'Filterable', we use
+    // the default query
+    let isFilterable = name === 'Filterable';
+    let openingElementQuery = {
+      name: {
+        name,
+      },
+    };
+    if (isFilterable) {
+      openingElementQuery = {
+        name: {
+          object: {
+            name: 'MultiSelect',
+          },
+          property: {
+            name: name,
+          },
+        },
+      };
+    }
+    root
+      .find(j.JSXOpeningElement, openingElementQuery)
+      .forEach((openingElement) => {
+        // Multiselect.Filterable has a different AST structure, so the name is located differently
+        const { name } = isFilterable
+          ? openingElement.node.name.property
+          : openingElement.node.name;
+
+        // Some components were originally set to `xl`, but are being reduced to `lg`
+        const downsizedComponents = [
+          'Accordion',
+          'ComboBox',
+          'ContentSwitcher',
+          'DatePickerInput',
+          'Dropdown',
+          'MultiSelect',
+          'Filterable',
+          'NumberInput',
+          'OverflowMenu',
+          'Search',
+          'Select',
+          'TextInput',
+          'TimePicker',
+        ];
+
+        const isDownsized = downsizedComponents.includes(name);
+
+        j(openingElement)
+          .find(j.JSXAttribute, {
+            name: {
+              name: 'size',
+            },
+          })
+          .forEach((path) => {
+            j(path).replaceWith((nodePath) => {
+              const { node } = nodePath;
+              const { value } = node.value;
+
+              switch (value) {
+                case 'compact':
+                  node.value.value = 'xs';
+                  return node;
+                case 'short':
+                case 'small':
+                  node.value.value = 'sm';
+                  return node;
+                case 'field':
+                  node.value.value = 'md';
+                  return node;
+                case 'default':
+                case 'normal':
+                  node.value.value = 'lg';
+                  return node;
+                case 'tall':
+                case 'lg':
+                  node.value.value = isDownsized ? 'md' : 'xl';
+                  return node;
+                case 'xl':
+                  node.value.value = isDownsized ? 'lg' : '2xl';
+                  return node;
+              }
+              return node;
+            });
+          });
+      });
+  }
+
+  const components = [
+    'Accordion',
+    'Button',
+    'ComboBox',
+    'ContentSwitcher',
+    'DataTable',
+    'DatePickerInput',
+    'Dropdown',
+    'FileUploader',
+    'FileUploaderButton',
+    'FileUploaderDropContainer',
+    'FileUploaderItem',
+    'MultiSelect',
+    'Filterable',
+    'NumberInput',
+    'OverflowMenu',
+    'Search',
+    'Select',
+    'Table',
+    'TableToolbar',
+    'TextInput',
+    'TimePicker',
+  ];
+  for (const component of components) {
+    replacePropForComponent(component);
+  }
+
+  // Remove before merging
+  // Prints test file to `Test` folder in React package
+  fs.writeFile(
+    '../packages/react/src/components/Test/output.js',
+    root.toSource(),
+    (err) => {
+      if (err) {
+        console.log(err);
+      } else {
+        console.log('File written');
+      }
+    }
+  );
+
+  return root.toSource(printOptions);
+}
+
+module.exports = transform;

packages/components/src/components/data-table/_data-table-action.scss

@@ -445,7 +445,9 @@
   //-------------------------------------------------
   //SMALL TOOLBAR
   //-------------------------------------------------
-  .#{$prefix}--table-toolbar--small {
+  // V11: remove --small
+  .#{$prefix}--table-toolbar--small,
+  .#{$prefix}--table-toolbar--sm {
     height: rem(32px);
 
     .#{$prefix}--toolbar-search-container-expandable,
@@ -531,31 +533,46 @@
   //-------------------------------------------------
   // SMALL BATCH ACTIONS
   //-------------------------------------------------
+  // V11: remove --small selector block
   .#{$prefix}--table-toolbar--small
+    .#{$prefix}--batch-actions
+    .#{$prefix}--action-list,
+  .#{$prefix}--table-toolbar--sm
     .#{$prefix}--batch-actions
     .#{$prefix}--action-list {
     height: rem(32px);
   }
 
-  .#{$prefix}--table-toolbar--small .#{$prefix}--toolbar-action {
+  // V11: remove --small selector block
+  .#{$prefix}--table-toolbar--small .#{$prefix}--toolbar-action,
+  .#{$prefix}--table-toolbar--sm .#{$prefix}--toolbar-action {
     width: rem(32px);
     height: rem(32px);
     padding: $spacing-03 0;
   }
 
-  .#{$prefix}--table-toolbar--small .#{$prefix}--btn--primary {
+  // V11: remove --small selector block
+  .#{$prefix}--table-toolbar--small .#{$prefix}--btn--primary,
+  .#{$prefix}--table-toolbar--sm .#{$prefix}--btn--primary {
     height: rem(32px);
     min-height: auto;
     padding-top: calc(0.375rem - 3px);
     padding-bottom: calc(0.375rem - 3px);
   }
 
+  // V11: remove --small selector block
   .#{$prefix}--table-toolbar--small
+    .#{$prefix}--btn--primary.#{$prefix}--batch-summary__cancel::before,
+  .#{$prefix}--table-toolbar--sm
     .#{$prefix}--btn--primary.#{$prefix}--batch-summary__cancel::before {
     top: rem(8px);
   }
 
+  // V11: remove --small selector block
   .#{$prefix}--table-toolbar--small
+    .#{$prefix}--toolbar-action
+    ~ .#{$prefix}--btn,
+  .#{$prefix}--table-toolbar--sm
     .#{$prefix}--toolbar-action
     ~ .#{$prefix}--btn {
     overflow: hidden;

packages/react/src/components/DataTable/TableToolbar.js

@@ -38,8 +38,9 @@ TableToolbar.propTypes = {
 
   /**
    * `normal` Change the row height of table
+   * V11: remove small, normal
    */
-  size: PropTypes.oneOf(['small', 'normal']),
+  size: PropTypes.oneOf(['small', 'sm', 'normal', 'lg']),
 };
 
 TableToolbar.defaultProps = {