@instructure/ui-codemods 8.17.1-snapshot.30 → 8.17.1-snapshot.71

package/lib/updateV8Props.ts

@@ -0,0 +1,74 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { API, FileInfo } from 'jscodeshift'
+import formatSource from './utils/formatSource'
+
+/**
+ * Renames components theme={} prop to themeOverride={}
+ */
+export default function updateV8Props(file: FileInfo, api: API) {
+  const j = api.jscodeshift
+  const root = j(file.source)
+  const instUIImports: string[] = []
+  root
+    .find(j.ImportDeclaration)
+    .filter((path) => {
+      const importSource = path.node.source.value
+      if (importSource && typeof importSource === 'string') {
+        return !!importSource.match(/@instructure\/ui/gm)
+      }
+      return false
+    })
+    .forEach((path) => {
+      if (path.node.specifiers) {
+        path.node.specifiers.forEach((specifier) => {
+          if (specifier.local) {
+            instUIImports.push(specifier.local.name)
+          }
+        })
+      }
+    })
+  let isChanged = false
+  instUIImports.forEach((instUIImport) => {
+    const elems = root
+      .find(j.JSXOpeningElement, {
+        name: {
+          type: 'JSXIdentifier',
+          name: instUIImport
+        }
+      })
+      .find(j.JSXIdentifier, {
+        name: 'theme'
+      })
+    elems.replaceWith('themeOverride')
+    if (elems.length > 0) {
+      isChanged = true
+    }
+  })
+  if (isChanged) {
+    return formatSource(root.toSource(), file.path)
+  }
+  return null
+}

package/lib/utils/UpdateV7ButtonsLink.ts

@@ -0,0 +1,139 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import {
+  addImportIfNeeded,
+  findAttribute,
+  findElements,
+  isJSXAttribue,
+  printWarning,
+  renameElements
+} from '../helpers/v7PropsUpdateHelpers'
+import { Collection, JSCodeshift, Literal } from 'jscodeshift'
+
+/**
+ * Does the following updates on a <Button>:
+ * - `variant="link" href=` -> `<Link isWithinText={false} href=..` and a
+ *   warning that padding can be removed.
+ * - `variant="link-inverse" href=` ->
+ *    <Link isWithinText={false} color="link-inverse" href=` and a warning
+ *    that padding can be removed
+ * - `variant="link"` or `variant="link-inverse"` and no `href` attribute ->
+ *    display a warning how to upgrade
+ */
+export default function UpdateV7ButtonsLink(
+  j: JSCodeshift,
+  root: Collection,
+  importedName: string,
+  filePath: string
+) {
+  ///// variant=link or variant=link-inverse, no href attribute display warning
+  findElements(filePath, j, root, importedName, {
+    name: 'variant',
+    value: ['link', 'link-inverse']
+  }).forEach((path) => {
+    const attributes = path.value.openingElement.attributes
+    if (!attributes) {
+      displayNoHrefWarning(filePath, path.value.loc!.start.line)
+      return
+    }
+    for (const attr of attributes) {
+      if (isJSXAttribue(attr) && attr.name.name === 'href') {
+        return
+      }
+    }
+    displayNoHrefWarning(filePath, path.value.loc!.start.line)
+  })
+  ////// find the link and link-inverse variants with href
+  const linkVariants = findElements(filePath, j, root, importedName, [
+    { name: 'variant', value: 'link' },
+    { name: 'href' }
+  ])
+  const linkInverseVariants = findElements(filePath, j, root, importedName, [
+    { name: 'variant', value: 'link-inverse' },
+    { name: 'href' }
+  ])
+  ///// insert import for Link to these and rename them
+  if (linkVariants.length > 0 || linkInverseVariants.length > 0) {
+    const linkImportName = addImportIfNeeded(j, root, 'Link', [
+      '@instructure/ui-link',
+      '@instructure/ui'
+    ])
+    renameElements(filePath, linkVariants, importedName, linkImportName)
+    renameElements(filePath, linkInverseVariants, importedName, linkImportName)
+  }
+
+  ///// insert isWithinText={false} and remove variant for variant="link"
+  findAttribute(filePath, j, linkVariants, 'href').insertAfter(
+    j.jsxAttribute(
+      j.jsxIdentifier('isWithinText'),
+      j.jsxExpressionContainer(j.jsxIdentifier('false'))
+    )
+  )
+  findAttribute(filePath, j, linkVariants, 'variant').remove()
+  linkVariants.forEach((path) => {
+    displayHrefWarning(filePath, path.value.loc!.start.line)
+  })
+
+  ///// variant="link-inverse" => color="link-inverse" isWithinText={false}
+  findAttribute(filePath, j, linkInverseVariants, 'href').insertAfter(
+    j.jsxAttribute(
+      j.jsxIdentifier('isWithinText'),
+      j.jsxExpressionContainer(j.jsxIdentifier('false'))
+    )
+  )
+  findAttribute(filePath, j, linkInverseVariants, 'variant').replaceWith(
+    (nodePath) => {
+      const { node } = nodePath
+      node.name.name = 'color'
+      ;(node.value as Literal).value = 'link-inverse'
+      return nodePath.node
+    }
+  )
+  linkVariants.forEach((path) => {
+    displayHrefWarning(filePath, path.value.loc!.start.line)
+  })
+}
+
+function displayHrefWarning(filePath: string, lineNumber: number) {
+  printWarning(
+    filePath,
+    lineNumber,
+    'Button with link or link-inverse variant might need the removal' +
+      ' of margin/padding parameters. Also you will likely need to add ' +
+      '@instructure/ui-link as a dependency. For more see ' +
+      'https://instructure.design/v7/#button-upgrade-guide/#button-upgrade-for-version-8.0-upgrading-variant-link-or-link-inverse-upgrade-examples-for-link-variant-with-an-href-attribute-and-padding-overrides'
+  )
+}
+
+function displayNoHrefWarning(filePath: string, lineNumber: number) {
+  printWarning(
+    filePath,
+    lineNumber,
+    'Button with link or link-inverse variants cannot be upgraded ' +
+      'manually when it has no href prop. Also you will likely need to add ' +
+      '@instructure/ui-link as a dependency. Read more at ' +
+      'https://instructure.design/v7/#button-upgrade-guide/#button-upgrade-for-version-8.0-upgrading-variant-link-or-link-inverse-upgrade-examples-for-link-variant-with-no-href-attribute-and-padding-overrides'
+  )
+}

