feat(ui-toolkit): button icons (#3233)
This commit is contained in:
parent
c720719ac5
commit
3e619acd4b
@ -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')}
|
||||
|
@ -1,4 +1,4 @@
|
||||
{
|
||||
"name": "@vegaprotocol/ui-toolkit",
|
||||
"version": "0.7.0"
|
||||
"version": "0.8.0"
|
||||
}
|
||||
|
@ -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 (
|
||||
<>
|
||||
|
Loading…
Reference in New Issue
Block a user