LaconicNetwork/vega-frontend-monorepo
4
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
apps/governance/src/routes/staking/home/validator-tables/consensus-validators-table.tsx
View File

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

2
libs/ui-toolkit/package.json
View File

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

18
libs/ui-toolkit/src/components/button/button.tsx
View File

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