-
Notifications
You must be signed in to change notification settings - Fork 470
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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]>
- Loading branch information
1 parent
d49df4c
commit 98ccdc8
Showing
18 changed files
with
272 additions
and
241 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
102 changes: 57 additions & 45 deletions
102
src/components/input-elements/Dropdown/DropdownItem.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,62 +1,74 @@ | ||
| import React from 'react'; | ||
|
|
||
| import { classNames, getColorVariantsFromColorThemeValue } from 'lib/classnameUtils'; | ||
| import { | ||
| classNames, | ||
| getColorVariantsFromColorThemeValue, | ||
| } from 'lib/classnameUtils'; | ||
| import { defaultColors } from 'lib/colors'; | ||
| import { fontSize } from 'lib/font'; | ||
| import { sizing } from 'lib/sizing'; | ||
| import { spacing } from 'lib/spacing'; | ||
|
|
||
| export interface DropdownItemProps { | ||
| value: any, | ||
| text: string, | ||
| Icon?: React.ElementType, | ||
| value: any; | ||
| text: string; | ||
| icon?: React.ElementType; | ||
| privateProps?: { | ||
| isActive: boolean, | ||
| handleDropdownItemClick: (value: any) => void, | ||
| } | ||
| isActive: boolean; | ||
| handleDropdownItemClick: (value: any) => void; | ||
| }; | ||
| } | ||
|
|
||
| const DropdownItem = ({ | ||
| value, | ||
| text, | ||
| Icon, | ||
| icon, | ||
| privateProps, | ||
| }: DropdownItemProps) => ( | ||
| <button | ||
| onClick={ () => privateProps!.handleDropdownItemClick(value) } | ||
| className={ classNames( | ||
| 'tr-flex tr-items-center tr-justify-between tr-w-full', | ||
| spacing.twoXl.paddingLeft, | ||
| spacing.twoXl.paddingRight, | ||
| spacing.md.paddingTop, | ||
| spacing.md.paddingBottom, | ||
| fontSize.sm, | ||
| privateProps!.isActive | ||
| ? classNames( | ||
| getColorVariantsFromColorThemeValue(defaultColors.lightBackground).bgColor, | ||
| getColorVariantsFromColorThemeValue(defaultColors.darkestText).textColor, | ||
| ) | ||
| : classNames( | ||
| getColorVariantsFromColorThemeValue(defaultColors.lightBackground).hoverBgColor, | ||
| getColorVariantsFromColorThemeValue(defaultColors.darkText).textColor, | ||
| ) | ||
| ) } | ||
| > | ||
| <div className="tr-flex tr-items-center tr-truncate"> | ||
| { Icon ? ( | ||
| <Icon className={ classNames( | ||
| 'tr-flex-none', | ||
| sizing.lg.height, | ||
| sizing.lg.width, | ||
| spacing.lg.marginRight, | ||
| getColorVariantsFromColorThemeValue(defaultColors.lightText).textColor, | ||
| ) } aria-hidden="true" /> | ||
| ) : null } | ||
| <p className="tr-whitespace-nowrap tr-truncate"> | ||
| { text } | ||
| </p> | ||
| </div> | ||
| </button> | ||
| ); | ||
| }: DropdownItemProps) => { | ||
| const Icon = icon ? icon : null; | ||
| return ( | ||
| <button | ||
| onClick={() => privateProps!.handleDropdownItemClick(value)} | ||
| className={classNames( | ||
| 'tr-flex tr-items-center tr-justify-between tr-w-full', | ||
| spacing.twoXl.paddingLeft, | ||
| spacing.twoXl.paddingRight, | ||
| spacing.md.paddingTop, | ||
| spacing.md.paddingBottom, | ||
| fontSize.sm, | ||
| privateProps!.isActive | ||
| ? classNames( | ||
| getColorVariantsFromColorThemeValue(defaultColors.lightBackground) | ||
| .bgColor, | ||
| getColorVariantsFromColorThemeValue(defaultColors.darkestText) | ||
| .textColor | ||
| ) | ||
| : classNames( | ||
| getColorVariantsFromColorThemeValue(defaultColors.lightBackground) | ||
| .hoverBgColor, | ||
| getColorVariantsFromColorThemeValue(defaultColors.darkText) | ||
| .textColor | ||
| ) | ||
| )} | ||
| > | ||
| <div className="tr-flex tr-items-center tr-truncate"> | ||
| {Icon ? ( | ||
| <Icon | ||
| className={classNames( | ||
| 'tr-flex-none', | ||
| sizing.lg.height, | ||
| sizing.lg.width, | ||
| spacing.lg.marginRight, | ||
| getColorVariantsFromColorThemeValue(defaultColors.lightText) | ||
| .textColor | ||
| )} | ||
| aria-hidden="true" | ||
| /> | ||
| ) : null} | ||
| <p className="tr-whitespace-nowrap tr-truncate">{text}</p> | ||
| </div> | ||
| </button> | ||
| ); | ||
| }; | ||
|
|
||
| export default DropdownItem; |
Oops, something went wrong.