From 92b5fe777eb143f52d3804afea76ff7559b4b398 Mon Sep 17 00:00:00 2001 From: Jason Guo <33064781+Xaroz@users.noreply.github.com> Date: Mon, 11 Nov 2024 17:59:34 -0400 Subject: [PATCH] chore(widgets): add and update components (#4847) ### Description - Props and style update: `IconButton` and `Tooltip` - New Icons: `XCircleIcon` and `SwapIcon` ### Backward compatibility Yes ### Testing Manual testing in warp UI and visual testing with storybook --- .changeset/strange-poems-build.md | 6 +++++ .../widgets/src/components/IconButton.tsx | 6 ++--- typescript/widgets/src/components/Tooltip.tsx | 20 ++++++++++++--- typescript/widgets/src/icons/Swap.tsx | 18 +++++++++++++ typescript/widgets/src/icons/XCircle.tsx | 25 +++++++++++++++++++ typescript/widgets/src/index.ts | 2 ++ .../widgets/src/stories/IconList.stories.tsx | 4 +-- 7 files changed, 73 insertions(+), 8 deletions(-) create mode 100644 .changeset/strange-poems-build.md create mode 100644 typescript/widgets/src/icons/Swap.tsx create mode 100644 typescript/widgets/src/icons/XCircle.tsx diff --git a/.changeset/strange-poems-build.md b/.changeset/strange-poems-build.md new file mode 100644 index 0000000000..ffb1f8f238 --- /dev/null +++ b/.changeset/strange-poems-build.md @@ -0,0 +1,6 @@ +--- +'@hyperlane-xyz/widgets': minor +--- + +Props and style update: IconButton and Tooltip +New Icons: XCircleIcon and SwapIcon diff --git a/typescript/widgets/src/components/IconButton.tsx b/typescript/widgets/src/components/IconButton.tsx index bc515ee7e6..314ba40fa4 100644 --- a/typescript/widgets/src/components/IconButton.tsx +++ b/typescript/widgets/src/components/IconButton.tsx @@ -7,17 +7,17 @@ type Props = PropsWithChildren> & { }; export function IconButton(props: Props) { - const { className, children, ...rest } = props; + const { className, children, type, ...rest } = props; const base = 'htw-flex htw-items-center htw-justify-center htw-transition-all'; - const onHover = 'hover:htw-opacity-70 hover:htw-scale-105'; + const onHover = 'hover:htw-opacity-70'; const onDisabled = 'disabled:htw-opacity-30 disabled:htw-cursor-default'; const onActive = 'active:htw-opacity-60'; const allClasses = clsx(base, onHover, onDisabled, onActive, className); return ( - ); diff --git a/typescript/widgets/src/components/Tooltip.tsx b/typescript/widgets/src/components/Tooltip.tsx index 24c591132d..e62c46816a 100644 --- a/typescript/widgets/src/components/Tooltip.tsx +++ b/typescript/widgets/src/components/Tooltip.tsx @@ -1,5 +1,5 @@ import React, { AnchorHTMLAttributes } from 'react'; -import { Tooltip as ReactTooltip } from 'react-tooltip'; +import { PlacesType, Tooltip as ReactTooltip } from 'react-tooltip'; import { Circle } from '../icons/Circle.js'; import { QuestionMarkIcon } from '../icons/QuestionMark.js'; @@ -8,12 +8,26 @@ type Props = AnchorHTMLAttributes & { id: string; content: string; size?: number; + placement?: PlacesType; }; -export function Tooltip({ id, content, size = 16, ...rest }: Props) { +export function Tooltip({ + id, + content, + size = 16, + className, + placement = 'top-start', + ...rest +}: Props) { return ( <> - + + + + ); +} + +export const SwapIcon = memo(_SwapIcon); diff --git a/typescript/widgets/src/icons/XCircle.tsx b/typescript/widgets/src/icons/XCircle.tsx new file mode 100644 index 0000000000..b5b400ae27 --- /dev/null +++ b/typescript/widgets/src/icons/XCircle.tsx @@ -0,0 +1,25 @@ +import React, { memo } from 'react'; + +import { ColorPalette } from '../color.js'; + +import { DefaultIconProps } from './types.js'; + +function _XCircleIcon({ + color = ColorPalette.Black, + ...rest +}: DefaultIconProps) { + return ( + + + + + ); +} + +export const XCircleIcon = memo(_XCircleIcon); diff --git a/typescript/widgets/src/index.ts b/typescript/widgets/src/index.ts index 2bb43315c8..0762ec9da0 100644 --- a/typescript/widgets/src/index.ts +++ b/typescript/widgets/src/index.ts @@ -44,11 +44,13 @@ export { QuestionMarkIcon } from './icons/QuestionMark.js'; export { SearchIcon } from './icons/Search.js'; export { ShieldIcon } from './icons/Shield.js'; export { SpinnerIcon } from './icons/Spinner.js'; +export { SwapIcon } from './icons/Swap.js'; export { TwitterIcon } from './icons/Twitter.js'; export { UpDownArrowsIcon } from './icons/UpDownArrows.js'; export { WalletIcon } from './icons/Wallet.js'; export { WebIcon } from './icons/Web.js'; export { WideChevronIcon } from './icons/WideChevron.js'; +export { XCircleIcon } from './icons/XCircle.js'; export { XIcon } from './icons/X.js'; export { type DefaultIconProps } from './icons/types.js'; export { DropdownMenu, type DropdownMenuProps } from './layout/DropdownMenu.js'; diff --git a/typescript/widgets/src/stories/IconList.stories.tsx b/typescript/widgets/src/stories/IconList.stories.tsx index 48570f106c..9027956919 100644 --- a/typescript/widgets/src/stories/IconList.stories.tsx +++ b/typescript/widgets/src/stories/IconList.stories.tsx @@ -40,8 +40,8 @@ function IconList({ flexWrap: 'wrap', }} > - {iconList.map((Icon) => ( - + {iconList.map((Icon, index) => ( + {Icon.displayName}