Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[NO JIRA][BpkLoadingButton]: Updating TS types and removing propTypes ahead of React 18 #3588

Merged
merged 3 commits into from
Aug 16, 2024

Conversation

olliecurtis
Copy link
Member

As part of the migration to React 18 when running tests we found errors that were being through due to the mix of TS types and and propTypes which are deprecated and discouraged since React 17

console.error
    Warning: BpkLoadingButton: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
        at className (/Users/olivercurtis/Documents/Backpack/backpack/packages/bpk-component-loading-button/src/BpkLoadingButton.tsx:39:11)

Remember to include the following changes:

  • Ensure the PR title includes the name of the component you are changing so it's clear in the release notes for consumers of the changes in the version e.g [KOA-123][BpkButton] Updating the colour
  • README.md (If you have created a new component)
  • Component README.md
  • Tests
  • Accessibility tests
    • The following checks were performed:
      • Ability to navigate using a keyboard only
      • Zoom functionality (Deque University explanation):
        • The page SHOULD be functional AND readable when only the text is magnified to 200% of its initial size
        • Pages must reflow as zoom increases up to 400% so that content continues to be presented in only one column i.e. Content MUST NOT require scrolling in two directions (both vertically and horizontally)
      • Ability to navigate using a screen reader only
  • Storybook examples created/updated
  • For breaking changes or deprecating components/properties, migration guides added to the description of the PR. If the guide has large changes, consider creating a new Markdown page inside the component's docs folder and link it here

@olliecurtis olliecurtis added the patch Patch production bug label Aug 14, 2024
Copy link

Visit https://backpack.github.io/storybook-prs/3588 to see this build running in a browser.

Copy link

github-actions bot commented Aug 14, 2024

Warnings
⚠️

Package source files (e.g. packages/package-name/src/Component.tsx) were updated, but type files weren't. Have you checked that no types have changed?

Browser support

If this is a visual change, make sure you've tested it in multiple browsers.

Generated by 🚫 dangerJS against f3bf3e0

Copy link
Contributor

@amburrrshand amburrrshand left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice! Goodbye proptypes!!

@@ -156,39 +156,4 @@ const BpkLoadingButton = (props: LoadingProps) => {
);
};

BpkLoadingButton.propTypes = {
children: PropTypes.node.isRequired,
className: PropTypes.string,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should classname be included in the destructed props above?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thats a good catch! Having a deeper look, its not actually used in the component itself! So I am wondering if this was added for typing in the past but would just follow ...rest and go down to the BpkButton.

AFAIK flow/propTypes didn't have the concept of merging props with that of other components 🤔

@@ -16,9 +16,7 @@
* limitations under the License.
*/

/* @flow strict */
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey Ollie could you please explain the removals of flow strict and the changings of toMatchSnapshot ?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As this file uses Typescript having flow in here does nothing and flow isn't installed in the repo anymore for a long time.

In terms of the snapshots, moved away from these as they aren't reliable and to use a more reliable testing over snapshots, something we advocate for in Skyscanner

icon?: ReactElement<any>,
iconPosition: string,
iconPosition?: string,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
iconPosition?: string,
iconPosition?: ICON_POSITION.TRAILING || ICON_POSITION. LEADING,

Copy link

Visit https://backpack.github.io/storybook-prs/3588 to see this build running in a browser.

Copy link

Visit https://backpack.github.io/storybook-prs/3588 to see this build running in a browser.

@olliecurtis olliecurtis merged commit fce5d29 into main Aug 16, 2024
9 checks passed
@olliecurtis olliecurtis deleted the no-jira-fix-laoding-button-types branch August 16, 2024 16:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
patch Patch production bug
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants