diff --git a/.changeset/polite-pets-swim.md b/.changeset/polite-pets-swim.md new file mode 100644 index 000000000..52c122db9 --- /dev/null +++ b/.changeset/polite-pets-swim.md @@ -0,0 +1,6 @@ +--- +'@web3uikit/core': patch +'@web3uikit/styles': patch +--- + +InputNew, Button, Cred: new cusomize props diff --git a/packages/core/src/lib/InputNew/Input.styles.ts b/packages/core/src/lib/InputNew/Input.styles.ts index b6d78fd37..1da80877c 100644 --- a/packages/core/src/lib/InputNew/Input.styles.ts +++ b/packages/core/src/lib/InputNew/Input.styles.ts @@ -110,9 +110,13 @@ const DivStyled = styled.div` &:hover { border-color: ${color.navy30}; ${(p) => - p.customize?.onHover && p.customize?.onHover === 'lighten' - ? 'filter: brightness(1.1)' - : 'filter: brightness(10%)'}; + p.customize?.onHover && + p.customize?.onHover === 'lighten' && + 'filter: brightness(1.1)'} + ${(p) => + p.customize?.onHover && + p.customize?.onHover === 'darken' && + 'filter: brightness(0.9)'} } ${(p) => p.disabled && inputDisabled}; diff --git a/packages/core/src/lib/Tag/Tag.stories.tsx b/packages/core/src/lib/Tag/Tag.stories.tsx index 613b7e031..573864249 100644 --- a/packages/core/src/lib/Tag/Tag.stories.tsx +++ b/packages/core/src/lib/Tag/Tag.stories.tsx @@ -1,10 +1,12 @@ - import { ComponentStory, ComponentMeta } from '@storybook/react'; import Tag from './Tag'; export default { title: '4.UI/Tag', component: Tag, + argTypes: { + onCancelClick: { action: 'onCancelClick function called' }, + }, } as ComponentMeta; const Template: ComponentStory = (args) => ; @@ -16,6 +18,7 @@ export const Discount = Template.bind({}); Discount.args = { text: '-35%', theme: 'discount', + padding: '20px', }; export const ActiveStatus = Template.bind({}); @@ -122,3 +125,17 @@ PinkDark.args = { text: 'Pink', tone: 'dark', }; + +export const AllProps = Template.bind({}); +AllProps.args = { + active: true, + color: 'pink', + fontSize: '20px', + hasCancel: true, + id: 'tag-props', + padding: '20px 40px', + text: 'All the props', + theme: 'regular', + tone: 'dark', + width: 'fit-content', +}; diff --git a/packages/core/src/lib/Tag/Tag.styles.ts b/packages/core/src/lib/Tag/Tag.styles.ts index 7e170eeb6..b3164df1f 100644 --- a/packages/core/src/lib/Tag/Tag.styles.ts +++ b/packages/core/src/lib/Tag/Tag.styles.ts @@ -1,8 +1,9 @@ import styled from 'styled-components'; +import { color } from '@web3uikit/styles'; import colorStyles from './styles/colors'; import themeStyles from './styles/themes'; import type { TagProps, Tone } from './types'; -import { color } from '@web3uikit/styles'; + const { activeStatus, discount, @@ -32,7 +33,7 @@ const { type TStyleProps = Pick< TagProps, - 'active' | 'fontSize' | 'theme' | 'tone' | 'width' + 'active' | 'fontSize' | 'padding' | 'theme' | 'tone' | 'width' >; const getTheme = (theme: string, active?: boolean) => { @@ -99,6 +100,7 @@ const TagStyled = styled.div` theme === 'chips' && tone === 'dark' && 'border: 0px;'}; ${({ fontSize }) => Boolean(fontSize) && `font-size: ${fontSize}`}; + ${({ padding }) => Boolean(padding) && `padding: ${padding}`}; `; export default { diff --git a/packages/core/src/lib/Tag/Tag.tsx b/packages/core/src/lib/Tag/Tag.tsx index 8a423df18..4cdb0a678 100644 --- a/packages/core/src/lib/Tag/Tag.tsx +++ b/packages/core/src/lib/Tag/Tag.tsx @@ -1,7 +1,7 @@ import { Checkmark, Cross } from '@web3uikit/icons'; +import { color as colors } from '@web3uikit/styles'; import styles from './Tag.styles'; import { TagProps } from './types'; -import { color as colors } from '@web3uikit/styles'; const { TagStyled, SpanStyled } = styles; const Tag: React.FC = ({ @@ -11,6 +11,7 @@ const Tag: React.FC = ({ hasCancel = false, id, onCancelClick, + padding, text = 'Tag', theme = 'regular', tone = 'light', @@ -24,6 +25,7 @@ const Tag: React.FC = ({ data-testid="test-tag" fontSize={fontSize} id={id} + padding={padding} role="status" theme={theme} tone={tone} @@ -44,7 +46,7 @@ const Tag: React.FC = ({ )} diff --git a/packages/core/src/lib/Tag/types.ts b/packages/core/src/lib/Tag/types.ts index e2fa15465..7803dd694 100644 --- a/packages/core/src/lib/Tag/types.ts +++ b/packages/core/src/lib/Tag/types.ts @@ -59,4 +59,9 @@ export interface TagProps { * an onclick action that's dispatched when the cancel button is pressed */ onCancelClick?: () => void; + + /** + * set custom passing + */ + padding?: string; }