package/lib/utils/updateV7ButtonsClose.ts

@@ -0,0 +1,104 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { Collection, JSCodeshift, Literal } from 'jscodeshift'
+import {
+  findAttribute,
+  findElements,
+  findImport,
+  getVisibleChildren,
+  isJSXExpressionContainer,
+  isJSXText,
+  printWarning,
+  removeAllChildren
+} from '../helpers/v7PropsUpdateHelpers'
+
+/**
+ * Does the following updates on a <CloseButton>:
+ * - `buttonRef=` -> `elementRef=`
+ * - `variant="icon"` removed
+ * - `variant="icon-inverse"` -> `color="primary-inverse"`
+ *
+ * If it has children it outputs a warning on how to upgrade them
+ **/
+export default function updateV7ButtonsClose(
+  j: JSCodeshift,
+  root: Collection,
+  filePath: string
+) {
+  const closeButtonImportName = findImport(j, root, 'CloseButton', [
+    '@instructure/ui-buttons',
+    '@instructure/ui'
+  ])
+  if (!closeButtonImportName) {
+    return false
+  }
+  ///// replace <CloseButton buttonRef=.. with <CloseButton elementRef=..
+  findElements(filePath, j, root, closeButtonImportName)
+    .find(j.JSXIdentifier, { name: 'buttonRef' })
+    .replaceWith('elementRef')
+
+  ///// If it has children try to move them under screenReaderLabel
+  findElements(filePath, j, root, closeButtonImportName).forEach((path) => {
+    const children = getVisibleChildren(path.value.children)
+    if (children.length == 1) {
+      const firstChild = children[0]
+      let screenReaderLabelText
+      if (isJSXText(firstChild)) {
+        screenReaderLabelText = j.stringLiteral(firstChild.value)
+      } else if (isJSXExpressionContainer(firstChild)) {
+        screenReaderLabelText = firstChild
+      }
+      path.value.openingElement.attributes!.push(
+        j.jsxAttribute(
+          j.jsxIdentifier('screenReaderLabel'),
+          screenReaderLabelText
+        )
+      )
+      removeAllChildren(path.value)
+    } else if (children.length > 1) {
+      printWarning(
+        filePath,
+        path.value.loc?.start.line,
+        'Cannot update CloseButton because it has multiple children.' +
+          'Children should be moved to the `screenReaderLabel` prop,' +
+          'You will need to update this manually.'
+      )
+    }
+  })
+
+  ///// Remove variant="icon" prop
+  findAttribute(filePath, j, root, 'variant', 'icon').remove()
+
+  ///// Change variant="icon-inverse" to color="primary-inverse"
+  findAttribute(filePath, j, root, 'variant', 'icon-inverse').replaceWith(
+    (nodePath) => {
+      const { node } = nodePath
+      node.name.name = 'color'
+      ;(node.value as Literal).value = 'primary-inverse'
+      return nodePath.node
+    }
+  )
+  return true
+}

