fix(BigNumbers): Convert to TypeScript #6734

paul-balchin-ibm · 2025-01-20T17:57:21Z

Converted to TypeScript and updated code.
Rewrote prop descriptions.
Converted CSS margins and padding from standard to logical.
Pushed tests/coverage to 100%.
Updated Storybook Controls.

What did you change?

BigNumbers.mdx
BigNumbers.stories.jsx
BigNumbers.test.js
BigNumbers.tsx
BigNumbersSkeleton.tsx
_storybook-styles.scss
constants.js
index.ts

How did you test and verify your work?

Storybook
Tests/coverage

netlify · 2025-01-20T17:57:45Z

✅ Deploy Preview for ibm-products-web-components ready!

Name	Link
🔨 Latest commit	`cb4cf2f`
🔍 Latest deploy log	https://app.netlify.com/sites/ibm-products-web-components/deploys/678e939f5e7bcc0008733cc4
😎 Deploy Preview	https://deploy-preview-6734--ibm-products-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2025-01-20T17:57:46Z

✅ Deploy Preview for carbon-for-ibm-products ready!

Name	Link
🔨 Latest commit	`cb4cf2f`
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-for-ibm-products/deploys/678e939f45b5fe0008b359ee
😎 Deploy Preview	https://deploy-preview-6734--carbon-for-ibm-products.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

paul-balchin-ibm · 2025-01-20T17:59:29Z

packages/ibm-products-styles/src/components/BigNumbers/_big-numbers.scss

 }

 .#{$block-class}__info {
  vertical-align: top;
 }

 .#{$block-class}__trend {
-  margin-top: $spacing-03;
+  margin-block-start: $spacing-03;


Added a little space so that the button isn't touching the number on hover.

paul-balchin-ibm · 2025-01-20T18:01:33Z

packages/ibm-products/src/components/BigNumbers/BigNumbers.stories.jsx

@@ -32,44 +34,37 @@ const numericOptions = {
  'undefined ': undefined,
 };

