Skip to content

F
frontend
Commit fcdf8d98 authored by tom goriunov's avatar tom goriunov Committed by GitHub
Browse files
Options

New styles for pagination and "Add / Remove" buttons (#2791) 

* update styles for add / remove buttons

* update pagination styles

* change border color for filled inputs

* change row gap for alerts

* update icons and screenshots

* fix tests

* update buttons for contract method form

* update screenshot
parent 7f10c98e
Expand all Show whitespace changes
Inline Side-by-side
Showing with 170 additions and 128 deletions
icons/minus.svg
View file @ fcdf8d98
<svg viewBox="0 0 16 2" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M.5 1a.937.937 0 0 1 .938-.938h13.124a.938.938 0 0 1 0 1.875H1.438A.937.937 0 0 1 .5 1Z" fill="currentColor"/>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
<g clip-path="url(#a)">
<path fill="currentColor" d="M8.857 9H17a1 1 0 0 1 1 1v.286a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V10a1 1 0 0 1 1-1h5.857Z"/>
</g>
<defs>
<clipPath id="a">
<path fill="currentColor" d="M0 0h20v20H0z"/>
</clipPath>
</defs>
</svg>
icons/plus.svg
View file @ fcdf8d98
<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 .5a.937.937 0 0 1 .938.938v5.625h5.624a.937.937 0 0 1 0 1.875H8.939v5.624a.937.937 0 0 1-1.876 0V8.939H1.438a.937.937 0 1 1 0-1.876h5.625V1.438A.937.937 0 0 1 8 .5Z" fill="currentColor"/>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
<g clip-path="url(#a)">
<path fill="currentColor" d="M7.857 9.052a1 1 0 0 0 1-1V3.195a1 1 0 0 1 1-1h.286a1 1 0 0 1 1 1v4.857a1 1 0 0 0 1 1H17a1 1 0 0 1 1 1v.286a1 1 0 0 1-1 1h-4.857a1 1 0 0 0-1 1v4.857a1 1 0 0 1-1 1h-.286a1 1 0 0 1-1-1v-4.857a1 1 0 0 0-1-1H3a1 1 0 0 1-1-1v-.286a1 1 0 0 1 1-1h4.857Z"/>
</g>
<defs>
<clipPath id="a">
<path fill="currentColor" d="M0 0h20v20H0z"/>
</clipPath>
</defs>
</svg>
toolkit/chakra/icon-button.tsx
View file @ fcdf8d98
......@@ -3,7 +3,7 @@ import React from 'react';
import { Button, type ButtonProps } from './button';
export interface IconButtonProps extends Omit<ButtonProps, 'size'> {
size?: '2xs' | 'md';
size?: '2xs' | '2xs_alt' | 'md';
}
export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
......@@ -13,7 +13,7 @@ export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
// FIXME: I have to clone the children instead of using _icon props because of style overrides
// in some pw tests for some reason the _icon style will be applied before the style of child (IconSvg component)
const child = React.Children.only<React.ReactElement>(children as React.ReactElement);
const clonedChildren = size ? React.cloneElement(child, { boxSize: 5 } as React.HTMLAttributes<HTMLElement>) : child;
const clonedChildren = size ? React.cloneElement(child, { boxSize: size === '2xs_alt' ? 3 : 5 } as React.HTMLAttributes<HTMLElement>) : child;
const sizeStyle = (() => {
switch (size) {
......@@ -24,6 +24,13 @@ export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
borderRadius: 'sm',
};
}
case '2xs_alt': {
return {
_icon: { boxSize: 3 },
boxSize: 5,
borderRadius: 'sm',
};
}
case 'md': {
return {
_icon: { boxSize: 5 },
......
toolkit/components/buttons/AddButton.tsx 0 → 100644
View file @ fcdf8d98
import React from 'react';
import type { IconButtonProps } from 'toolkit/chakra/icon-button';
import { IconButton } from 'toolkit/chakra/icon-button';
import IconSvg from 'ui/shared/IconSvg';
interface Props extends IconButtonProps {}
const AddButton = (props: Props) => {
return (
<IconButton
aria-label="Add item"
variant="icon_secondary"
size="md"
{ ...props }
>
<IconSvg name="plus"/>
</IconButton>
);
};
export default React.memo(AddButton);
toolkit/components/buttons/RemoveButton.tsx 0 → 100644
View file @ fcdf8d98
import React from 'react';
import type { IconButtonProps } from 'toolkit/chakra/icon-button';
import { IconButton } from 'toolkit/chakra/icon-button';
import IconSvg from 'ui/shared/IconSvg';
interface Props extends IconButtonProps {}
const RemoveButton = (props: Props) => {
return (
<IconButton
aria-label="Remove item"
variant="icon_secondary"
size="md"
{ ...props }
>
<IconSvg name="minus"/>
</IconButton>
);
};
export default React.memo(RemoveButton);
toolkit/theme/foundations/semanticTokens.ts
View file @ fcdf8d98
......@@ -64,6 +64,18 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
selected: { value: { _light: '{colors.blue.50}', _dark: '{colors.whiteAlpha.100}' } },
},
},
pagination: {
fg: {
DEFAULT: { value: { _light: '{colors.blackAlpha.800}', _dark: '{colors.gray.50}' } },
selected: { value: { _light: '{colors.blue.700}', _dark: '{colors.gray.50}' } },
},
bg: {
selected: { value: { _light: '{colors.blue.50}', _dark: '{colors.whiteAlpha.100}' } },
},
border: {
DEFAULT: { value: { _light: '{colors.gray.100}', _dark: '{colors.whiteAlpha.100}' } },
},
},
hero: {
bg: {
DEFAULT: {
......@@ -251,7 +263,7 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
DEFAULT: { value: { _light: '{colors.gray.100}', _dark: '{colors.gray.700}' } },
hover: { value: { _light: '{colors.gray.200}', _dark: '{colors.gray.500}' } },
focus: { value: '{colors.blue.400}' },
filled: { value: { _light: '{colors.gray.300}', _dark: '{colors.gray.600}' } },
filled: { value: { _light: '{colors.gray.100}', _dark: '{colors.gray.700}' } },
readOnly: { value: { _light: '{colors.gray.200}', _dark: '{colors.gray.800}' } },
error: { value: '{colors.red.500}' },
},
......
toolkit/theme/recipes/button.recipe.ts
View file @ fcdf8d98
......@@ -253,6 +253,28 @@ export const recipe = defineRecipe({
color: 'link.primary.hover',
},
},
pagination: {
borderWidth: '2px',
borderStyle: 'solid',
bg: 'transparent',
color: 'button.pagination.fg',
borderColor: 'button.pagination.border',
_hover: {
bg: 'transparent',
color: 'link.primary.hover',
borderColor: 'link.primary.hover',
},
_selected: {
bg: 'button.pagination.bg.selected',
color: 'button.pagination.fg.selected',
borderColor: 'transparent',
_hover: {
bg: 'button.pagination.bg.selected',
color: 'button.pagination.fg.selected',
borderColor: 'transparent',
},
},
},
},
size: {
'2xs': {
......
ui/address/contract/ContractDetails.pw.tsx
View file @ fcdf8d98
......@@ -21,7 +21,7 @@ test.describe.configure({ mode: 'serial' });
let addressApiUrl: string;
test.beforeEach(async({ mockApiResponse, page }) => {
await page.route('https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/**', (route) => {
await page.route('https://cdn.jsdelivr.net/npm/monaco-editor@0.52.2/**', (route) => {
route.abort();
});
addressApiUrl = await mockApiResponse('general:address', addressMock.contract, { pathParams: { hash: addressMock.contract.hash } });
......
ui/address/contract/alerts/ContractDetailsAlerts.tsx
View file @ fcdf8d98
......@@ -38,7 +38,7 @@ const ContractDetailsAlerts = ({ data, isLoading, addressData, channel }: Props)
});
return (
<Flex flexDir="column" rowGap={ 2 } mb={ 6 } _empty={{ display: 'none' }}>
<Flex flexDir="column" rowGap={ 1 } mb={ 6 } _empty={{ display: 'none' }}>
{ data?.is_blueprint && (
<Box>
<span>This is an </span>
......
ui/address/contract/methods/form/ContractMethodArrayButton.tsx
View file @ fcdf8d98
import { chakra } from '@chakra-ui/react';
import React from 'react';
import { IconButton } from 'toolkit/chakra/icon-button';
import IconSvg from 'ui/shared/IconSvg';
import type { IconButtonProps } from 'toolkit/chakra/icon-button';
import AddButton from 'toolkit/components/buttons/AddButton';
import RemoveButton from 'toolkit/components/buttons/RemoveButton';
interface Props {
interface Props extends Omit<IconButtonProps, 'type'> {
index: number;
onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
isDisabled?: boolean;
type: 'add' | 'remove';
className?: string;
}
const ContractMethodArrayButton = ({ className, type, index, onClick, isDisabled }: Props) => {
const ContractMethodArrayButton = ({ type, index, onClick, ...props }: Props) => {
const handleClick = React.useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
event.stopPropagation();
onClick(event);
onClick?.(event);
}, [ onClick ]);
const Button = type === 'add' ? AddButton : RemoveButton;
return (
<IconButton
as="div"
className={ className }
aria-label={ type }
<Button
data-index={ index }
variant="outline"
boxSize={ 5 }
size="2xs_alt"
onClick={ handleClick }
disabled={ isDisabled }
>
<IconSvg name={ type === 'remove' ? 'minus' : 'plus' } boxSize={ 3 }/>
</IconButton>
{ ...props }
/>
);
};
export default React.memo(chakra(ContractMethodArrayButton));
export default React.memo(ContractMethodArrayButton);
ui/address/contract/methods/form/ContractMethodFieldAccordion.tsx
View file @ fcdf8d98
......@@ -34,7 +34,7 @@ const ContractMethodFieldAccordion = ({ label, level, children, onAddClick, onRe
{ label }
</Box>
{ onRemoveClick && index !== undefined && <ContractMethodArrayButton index={ index } onClick={ onRemoveClick } type="remove"/> }
{ onAddClick && index !== undefined && <ContractMethodArrayButton index={ index } onClick={ onAddClick } type="add" ml={ 2 }/> }
{ onAddClick && index !== undefined && <ContractMethodArrayButton index={ index } onClick={ onAddClick } type="add" ml={ 1 }/> }
</AccordionItemTrigger>
<AccordionItemContent display="flex" flexDir="column" rowGap={ 1 } pl="18px" pr="6px">
{ children }
......
ui/address/contract/methods/form/ContractMethodFieldInputArray.tsx
View file @ fcdf8d98
......@@ -140,7 +140,7 @@ const ContractMethodFieldInputArray = ({
const itemData = transformDataForArrayItem(data, index);
return (
<Flex key={ registeredIndex } alignItems="flex-start" columnGap={ 3 }>
<Flex key={ registeredIndex } alignItems="flex-start" columnGap={ 2 }>
<ContractMethodFieldInput
data={ itemData }
hideLabel
......
ui/advancedFilter/filters/AddressFilter.tsx
View file @ fcdf8d98
......@@ -5,13 +5,12 @@ import React from 'react';
import type { AdvancedFilterParams } from 'types/api/advancedFilter';
import { IconButton } from 'toolkit/chakra/icon-button';
import { Input } from 'toolkit/chakra/input';
import { InputGroup } from 'toolkit/chakra/input-group';
import { Select } from 'toolkit/chakra/select';
import AddButton from 'toolkit/components/buttons/AddButton';
import { ClearButton } from 'toolkit/components/buttons/ClearButton';
import TableColumnFilter from 'ui/shared/filters/TableColumnFilter';
import IconSvg from 'ui/shared/IconSvg';
const FILTER_PARAM_TO_INCLUDE = 'to_address_hashes_to_include';
const FILTER_PARAM_FROM_INCLUDE = 'from_address_hashes_to_include';
......@@ -76,15 +75,10 @@ const AddressFilterInput = ({ address, mode, onModeChange, onChange, onClear, is
<Input value={ address } onChange={ onChange } placeholder="Smart contract / Address (0x...)*" size="sm" autoComplete="off"/>
</InputGroup>
{ isLast && (
<IconButton
aria-label="add"
variant="outline"
size="md"
<AddButton
ml={ 2 }
onClick={ onAddFieldClick }
>
<IconSvg name="plus"/>
</IconButton>
/>
) }
</Flex>
);
......
ui/contractVerification/ContractVerificationForm.pw.tsx
View file @ fcdf8d98
......@@ -87,7 +87,7 @@ test('flatten source code method +@dark-mode +@mobile', async({ render, page })
await page.getByRole('option', { name: 'Solidity (Single file)' }).click();
await page.getByText(/add contract libraries/i).click();
await page.locator('button[aria-label="add"]').click();
await page.locator('button[aria-label="Add item"]').click();
await expect(component).toHaveScreenshot({ timeout: 10_000 });
});
......
ui/contractVerification/fields/ContractVerificationFieldLibraryItem.tsx
View file @ fcdf8d98
......@@ -3,10 +3,10 @@ import React from 'react';
import type { FormFields } from '../types';
import { IconButton } from 'toolkit/chakra/icon-button';
import AddButton from 'toolkit/components/buttons/AddButton';
import RemoveButton from 'toolkit/components/buttons/RemoveButton';
import { FormFieldAddress } from 'toolkit/components/forms/fields/FormFieldAddress';
import { FormFieldText } from 'toolkit/components/forms/fields/FormFieldText';
import IconSvg from 'ui/shared/IconSvg';
import ContractVerificationFormRow from '../ContractVerificationFormRow';
......@@ -42,26 +42,16 @@ const ContractVerificationFieldLibraryItem = ({ index, fieldsLength, onAddFieldC
<Text color="text.secondary" fontSize="sm">Contract library { index + 1 }</Text>
<Flex columnGap={ 5 }>
{ fieldsLength > 1 && (
<IconButton
aria-label="delete"
variant="outline"
size="md"
<RemoveButton
onClick={ handleRemoveButtonClick }
disabled={ isDisabled }
>
<IconSvg name="minus"/>
</IconButton>
/>
) }
{ fieldsLength < LIMIT && (
<IconButton
aria-label="add"
variant="outline"
size="md"
<AddButton
onClick={ handleAddButtonClick }
disabled={ isDisabled }
>
<IconSvg name="plus"/>
</IconButton>
/>
) }
</Flex>
</Flex>
......
ui/shared/pagination/Pagination.tsx
View file @ fcdf8d98
This diff is collapsed.
ui/showcases/IconButton.tsx
View file @ fcdf8d98
This diff is collapsed.
ui/snippets/header/HeaderAlert.tsx
View file @ fcdf8d98
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment