feat(ui-toolkit): button icons (#3233)

This commit is contained in:
Dexter Edwards 2023-03-20 14:40:04 +00:00 committed by GitHub
parent c720719ac5
commit 3e619acd4b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 14 additions and 15 deletions

View File

@ -2,7 +2,7 @@ import type { Dispatch, SetStateAction } from 'react';
import { forwardRef, useMemo, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import { Button } from '@vegaprotocol/ui-toolkit';
import { Button, Icon } from '@vegaprotocol/ui-toolkit';
import { AgGridDynamic as AgGrid } from '@vegaprotocol/datagrid';
import { useAppState } from '../../../../contexts/app-state/app-state-context';
import { BigNumber } from '../../../../lib/bignumber';
@ -87,7 +87,12 @@ const TopThirdCellRenderer = (
<div className="mb-4">
<Button
data-testid="show-all-validators"
rightIcon="arrow-right"
rightIcon={
<Icon
name="arrow-right"
className="fill-current mr-2 align-text-top"
/>
}
className="inline-flex items-center"
>
{t('Reveal top validators')}

View File

@ -1,4 +1,4 @@
{
"name": "@vegaprotocol/ui-toolkit",
"version": "0.7.0"
"version": "0.8.0"
}

View File

@ -4,8 +4,6 @@ import type {
ReactNode,
} from 'react';
import { forwardRef } from 'react';
import type { IconName } from '../icon';
import { Icon } from '../icon';
import classnames from 'classnames';
export type ButtonVariant = 'default' | 'primary' | 'secondary' | 'ternary';
@ -76,8 +74,8 @@ interface CommonProps {
disabled?: boolean;
fill?: boolean;
size?: ButtonSize;
icon?: IconName;
rightIcon?: IconName;
icon?: ReactNode;
rightIcon?: ReactNode;
}
export interface ButtonProps
extends ButtonHTMLAttributes<HTMLButtonElement>,
@ -151,17 +149,13 @@ export const ButtonLink = forwardRef<HTMLButtonElement, ButtonLinkProps>(
interface ButtonContentProps {
children: ReactNode;
icon?: IconName;
rightIcon?: IconName;
icon?: ReactNode;
rightIcon?: ReactNode;
}
const ButtonContent = ({ children, icon, rightIcon }: ButtonContentProps) => {
const iconEl = icon ? (
<Icon name={icon} className="fill-current mr-2 align-text-top" />
) : null;
const rightIconEl = rightIcon ? (
<Icon name={rightIcon} className="fill-current ml-2 align-text-top" />
) : null;
const iconEl = icon ? icon : null;
const rightIconEl = rightIcon ? rightIcon : null;
return (
<>