Skip to content

Commit 98ccdc8

Browse files
mitrotasiosethndotsh
mitrotasios
and
ethndotsh
authored
fix: Icon prop on Button component uses incorrect capitalization (#92) (#110)
* Buttons * Badge * Icon * DropdownItem * SelectBoxItem * ToggleItem * Callout * Stories * Tests * Fix incorrect props in tests * Revert "Fix incorrect props in tests" This reverts commit ee20530. * test: fix icon param in stories * Add icon to Toggle stories Co-authored-by: mitrotasios <[email protected]> Co-authored-by: curse <[email protected]>
1 parent d49df4c commit 98ccdc8

File tree

18 files changed

+272
-241
lines changed

18 files changed

+272
-241
lines changed

‎src/components/icon-elements/Badge/Badge.tsx‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -21,24 +21,25 @@ export interface BadgeProps {
2121
text: string,
2222
color?: Color,
2323
size?: Size,
24-
Icon?: React.ElementType,
24+
icon?: React.ElementType,
2525
tooltip?: string,
2626
marginTop?: MarginTop,
2727
}
2828

2929
const Badge = ({
3030
text,
3131
color = BaseColors.Blue,
32-
Icon,
32+
icon,
3333
size = Sizes.SM,
3434
tooltip,
3535
marginTop = 'mt-0',
3636
}: BadgeProps) => {
3737
const badgeSize = isValidSize(size) ? size : Sizes.SM;
38-
return(
39-
<div className={ classNames( parseMarginTop(marginTop)) }>
40-
<Tooltip content={ tooltip } className={ tooltip ? '' : 'tr-hidden' }>
41-
<span className={ classNames(
38+
const Icon = icon ? icon : null;
39+
return (
40+
<div className={classNames(parseMarginTop(marginTop))}>
41+
<Tooltip content={tooltip} className={tooltip ? '' : 'tr-hidden'}>
42+
<span className={classNames(
4243
'tr-flex-shrink-0 tr-inline-flex tr-justify-center tr-items-center',
4344
getColorVariantsFromColorThemeValue(getColorTheme(color).text).textColor,
4445
getColorVariantsFromColorThemeValue(getColorTheme(color).lightBackground).bgColor,
@@ -48,17 +49,17 @@ const Badge = ({
4849
badgeProportions[badgeSize].paddingTop,
4950
badgeProportions[badgeSize].paddingBottom,
5051
badgeProportions[badgeSize].fontSize,
51-
) }>
52-
{ Icon ? (
53-
<Icon className={ classNames(
52+
)}>
53+
{Icon ? (
54+
<Icon className={classNames(
5455
spacing.twoXs.negativeMarginLeft,
5556
spacing.xs.marginRight,
5657
iconSizes[badgeSize].height,
5758
iconSizes[badgeSize].width,
58-
) }
59+
)}
5960
/>
60-
) : null }
61-
<p className="tr-whitespace-nowrap">{ text }</p>
61+
) : null}
62+
<p className="tr-whitespace-nowrap">{text}</p>
6263
</span>
6364
</Tooltip>
6465
</div>

‎src/components/icon-elements/Icon/Icon.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { BaseColors, Sizes, classNames, isBaseColor, isValidSize, parseMarginTop
77
import { Color, IconVariant, MarginTop, Size } from '../../../lib';
88
import { colors, iconSizes, shape, wrapperProportions } from './styles';
99

10-
export const IconVariants: {[key: string]: IconVariant} = {
10+
export const IconVariants: { [key: string]: IconVariant } = {
1111
Simple: 'simple',
1212
Light: 'light',
1313
Shadow: 'shadow',
@@ -20,7 +20,7 @@ const isValidIconVariant = (iconVariant: IconVariant): boolean => {
2020
};
2121

2222
export interface IconProps {
23-
Icon: React.ElementType,
23+
icon: React.ElementType,
2424
variant?: IconVariant,
2525
tooltip?: string,
2626
size?: Size,
@@ -29,7 +29,7 @@ export interface IconProps {
2929
}
3030

3131
const Icon = ({
32-
Icon,
32+
icon,
3333
variant = IconVariants.Simple,
3434
tooltip,
3535
size = Sizes.SM,
@@ -39,12 +39,12 @@ const Icon = ({
3939
const iconSize = isValidSize(size) ? size : Sizes.SM;
4040
const iconVariant = isValidIconVariant(variant) ? variant : IconVariants.Simple;
4141
const iconColors = isBaseColor(color) ? colors[iconVariant][color] : colors[iconVariant][BaseColors.Blue];
42-
42+
const Icon = icon;
4343
return (
44-
<span className={ classNames(parseMarginTop(marginTop)) }>
45-
<Tooltip content={ tooltip } className={ tooltip ? '' : 'tr-hidden' }>
44+
<span className={classNames(parseMarginTop(marginTop))}>
45+
<Tooltip content={tooltip} className={tooltip ? '' : 'tr-hidden'}>
4646
<span
47-
className={ classNames(
47+
className={classNames(
4848
'tr-inline-flex tr-flex-shrink-0 tr-items-center',
4949
iconColors.bgColor,
5050
iconColors.textColor,
@@ -58,12 +58,12 @@ const Icon = ({
5858
wrapperProportions[iconSize].paddingRight,
5959
wrapperProportions[iconSize].paddingTop,
6060
wrapperProportions[iconSize].paddingBottom,
61-
) }
61+
)}
6262
>
63-
<Icon className={ classNames(
63+
<Icon className={classNames(
6464
iconSizes[iconSize].height,
6565
iconSizes[iconSize].width,
66-
) } />
66+
)} />
6767
</span>
6868
</Tooltip>
6969
</span>

‎src/components/input-elements/Button/Button.tsx‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ import {
2525

2626
export interface ButtonProps {
2727
text: string,
28-
Icon?: React.ElementType,
28+
icon?: React.ElementType,
2929
iconPosition?: HorizontalPosition,
3030
size?: Size,
3131
color?: Color,
@@ -36,7 +36,7 @@ export interface ButtonProps {
3636

3737
const Button = ({
3838
text,
39-
Icon,
39+
icon,
4040
iconPosition = HorizontalPositions.Left,
4141
handleClick,
4242
size = Sizes.SM,
@@ -47,12 +47,13 @@ const Button = ({
4747
const buttonColors = isBaseColor(color) ? colors[color] : colors[BaseColors.Blue];
4848
const buttonSize = isValidSize(size) ? size : Sizes.SM;
4949
const buttonImportance = isValidImportance(importance) ? importance : Importances.Primary;
50-
return(
51-
<span className={ classNames(parseMarginTop(marginTop)) }>
50+
const Icon = icon ? icon : null;
51+
return (
52+
<span className={classNames(parseMarginTop(marginTop))}>
5253
<button
5354
type="button"
54-
onClick={ handleClick }
55-
className={ classNames(
55+
onClick={handleClick}
56+
className={classNames(
5657
'tr-flex-shrink-0 tr-inline-flex tr-items-center tr-group',
5758
'focus:tr-outline-none focus:tr-ring-2 focus:tr-ring-offset-2 focus:tr-ring-transparent',
5859
borderRadius.md.all,
@@ -70,9 +71,9 @@ const Button = ({
7071
buttonColors[buttonImportance].hoverBgColor,
7172
buttonColors[buttonImportance].hoverBorderColor,
7273
buttonColors[buttonImportance].textColor,
73-
) }
74+
)}
7475
>
75-
{ Icon && (iconPosition !== HorizontalPositions.Right) ? ( // ensures that icon is rendered if iconPosition is misspelled
76+
{Icon && (iconPosition !== HorizontalPositions.Right) ? ( // ensures that icon is rendered if iconPosition is misspelled
7677
<Icon
7778
className={classNames(
7879
spacing.twoXs.negativeMarginLeft,
@@ -82,11 +83,11 @@ const Button = ({
8283
)}
8384
aria-hidden="true"
8485
/>
85-
) : null }
86+
) : null}
8687
<p className="tr-whitespace-nowrap">
87-
{ text }
88+
{text}
8889
</p>
89-
{ Icon && (iconPosition === HorizontalPositions.Right) ? (
90+
{Icon && (iconPosition === HorizontalPositions.Right) ? (
9091
<Icon
9192
className={classNames(
9293
spacing.twoXs.negativeMarginRight,
@@ -96,7 +97,7 @@ const Button = ({
9697
)}
9798
aria-hidden="true"
9899
/>
99-
) : null }
100+
) : null}
100101
</button>
101102
</span>
102103
);

‎src/components/input-elements/ButtonInline/ButtonInline.tsx‎

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -17,62 +17,63 @@ import { buttonProportions, iconSizes } from './styles';
1717

1818
export interface ButtonInlineProps {
1919
text: string,
20-
Icon?: React.ElementType,
20+
icon?: React.ElementType,
2121
iconPosition?: HorizontalPosition,
2222
size?: Size,
2323
color?: Color,
2424
handleClick?: { (): void },
2525
marginTop?: MarginTop,
26-
}
26+
}
2727

2828
const ButtonInline = ({
2929
text,
30-
Icon,
30+
icon,
3131
iconPosition = HorizontalPositions.Left,
3232
handleClick,
3333
size = Sizes.SM,
3434
color = BaseColors.Blue,
3535
marginTop = 'mt-0',
3636
}: ButtonInlineProps) => {
3737
const buttonSize = isValidSize(size) ? size : Sizes.SM;
38-
return(
39-
<span className={ classNames(parseMarginTop(marginTop)) }>
38+
const Icon = icon ? icon : null;
39+
return (
40+
<span className={classNames(parseMarginTop(marginTop))}>
4041
<button
4142
type="button"
42-
onClick={ handleClick }
43-
className={ classNames(
43+
onClick={handleClick}
44+
className={classNames(
4445
'tr-flex-shrink-0 tr-inline-flex tr-items-center tr-group tr-font-medium',
4546
'focus:tr-outline-none focus:tr-ring-none',
4647
buttonProportions[buttonSize].fontSize,
4748
getColorVariantsFromColorThemeValue(getColorTheme(color).text).textColor,
4849
getColorVariantsFromColorThemeValue(getColorTheme(color).darkText).hoverTextColor,
4950
getColorVariantsFromColorThemeValue(defaultColors.transparent).bgColor,
5051
getColorVariantsFromColorThemeValue(defaultColors.transparent).hoverBgColor,
51-
) }
52+
)}
5253
>
53-
{ Icon && (iconPosition !== HorizontalPositions.Right) ? ( // ensures that icon is rendered if iconPosition is misspelled
54+
{Icon && (iconPosition !== HorizontalPositions.Right) ? ( // ensures that icon is rendered if iconPosition is misspelled
5455
<Icon
55-
className={ classNames(
56+
className={classNames(
5657
spacing.twoXs.negativeMarginLeft,
5758
spacing.xs.marginRight,
5859
iconSizes[buttonSize].height,
5960
iconSizes[buttonSize].width,
60-
) }
61+
)}
6162
aria-hidden="true"
6263
/>
63-
) : null }
64-
<p className="tr-whitespace-nowrap">{ text }</p>
65-
{ Icon && (iconPosition === HorizontalPositions.Right) ? (
64+
) : null}
65+
<p className="tr-whitespace-nowrap">{text}</p>
66+
{Icon && (iconPosition === HorizontalPositions.Right) ? (
6667
<Icon
67-
className={ classNames(
68+
className={classNames(
6869
spacing.twoXs.negativeMarginRight,
6970
spacing.xs.marginLeft,
7071
iconSizes[buttonSize].height,
7172
iconSizes[buttonSize].width,
72-
) }
73+
)}
7374
aria-hidden="true"
7475
/>
75-
) : null }
76+
) : null}
7677
</button>
7778
</span>
7879
);

‎src/components/input-elements/Dropdown/DropdownItem.tsx‎

Lines changed: 57 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,74 @@
11
import React from 'react';
22

3-
import { classNames, getColorVariantsFromColorThemeValue } from 'lib/classnameUtils';
3+
import {
4+
classNames,
5+
getColorVariantsFromColorThemeValue,
6+
} from 'lib/classnameUtils';
47
import { defaultColors } from 'lib/colors';
58
import { fontSize } from 'lib/font';
69
import { sizing } from 'lib/sizing';
710
import { spacing } from 'lib/spacing';
811

912
export interface DropdownItemProps {
10-
value: any,
11-
text: string,
12-
Icon?: React.ElementType,
13+
value: any;
14+
text: string;
15+
icon?: React.ElementType;
1316
privateProps?: {
14-
isActive: boolean,
15-
handleDropdownItemClick: (value: any) => void,
16-
}
17+
isActive: boolean;
18+
handleDropdownItemClick: (value: any) => void;
19+
};
1720
}
1821

1922
const DropdownItem = ({
2023
value,
2124
text,
22-
Icon,
25+
icon,
2326
privateProps,
24-
}: DropdownItemProps) => (
25-
<button
26-
onClick={ () => privateProps!.handleDropdownItemClick(value) }
27-
className={ classNames(
28-
'tr-flex tr-items-center tr-justify-between tr-w-full',
29-
spacing.twoXl.paddingLeft,
30-
spacing.twoXl.paddingRight,
31-
spacing.md.paddingTop,
32-
spacing.md.paddingBottom,
33-
fontSize.sm,
34-
privateProps!.isActive
35-
? classNames(
36-
getColorVariantsFromColorThemeValue(defaultColors.lightBackground).bgColor,
37-
getColorVariantsFromColorThemeValue(defaultColors.darkestText).textColor,
38-
)
39-
: classNames(
40-
getColorVariantsFromColorThemeValue(defaultColors.lightBackground).hoverBgColor,
41-
getColorVariantsFromColorThemeValue(defaultColors.darkText).textColor,
42-
)
43-
) }
44-
>
45-
<div className="tr-flex tr-items-center tr-truncate">
46-
{ Icon ? (
47-
<Icon className={ classNames(
48-
'tr-flex-none',
49-
sizing.lg.height,
50-
sizing.lg.width,
51-
spacing.lg.marginRight,
52-
getColorVariantsFromColorThemeValue(defaultColors.lightText).textColor,
53-
) } aria-hidden="true" />
54-
) : null }
55-
<p className="tr-whitespace-nowrap tr-truncate">
56-
{ text }
57-
</p>
58-
</div>
59-
</button>
60-
);
27+
}: DropdownItemProps) => {
28+
const Icon = icon ? icon : null;
29+
return (
30+
<button
31+
onClick={() => privateProps!.handleDropdownItemClick(value)}
32+
className={classNames(
33+
'tr-flex tr-items-center tr-justify-between tr-w-full',
34+
spacing.twoXl.paddingLeft,
35+
spacing.twoXl.paddingRight,
36+
spacing.md.paddingTop,
37+
spacing.md.paddingBottom,
38+
fontSize.sm,
39+
privateProps!.isActive
40+
? classNames(
41+
getColorVariantsFromColorThemeValue(defaultColors.lightBackground)
42+
.bgColor,
43+
getColorVariantsFromColorThemeValue(defaultColors.darkestText)
44+
.textColor
45+
)
46+
: classNames(
47+
getColorVariantsFromColorThemeValue(defaultColors.lightBackground)
48+
.hoverBgColor,
49+
getColorVariantsFromColorThemeValue(defaultColors.darkText)
50+
.textColor
51+
)
52+
)}
53+
>
54+
<div className="tr-flex tr-items-center tr-truncate">
55+
{Icon ? (
56+
<Icon
57+
className={classNames(
58+
'tr-flex-none',
59+
sizing.lg.height,
60+
sizing.lg.width,
61+
spacing.lg.marginRight,
62+
getColorVariantsFromColorThemeValue(defaultColors.lightText)
63+
.textColor
64+
)}
65+
aria-hidden="true"
66+
/>
67+
) : null}
68+
<p className="tr-whitespace-nowrap tr-truncate">{text}</p>
69+
</div>
70+
</button>
71+
);
72+
};
6173

6274
export default DropdownItem;

0 commit comments

Comments
 (0)