feat(codemods): add codemod to upgrade V1 Buttons

[HeartSquared]

Why

Make adoption easier.

What

Codemod to upgrade Button v1/v2 and IconButton v1/v2 to Button v3 or LinkButton v3

Assumptions:

• label should always exist, and become children
• children should not already exist (always a self-closing element)

Props:

• onClick → onPress
• label → children (self-closing → open/close element)
  • Examples of different types of label usage:
    • "Actions"
    • {"Actions for section" // TODO: i18n}
    • {"Back to Main Menu"}
    • {`Further options for ${track.name}`}
    • { showEmojiPicker ? formatMessage({ id: "liteRTE.emojiPickerLabel.close", defaultMessage: "Close emoji picker", description: "Label for the button that closes the emoji picker", }) : formatMessage({ id: "liteRTE.emojiPickerLabel.open", defaultMessage: "Open emoji picker", description: "Label for the button that opens the emoji picker", }) }
    • {label}
• Update variants
  • Default (undefined):
    • Button -> variant secondary
    • IconButton -> variant tertiary
  • primary → variant primary
  • secondary → variant tertiary
  • destructive → delete
• Update size
  • regular → large
  • small → medium
  • There is a usage of size={size} which would likely have a TS error - leave as is
• reversed → isReversed
• onMouseDown → onPressStart
• fullWidth → isFullWidth
• classNameOverride → className
• data-automation-id → data-testid
• disabled → isDisabled
• newTabAndIUnderstandTheAccessibilityImplications → target="_blank"
  • Also add rel="noopener noreferrer"
• IconButton only:
  • Add hasHiddenLabel
• disableTabFocusAndIUnderstandTheAccessibilityImplications → excludeFromTabOrder
• newTabAndIUnderstandTheAccessibilityImplications → removed
  • this is all handled through target blank and isn't needed

Component name:

• IconButton (v1/v2) without href or component → Button (v3)
• IconButton (v1/v2) with href → LinkButton
• IconButton (v1/v2) with component → LinkButton
• Button (v1/v2) without href or component → Button (v3)
• Button (v1/v2) with href → LinkButton
• Button (v1/v2) with component → LinkButton

Imports:

• From:
  • @kaizen/components
  • @kaizen/components/v1/actions
  • @kaizen/components/v2/actions
• To:
  • @kaizen/components/v3/actions
• IconButton may be aliased - use alias
• Button may be aliased - use alias
• Button (v3) not imported - add import
• Button (v3) may already be used
  • Do not add an additional import
  • Button may be aliased - use alias

[changeset-bot]

🦋 Changeset detected

Latest commit: b00705b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@kaizen/components	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

✨ Here is your branch preview! ✨

• Storybook

Last updated for commit b00705b: Merge branch 'main' into KZN-2846/codemod--upgrade-button

[mcwinter07]

Question is, with this codemod, do we want to update to the versioned entires for button? or the next entry point outline in the tech vision 🤔 @dougmacknz