package/lib/utils/updateV7ButtonsIconCircle.ts

@@ -0,0 +1,240 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import {
+  Collection,
+  JSCodeshift,
+  JSXAttribute,
+  JSXIdentifier,
+  Literal
+} from 'jscodeshift'
+import {
+  addImportIfNeeded,
+  findAttribute,
+  findElements,
+  getVisibleChildren,
+  isJSXElement,
+  isJSXExpressionContainer,
+  isJSXText,
+  printWarning,
+  removeAllChildren,
+  renameElements
+} from '../helpers/v7PropsUpdateHelpers'
+
+/**
+ * Does the following updates on a <Button>:
+ * - variant="icon" -> <IconButton withBackground={false} withBorder={false}
+ * - variant="icon-inverse" -> <IconButton color="primary-inverse" withBackground={false} withBorder={false}
+ * - variant="circle-default" -> <IconButton color="secondary" shape="circle"
+ * - variant="circle-danger" -> <IconButton color="danger" shape="circle"
+ * - variant="icon" -> <IconButton color="secondary" shape="circle"
+ *
+ * This codemod also adds an import to `IconButton`.
+ *
+ * It also outputs a warning and does not do anything if one of these variants
+ * has visible children (it simply checks whether it has 1
+ * `<ScreenReaderContent>` child.)
+ **/
+export default function updateV7ButtonsIconCircle(
+  j: JSCodeshift,
+  root: Collection,
+  importedName: string,
+  filePath: string
+) {
+  // find out if the button has got any visible text inside it, in this case
+  // just display a warning, that it cannot be upgraded.
+  const buttonsWithNoText = findElements(filePath, j, root, importedName, {
+    name: 'variant',
+    value: [
+      'icon',
+      'icon-inverse',
+      'circle-default',
+      'circle-primary',
+      'circle-danger'
+    ]
+  }).filter((path) => {
+    // finds all with no/ScreenReader children
+    const children = getVisibleChildren(path.value.children)
+    if (children.length == 0) {
+      return true
+    }
+    if (children.length > 1) {
+      printWarning(
+        filePath,
+        path.value.loc?.start.line,
+        'Cannot update icon/circle Button because it has multiple ' +
+          'children. You will need to update this manually.'
+      )
+      return false
+    }
+    let screenReaderChildText
+    const child = children[0]
+    if (
+      isJSXElement(child) &&
+      (child.openingElement.name as JSXIdentifier).name ===
+        'ScreenReaderContent'
+    ) {
+      const screenReaderChildren = getVisibleChildren(child.children)
+      if (screenReaderChildren.length === 1) {
+        if (!screenReaderChildText) {
+          const firstChild = screenReaderChildren[0]
+          if (isJSXText(firstChild)) {
+            screenReaderChildText = j.stringLiteral(firstChild.value)
+          } else if (isJSXExpressionContainer(firstChild)) {
+            screenReaderChildText = firstChild
+          } else {
+            printWarning(
+              filePath,
+              path.value.loc?.start.line,
+              'Cannot update icon/circle Button because I cant ' +
+                'recognize whats inside its ScreenReaderContent. ' +
+                'You will need to update this manually.'
+            )
+            return false
+          }
+        } else {
+          printWarning(
+            filePath,
+            path.value.loc?.start.line,
+            'Cannot update icon/circle Button because it has ' +
+              'multiple ScreenReaderContent children. You will need to ' +
+              'update this manually.'
+          )
+          return false
+        }
+      }
+    }
+    if (screenReaderChildText) {
+      path.value.openingElement.attributes!.push(
+        j.jsxAttribute(
+          j.jsxIdentifier('screenReaderLabel'),
+          screenReaderChildText
+        )
+      )
+      removeAllChildren(path.value)
+      return true
+    }
+    printWarning(
+      filePath,
+      path.value.loc?.start.line,
+      'Cannot update icon/circle Button because it has visible ' +
+        'children. You will need to update this manually.'
+    )
+    return false
+  })
+
+  if (buttonsWithNoText.length == 0) {
+    return
+  }
+  // add IconButton import
+  const iconButtonImportName = addImportIfNeeded(
+    j,
+    root,
+    'IconButton',
+    '@instructure/ui-buttons'
+  )
+
+  // rename every <Button> to <IconButton> (or whatever alias it's imported under)
+  renameElements(filePath, buttonsWithNoText, 'Button', iconButtonImportName)
+
+  // remove variant="icon", add withBorder={false} withBackground={false}
+  const iconButton = findAttribute(
+    filePath,
+    j,
+    buttonsWithNoText,
+    'variant',
+    'icon'
+  ).remove()
+  addWithBorderBackground(j, iconButton)
+
+  // change variant="icon-inverse" to color="primary-inverse" withBorder={false} withBackground={false}
+  const iconInverse = findAttribute(
+    filePath,
+    j,
+    buttonsWithNoText,
+    'variant',
+    'icon-inverse'
+  ).replaceWith((nodePath) => {
+    const { node } = nodePath
+    node.name.name = 'color'
+    ;(node.value as Literal).value = 'primary-inverse'
+    return nodePath.node
+  })
+  addWithBorderBackground(j, iconInverse)
+
+  // change variant="circle-default" to color="secondary" shape="circle"
+  findAttribute(filePath, j, buttonsWithNoText, 'variant', 'circle-default')
+    .replaceWith((nodePath) => {
+      const { node } = nodePath
+      node.name.name = 'color'
+      ;(node.value as Literal).value = 'secondary'
+      return nodePath.node
+    })
+    .insertAfter(
+      j.jsxAttribute(j.jsxIdentifier('shape'), j.stringLiteral('circle'))
+    )
+
+  // change variant="circle-primary" to color="primary" shape="circle"
+  findAttribute(filePath, j, buttonsWithNoText, 'variant', 'circle-primary')
+    .replaceWith((nodePath) => {
+      const { node } = nodePath
+      node.name.name = 'color'
+      ;(node.value as Literal).value = 'primary'
+      return nodePath.node
+    })
+    .insertAfter(
+      j.jsxAttribute(j.jsxIdentifier('shape'), j.stringLiteral('circle'))
+    )
+
+  // change variant="circle-danger" to color="danger" shape="circle"
+  findAttribute(filePath, j, buttonsWithNoText, 'variant', 'circle-danger')
+    .replaceWith((nodePath) => {
+      const { node } = nodePath
+      node.name.name = 'color'
+      ;(node.value as Literal).value = 'danger'
+      return nodePath.node
+    })
+    .insertAfter(
+      j.jsxAttribute(j.jsxIdentifier('shape'), j.stringLiteral('circle'))
+    )
+}
+
+function addWithBorderBackground(
+  j: JSCodeshift,
+  root: Collection<JSXAttribute>
+) {
+  root
+    .insertAfter(
+      j.jsxAttribute(
+        j.jsxIdentifier('withBorder'),
+        j.jsxExpressionContainer(j.jsxIdentifier('false'))
+      )
+    )
+    .insertAfter(
+      j.jsxAttribute(
+        j.jsxIdentifier('withBackground'),
+        j.jsxExpressionContainer(j.jsxIdentifier('false'))
+      )
+    )
+}

