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.

Sign up for GitHub

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

fix(BigNumbers): Convert to TypeScript #6734

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

fix(BigNumbers): Convert to TypeScript #6734

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
473af12
fix: converted to ts
paul-balchin-ibm Jan 20, 2025
d47a652
fix: quick fixes after review
paul-balchin-ibm Jan 20, 2025
cb4cf2f
Merge branch 'main' into 6689_convert-big-numbers-to-typescript
paul-balchin-ibm Jan 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 16 additions & 8 deletions packages/ibm-products-styles/src/components/BigNumbers/_big-numbers.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ $skeleton-block-class: #{c4p-settings.$pkg-prefix}--big-numbers-skeleton;
.#{$block-class}__value {
@include type-style('heading-04');

margin-bottom: 0;
margin-block-end: 0;
}

.#{$block-class}__total {
Expand All @@ -43,16 +43,16 @@ $skeleton-block-class: #{c4p-settings.$pkg-prefix}--big-numbers-skeleton;

.#{$block-class}__total,
.#{$block-class}__percentage-mark {
margin-top: auto;
margin-bottom: $spacing-02;
margin-block-end: $spacing-02;
margin-block-start: auto;
}

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

.#{$block-class}__trend {
margin-top: $spacing-03;
margin-block-start: $spacing-03;
Copy link
Contributor Author

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

Choose a reason for hiding this comment

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

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

vertical-align: top;
}

Expand All @@ -61,7 +61,7 @@ $skeleton-block-class: #{c4p-settings.$pkg-prefix}--big-numbers-skeleton;
}

.#{$block-class}__info {
padding-left: $spacing-03;
padding-inline-start: $spacing-03;
}

.#{$block-class}__percentage {
Expand All @@ -72,6 +72,10 @@ $skeleton-block-class: #{c4p-settings.$pkg-prefix}--big-numbers-skeleton;
@include type-style('body-compact-01');
}

.#{$block-class}__icon-button {
margin-inline-start: $spacing-02;
}

.#{$block-class}--lg .#{$block-class}__value,
.#{$block-class}--lg .#{$block-class}__percentage {
@include type-style('heading-06');
Expand All @@ -97,17 +101,21 @@ $skeleton-block-class: #{c4p-settings.$pkg-prefix}--big-numbers-skeleton;
}

.#{$block-class}--xl .#{$block-class}__trend {
margin-top: $spacing-04;
margin-block-start: $spacing-04;
}

//
// Skeleton
//

.#{$skeleton-block-class} {
width: 4rem;
}

.#{$skeleton-block-class}__label {
height: $spacing-04;
margin-top: 0;
margin-bottom: $spacing-03;
margin-block-end: $spacing-03;
margin-block-start: 0;
}

.#{$skeleton-block-class}__value {
Expand Down
8 changes: 1 addition & 7 deletions packages/ibm-products/src/components/BigNumbers/BigNumbers.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import * as BigNumbersStories from './BigNumbers.stories';
## Overview

BigNumbers is used to display large values in a small area. The display of
values can be the value itself, or grouped in a numerator / denominator fashion.
values can be the value itself, or grouped in a `numerator/denominator` fashion.
Control over the total fraction decimals displayed as well as how the
values/totals are displayed are done via a locale prop. Other optional props
allow control over size, truncation, if the value is a percentage, the addition
Expand All @@ -33,12 +33,6 @@ of a button as well as tool tip functionality. The default locale is English
<Story of={BigNumbersStories.bigNumbers} />
</Canvas>

### Big numbers with edit button

<Canvas>
<Story of={BigNumbersStories.withEditButton} />
</Canvas>

## Code sample

{/* <CodesandboxLink exampleDirectory="BigNumbers" /> */}
Expand Down
115 changes: 57 additions & 58 deletions packages/ibm-products/src/components/BigNumbers/BigNumbers.stories.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
import React from 'react';
import { Button } from '@carbon/react';
import { Edit } from '@carbon/react/icons';
import { action } from '@storybook/addon-actions';

import { BigNumbers } from '.';
import { BigNumbersSize } from './constants';
Expand All @@ -17,13 +18,14 @@ import mdx from './BigNumbers.mdx';
import styles from './_storybook-styles.scss?inline';