+const iconButtonOptions = {


Added the ability to show/hide the Edit button via a Storybook dropdown. This means we could remove the withEditButton page.

codecov · 2025-01-20T18:02:30Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 80.97%. Comparing base (df21099) to head (cb4cf2f).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #6734      +/-   ##
==========================================
+ Coverage   80.90%   80.97%   +0.06%     
==========================================
  Files         398      399       +1     
  Lines       12953    12958       +5     
  Branches     4280     4280              
==========================================
+ Hits        10480    10493      +13     
+ Misses       2473     2465       -8

Components	Coverage Δ
ibm-products	`∅ <ø> (∅)`
ibm-products-web-components	`∅ <ø> (∅)`

paul-balchin-ibm · 2025-01-20T18:02:37Z

packages/ibm-products/src/components/BigNumbers/BigNumbers.stories.jsx

  trending: false,
  truncate: true,
-  locale: 'en-US',
+  value: 5,


Fixed value so that it's pointing to an item in the list by default.

paul-balchin-ibm · 2025-01-20T18:03:23Z

packages/ibm-products/src/components/BigNumbers/BigNumbers.stories.jsx

+      kind="ghost"
+      size={'sm'}
+      hasIconOnly
+      onClick={action('Button.onClick()')}


Added an action so that clicking the Edit button shows an entry in the Actions tab when clicked.

paul-balchin-ibm · 2025-01-20T18:03:54Z

packages/ibm-products/src/components/BigNumbers/BigNumbers.stories.jsx

@@ -157,20 +173,3 @@ export const bigNumbers = Template.bind({});
 bigNumbers.args = {
  ...defaultProps,
 };
-
-export const withEditButton = Template.bind({});


With the added ability to show/hide the Edit button in the Controls tab, this template is no longer req'd.

paul-balchin-ibm · 2025-01-20T18:06:46Z

packages/ibm-products/src/components/BigNumbers/BigNumbers.test.js

-      total={55555}
-      percentage={false}
-      size={BigNumbersSize.Default}
-      forceShowTotal={false}
-      trending={false}
-      truncate={true}
-      locale="en-US"


Removing these "default" values means each test below only has to pass the props specific to the test, instead of having to consider "add/change/remove" every time.

paul-balchin-ibm · 2025-01-20T18:09:43Z

packages/ibm-products/src/components/BigNumbers/BigNumbers.tsx

 import { TooltipTrigger } from '../TooltipTrigger';
+import { BigNumbersSkeleton } from './BigNumbersSkeleton';


The skeleton component that was sitting at the bottom of this file was moved to its own file.

paul-balchin-ibm · 2025-01-20T18:14:42Z

packages/ibm-products/src/components/BigNumbers/BigNumbers.tsx

@@ -184,126 +180,64 @@ BigNumbers.displayName = componentName;
 // in alphabetical order (for consistency).
 // See https://www.npmjs.com/package/prop-types#usage.
 BigNumbers.propTypes = {
-  /**
-   * Optional class name.
-   * @type number


Removed all BigNumbers.propTypes > @type ... references since it doesn't seem to be used elsewhere.

paul-balchin-ibm · 2025-01-20T18:18:06Z

packages/ibm-products/src/components/BigNumbers/constants.js

-  Intl.NumberFormat.supportedLocalesOf(locale).length > 0
-    ? locale
-    : DefaultLocale;
+export const getSupportedLocale = (locale) => {


Updated to try/catch because this

Intl.NumberFormat.supportedLocalesOf(locale);

will throw an error if an unsupported locale string is used.

this looks like a handy utility. i would move this into the global utilities folder!

davidmenendez

looking good! just a few comments

davidmenendez · 2025-01-22T19:34:53Z

packages/ibm-products/src/components/BigNumbers/BigNumbers.tsx

-    },
-    ref
+    }: BigNumbersProps,
+    ref: React.ForwardedRef<HTMLDivElement>
  ) => {


minor stylistic thing here, but i think it's cleaner to adopt this signature

const Component = forwardRef<HTMLDivElement, Props>((props, ref,) => { const { prop1 = 'default value', prop2, prop3, ...rest } = props; ... });

this way you get more stuff out of the signature and into the body

davidmenendez · 2025-01-22T19:35:59Z

packages/ibm-products/src/components/BigNumbers/BigNumbersSkeleton.tsx

+// Use the same properties and values as parent BigNumbersProps
+type BigNumbersSkeletonProps = Pick<BigNumbersProps, 'className' | 'size'>;
+
+export const BigNumbersSkeleton = React.forwardRef(


same comment about signature structure

davidmenendez · 2025-01-22T19:36:42Z

packages/ibm-products/src/components/BigNumbers/BigNumbersSkeleton.tsx

+    return (
+      <div
+        {...rest}
+        className={cx(className, blockClass, BigNumbersSkeletonClasses)}


you can just include className and blockClass in the BigNumbersSkeletonClasses definition and simplify it to className={BigNumbersSkeletonClasses}

davidmenendez · 2025-01-22T19:37:45Z

packages/ibm-products/src/components/BigNumbers/BigNumbersSkeleton.tsx

+
+import { getDevtoolsProps } from '../../global/js/utils/devtools';
+import { pkg } from '../../settings';
+import classnames from 'classnames';


cx is already being imported above

davidmenendez · 2025-01-22T19:39:08Z

packages/ibm-products/src/components/BigNumbers/constants.js

-  Intl.NumberFormat.supportedLocalesOf(locale).length > 0
-    ? locale
-    : DefaultLocale;
+export const getSupportedLocale = (locale) => {


this looks like a handy utility. i would move this into the global utilities folder!

fix: converted to ts

473af12

paul-balchin-ibm requested a review from a team as a code owner January 20, 2025 17:57

paul-balchin-ibm requested review from davidmenendez and anamikaanu96 and removed request for a team January 20, 2025 17:57

paul-balchin-ibm commented Jan 20, 2025

View reviewed changes

paul-balchin-ibm and others added 2 commits January 20, 2025 13:18

fix: quick fixes after review

d47a652

Merge branch 'main' into 6689_convert-big-numbers-to-typescript

cb4cf2f

paul-balchin-ibm changed the title ~~fix(BigNumbers): Convert to TS~~ fix(BigNumbers): Convert to TypeScript Jan 20, 2025

davidmenendez requested changes Jan 22, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(BigNumbers): Convert to TypeScript #6734

fix(BigNumbers): Convert to TypeScript #6734

paul-balchin-ibm commented Jan 20, 2025 •

edited

Loading

netlify bot commented Jan 20, 2025 •

edited

Loading

netlify bot commented Jan 20, 2025 •

edited

Loading

paul-balchin-ibm Jan 20, 2025 •

edited

Loading

paul-balchin-ibm Jan 20, 2025

codecov bot commented Jan 20, 2025 •

edited

Loading

paul-balchin-ibm Jan 20, 2025 •

edited

Loading

paul-balchin-ibm Jan 20, 2025 •

edited

Loading

paul-balchin-ibm Jan 20, 2025 •

edited

Loading

paul-balchin-ibm Jan 20, 2025

paul-balchin-ibm Jan 20, 2025

paul-balchin-ibm Jan 20, 2025 •

edited

Loading

paul-balchin-ibm Jan 20, 2025 •

edited

Loading

davidmenendez Jan 22, 2025

davidmenendez left a comment

davidmenendez Jan 22, 2025

davidmenendez Jan 22, 2025

davidmenendez Jan 22, 2025

davidmenendez Jan 22, 2025

davidmenendez Jan 22, 2025

		import { TooltipTrigger } from '../TooltipTrigger';
		import { BigNumbersSkeleton } from './BigNumbersSkeleton';

fix(BigNumbers): Convert to TypeScript #6734

Are you sure you want to change the base?

fix(BigNumbers): Convert to TypeScript #6734

Conversation

paul-balchin-ibm commented Jan 20, 2025 • edited Loading

What did you change?

How did you test and verify your work?

netlify bot commented Jan 20, 2025 • edited Loading

✅ Deploy Preview for ibm-products-web-components ready!

netlify bot commented Jan 20, 2025 • edited Loading

✅ Deploy Preview for carbon-for-ibm-products ready!

paul-balchin-ibm Jan 20, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codecov bot commented Jan 20, 2025 • edited Loading

Codecov Report

paul-balchin-ibm Jan 20, 2025 • edited Loading

Choose a reason for hiding this comment

paul-balchin-ibm Jan 20, 2025 • edited Loading

Choose a reason for hiding this comment

paul-balchin-ibm Jan 20, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

paul-balchin-ibm Jan 20, 2025 • edited Loading

Choose a reason for hiding this comment

paul-balchin-ibm Jan 20, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

davidmenendez left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

paul-balchin-ibm commented Jan 20, 2025 •

edited

Loading

netlify bot commented Jan 20, 2025 •

edited

Loading

netlify bot commented Jan 20, 2025 •

edited

Loading

paul-balchin-ibm Jan 20, 2025 •

edited

Loading

codecov bot commented Jan 20, 2025 •

edited

Loading

paul-balchin-ibm Jan 20, 2025 •

edited

Loading

paul-balchin-ibm Jan 20, 2025 •

edited

Loading

paul-balchin-ibm Jan 20, 2025 •

edited

Loading

paul-balchin-ibm Jan 20, 2025 •

edited

Loading

paul-balchin-ibm Jan 20, 2025 •

edited

Loading