Fix updates needed for new project (#942)

* feat(InputNew, Button, Cred): new customize props * chore: changeset * fix(Tag): custom padding * fix(InputNew, Tag): tag props exposed to storybook * fix(InputNew): removed darken hover styles when unset * Delete six-eyes-sniff.md
web3ui · Dec 10, 2022 · b59075f · b59075f
1 parent 49f0d8d
commit b59075f
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 8 deletions.
diff --git a/.changeset/polite-pets-swim.md 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
@@ -110,9 +110,13 @@ const DivStyled = styled.div<TInputProps>`
     &: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
@@ -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<typeof Tag>;
 
 const Template: ComponentStory<typeof Tag> = (args) => <Tag {...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
@@ -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<TStyleProps>`
         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
@@ -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<TagProps> = ({
@@ -11,6 +11,7 @@ const Tag: React.FC<TagProps> = ({
     hasCancel = false,
     id,
     onCancelClick,
+    padding,
     text = 'Tag',
     theme = 'regular',
     tone = 'light',
@@ -24,6 +25,7 @@ const Tag: React.FC<TagProps> = ({
             data-testid="test-tag"
             fontSize={fontSize}
             id={id}
+            padding={padding}
             role="status"
             theme={theme}
             tone={tone}
@@ -44,7 +46,7 @@ const Tag: React.FC<TagProps> = ({
                     <Cross
                         title="cross icon"
                         titleId="tag cross icon"
-                        fill={colors.grey}
+                        fill={colors.gray40}
                     />
                 </SpanStyled>
             )}

diff --git 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;
 }