package/lib/utils/updateV7ButtonsMisc.ts

@@ -0,0 +1,137 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import {
+  findAttribute,
+  findElements,
+  isJSXAttribue,
+  isJSXExpressionContainer,
+  isLiteral,
+  printWarning
+} from '../helpers/v7PropsUpdateHelpers'
+import { Collection, JSCodeshift } from 'jscodeshift'
+
+/**
+ * Does the following updates on a <Button>:
+ * - `buttonRef` -> `elementRef`
+ * - `fluidWidth` -> removed and `display="block" textAlign="start"` added
+ *   (overwrites any existing `display` and `textAlign` props)
+ * - `icon` -> `renderIcon`
+ */
+export default function updateV7ButtonsMisc(
+  j: JSCodeshift,
+  root: Collection,
+  importedName: string,
+  filePath: string
+) {
+  ///// <Button fluidWidth .. -> <Button display="block" textAlign="start"
+  // remove fluidWidth attribute if its value is 'false' (it's the default)
+  findElements(filePath, j, root, importedName)
+    .find(j.JSXAttribute, {
+      name: {
+        name: 'fluidWidth'
+      },
+      value: {
+        expression: {
+          value: false
+        }
+      }
+    })
+    .remove()
+
+  const buttonsWithFluidWidth = findElements(filePath, j, root, importedName, {
+    name: 'fluidWidth'
+  }).filter((path) => {
+    const attributes = path.value.openingElement.attributes!
+    for (const att of attributes) {
+      if (isJSXAttribue(att) && att.name.name === 'fluidWidth') {
+        if (!att.value) {
+          // <Button fluidWidth />
+          return true
+        }
+        if (
+          isJSXExpressionContainer(att.value) &&
+          isLiteral(att.value.expression) &&
+          typeof att.value.expression.value === 'boolean'
+        ) {
+          // <Button fluidWidth={true} />
+          return att.value.expression.value
+        } else {
+          printWarning(
+            filePath,
+            att.loc?.start.line,
+            "Button's `fluidWidth` attribute has non-literal" +
+              ' value, please update manually.'
+          )
+          return false
+        }
+      }
+    }
+    return false
+  })
+  // remove fluidWidth attribute
+  findAttribute(filePath, j, buttonsWithFluidWidth, 'fluidWidth').remove()
+  // remove display attribute
+  findAttribute(filePath, j, buttonsWithFluidWidth, 'display')
+    .forEach((path) => {
+      printWarning(
+        filePath,
+        path.value.loc!.start.line,
+        "'display' attribute was changed to 'block'"
+      )
+    })
+    .remove()
+  // remove textAlign attribute
+  findAttribute(filePath, j, buttonsWithFluidWidth, 'textAlign')
+    .forEach((path) => {
+      printWarning(
+        filePath,
+        path.value.loc!.start.line,
+        "'textAlign' attribute was changed to 'start'"
+      )
+    })
+    .remove()
+  // add display="block" attribute
+  buttonsWithFluidWidth.forEach((path) => {
+    path.value.openingElement.attributes!.push(
+      j.jsxAttribute(j.jsxIdentifier('display'), j.stringLiteral('block'))
+    )
+  })
+  // add textAlign="start" attribute
+  buttonsWithFluidWidth.forEach((path) => {
+    path.value.openingElement!.attributes!.push(
+      j.jsxAttribute(j.jsxIdentifier('textAlign'), j.stringLiteral('start'))
+    )
+  })
+
+  ///// replace <Button icon=.. with <Button renderIcon=..
+  findElements(filePath, j, root, importedName)
+    .find(j.JSXIdentifier, { name: 'icon' })
+    .replaceWith('renderIcon')
+
+  ///// replace <Button buttonRef=.. with <Button elementRef=..
+  findElements(filePath, j, root, importedName)
+    .find(j.JSXIdentifier, { name: 'buttonRef' })
+    .replaceWith('elementRef')
+}