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

* feat(codemod): add in codemod for size prop updates * test(codemod): add tests for size prop codemod * docs(codemod): remove testing story
carbon-design-system · May 5, 2021 · 6c2c9d8 · 6c2c9d8
1 parent a297449
commit 6c2c9d8
Show file tree

Hide file tree

Showing 7 changed files with 464 additions and 4 deletions.
diff --git a/codemods/transforms/__testfixtures__/size-prop-update.input.js b/codemods/transforms/__testfixtures__/size-prop-update.input.js
@@ -0,0 +1,143 @@
+function Accordion() {
+  return (
+    <div>
+      <Accordion className="test" size="xl" />
+      <Accordion className="test" size="xl">
+        <AccordionItem>Test</AccordionItem>
+      </Accordion>
+    </div>
+  );
+}
+
+function Button() {
+  return (
+    <div>
+      <Button className="test" size="small" />
+      <Button className="test" size="field"></Button>
+      <Button className="test" size="default"></Button>
+      <Button className="test" size="lg"></Button>
+      <Button className="test" size="xl"></Button>
+    </div>
+  );
+}
+
+function ComboBox() {
+  return <ComboBox className="test" size="xl" />;
+}
+
+function ContentSwitcher() {
+  return (
+    <ContentSwitcher className="test" size="xl">
+      <Switch name="one" text="First section" />
+      <Switch name="two" text="Second section" />
+      <Switch name="three" text="Third section" />
+    </ContentSwitcher>
+  );
+}
+
+function Dropdown() {
+  return <Dropdown className="test" size="xl" />;
+}
+
+function DataTable() {
+  return (
+    <div>
+      <Table className="test" size="compact"></Table>
+      <Table className="test" size="short"></Table>
+      <Table className="test" size="tall"></Table>
+      <DataTable className="test" size="compact"></DataTable>
+      <DataTable className="test" size="short"></DataTable>
+      <DataTable className="test" size="tall"></DataTable>
+    </div>
+  );
+}
+
+function DatePicker() {
+  return (
+    <DatePicker datePickerType="single">
+      <DatePickerInput
+        size="xl"
+        id="datepicker"
+        labelText="Datepicker Test"></DatePickerInput>
+    </DatePicker>
+  );
+}
+
+function FileUploader() {
+  return (
+    <div>
+      <FileUploader size="small"></FileUploader>
+      <FileUploader size="field"></FileUploader>
+      <FileUploader size="default"></FileUploader>
+      <FileUploaderItem size="small"></FileUploaderItem>
+      <FileUploaderItem size="field"></FileUploaderItem>
+      <FileUploaderItem size="default"></FileUploaderItem>
+      <FileUploaderButton size="small"></FileUploaderButton>
+      <FileUploaderButton size="field"></FileUploaderButton>
+      <FileUploaderButton size="default"></FileUploaderButton>
+      <FileUploaderDropContainer size="small"></FileUploaderDropContainer>
+      <FileUploaderDropContainer size="field"></FileUploaderDropContainer>
+      <FileUploaderDropContainer size="default"></FileUploaderDropContainer>
+    </div>
+  );
+}
+
+function Link() {
+  return <Link size="lg" />;
+}
+
+function MultiSelect() {
+  return (
+    <div>
+      <MultiSelect
+        size="xl"
+        items={items}
+        itemToString={(item) => (item ? item.text : '')}
+      />
+      <MultiSelect.Filterable
+        size="xl"
+        items={items}
+        itemToString={(item) => (item ? item.text : '')}
+      />
+    </div>
+  );
+}
+
+function NumberInput() {
+  return <NumberInput size="xl" id="numberinput"></NumberInput>;
+}
+
+function OverflowMenu() {
+  return <OverflowMenu size="xl" className="test"></OverflowMenu>;
+}
+
+function Search() {
+  return (
+    <div>
+      <Search className="test" size="lg" />
+      <Search className="test" size="xl" />
+    </div>
+  );
+}
+
+function Select() {
+  return (
+    <div>
+      <Select className="test" size="lg" />
+      <Select className="test" size="xl" />
+    </div>
+  );
+}
+
+function TextInput() {
+  return (
+    <div>
+      <TextInput size="lg" id="textinput1" labelText="lg -> md"></TextInput>
+      <TextInput size="xl" id="textinput1" labelText="xl -> lg"></TextInput>
+    </div>
+  );
+}
+
+function TimePicker() {
+  return <TimePicker size="xl" id="timeinput" />;
+}
diff --git a/codemods/transforms/__testfixtures__/size-prop-update.output.js b/codemods/transforms/__testfixtures__/size-prop-update.output.js
@@ -0,0 +1,143 @@
+function Accordion() {
+  return (
+    <div>
+      <Accordion className="test" size="lg" />
+      <Accordion className="test" size="lg">
+        <AccordionItem>Test</AccordionItem>
+      </Accordion>
+    </div>
+  );
+}
+
+function Button() {
+  return (
+    <div>
+      <Button className="test" size="sm" />
+      <Button className="test" size="md"></Button>
+      <Button className="test" size="lg"></Button>
+      <Button className="test" size="xl"></Button>
+      <Button className="test" size="2xl"></Button>
+    </div>
+  );
+}
+
+function ComboBox() {
+  return <ComboBox className="test" size="lg" />;
+}
+
+function ContentSwitcher() {
+  return (
+    <ContentSwitcher className="test" size="lg">
+      <Switch name="one" text="First section" />
+      <Switch name="two" text="Second section" />
+      <Switch name="three" text="Third section" />
+    </ContentSwitcher>
+  );
+}
+
+function Dropdown() {
+  return <Dropdown className="test" size="lg" />;
+}
+
+function DataTable() {
+  return (
+    <div>
+      <Table className="test" size="xs"></Table>
+      <Table className="test" size="sm"></Table>
+      <Table className="test" size="xl"></Table>
+      <DataTable className="test" size="xs"></DataTable>
+      <DataTable className="test" size="sm"></DataTable>
+      <DataTable className="test" size="xl"></DataTable>
+    </div>
+  );
+}
+
+function DatePicker() {
+  return (
+    <DatePicker datePickerType="single">
+      <DatePickerInput
+        size="lg"
+        id="datepicker"
+        labelText="Datepicker Test"></DatePickerInput>
+    </DatePicker>
+  );
+}
+
+function FileUploader() {
+  return (
+    <div>
+      <FileUploader size="sm"></FileUploader>
+      <FileUploader size="md"></FileUploader>
+      <FileUploader size="lg"></FileUploader>
+      <FileUploaderItem size="sm"></FileUploaderItem>
+      <FileUploaderItem size="md"></FileUploaderItem>
+      <FileUploaderItem size="lg"></FileUploaderItem>
+      <FileUploaderButton size="sm"></FileUploaderButton>
+      <FileUploaderButton size="md"></FileUploaderButton>
+      <FileUploaderButton size="lg"></FileUploaderButton>
+      <FileUploaderDropContainer size="sm"></FileUploaderDropContainer>
+      <FileUploaderDropContainer size="md"></FileUploaderDropContainer>
+      <FileUploaderDropContainer size="lg"></FileUploaderDropContainer>
+    </div>
+  );
+}
+
+function Link() {
+  return <Link size="lg" />;
+}
+
+function MultiSelect() {
+  return (
+    <div>
+      <MultiSelect
+        size="lg"
+        items={items}
+        itemToString={(item) => (item ? item.text : '')}
+      />
+      <MultiSelect.Filterable
+        size="lg"
+        items={items}
+        itemToString={(item) => (item ? item.text : '')}
+      />
+    </div>
+  );
+}
+
+function NumberInput() {
+  return <NumberInput size="lg" id="numberinput"></NumberInput>;
+}
+
+function OverflowMenu() {
+  return <OverflowMenu size="lg" className="test"></OverflowMenu>;
+}
+
+function Search() {
+  return (
+    <div>
+      <Search className="test" size="md" />
+      <Search className="test" size="lg" />
+    </div>
+  );
+}
+
+function Select() {
+  return (
+    <div>
+      <Select className="test" size="md" />
+      <Select className="test" size="lg" />
+    </div>
+  );
+}
+
+function TextInput() {
+  return (
+    <div>
+      <TextInput size="md" id="textinput1" labelText="lg -> md"></TextInput>
+      <TextInput size="lg" id="textinput1" labelText="xl -> lg"></TextInput>
+    </div>
+  );
+}
+
+function TimePicker() {
+  return <TimePicker size="lg" id="timeinput" />;
+}
diff --git a/codemods/transforms/__tests__/size-prop-update-test.js b/codemods/transforms/__tests__/size-prop-update-test.js
@@ -0,0 +1,12 @@
+/**
+ * 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';
+
+const { defineTest } = require('jscodeshift/dist/testUtils');
+
+defineTest(__dirname, 'size-prop-update');