const numericOptions = {
'-123': -123,
'-123 ': -123,
'0 ': 0,
'12 ': 12,
'345 ': 345,
'6789 ': 6789,
'12345.678 ': 12345.678,
'678901.2456 ': 678901.2456,
'1000000 ': 1000000,
'2345678 ': 2345678,
'90123456 ': 90123456,
'789012345 ': 789012345,
Expand All @@ -32,44 +34,37 @@ const numericOptions = {
'undefined ': undefined,
};

const iconButtonOptions = {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

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

'undefined ': null,
'Example <Button> ': (
<Button
renderIcon={Edit}
iconDescription="Icon Description"
kind="ghost"
size={'sm'}
hasIconOnly
onClick={action('Button.onClick()')}
Copy link
Contributor Author

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

Choose a reason for hiding this comment

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

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

tooltipPosition="bottom"
/>
),
};

export default {
title: 'Experimental/Components/Big numbers/BigNumbers',
component: BigNumbers,
tags: ['autodocs'],
// TODO: Define argTypes for props not represented by standard JS types.
argTypes: {
loading: {
options: [true, false],
control: { type: 'boolean' },
},
value: {
control: { type: 'select', labels: Object.keys(numericOptions) },
options: Object.values(numericOptions).map((_k, i) => i),
mapping: Object.values(numericOptions),
},
total: {
control: { type: 'select', labels: Object.keys(numericOptions) },
options: Object.values(numericOptions).map((_k, i) => i),
mapping: Object.values(numericOptions),
},
size: {
options: Object.values(BigNumbersSize),
control: { type: 'radio' },
},
percentage: {
options: [true, false],
control: { type: 'boolean' },
},
forceShowTotal: {
options: [true, false],
control: { type: 'boolean' },
},

trending: {
options: [true, false],
control: { type: 'boolean' },
iconButton: {
control: { type: 'select', labels: Object.keys(iconButtonOptions) },
options: Object.values(iconButtonOptions).map((_k, i) => i),
mapping: Object.values(iconButtonOptions),
},
truncate: {
loading: {
options: [true, false],
control: { type: 'boolean' },
},
Expand Down Expand Up @@ -112,8 +107,31 @@ export default {
],
control: { type: 'select' },
},
iconButton: {
control: { type: null },
percentage: {
options: [true, false],
control: { type: 'boolean' },
},
size: {
options: Object.values(BigNumbersSize),
control: { type: 'radio' },
},
total: {
control: { type: 'select', labels: Object.keys(numericOptions) },
options: Object.values(numericOptions).map((_k, i) => i),
mapping: Object.values(numericOptions),
},
trending: {
options: [true, false],
control: { type: 'boolean' },
},
truncate: {
options: [true, false],
control: { type: 'boolean' },
},
value: {
control: { type: 'select', labels: Object.keys(numericOptions) },
options: Object.values(numericOptions).map((_k, i) => i),
mapping: Object.values(numericOptions),
},
},
parameters: {
Expand All @@ -125,28 +143,26 @@ export default {
};

const defaultProps = {
forceShowTotal: false,
fractionDigits: 1,
iconButton: 0,
label: 'Label',
value: 12345.678,
total: 678901.2456,
loading: false,
locale: 'en-US',
percentage: false,
size: BigNumbersSize.Default,
forceShowTotal: false,
tooltipDescription: '',
total: 13,
trending: false,
truncate: true,
locale: 'en-US',
value: 5,
Copy link
Contributor Author

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

Choose a reason for hiding this comment

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

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

};

/**
* TODO: Declare template(s) for one or more scenarios.
*/
const Template = (args) => {
return (
<BigNumbers
// TODO: handle events with action or local handler.
// onTodo={action('onTodo log action')}
{...args}
/>
);
return <BigNumbers {...args} />;
};

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

export const withEditButton = Template.bind({});
Copy link
Contributor Author

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

Choose a reason for hiding this comment

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

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

withEditButton.args = {
...defaultProps,
tooltipDescription: 'Tooltip description',
iconButton: (
<Button
renderIcon={Edit}
iconDescription="Icon Description"
kind="ghost"
size={'sm'}
hasIconOnly
onClick={() => console.log('clicked icon')}
tooltipPosition="bottom"
/>
),
};
Loading
Loading